Client: use colors from theme

packages/client/src/pages/FormGallery/TilesView/StyledTileView.js

@@ -36,6 +36,7 @@ import {
   mobileMore,
   getCorrectFourValuesStyle,
 } from "@docspace/shared/utils";
+import { globalColors } from "@docspace/shared/themes";
 
 const FlexBoxStyles = css`
   display: flex;
@@ -57,14 +58,17 @@ const StyledTile = styled.div`
   width: 100%;
   border: ${(props) => props.theme.filesSection.tilesView.tile.border};
   border-radius: 6px;
-  ${(props) => props.showHotkeyBorder && "border-color: #2DA7DB"};
+  ${(props) =>
+    props.showHotkeyBorder && `border-color: ${globalColors.lightSecondMain}`};
   -webkit-tap-highlight-color: rgba(0, 0, 0, 0);
 
   ${(props) => props.isSelected && checkedStyle}
 
   &:before,
   &:after {
-    ${(props) => props.showHotkeyBorder && "border-color: #2DA7DB"};
+    ${(props) =>
+      props.showHotkeyBorder &&
+      `border-color: ${globalColors.lightSecondMain}`};
   }
 
   &:before,

packages/client/src/pages/Home/Section/Body/RowsView/SimpleFilesRow.js

@@ -44,7 +44,7 @@ import withQuickButtons from "../../../../../HOCs/withQuickButtons";
 import withBadges from "../../../../../HOCs/withBadges";
 import ItemIcon from "../../../../../components/ItemIcon";
 import marginStyles from "./CommonStyles";
-import { Base } from "@docspace/shared/themes";
+import { Base, globalColors } from "@docspace/shared/themes";
 
 import CursorPalmReactSvgUrl from "PUBLIC_DIR/images/cursor.palm.react.svg?url";
 
@@ -90,7 +90,7 @@ const StyledWrapper = styled.div`
   ${(props) =>
     props.showHotkeyBorder &&
     css`
-      border-color: #2da7db !important;
+      border-color: ${globalColors.lightSecondMain} !important;
       z-index: 1;
       position: relative;
 

packages/client/src/pages/Home/Section/Body/TableView/StyledTable.js

@@ -25,14 +25,18 @@
 // International. See the License terms at http://creativecommons.org/licenses/by-sa/4.0/legalcode
 
 import styled, { css } from "styled-components";
-import Base from "@docspace/shared/themes/base";
+import { Base, globalColors } from "@docspace/shared/themes";
 import { TableRow } from "@docspace/shared/components/table";
 import DragAndDrop from "@docspace/shared/components/drag-and-drop/DragAndDrop";
 import CursorPalmSvgUrl from "PUBLIC_DIR/images/cursor.palm.react.svg?url";
 
 const hotkeyBorderStyle = css`
   border-image-slice: 1;
-  border-image-source: linear-gradient(to left, #2da7db 24px, #2da7db 24px);
+  border-image-source: linear-gradient(
+    to left,
+    ${globalColors.lightSecondMain} 24px,
+    ${globalColors.lightSecondMain} 24px
+  );
 `;
 
 const rowCheckboxDraggingStyle = css`
@@ -161,7 +165,7 @@ const StyledTableRow = styled(TableRow)`
       props.showHotkeyBorder &&
       css`
         z-index: 1;
-        border-color: #2da7db !important;
+        border-color: ${globalColors.lightSecondMain} !important;
       `}
   }
 

packages/client/src/pages/Home/Section/Body/TilesView/sub-components/Tile.js

@@ -36,7 +36,7 @@ import { isMobile } from "react-device-detect";
 import { withTheme } from "styled-components";
 import { Link } from "@docspace/shared/components/link";
 import { Loader } from "@docspace/shared/components/loader";
-import { Base } from "@docspace/shared/themes";
+import { Base, globalColors } from "@docspace/shared/themes";
 import { Tags } from "@docspace/shared/components/tags";
 import { Tag } from "@docspace/shared/components/tag";
 import { ROOMS_TYPE_TRANSLATIONS } from "@docspace/shared/constants";
@@ -154,7 +154,8 @@ const StyledTile = styled.div`
     isRooms
       ? theme.filesSection.tilesView.tile.roomsBorderRadius
       : theme.filesSection.tilesView.tile.borderRadius};
-  ${(props) => props.showHotkeyBorder && "border-color: #2DA7DB"};
+  ${(props) =>
+    props.showHotkeyBorder && `border-color: ${globalColors.lightSecondMain}`};
   ${(props) =>
     props.isFolder && !props.isRooms && "border-top-left-radius: 6px;"}
   -webkit-tap-highlight-color: rgba(0, 0, 0, 0);
@@ -200,7 +201,9 @@ const StyledTile = styled.div`
 
   &:before,
   &:after {
-    ${(props) => props.showHotkeyBorder && "border-color: #2DA7DB"};
+    ${(props) =>
+      props.showHotkeyBorder &&
+      `border-color: ${globalColors.lightSecondMain}`};
   }
 
   &:before,

packages/client/src/pages/PortalSettings/categories/data-import/NextCloudWorkspace/Stepper/AddEmailsStep/AccountsTable/RowView/UsersRowContent.js

@@ -39,7 +39,7 @@ import EditSvg from "PUBLIC_DIR/images/access.edit.react.svg";
 import CrossSvg from "PUBLIC_DIR/images/cross.edit.react.svg";
 import CheckSvg from "PUBLIC_DIR/images/check.edit.react.svg";
 
-import { Base } from "@docspace/shared/themes";
+import { Base, globalColors } from "@docspace/shared/themes";
 
 const EmailInputWrapper = styled.div`
   display: flex;
@@ -72,7 +72,7 @@ const StyledRowContent = styled(RowContent)`
   .user-email {
     margin-right: 5px;
     path {
-      fill: #a3a9ae;
+      fill: ${globalColors.gray};
     }
   }
 
@@ -156,7 +156,7 @@ const UsersRowContent = ({
         <Text fontWeight={600} fontSize="14px">
           {displayName}
         </Text>
-        <Text fontWeight={600} fontSize="12px" color="#A3A9AE">
+        <Text fontWeight={600} fontSize="12px" color={globalColors.gray}>
           {prevEmail === "" ? t("Settings:NoEmail") : prevEmail}
         </Text>
       </div>

packages/client/src/pages/PortalSettings/categories/data-import/NextCloudWorkspace/Stepper/AddEmailsStep/AccountsTable/TableView/UsersTableRow.js

@@ -41,7 +41,7 @@ import EditSvg from "PUBLIC_DIR/images/access.edit.react.svg";
 import CrossSvg from "PUBLIC_DIR/images/cross.edit.react.svg";
 import CheckSvg from "PUBLIC_DIR/images/check.edit.react.svg";
 
-import { Base } from "@docspace/shared/themes";
+import { Base, globalColors } from "@docspace/shared/themes";
 
 const EmailInputWrapper = styled.div`
   display: flex;
@@ -59,7 +59,7 @@ const StyledTableRow = styled(TableRow)`
     gap: 8px;
     overflow: hidden;
     path {
-      fill: #a3a9ae;
+      fill: ${globalColors.gray};
     }
   }
 
@@ -196,7 +196,11 @@ const UsersTableRow = ({
         ) : (
           <span onClick={openEmail} className="user-email" ref={emailTextRef}>
             <EditSvg />
-            <Text fontWeight={600} color="#A3A9AE" className="textOverflow">
+            <Text
+              fontWeight={600}
+              color={globalColors.gray}
+              className="textOverflow"
+            >
               {prevEmail !== "" ? prevEmail : t("Settings:NoEmail")}
             </Text>
           </span>

packages/client/src/pages/PortalSettings/categories/data-management/backup/StyledBackup.js

@@ -31,6 +31,7 @@ import {
 } from "../../../utils/commonSettingsStyles";
 
 import { tablet, mobile } from "@docspace/shared/utils";
+import { globalColors } from "@docspace/shared/themes";
 
 const INPUT_LENGTH = "350px";
 const TEXT_LENGTH = "700px";
@@ -449,7 +450,7 @@ const StyledRestoreBackup = styled.div`
 const StyledModules = styled.div`
   margin-bottom: 24px;
   .backup-description {
-    ${(props) => props.isDisabled && `color: #A3A9AE`};
+    ${(props) => props.isDisabled && `color: ${globalColors.gray};`};
     ${(props) =>
       props.theme.interfaceDirection === "rtl"
         ? css`
@@ -653,7 +654,7 @@ const StyledBackupList = styled.div`
     margin-top: -3px;
     grid-area: trash;
     path {
-      fill: #a3a9ae;
+      fill: ${globalColors.gray};
     }
   }
   .backup-list_icon {
@@ -667,7 +668,7 @@ const StyledBackupList = styled.div`
     white-space: nowrap;
   }
   .backup-list_file-exst {
-    color: #a3a9ae;
+    color: ${globalColors.gray};
     grid-area: ext;
   }
   .backup-list_radio-button {
@@ -746,7 +747,7 @@ const StyledSettingsHeader = styled.div`
   -ms-transition: top 0.3s cubic-bezier(0, 0, 0.8, 1);
   -webkit-transition: top 0.3s cubic-bezier(0, 0, 0.8, 1);
   -o-transition: top 0.3s cubic-bezier(0, 0, 0.8, 1);
-  background-color: #fff;
+  background-color: ${globalColors.white};
   z-index: 149;
   width: 100%;
   height: 50px;