From 592ca47ab8069b5956dc347629bd4001a1598b38 Mon Sep 17 00:00:00 2001 From: Viktor Fomin Date: Fri, 14 Jun 2024 13:59:13 +0500 Subject: [PATCH] Client: use colors from theme --- .../src/components/dialogs/BackupCodesDialog/index.js | 7 ++----- .../sub-components/GroupMemberRow/index.styled.ts | 2 +- .../sub-components/HeadOfGroupParam/index.styled.ts | 5 +++-- .../sub-components/MembersParam/index.styled.ts | 5 +++-- .../sub-components/SecondaryInfoButton.js | 5 +++-- .../dialogs/DownloadDialog/StyledDownloadDialog.js | 2 +- .../src/pages/Confirm/sub-components/StyledCreateUser.js | 3 ++- .../client/src/pages/Confirm/sub-components/createUser.js | 4 +--- .../client/src/pages/Home/Section/AccountsBody/Badges.js | 4 ++-- .../categories/common/Appearance/StyledPreview.js | 3 ++- .../src/pages/VersionHistory/Section/Header/index.js | 2 -- 11 files changed, 20 insertions(+), 22 deletions(-) diff --git a/packages/client/src/components/dialogs/BackupCodesDialog/index.js b/packages/client/src/components/dialogs/BackupCodesDialog/index.js index cb7b105703..c5692ef6c5 100644 --- a/packages/client/src/components/dialogs/BackupCodesDialog/index.js +++ b/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")} - + {backupCodesCount} {t("CodesCounter")} diff --git a/packages/client/src/components/dialogs/CreateEditGroupDialog/sub-components/GroupMemberRow/index.styled.ts b/packages/client/src/components/dialogs/CreateEditGroupDialog/sub-components/GroupMemberRow/index.styled.ts index 64fe27fef1..6223aa4db9 100644 --- a/packages/client/src/components/dialogs/CreateEditGroupDialog/sub-components/GroupMemberRow/index.styled.ts +++ b/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}; } } } diff --git a/packages/client/src/components/dialogs/CreateEditGroupDialog/sub-components/HeadOfGroupParam/index.styled.ts b/packages/client/src/components/dialogs/CreateEditGroupDialog/sub-components/HeadOfGroupParam/index.styled.ts index 0ce207edd5..6021a3c3cc 100644 --- a/packages/client/src/components/dialogs/CreateEditGroupDialog/sub-components/HeadOfGroupParam/index.styled.ts +++ b/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}; } `; diff --git a/packages/client/src/components/dialogs/CreateEditGroupDialog/sub-components/MembersParam/index.styled.ts b/packages/client/src/components/dialogs/CreateEditGroupDialog/sub-components/MembersParam/index.styled.ts index babb9d63ab..f605421617 100644 --- a/packages/client/src/components/dialogs/CreateEditGroupDialog/sub-components/MembersParam/index.styled.ts +++ b/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}; } `; diff --git a/packages/client/src/components/dialogs/CreateEditRoomDialog/sub-components/SecondaryInfoButton.js b/packages/client/src/components/dialogs/CreateEditRoomDialog/sub-components/SecondaryInfoButton.js index cbcd711c5f..b89659a693 100644 --- a/packages/client/src/components/dialogs/CreateEditRoomDialog/sub-components/SecondaryInfoButton.js +++ b/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}; } `; diff --git a/packages/client/src/components/dialogs/DownloadDialog/StyledDownloadDialog.js b/packages/client/src/components/dialogs/DownloadDialog/StyledDownloadDialog.js index f044af2d1b..2e05754675 100644 --- a/packages/client/src/components/dialogs/DownloadDialog/StyledDownloadDialog.js +++ b/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}; } } } diff --git a/packages/client/src/pages/Confirm/sub-components/StyledCreateUser.js b/packages/client/src/pages/Confirm/sub-components/StyledCreateUser.js index eeb2d5c405..57e6277ff2 100644 --- a/packages/client/src/pages/Confirm/sub-components/StyledCreateUser.js +++ b/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; } diff --git a/packages/client/src/pages/Confirm/sub-components/createUser.js b/packages/client/src/pages/Confirm/sub-components/createUser.js index 59fce82c1b..50fba5e5f5 100644 --- a/packages/client/src/pages/Confirm/sub-components/createUser.js +++ b/packages/client/src/pages/Confirm/sub-components/createUser.js @@ -713,9 +713,7 @@ const CreateUserForm = (props) => { {!emailFromLink && (oauthDataExists() || ssoExists()) && ( <>
- - {t("Common:orContinueWith")} - + {t("Common:orContinueWith")}
props.theme.accountsBadges.pendingColor}; } `; const StyledCatalogSpamIcon = styled(CatalogSpamIcon)` ${commonIconsStyles} path { - fill: #f21c0e; + fill: ${(props) => props.theme.accountsBadges.disabledColor}; } `; diff --git a/packages/client/src/pages/PortalSettings/categories/common/Appearance/StyledPreview.js b/packages/client/src/pages/PortalSettings/categories/common/Appearance/StyledPreview.js index 911fdb6319..92e6e717ca 100644 --- a/packages/client/src/pages/PortalSettings/categories/common/Appearance/StyledPreview.js +++ b/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}; } } } diff --git a/packages/client/src/pages/VersionHistory/Section/Header/index.js b/packages/client/src/pages/VersionHistory/Section/Header/index.js index a4811ac077..6a23e117d8 100644 --- a/packages/client/src/pages/VersionHistory/Section/Header/index.js +++ b/packages/client/src/pages/VersionHistory/Section/Header/index.js @@ -86,8 +86,6 @@ const SectionHeaderContent = (props) => {