Merge branch 'release/rc-v1.2.0' of https://github.com/ONLYOFFICE/DocSpace into release/rc-v1.2.0

packages/client/src/components/dialogs/CreateEditRoomDialog/sub-components/IconEditor/Dropzone.js

@@ -3,6 +3,7 @@ import styled from "styled-components";
 import { useDropzone } from "react-dropzone";
 import resizeImage from "resize-image";
 import { Base } from "@docspace/components/themes";
+import { ColorTheme, ThemeType } from "@docspace/common/components/ColorTheme";
 
 const StyledDropzone = styled.div`
   cursor: pointer;
@@ -33,8 +34,6 @@ const StyledDropzone = styled.div`
       font-size: 13px;
       line-height: 20px;
       &-main {
-        color: ${(props) =>
-          props.theme.createEditRoomDialog.dropzone.linkMainColor};
         font-weight: 600;
         text-decoration: underline;
         text-decoration-style: dashed;
@@ -103,7 +102,9 @@ const Dropzone = ({ t, setUploadedFile, isDisabled }) => {
       <div {...getRootProps({ className: "dropzone" })}>
         <input {...getInputProps()} />
         <div className="dropzone-link">
-          <span className="dropzone-link-main">{t("DropzoneTitleLink")}</span>
+          <ColorTheme className="dropzone-link-main" themeId={ThemeType.Link}>
+            {t("DropzoneTitleLink")}
+          </ColorTheme>
           <span className="dropzone-link-secondary">
             {t("DropzoneTitleSecondary")}
           </span>

packages/components/selector-add-button/styled-selector-add-button.js

@@ -18,27 +18,38 @@ const StyledButton = styled.div`
       ${(props) =>
         !props.isDisabled &&
         css`
-          fill: ${props.theme.selectorAddButton.color};
+          fill: ${props.theme.selectorAddButton.iconColor};
         `}
     }
   }
 
   &:hover {
+    background: ${(props) =>
+      !props.isDisabled && props.theme.selectorAddButton.hoverBackground};
+
     svg {
       path {
         ${(props) =>
           !props.isDisabled &&
           css`
-            fill: ${props.theme.selectorAddButton.hoverColor};
+            fill: ${props.theme.selectorAddButton.iconColorHover};
           `}
       }
     }
   }
 
   &:active {
-    ${(props) =>
-      !props.isDisabled &&
-      `background-color: ${props.theme.selectorAddButton.activeBackground};`}
+    background: ${(props) =>
+      !props.isDisabled && props.theme.selectorAddButton.activeBackground};
+    svg {
+      path {
+        ${(props) =>
+          !props.isDisabled &&
+          css`
+            fill: ${props.theme.selectorAddButton.iconColorActive};
+          `}
+      }
+    }
   }
 
   -webkit-tap-highlight-color: rgba(0, 0, 0, 0);

packages/components/selector/sub-components/Item/index.js

@@ -94,8 +94,10 @@ const Item = React.memo(({ index, style, data }) => {
       onSelect && onSelect(item);
     };
 
-    const onClick = () => {
-      !isMultiSelect && onSelect && onSelect(item);
+    const onClick = (e) => {
+      if (e.target.closest(".checkbox")) return;
+
+      onSelect && onSelect(item);
     };
 
     return (

packages/components/themes/base.js

@@ -383,7 +383,12 @@ const Base = {
   },
   selectorAddButton: {
     background: grayLightMid,
-    activeBackground: grayLightMid,
+    hoverBackground: lightGrayishStrongBlue,
+    activeBackground: grayMid,
+
+    iconColor: grayMain,
+    iconColorHover: grayMain,
+    iconColorActive: grayMain,
 
     border: `none`,
     boxSizing: "border-box",

packages/components/themes/dark.js

@@ -376,8 +376,13 @@ const Dark = {
 
   iconButton: { color: "#858585", hoverColor: grayMaxLight },
   selectorAddButton: {
-    background: "#292929",
-    activeBackground: "#292929",
+    background: "#242424",
+    hoverBackground: "#282828",
+    activeBackground: "#242424",
+
+    iconColor: "#858585",
+    iconColorHover: "#FFFFFF",
+    iconColorActive: "#CCCCCC",
 
     border: `none`,
     boxSizing: "border-box",