Client: use colors from theme

packages/client/src/components/dialogs/BackupCodesDialog/index.js

@@ -43,6 +43,7 @@ import { isDesktop } from "@docspace/shared/utils";
 const StyledModal = styled(ModalDialogContainer)`
   .backup-codes-counter {
     margin-top: 16px;
+    color: ${(props) => props.theme.client.settings.security.tfa.textColor};
   }
 
   .backup-codes-print-link-wrapper {
@@ -110,11 +111,7 @@ class BackupCodesDialogComponent extends React.Component {
               {t("BackupCodesSecondDescription")}
             </Text>
 
-            <Text
+            <Text className="backup-codes-counter" fontWeight={600}>
-              className="backup-codes-counter"
-              fontWeight={600}
-              color="#A3A9AE"
-            >
               {backupCodesCount} {t("CodesCounter")}
             </Text>
 

packages/client/src/components/dialogs/CreateEditGroupDialog/sub-components/GroupMemberRow/index.styled.ts

@@ -76,7 +76,7 @@ export const GroupMemberRow = styled.div<{}>`
 
     svg {
       path {
-        fill: #a3a9ae;
+        fill: ${(props) => props.theme.createEditGroupDialog.iconFill};
       }
     }
   }

packages/client/src/components/dialogs/CreateEditGroupDialog/sub-components/HeadOfGroupParam/index.styled.ts

@@ -30,7 +30,8 @@ export const Header = styled.div`
   width: 100%;
   padding: 8px 0 12px 0;
 
-  color: #a3a9ae;
+  color: ${(props) =>
+    props.theme.createEditRoomDialog.commonParam.descriptionColor};
   font-size: 14px;
   font-weight: 600;
   line-height: 16px;
@@ -50,6 +51,6 @@ export const SelectGroupManager = styled.div<{}>`
     font-size: 13px;
     font-weight: 600;
     line-height: 20px;
-    color: #a3a9ae;
+    color: ${(props) => props.theme.createEditGroupDialog.textColor};
   }
 `;

packages/client/src/components/dialogs/CreateEditGroupDialog/sub-components/MembersParam/index.styled.ts

@@ -30,7 +30,8 @@ export const Header = styled.div`
   width: 100%;
   padding: 8px 0 12px 0;
 
-  color: #a3a9ae;
+  color: ${(props) =>
+    props.theme.createEditRoomDialog.commonParam.descriptionColor};
   font-size: 14px;
   font-weight: 600;
   line-height: 16px;
@@ -50,6 +51,6 @@ export const AddMembersButton = styled.div<{}>`
     font-size: 13px;
     font-weight: 600;
     line-height: 20px;
-    color: #a3a9ae;
+    color: ${(props) => props.theme.createEditGroupDialog.textColor};
   }
 `;

packages/client/src/components/dialogs/CreateEditRoomDialog/sub-components/SecondaryInfoButton.js

@@ -32,10 +32,11 @@ import { HelpButton } from "@docspace/shared/components/help-button";
 
 const StyledHelpButton = styled(HelpButton)`
   border-radius: 50%;
-  background-color: #a3a9ae;
+  background-color: ${(props) =>
+    props.theme.createEditRoomDialog.helpButton.background};
   circle,
   rect {
-    fill: #ffffff;
+    fill: ${(props) => props.theme.createEditRoomDialog.helpButton.fill};
   }
 `;
 

packages/client/src/components/dialogs/DownloadDialog/StyledDownloadDialog.js

@@ -127,7 +127,7 @@ const StyledDownloadContent = styled.div`
       }
       .download-dialog-other-text {
         text-align: end;
-        color: #a3a9ae;
+        color: ${(props) => props.theme.downloadDialog.textColor};
       }
     }
   }

packages/client/src/pages/Confirm/sub-components/StyledCreateUser.js

@@ -83,6 +83,7 @@ export const RegisterContainer = styled.div`
   width: 100%;
 
   .or-label {
+    color: ${(props) => props.theme.invitePage.textColor};
     margin: 0 8px;
   }
 
@@ -91,7 +92,7 @@ export const RegisterContainer = styled.div`
     display: flex;
     width: 100%;
     align-items: center;
-    color: ${(props) => props.theme.invitePage.borderColor};;
+    color: ${(props) => props.theme.invitePage.borderColor};
     padding-top: 35px;
     margin-bottom: 32px;
   }

packages/client/src/pages/Confirm/sub-components/createUser.js

@@ -713,9 +713,7 @@ const CreateUserForm = (props) => {
             {!emailFromLink && (oauthDataExists() || ssoExists()) && (
               <>
                 <div className="line">
-                  <Text color="#A3A9AE" className="or-label">
+                  <Text className="or-label">{t("Common:orContinueWith")}</Text>
-                    {t("Common:orContinueWith")}
-                  </Text>
                 </div>
                 <SocialButtonsGroup
                   providers={providers}

packages/client/src/pages/Home/Section/AccountsBody/Badges.js

@@ -75,13 +75,13 @@ const StyledPaidBadge = styled(Badge)`
 const StyledSendClockIcon = styled(SendClockIcon)`
   ${commonIconsStyles}
   path {
-    fill: #a3a9ae;
+    fill: ${(props) => props.theme.accountsBadges.pendingColor};
   }
 `;
 const StyledCatalogSpamIcon = styled(CatalogSpamIcon)`
   ${commonIconsStyles}
   path {
-    fill: #f21c0e;
+    fill: ${(props) => props.theme.accountsBadges.disabledColor};
   }
 `;
 

packages/client/src/pages/PortalSettings/categories/common/Appearance/StyledPreview.js

@@ -665,7 +665,8 @@ const StyledMobilePreview = styled.div`
   .icon-button_svg {
     svg {
       path {
-        fill: #a3a9ae;
+        fill: ${(props) =>
+          props.theme.client.settings.common.appearance.iconFill};
       }
     }
   }

packages/client/src/pages/VersionHistory/Section/Header/index.js

@@ -86,8 +86,6 @@ const SectionHeaderContent = (props) => {
       <IconButton
         iconName={ArrowPathReactSvgUrl}
         size="17"
-        // color="#A3A9AE"
-        // hoverColor="#657077"
         isFill={true}
         onClick={onClickBack}
         className="arrow-button"