Merge branch 'feature/workspaces' of github.com:ONLYOFFICE/AppServer into feature/workspaces

packages/asc-web-components/src/components/ThemeProvider/index.js

@@ -1 +0,0 @@
-export default from "./ThemeProvider";

packages/asc-web-components/src/components/field-container/index.js

@@ -1,80 +1,10 @@
 import React from "react";
 import PropTypes from "prop-types";
-import styled, { css } from "styled-components";
+
-import { tablet } from "../../utils/device";
 import Label from "../label";
 import HelpButton from "../help-button";
 import Text from "../text";
-
+import Container from "./styled-field-container";
-function getHorizontalCss(labelWidth) {
-  return css`
-    display: flex;
-    flex-direction: row;
-    align-items: start;
-    margin: 0 0 16px 0;
-
-    .field-label {
-      line-height: 32px;
-      margin: 0;
-      position: relative;
-    }
-    .field-label-icon {
-      display: inline-flex;
-      min-width: ${labelWidth};
-      width: ${labelWidth};
-    }
-    .field-body {
-      flex-grow: 1;
-    }
-    .icon-button {
-      position: relative;
-      margin-top: 10px;
-      margin-left: 8px;
-    }
-  `;
-}
-
-function getVerticalCss() {
-  return css`
-    display: flex;
-    flex-direction: column;
-    align-items: start;
-    margin: 0 0 16px 0;
-
-    .field-label {
-      line-height: 13px;
-      height: 15px;
-      display: inline-block;
-    }
-    .field-label-icon {
-      display: inline-flex;
-      width: 100%;
-      margin: 0 0 8px 0;
-    }
-    .field-body {
-      width: 100%;
-    }
-    .icon-button {
-      position: relative;
-      margin: 0;
-      padding: 0px 8px;
-      width: 13px;
-      height: 13px;
-    }
-  `;
-}
-
-const Container = styled.div`
-  .error-label {
-    max-width: ${(props) => (props.maxwidth ? props.maxwidth : "293px")};
-  }
-  ${(props) =>
-    props.vertical ? getVerticalCss() : getHorizontalCss(props.maxLabelWidth)}
-
-  @media ${tablet} {
-    ${getVerticalCss()}
-  }
-`;
 
 class FieldContainer extends React.Component {
   constructor(props) {

packages/asc-web-components/src/components/field-container/styled-field-container.js

@@ -0,0 +1,83 @@
+import styled, { css } from "styled-components";
+import { tablet } from "../../utils/device";
+import { Base } from "../../themes";
+function getHorizontalCss(labelWidth) {
+  return css`
+    display: flex;
+    flex-direction: row;
+    align-items: start;
+    margin: ${(props) => props.theme.fieldContainer.horizontal.margin};
+
+    .field-label {
+      line-height: ${(props) =>
+        props.theme.fieldContainer.horizontal.label.lineHeight};
+      margin: ${(props) => props.theme.fieldContainer.horizontal.label.margin};
+      position: relative;
+    }
+    .field-label-icon {
+      display: inline-flex;
+      min-width: ${labelWidth};
+      width: ${labelWidth};
+    }
+    .field-body {
+      flex-grow: ${(props) => props.theme.fieldContainer.horizontal.body.width};
+    }
+    .icon-button {
+      position: relative;
+      margin-top: ${(props) =>
+        props.theme.fieldContainer.horizontal.iconButton.marginTop};
+      margin-left: ${(props) =>
+        props.theme.fieldContainer.horizontal.iconButton.marginLeft};
+    }
+  `;
+}
+
+function getVerticalCss() {
+  return css`
+    display: flex;
+    flex-direction: column;
+    align-items: start;
+    margin: ${(props) => props.theme.fieldContainer.vertical.margin};
+
+    .field-label {
+      line-height: ${(props) =>
+        props.theme.fieldContainer.vertical.label.lineHeight};
+      height: ${(props) => props.theme.fieldContainer.vertical.label.height};
+      display: inline-block;
+    }
+    .field-label-icon {
+      display: inline-flex;
+      width: ${(props) => props.theme.fieldContainer.vertical.labelIcon.width};
+      margin: ${(props) =>
+        props.theme.fieldContainer.vertical.labelIcon.margin};
+    }
+    .field-body {
+      width: ${(props) => props.theme.fieldContainer.vertical.body.width};
+    }
+    .icon-button {
+      position: relative;
+      margin: ${(props) =>
+        props.theme.fieldContainer.vertical.iconButton.margin};
+      padding: ${(props) =>
+        props.theme.fieldContainer.vertical.iconButton.padding};
+      width: ${(props) => props.theme.fieldContainer.vertical.iconButton.width};
+      height: ${(props) =>
+        props.theme.fieldContainer.vertical.iconButton.height};
+    }
+  `;
+}
+
+const Container = styled.div`
+  .error-label {
+    max-width: ${(props) => (props.maxwidth ? props.maxwidth : "293px")};
+  }
+  ${(props) =>
+    props.vertical ? getVerticalCss() : getHorizontalCss(props.maxLabelWidth)}
+
+  @media ${tablet} {
+    ${getVerticalCss()}
+  }
+`;
+
+Container.defaultProps = { theme: Base };
+export default Container;

packages/asc-web-components/src/components/icons/svg/index.js

@@ -101,7 +101,6 @@ import OrigMyspaceIcon from "./myspace.react.svg";
 import OrigBloggerIcon from "./blogger.react.svg";
 import OrigYahooIcon from "./yahoo.react.svg";
 import OrigCalendarEmptyIcon from "./calendar.empty.react.svg";
-import OrigRefreshIcon from "./refresh.react.svg";
 import OrigForwardIcon from "./forward.react.svg";
 import OrigFileActionsLockedIcon from "./file.actions.locked.react.svg";
 import OrigReplyAllIcon from "./reply.all.react.svg";
@@ -142,15 +141,11 @@ import OrigNavLogoOpenedIcon from "./nav.logo.opened.react.svg";
 
 import OrigCheckIcon from "./check.react.svg";
 
-
 import OrigDangerIcon from "./danger.react.svg";
 import OrigInfoIcon from "./info.react.svg";
 
-
 import OrigArrowPathIcon from "./arrow.path.react.svg";
 
-
-
 import OrigQuestionIcon from "./question.react.svg";
 
 import OrigShareGoogleIcon from "./share.google.react.svg";
@@ -631,7 +626,7 @@ export const RectangleFilterClickIcon = createStyledIcon(
   OrigRectangleFilterClickIcon,
   "RectangleFilterClickIcon"
 );
-export const RefreshIcon = createStyledIcon(OrigRefreshIcon, "RefreshIcon");
+
 export const RemoveIcon = createStyledIcon(OrigRemoveIcon, "RemoveIcon");
 export const ReplyAllIcon = createStyledIcon(OrigReplyAllIcon, "ReplyAllIcon");
 export const ReplyIcon = createStyledIcon(OrigReplyIcon, "ReplyIcon");
@@ -688,9 +683,6 @@ export const ArrowPathIcon = createStyledIcon(
   "ArrowPathIcon"
 );
 
-
-
-
 export const QuestionIcon = createStyledIcon(
   OrigQuestionIcon,
   "ToggleButtonIcon",

packages/asc-web-components/src/components/password-input/index.js

@@ -1,127 +1,20 @@
 import React from "react";
-import styled from "styled-components";
 import PropTypes from "prop-types";
 import equal from "fast-deep-equal/react";
 
-import { tablet, mobile } from "../../utils/device";
 import InputBlock from "../input-block";
-import { Icons } from "../icons";
+import { RefreshIcon } from "./svg";
 import Link from "../link";
 import Text from "../text";
 import Tooltip from "../tooltip";
 import { Base } from "../../themes";
-
+import {
-// eslint-disable-next-line no-unused-vars
+  Progress,
-const SimpleInput = ({ onValidateInput, onCopyToClipboard, ...props }) => (
+  CopyLink,
-  <div {...props}></div>
+  NewPasswordButton,
-);
+  PasswordProgress,
-
+  StyledInput,
-SimpleInput.propTypes = {
+} from "./styled-password-input";
-  onValidateInput: PropTypes.func,
-  onCopyToClipboard: PropTypes.func,
-};
-
-const StyledInput = styled(SimpleInput)`
-  display: flex;
-  align-items: center;
-  line-height: 32px;
-  flex-direction: row;
-  flex-wrap: wrap;
-  @media ${tablet} {
-    flex-wrap: wrap;
-  }
-
-  .append {
-    padding-right: 8px;
-  }
-
-  .prepend-children {
-    padding: 0;
-  }
-
-  .break {
-    flex-basis: 100%;
-    height: 0;
-  }
-
-  .text-tooltip {
-    line-height: 14px;
-    margin-top: -2px;
-  }
-
-  .password-field-wrapper {
-    display: flex;
-    width: auto;
-
-    @media ${mobile} {
-      width: 100%;
-    }
-  }
-`;
-
-const PasswordProgress = styled.div`
-  ${(props) =>
-    props.inputWidth ? `width: ${props.inputWidth};` : `flex: auto;`}
-  .input-relative {
-    position: relative;
-    svg {
-      overflow: hidden;
-      vertical-align: middle;
-    }
-  }
-  *,
-  *::before,
-  *::after {
-    box-sizing: border-box;
-  }
-`;
-
-const NewPasswordButton = styled.div`
-  margin: 0 16px;
-  -webkit-tap-highlight-color: rgba(0, 0, 0, 0);
-  svg {
-    overflow: hidden;
-    vertical-align: middle;
-    margin-bottom: 4px;
-  }
-  :hover {
-    cursor: pointer;
-  }
-`;
-
-const CopyLink = styled.div`
-  margin-top: -6px;
-  @media ${tablet} {
-    width: 100%;
-    margin-left: 0px;
-    margin-top: -1px;
-  }
-`;
-
-const TooltipStyle = styled.div`
-  .__react_component_tooltip {
-  }
-`;
-const Progress = styled.div`
-  border: 1.5px solid
-    ${(props) =>
-      !props.isDisabled && props.progressColor
-        ? props.progressColor
-        : "transparent"};
-  border-radius: 2px;
-  margin-top: -1px;
-  width: ${(props) => (props.progressWidth ? props.progressWidth + "%" : "0%")};
-`;
-
-const StyledTooltipContainer = styled(Text)`
-  //margin: 8px 16px 16px 16px;
-`;
-
-const StyledTooltipItem = styled(Text)`
-  margin-left: 8px;
-  height: 24px;
-  color: ${(props) => (props.valid ? "#44bb00" : "#B40404")};
-`;
 
 class PasswordInput extends React.Component {
   constructor(props) {
@@ -441,7 +334,6 @@ class PasswordInput extends React.Component {
     } = this.props;
 
     const { type, progressColor, progressWidth, inputValue } = this.state;
-    const iconsColor = isDisabled ? "#D0D5DA" : "#A3A9AE";
     const iconName = type === "password" ? "EyeOffIcon" : "EyeIcon";
 
     return (
@@ -459,7 +351,6 @@ class PasswordInput extends React.Component {
           scale={scale}
           size={size}
           type={type}
-          iconColor={`${iconsColor} !important`}
           iconSize={16}
           hoverColor={"#A3A9AE"}
           isIconFill={true}
@@ -500,6 +391,7 @@ class PasswordInput extends React.Component {
       style,
       simpleView,
       hideNewPasswordButton,
+      isDisabled,
     } = this.props;
     const { copyLabel, disableCopyAction } = this.state;
 
@@ -523,15 +415,14 @@ class PasswordInput extends React.Component {
                 data-tip=""
                 data-event="click"
                 ref={this.ref}
+                isDisabled={isDisabled}
               >
                 {this.renderInputGroup()}
               </PasswordProgress>
               {!hideNewPasswordButton ? (
-                <NewPasswordButton>
+                <NewPasswordButton isDisabled={isDisabled}>
-                  <Icons.RefreshIcon
+                  <RefreshIcon
                     size="medium"
-                    color={iconsColor}
-                    isfill={true}
                     onClick={this.onGeneratePassword}
                   />
                 </NewPasswordButton>
@@ -543,7 +434,7 @@ class PasswordInput extends React.Component {
                 type="action"
                 isHovered={true}
                 fontSize="13px"
-                color={iconsColor}
+                className="password-input_link"
                 isSemitransparent={disableCopyAction}
                 onClick={this.copyToClipboard.bind(this, emailInputName)}
               >

packages/asc-web-components/src/components/password-input/styled-password-input.js

@@ -0,0 +1,151 @@
+import React from "react";
+import styled from "styled-components";
+import PropTypes from "prop-types";
+
+import { tablet, mobile } from "../../utils/device";
+import { Base } from "../../themes";
+// eslint-disable-next-line no-unused-vars
+const SimpleInput = ({ onValidateInput, onCopyToClipboard, ...props }) => (
+  <div {...props}></div>
+);
+
+SimpleInput.propTypes = {
+  onValidateInput: PropTypes.func,
+  onCopyToClipboard: PropTypes.func,
+};
+
+const StyledInput = styled(SimpleInput)`
+  display: flex;
+  align-items: center;
+  line-height: ${(props) => props.theme.passwordInput.lineHeight};
+  flex-direction: row;
+  flex-wrap: wrap;
+
+  .input-relative {
+    svg {
+      path {
+        fill: ${(props) =>
+          props.isDisabled
+            ? props.theme.passwordInput.disableColor
+            : props.theme.passwordInput.color} !important;
+      }
+    }
+  }
+
+  @media ${tablet} {
+    flex-wrap: wrap;
+  }
+
+  .append {
+    padding-right: 8px;
+  }
+
+  .prepend-children {
+    padding: 0;
+  }
+
+  .break {
+    flex-basis: 100%;
+    height: 0;
+  }
+
+  .text-tooltip {
+    line-height: ${(props) => props.theme.passwordInput.text.lineHeight};
+    margin-top: ${(props) => props.theme.passwordInput.text.marginTop};
+  }
+
+  .password-field-wrapper {
+    display: flex;
+    width: auto;
+
+    @media ${mobile} {
+      width: 100%;
+    }
+  }
+`;
+StyledInput.defaultProps = { theme: Base };
+
+const PasswordProgress = styled.div`
+  ${(props) =>
+    props.inputWidth ? `width: ${props.inputWidth};` : `flex: auto;`}
+  .input-relative {
+    position: relative;
+    svg {
+      overflow: hidden;
+      vertical-align: middle;
+    }
+  }
+
+  *,
+  *::before,
+  *::after {
+    box-sizing: border-box;
+  }
+`;
+PasswordProgress.defaultProps = { theme: Base };
+
+const NewPasswordButton = styled.div`
+  margin: ${(props) => props.theme.passwordInput.newPassword.margin};
+  -webkit-tap-highlight-color: rgba(0, 0, 0, 0);
+  svg {
+    overflow: ${(props) => props.theme.passwordInput.newPassword.svg.overflow};
+    vertical-align: middle;
+    margin-bottom: ${(props) =>
+      props.theme.passwordInput.newPassword.svg.marginBottom};
+    path {
+      fill: ${(props) =>
+        props.isDisabled
+          ? props.theme.passwordInput.disableColor
+          : props.theme.passwordInput.color};
+    }
+  }
+  :hover {
+    cursor: pointer;
+  }
+`;
+NewPasswordButton.defaultProps = { theme: Base };
+
+const CopyLink = styled.div`
+  margin-top: ${(props) => props.theme.passwordInput.link.marginTop};
+  .password-input_link {
+    color: ${(props) =>
+      props.isDisabled
+        ? props.theme.passwordInput.disableColor
+        : props.theme.passwordInput.color};
+  }
+  @media ${tablet} {
+    width: ${(props) => props.theme.passwordInput.link.tablet.width};
+    margin-left: ${(props) => props.theme.passwordInput.link.tablet.marginLeft};
+    margin-top: ${(props) => props.theme.passwordInput.link.tablet.marginTop};
+  }
+`;
+CopyLink.defaultProps = { theme: Base };
+
+const Progress = styled.div`
+  border: 1.5px solid
+    ${(props) =>
+      !props.isDisabled && props.progressColor
+        ? props.progressColor
+        : "transparent"};
+  border-radius: ${(props) => props.theme.passwordInput.progress.borderRadius};
+  margin-top: ${(props) => props.theme.passwordInput.progress.marginTop};
+  width: ${(props) => (props.progressWidth ? props.progressWidth + "%" : "0%")};
+`;
+Progress.defaultProps = { theme: Base };
+
+// const TooltipStyle = styled.div`
+//   .__react_component_tooltip {
+//   }
+// `;
+
+// const StyledTooltipContainer = styled(Text)`
+//   //margin: 8px 16px 16px 16px;
+// `;
+
+// const StyledTooltipItem = styled(Text)`
+//   margin-left: 8px;
+//   height: 24px;
+//   color: ${(props) => (props.valid ? "#44bb00" : "#B40404")};
+// `;
+
+export { Progress, CopyLink, NewPasswordButton, PasswordProgress, StyledInput };

packages/asc-web-components/src/components/password-input/svg/index.js

@@ -0,0 +1 @@
+export { default as RefreshIcon } from "./refresh.react.svg";

packages/asc-web-components/src/components/row-content/index.js

@@ -1,161 +1,14 @@
 import React from "react";
-import styled, { css } from "styled-components";
 import PropTypes from "prop-types";
-import { tablet, size } from "../../utils/device";
 
-const truncateCss = css`
+import {
-  white-space: nowrap;
+  TabletSideInfo,
-  overflow: hidden;
+  SideContainerWrapper,
-  text-overflow: ellipsis;
+  MainContainer,
-`;
+  MainIcons,
-
+  MainContainerWrapper,
-const commonCss = css`
+  StyledRowContent,
-  margin: 0 6px;
+} from "./styled-row-content";
-  font-family: "Open Sans";
-  font-size: 12px;
-  font-style: normal;
-  font-weight: 600;
-`;
-
-const containerTabletStyle = css`
-  display: block;
-  height: 56px;
-`;
-
-const mainWrapperTabletStyle = css`
-  min-width: 140px;
-  margin-right: 8px;
-  margin-top: 8px;
-  width: 95%;
-`;
-
-const mainContainerTabletStyle = css`
-  ${truncateCss};
-  max-width: 100%;
-`;
-
-const sideInfoTabletStyle = css`
-  display: block;
-  min-width: 160px;
-  margin: 0 6px;
-  ${commonCss};
-  color: ${(props) => props.color && props.color};
-  white-space: nowrap;
-  overflow: hidden;
-  text-overflow: ellipsis;
-`;
-
-const StyledRowContent = styled.div`
-  width: 100%;
-  display: inline-flex;
-
-  ${(props) =>
-    (!props.disableSideInfo &&
-      props.widthProp &&
-      props.widthProp < size.tablet) ||
-    props.isMobile
-      ? `${containerTabletStyle}`
-      : `
-      @media ${tablet} {
-        ${containerTabletStyle}
-      }
-    `}
-`;
-
-const MainContainerWrapper = styled.div`
-  ${commonCss};
-
-  display: flex;
-  align-self: center;
-  margin-right: auto;
-
-  width: ${(props) =>
-    props.mainContainerWidth ? props.mainContainerWidth : "140px"};
-  min-width: 140px;
-
-  ${(props) =>
-    (!props.disableSideInfo &&
-      props.widthProp &&
-      props.widthProp < size.tablet) ||
-    props.isMobile
-      ? `${mainWrapperTabletStyle}`
-      : `
-      @media ${tablet} {
-        ${mainWrapperTabletStyle}
-      }
-    `}
-`;
-
-const MainContainer = styled.div`
-  height: 20px;
-  margin-right: 8px;
-  max-width: 86%;
-
-  ${(props) =>
-    (props.widthProp && props.widthProp < size.tablet) || props.isMobile
-      ? `${mainContainerTabletStyle}`
-      : `
-      @media ${tablet} {
-        ${mainContainerTabletStyle}
-      }
-    `}
-`;
-
-const MainIcons = styled.div`
-  height: 19px;
-  align-self: center;
-  white-space: nowrap;
-`;
-
-const SideContainerWrapper = styled.div`
-  ${commonCss};
-
-  ${(props) =>
-    (props.widthProp && props.widthProp < size.tablet) || props.isMobile
-      ? `${truncateCss}`
-      : `
-      @media ${tablet} {
-        ${truncateCss}
-      }
-    `}
-
-  align-self: center;
-  align-items: center;
-
-  > a {
-    vertical-align: middle;
-  }
-
-  width: ${(props) => (props.containerWidth ? props.containerWidth : "40px")};
-  min-width: ${(props) =>
-    props.containerMinWidth ? props.containerMinWidth : "40px"};
-  color: ${(props) => props.color && props.color};
-
-  ${(props) =>
-    (!props.disableSideInfo &&
-      props.widthProp &&
-      props.widthProp < size.tablet) ||
-    props.isMobile
-      ? `display: none;`
-      : `
-      @media ${tablet} {
-        display: none;
-      }
-    `}
-`;
-
-const TabletSideInfo = styled.div`
-  display: none;
-  ${(props) => (props.color ? `color: ${props.color};` : null)}
-  ${(props) =>
-    (props.widthProp && props.widthProp < size.tablet) || props.isMobile
-      ? `${sideInfoTabletStyle}`
-      : `
-      @media ${tablet} {
-        ${sideInfoTabletStyle}
-      }
-    `}
-`;
 
 const getSideInfo = (content, convert) => {
   let info = "";

packages/asc-web-components/src/components/row-content/styled-row-content.js

@@ -0,0 +1,172 @@
+import styled, { css } from "styled-components";
+import { Base } from "../../themes";
+import { tablet, size } from "../../utils/device";
+
+const truncateCss = css`
+  white-space: nowrap;
+  overflow: hidden;
+  text-overflow: ellipsis;
+`;
+
+const commonCss = css`
+  margin: ${(props) => props.theme.rowContent.margin};
+  font-family: "Open Sans";
+  font-size: ${(props) => props.theme.rowContent.fontSize};
+  font-style: ${(props) => props.theme.rowContent.fontStyle};
+  font-weight: ${(props) => props.theme.rowContent.fontWeight};
+`;
+
+const containerTabletStyle = css`
+  display: block;
+  height: ${(props) => props.theme.rowContent.height};
+`;
+
+const mainWrapperTabletStyle = css`
+  min-width: ${(props) => props.theme.rowContent.mainWrapper.minWidth};
+  margin-right: ${(props) => props.theme.rowContent.mainWrapper.marginRight};
+  margin-top: ${(props) => props.theme.rowContent.mainWrapper.marginTop};
+  width: ${(props) => props.theme.rowContent.mainWrapper.width};
+`;
+
+const mainContainerTabletStyle = css`
+  ${truncateCss};
+  max-width: ${(props) => props.theme.rowContent.maxWidth};
+`;
+
+const sideInfoTabletStyle = css`
+  display: block;
+  min-width: ${(props) => props.theme.rowContent.sideInfo.minWidth};
+  margin: ${(props) => props.theme.rowContent.sideInfo.margin};
+  ${commonCss};
+  color: ${(props) => props.color && props.color};
+  white-space: nowrap;
+  overflow: ${(props) => props.theme.rowContent.sideInfo.overflow};
+  text-overflow: ${(props) => props.theme.rowContent.sideInfo.textOverflow};
+`;
+
+const StyledRowContent = styled.div`
+  width: 100%;
+  display: inline-flex;
+
+  ${(props) =>
+    (!props.disableSideInfo &&
+      props.widthProp &&
+      props.widthProp < size.tablet) ||
+    props.isMobile
+      ? `${containerTabletStyle}`
+      : `
+    @media ${tablet} {
+      ${containerTabletStyle}
+    }
+  `}
+`;
+StyledRowContent.defaultProps = { theme: Base };
+
+const MainContainerWrapper = styled.div`
+  ${commonCss};
+
+  display: flex;
+  align-self: center;
+  margin-right: auto;
+
+  width: ${(props) =>
+    props.mainContainerWidth ? props.mainContainerWidth : "140px"};
+  min-width: 140px;
+
+  ${(props) =>
+    (!props.disableSideInfo &&
+      props.widthProp &&
+      props.widthProp < size.tablet) ||
+    props.isMobile
+      ? `${mainWrapperTabletStyle}`
+      : `
+    @media ${tablet} {
+      ${mainWrapperTabletStyle}
+    }
+  `}
+`;
+MainContainerWrapper.defaultProps = { theme: Base };
+
+const MainContainer = styled.div`
+  height: 20px;
+  margin-right: 8px;
+  max-width: 86%;
+
+  ${(props) =>
+    (props.widthProp && props.widthProp < size.tablet) || props.isMobile
+      ? `${mainContainerTabletStyle}`
+      : `
+    @media ${tablet} {
+      ${mainContainerTabletStyle}
+    }
+  `}
+`;
+MainContainer.defaultProps = { theme: Base };
+
+const MainIcons = styled.div`
+  height: ${(props) => props.theme.rowContent.icons.height};
+  align-self: center;
+  white-space: nowrap;
+`;
+MainIcons.defaultProps = { theme: Base };
+
+const SideContainerWrapper = styled.div`
+  ${commonCss};
+
+  ${(props) =>
+    (props.widthProp && props.widthProp < size.tablet) || props.isMobile
+      ? `${truncateCss}`
+      : `
+    @media ${tablet} {
+      ${truncateCss}
+    }
+  `}
+
+  align-self: center;
+  align-items: center;
+
+  > a {
+    vertical-align: middle;
+  }
+
+  width: ${(props) => (props.containerWidth ? props.containerWidth : "40px")};
+  min-width: ${(props) =>
+    props.containerMinWidth ? props.containerMinWidth : "40px"};
+  color: ${(props) => props.color && props.color};
+
+  ${(props) =>
+    (!props.disableSideInfo &&
+      props.widthProp &&
+      props.widthProp < size.tablet) ||
+    props.isMobile
+      ? `display: none;`
+      : `
+    @media ${tablet} {
+      display: none;
+    }
+  `}
+`;
+SideContainerWrapper.defaultProps = { theme: Base };
+
+const TabletSideInfo = styled.div`
+  display: none;
+  ${(props) => (props.color ? `color: ${props.color};` : null)}
+  ${(props) =>
+    (props.widthProp && props.widthProp < size.tablet) || props.isMobile
+      ? `${sideInfoTabletStyle}`
+      : `
+    @media ${tablet} {
+      ${sideInfoTabletStyle}
+    }
+  `}
+`;
+TabletSideInfo.defaultProps = { theme: Base };
+
+export {
+  TabletSideInfo,
+  SideContainerWrapper,
+  MainContainer,
+  MainIcons,
+  MainContainerWrapper,
+  StyledRowContent,
+};

packages/asc-web-components/src/components/text/common-text-styles.js

@@ -3,7 +3,8 @@ import { css } from "styled-components";
 const commonTextStyles = css`
   font-family: ${(props) => props.theme.fontFamily};
   text-align: ${(props) => props.textAlign};
-  color: ${(props) => props.colorProp};
+  color: ${(props) =>
+    props.colorProp ? props.colorProp : props.theme.text.color};
   ${(props) =>
     props.truncate &&
     css`

packages/asc-web-components/src/components/text/index.js

@@ -45,7 +45,6 @@ Text.propTypes = {
 
 Text.defaultProps = {
   title: null,
-  color: "#333333",
   textAlign: "left",
   fontSize: "13px",
   truncate: false,

packages/asc-web-components/src/components/theme-provider/index.js

@@ -0,0 +1 @@
+export default from "./theme-provider";

packages/asc-web-components/src/components/theme-provider/theme-provider.stories.js

@@ -4,7 +4,7 @@ import ThemeProvider from ".";
 import withReadme from "storybook-readme/with-readme";
 import Readme from "./README.md";
 import { BooleanValue } from "react-values";
-import Box from "../Box/";
+import Box from "../Box";
 import Text from "../Text";
 import JSONPretty from "react-json-pretty";
 import { Base, Dark } from "../../themes";

packages/asc-web-components/src/components/tree-menu/sub-components/tree-node.js

@@ -5,6 +5,8 @@ import { getCssFromSvg } from "../../icons/get-css-from-svg";
 import { TreeNode } from "rc-tree";
 import ReactDOMServer from "react-dom/server";
 import PropTypes from "prop-types";
+import NoUserSelect from "../../../utils/commonStyles";
+import { Base } from "../../../themes";
 
 var checkboxIcon,
   checkboxСheckedIcon,
@@ -101,18 +103,16 @@ const TreeNodeMenu = styled(TreeNode)`
 
   position: relative;
 
-  -webkit-touch-callout: none;
+  ${NoUserSelect}
-  -webkit-user-select: none;
-  -moz-user-select: none;
-  -ms-user-select: none;
-  user-select: none;
 
   ${(props) =>
     props.dragging &&
     css`
       .draggable {
-        background: #f8f7bf;
+        background: ${(props) =>
-        border-radius: 3px;
+          props.theme.treeNode.dragging.draggable.background};
+        border-radius: ${(props) =>
+          props.theme.treeNode.dragging.draggable.borderRadius};
         ${(props) =>
           !props.isFullFillSelection &&
           `
@@ -122,33 +122,37 @@ const TreeNodeMenu = styled(TreeNode)`
           `}
 
         :hover {
-          background: #efefb2;
+          background: ${(props) =>
+            props.theme.treeNode.dragging.draggable.hoverBackgroundColor};
         }
         .rc-tree-title {
-          width: 85% !important;
+          width: ${(props) =>
+            props.theme.treeNode.dragging.title.width} !important;
         }
       }
     `}
   .draggable {
-    color: #555F65;
+    color: ${(props) => props.theme.treeNode.draggable.color};
     /* Required to make elements draggable in old WebKit */
     -khtml-user-drag: none;
     -webkit-user-drag: none;
   }
   &.drag-over > .draggable {
-    background-color: #316ac5;
+    background-color: ${(props) =>
-    color: white;
+      props.theme.treeNode.draggable.dragOverBackgroundColor};
-    border: 1px #316ac5 solid;
+    color: ${(props) => props.theme.treeNode.draggable.dragOverColor};
+    border: ${(props) => props.theme.treeNode.draggable.border};
     opacity: 0.8;
   }
   &.drag-over-gap-top > .draggable {
-    border-top: 2px blue solid;
+    border-top: ${(props) => props.theme.treeNode.draggable.gapTop.borderTop};
   }
   &.drag-over-gap-bottom > .draggable {
-    border-bottom: 2px blue solid;
+    border-bottom: ${(props) =>
+      props.theme.treeNode.draggable.gapBottom.borderBottom};
   }
   &.filter-node > .rc-tree-node-content-wrapper {
-    color: #a60000 !important;
+    color: ${(props) => props.theme.treeNode.contentWrapper.color} !important;
     font-weight: bold !important;
   }
   ul {
@@ -276,9 +280,9 @@ const TreeNodeMenu = styled(TreeNode)`
     top: 5px;
     width: 5px;
     height: 0;
-    border: 2px solid #fff;
+    border: ${(props) => props.theme.treeNode.checkbox.border};
-    border-top: 0;
+    border-top: ${(props) => props.theme.treeNode.checkbox.borderTop};
-    border-left: 0;
+    border-left: ${(props) => props.theme.treeNode.checkbox.borderLeft};
   }
   span.rc-tree-title {
     display: inline-block;
@@ -291,7 +295,7 @@ const TreeNodeMenu = styled(TreeNode)`
     white-space: nowrap;
     overflow: hidden;
     text-overflow: ellipsis;
-    color: #555F65;
+    color: ${(props) => props.theme.treeNode.title.color};
     padding-left: ${(props) =>
       props.icon || props.disableSwitch ? "0" : "20px"};
   }
@@ -304,9 +308,9 @@ const TreeNodeMenu = styled(TreeNode)`
     top: 2px;
   }
   .rc-tree-node-selected {
-    background: #dfe2e3;
+    background: ${(props) => props.theme.treeNode.selected.background};
     mix-blend-mode: normal;
-    border-radius: 3px;
+    border-radius: ${(props) => props.theme.treeNode.selected.borderRadius};
     z-index: 0;
     ${(props) =>
       props.disableSwitch &&
@@ -315,7 +319,8 @@ const TreeNodeMenu = styled(TreeNode)`
         width: auto;
       `}
     :hover {
-      background: #dfe2e3;
+      background: ${(props) =>
+        props.theme.treeNode.selected.hoverBackgroundColor};
     }
     overflow: visible;
   }
@@ -343,5 +348,6 @@ TreeNodeMenu.propTypes = {
   showBadge: PropTypes.bool,
   onBadgeClick: PropTypes.func,
 };
+TreeNodeMenu.defaultProps = { theme: Base };
 
 export default TreeNodeMenu;

packages/asc-web-components/src/themes/base.js

@@ -42,11 +42,14 @@ const {
   hoverWarning,
   darkBlack,
   silver,
+  strongBlue,
+  lightGrayishStrongBlue,
+  darkRed,
 } = globalColors;
 
 const Base = {
-  // color: black,
+  color: black,
-  // backgroundColor: white,
+  backgroundColor: white,
   fontFamily: "Open Sans, sans-serif, Arial",
   fontSize: "30px",
 
@@ -159,7 +162,7 @@ const Base = {
     margin: "0",
     lineHeight: "56px",
     fontWeight: "700",
-    borderBottom: `1px solid ${globalColors.pattensBlue}`,
+    borderBottom: `1px solid ${globalColors.lightGrayishBlue}`,
     padding: "0 16px 16px",
     bodyPadding: "16px 0",
   },
@@ -298,6 +301,7 @@ const Base = {
     },
   },
 
+  iconButton: {},
   selectorAddButton: {
     background: grayLight,
     activeBackground: grayLightMid,
@@ -435,6 +439,33 @@ const Base = {
     },
   },
 
+  rowContent: {
+    icons: {
+      height: "19px",
+    },
+
+    margin: "0 6px",
+    fontSize: "12px",
+    fontStyle: "normal",
+    fontWeight: "600",
+    height: "56px",
+    maxWidth: " 100%",
+
+    sideInfo: {
+      minWidth: "160px",
+      margin: "0 6px",
+      overflow: "hidden",
+      textOverflow: "ellipsis",
+    },
+
+    mainWrapper: {
+      minWidth: "140px",
+      marginRight: "8px",
+      marginTop: "8px",
+      width: "95%",
+    },
+  },
+
   badge: {
     border: "1px solid transparent",
     padding: "1px",
@@ -466,7 +497,7 @@ const Base = {
     },
 
     header: {
-      borderBottom: `1px solid ${globalColors.pattensBlue}`,
+      borderBottom: `1px solid ${globalColors.lightGrayishBlue}`,
     },
 
     closeButton: {
@@ -500,8 +531,8 @@ const Base = {
   },
 
   input: {
-    color: "#333333",
+    color: black,
-    disableColor: "#A3A9AE",
+    disableColor: grayMid,
 
     backgroundColor: white,
     disableBackgroundColor: grayLight,
@@ -574,6 +605,44 @@ const Base = {
     },
   },
 
+  passwordInput: {
+    disableColor: grayMid,
+    color: gray,
+
+    hoverColor: gray,
+
+    lineHeight: "32px",
+
+    text: {
+      lineHeight: "14px",
+      marginTop: "-2px",
+    },
+
+    link: {
+      marginTop: "-6px",
+
+      tablet: {
+        width: "100%",
+        marginLeft: "0px",
+        marginTop: "-1px",
+      },
+    },
+
+    progress: {
+      borderRadius: "2px",
+      marginTop: "-1px",
+    },
+
+    newPassword: {
+      margin: "0 16px",
+
+      svg: {
+        overflow: "hidden",
+        marginBottom: "4px",
+      },
+    },
+  },
+
   searchInput: {
     fontSize: "14px",
     fontWeight: "600",
@@ -740,6 +809,51 @@ const Base = {
     },
   },
 
+  fieldContainer: {
+    horizontal: {
+      margin: "0 0 16px 0",
+
+      label: {
+        lineHeight: "32px",
+        margin: "0",
+      },
+
+      body: {
+        flexGrow: "1",
+      },
+
+      iconButton: {
+        marginTop: "10px",
+        marginLeft: "8px",
+      },
+    },
+
+    vertical: {
+      margin: "0 0 16px 0",
+
+      label: {
+        lineHeight: "13px",
+        height: "15px",
+      },
+
+      labelIcon: {
+        width: "100%",
+        margin: "0 0 8px 0",
+      },
+
+      body: {
+        width: "100%",
+      },
+
+      iconButton: {
+        margin: "0",
+        padding: "0px 8px",
+        width: "13px",
+        height: "13px",
+      },
+    },
+  },
+
   avatar: {
     initialsContainer: {
       color: white,
@@ -973,6 +1087,55 @@ const Base = {
     unsetBackgroundColor: "unset",
   },
 
+  treeNode: {
+    dragging: {
+      draggable: {
+        background: lightCumulus,
+        hoverBackgroundColor: lightMediumGoldenrod,
+        borderRadius: "3px",
+      },
+
+      title: {
+        width: "85%",
+      },
+    },
+
+    draggable: {
+      color: cyanBlueDarkShade,
+      dragOverBackgroundColor: strongBlue,
+      border: `1px ${strongBlue} solid`,
+      dragOverColor: white,
+
+      gapTop: {
+        borderTop: `2px blue solid`,
+      },
+
+      gapBottom: {
+        borderBottom: `2px blue solid`,
+      },
+    },
+
+    contentWrapper: {
+      color: darkRed,
+    },
+
+    title: {
+      color: cyanBlueDarkShade,
+    },
+
+    selected: {
+      background: lightGrayishStrongBlue,
+      hoverBackgroundColor: lightGrayishStrongBlue,
+      borderRadius: "3px",
+    },
+
+    checkbox: {
+      border: `2px solid ${white}`,
+      borderTop: 0,
+      borderLeft: 0,
+    },
+  },
+
   progressBar: {
     height: "22px",
     backgroundColor: grayLight,
@@ -1017,6 +1180,7 @@ const Base = {
     borderRadius: "6px",
     boxShadow: "0px 5px 20px rgba(0, 0, 0, 0.13)",
   },
+
   dropDownItem: {
     color: black,
     disableColor: gray,
@@ -1289,7 +1453,7 @@ const Base = {
       margin: "0",
       lineHeight: "56px",
       fontWeight: "700",
-      borderBottom: `1px solid ${globalColors.pattensBlue}`,
+      borderBottom: `1px solid ${globalColors.lightGrayishBlue}`,
     },
 
     bodyContent: {
@@ -1319,6 +1483,7 @@ const Base = {
       bigMarginTop: "7.5px",
       lineHeight: "33px",
     },
+
     weekdays: {
       color: black,
       disabledColor: gray,
@@ -1326,6 +1491,7 @@ const Base = {
       bigWidth: "295px",
       marginBottom: "-5px",
     },
+
     month: {
       baseWidth: "267px",
       bigWidth: "295px",
@@ -1335,12 +1501,14 @@ const Base = {
       neighboringHoverColor: black,
       neighboringColor: grayLightMid,
     },
+
     selectedDay: {
       backgroundColor: orangeMain,
       borderRadius: "16px",
       cursor: "pointer",
       color: white,
     },
+    
     comboBox: {
       color: black,
       minWidth: "80px",
@@ -1370,7 +1538,7 @@ const Base = {
     contentLineHeight: "56px",
     contentFontWeight: "700",
 
-    borderBottom: `1px solid ${globalColors.pattensBlue}`,
+    borderBottom: `1px solid ${globalColors.lightGrayishBlue}`,
   },
 
   aside: {

packages/asc-web-components/src/utils/globalColors.js

@@ -21,8 +21,10 @@ const globalColors = {
   blueDisabled: "#A6DCF2",
   blueCharcoal: "#1F2933",
   blueLightMid: "#265A8F",
+  strongBlue: "#316AC5",
 
-  pattensBlue: "#DEE2E6",
+  lightGrayishBlue: "#DEE2E6",
+  lightGrayishStrongBlue: "#DFE2E3",
   cyanBlueDarkShade: "#555F65",
 
   orangeMain: "#ED7309",
@@ -37,7 +39,7 @@ const globalColors = {
 
   warningColor: "#f1ca92",
   red: "#c30",
-
+  darkRed: "#A60000",
   activeSuccess: "#CAE796",
   activeError: "#FFBFAA",
   activeInfo: "#F1DA92",

packages/asc-web-components/src/utils/globalStyles.js

@@ -0,0 +1,13 @@
+import { createGlobalStyle } from "styled-components";
+
+const GlobalStyle = createGlobalStyle`  
+
+html, body {
+  margin: 0;
+  background-color: ${props => props.theme.backgroundColor};
+  color: ${props => props.theme.color};
+  font-family: ${props => props.theme.fontFamily};
+}
+`;
+
+export default GlobalStyle;