From 7dd068611d0b9f10671e3b2b50e972b6c1dc1747 Mon Sep 17 00:00:00 2001 From: Viktor Fomin Date: Mon, 17 Jun 2024 15:20:05 +0300 Subject: [PATCH] Client: use colors from theme --- .../DownloadDialog/StyledDownloadDialog.js | 2 +- .../views/Members/sub-components/Styled.js | 2 +- .../common/Branding/companyInfoSettings.js | 11 +++++--- .../categories/common/appearance.js | 5 ++-- .../data-import/NextCloudWorkspace/index.js | 6 +---- .../JavascriptSDK/presets/StyledPresets.js | 6 ++++- .../JavascriptSDK/sub-components/CodeBlock.js | 26 +++++++++---------- .../sub-components/CodeToInsert.js | 6 ++--- .../sub-components/PreviewBlock.js | 4 +-- .../JavascriptSDK/sub-components/csp.js | 2 +- .../Body/sub-components/main-profile/index.js | 2 +- 11 files changed, 38 insertions(+), 34 deletions(-) diff --git a/packages/client/src/components/dialogs/DownloadDialog/StyledDownloadDialog.js b/packages/client/src/components/dialogs/DownloadDialog/StyledDownloadDialog.js index 2e05754675..57e5d7d940 100644 --- a/packages/client/src/components/dialogs/DownloadDialog/StyledDownloadDialog.js +++ b/packages/client/src/components/dialogs/DownloadDialog/StyledDownloadDialog.js @@ -67,7 +67,7 @@ const StyledDownloadContent = styled.div` isOpen ? "rotate(270deg)" : "rotate(90deg)"}; svg { path { - fill: #333; + fill: ${(props) => props.theme.downloadDialog.iconFill}; } } } diff --git a/packages/client/src/pages/Home/InfoPanel/Body/views/Members/sub-components/Styled.js b/packages/client/src/pages/Home/InfoPanel/Body/views/Members/sub-components/Styled.js index 4581f9bc23..7a19384ebb 100644 --- a/packages/client/src/pages/Home/InfoPanel/Body/views/Members/sub-components/Styled.js +++ b/packages/client/src/pages/Home/InfoPanel/Body/views/Members/sub-components/Styled.js @@ -36,7 +36,7 @@ const StyledCrossIcon = styled(CrossReactSvg)` g { path { - fill: #657077; + fill: ${({ theme }) => theme.infoPanel.members.crossFill}; } } diff --git a/packages/client/src/pages/PortalSettings/categories/common/Branding/companyInfoSettings.js b/packages/client/src/pages/PortalSettings/categories/common/Branding/companyInfoSettings.js index 2faac6b5fe..4d2af69b2f 100644 --- a/packages/client/src/pages/PortalSettings/categories/common/Branding/companyInfoSettings.js +++ b/packages/client/src/pages/PortalSettings/categories/common/Branding/companyInfoSettings.js @@ -49,13 +49,18 @@ import { saveToSessionStorage, getFromSessionStorage } from "../../../utils"; const StyledComponent = styled.div` .link { font-weight: 600; - border-bottom: 1px dashed #333333; - border-color: ${(props) => !props.isSettingPaid && "#A3A9AE"}; + border-bottom: ${(props) => + props.theme.client.settings.common.companyInfo.border}; + border-color: ${(props) => + !props.isSettingPaid && + props.theme.client.settings.common.companyInfo.color}; } .description, .link { - color: ${(props) => !props.isSettingPaid && "#A3A9AE"}; + color: ${(props) => + !props.isSettingPaid && + props.theme.client.settings.common.companyInfo.color}; } .text-input { diff --git a/packages/client/src/pages/PortalSettings/categories/common/appearance.js b/packages/client/src/pages/PortalSettings/categories/common/appearance.js index 2e852c8ef7..feda49a07a 100644 --- a/packages/client/src/pages/PortalSettings/categories/common/appearance.js +++ b/packages/client/src/pages/PortalSettings/categories/common/appearance.js @@ -54,6 +54,7 @@ import { isMobile } from "@docspace/shared/utils"; import { DeviceType } from "@docspace/shared/enums"; import { ModalDialog } from "@docspace/shared/components/modal-dialog"; import { ColorPicker } from "@docspace/shared/components/color-picker"; +import { globalColors } from "@docspace/shared/themes"; const Appearance = (props) => { const { @@ -469,8 +470,8 @@ const Appearance = (props) => { ]); const getTextColor = (color) => { - const black = "#333333"; - const white = "#FFFFFF"; + const black = globalColors.black; + const white = globalColors.white; const rgba = hexRgb(color); diff --git a/packages/client/src/pages/PortalSettings/categories/data-import/NextCloudWorkspace/index.js b/packages/client/src/pages/PortalSettings/categories/data-import/NextCloudWorkspace/index.js index 093257c697..3359cc8d42 100644 --- a/packages/client/src/pages/PortalSettings/categories/data-import/NextCloudWorkspace/index.js +++ b/packages/client/src/pages/PortalSettings/categories/data-import/NextCloudWorkspace/index.js @@ -148,11 +148,7 @@ const NextcloudWorkspace = (props) => { return ( <> - + {t("Settings:AboutDataImport", { productName: PRODUCT_NAME, organizationName, diff --git a/packages/client/src/pages/PortalSettings/categories/developer-tools/JavascriptSDK/presets/StyledPresets.js b/packages/client/src/pages/PortalSettings/categories/developer-tools/JavascriptSDK/presets/StyledPresets.js index ec93b8a758..54d8d352c7 100644 --- a/packages/client/src/pages/PortalSettings/categories/developer-tools/JavascriptSDK/presets/StyledPresets.js +++ b/packages/client/src/pages/PortalSettings/categories/developer-tools/JavascriptSDK/presets/StyledPresets.js @@ -46,7 +46,7 @@ export const SDKContainer = styled(Box)` .linkHelp { display: inline; - color: "#657077"; + color: ${(props) => props.theme.sdkPresets.linkHelpColor}; } `; @@ -273,6 +273,10 @@ export const Preview = styled(Box)` min-width: 660px; flex-direction: row; + .preview-description { + color: ${(props) => props.theme.sdkPresets.secondaryColor}; + } + @media ${tablet} { margin-top: 0; min-width: 0; diff --git a/packages/client/src/pages/PortalSettings/categories/developer-tools/JavascriptSDK/sub-components/CodeBlock.js b/packages/client/src/pages/PortalSettings/categories/developer-tools/JavascriptSDK/sub-components/CodeBlock.js index 5b93668367..f7a0e15785 100644 --- a/packages/client/src/pages/PortalSettings/categories/developer-tools/JavascriptSDK/sub-components/CodeBlock.js +++ b/packages/client/src/pages/PortalSettings/categories/developer-tools/JavascriptSDK/sub-components/CodeBlock.js @@ -30,7 +30,7 @@ import styled from "styled-components"; import CodeMirror from "@uiw/react-codemirror"; import { javascript } from "@codemirror/lang-javascript"; import { githubLightInit, githubDarkInit } from "@uiw/codemirror-theme-github"; -import { Base } from "@docspace/shared/themes"; +import { Base, globalColors } from "@docspace/shared/themes"; const StyledContainer = styled.div` border: 1px solid ${(props) => props.theme.plugins.borderColor}; @@ -49,23 +49,23 @@ const CodeBlock = ({ config }) => { const baseTheme = githubLightInit({ settings: { - background: "#FFFFFF", - caret: "#000000", - lineHighlight: "#F3F4F4", - gutterBorder: "#F8F9F9", - gutterBackground: "#F8F9F9", - gutterForeground: "#333333", + background: globalColors.white, + caret: globalColors.darkBlack, + lineHighlight: globalColors.lightGrayHover, + gutterBorder: globalColors.grayLight, + gutterBackground: globalColors.grayLight, + gutterForeground: globalColors.black, }, }); const darkTheme = githubDarkInit({ settings: { - background: "#282828", - caret: "#FFFFFF", - lineHighlight: "#3D3D3D", - gutterBorder: "#242424", - gutterBackground: "#242424", - gutterForeground: "#ADADAD", + background: globalColors.darkGrayLight, + caret: globalColors.white, + lineHighlight: globalColors.lightDarkGrayHover, + gutterBorder: globalColors.grayDarkMid, + gutterBackground: globalColors.grayDarkMid, + gutterForeground: globalColors.darkGrayDark, }, }); diff --git a/packages/client/src/pages/PortalSettings/categories/developer-tools/JavascriptSDK/sub-components/CodeToInsert.js b/packages/client/src/pages/PortalSettings/categories/developer-tools/JavascriptSDK/sub-components/CodeToInsert.js index 901cd448f9..9e07489851 100644 --- a/packages/client/src/pages/PortalSettings/categories/developer-tools/JavascriptSDK/sub-components/CodeToInsert.js +++ b/packages/client/src/pages/PortalSettings/categories/developer-tools/JavascriptSDK/sub-components/CodeToInsert.js @@ -31,19 +31,19 @@ import CodeBlock from "../sub-components/CodeBlock"; import { CategorySubHeader, CodeWrapper } from "../presets/StyledPresets"; import { PRODUCT_NAME } from "@docspace/shared/constants"; -export const CodeToInsert = ({ t, theme, codeBlock, config }) => ( +export const CodeToInsert = ({ t, codeBlock, config }) => ( {`HTML ${t("CodeTitle")}`} - + {t("HtmlCodeDescription", { productName: PRODUCT_NAME })}