Client: use colors from theme

This commit is contained in:
Viktor Fomin 2024-06-20 10:33:22 +03:00
parent b5de6064a5
commit cca52d5b1f
11 changed files with 36 additions and 19 deletions

View File

@ -24,8 +24,10 @@
// content are licensed under the terms of the Creative Commons Attribution-ShareAlike 4.0
// International. See the License terms at http://creativecommons.org/licenses/by-sa/4.0/legalcode
const ORANGE = "#F97A0B";
const RED = "#F2665A";
import { globalColors } from "@docspace/shared/themes";
const ORANGE = globalColors.mainOrange;
const RED = globalColors.mainRed;
export const getSaasBar = (
t,

View File

@ -89,8 +89,9 @@ const StyledBody = styled.div`
}
.embedding-panel_link_active {
color: #ffffff;
background: #265a8f;
color: ${(props) => props.theme.filesPanels.embedding.linkColor};
background: ${(props) =>
props.theme.filesPanels.embedding.linkBackground};
}
}

View File

@ -156,8 +156,9 @@ export const GroupsRow = styled(Row)`
font-size: 12px;
font-weight: 700;
line-height: 16px;
background: #eceef1;
color: #333;
background: ${(props) =>
props.theme.filesSection.tableView.row.backgroundGroup};
color: ${(props) => props.theme.filesSection.tableView.row.color};
border-radius: 50%;
}
`;

View File

@ -52,6 +52,7 @@ import {
import isEqual from "lodash/isEqual";
import { DeviceType, WhiteLabelLogoType } from "@docspace/shared/enums";
import { globalColors } from "@docspace/shared/themes";
const WhiteLabel = (props) => {
const {
@ -162,7 +163,7 @@ const WhiteLabel = (props) => {
options.height,
options.text,
options.fontSize,
isDocsEditorName ? "#fff" : "#000",
isDocsEditorName ? globalColors.white : globalColors.darkBlack,
options.alignCenter,
);
const logoDark = generateLogo(
@ -170,7 +171,7 @@ const WhiteLabel = (props) => {
options.height,
options.text,
options.fontSize,
"#fff",
globalColors.white,
options.alignCenter,
);
newLogos[i].path.light = logoLight;

View File

@ -41,6 +41,7 @@ import {
RowContainer,
} from "../presets/StyledPresets";
import { PRODUCT_NAME } from "@docspace/shared/constants";
import { globalColors } from "@docspace/shared/themes";
export const MainElementParameter = ({
t,
@ -118,7 +119,7 @@ export const MainElementParameter = ({
<ColorInput
scale
handleChange={setButtonColor}
defaultColor={"#5299E0"}
defaultColor={globalColors.lightSecondMain}
/>
</ControlsGroup>
<ControlsGroup>

View File

@ -111,7 +111,7 @@ const InfoBar = styled.div`
.header-icon {
svg {
path {
fill: #ed7309;
fill: ${(props) => props.theme.infoBar.iconFill};
}
}
}

View File

@ -31,7 +31,7 @@ import styled, { css } from "styled-components";
import { Box } from "@docspace/shared/components/box";
import { Text } from "@docspace/shared/components/text";
import ConsumerToggle from "./consumerToggle";
import { Base } from "@docspace/shared/themes";
import { Base, globalColors } from "@docspace/shared/themes";
import { thirdpartiesLogo } from "@docspace/shared/utils/image-thirdparties";
const StyledItem = styled.div`
@ -53,17 +53,17 @@ const StyledBox = styled(Box)`
!props.theme.isBase &&
css`
path {
fill: #ffffff;
fill: ${globalColors.white};
opacity: 1;
}
${props.isLinkedIn &&
css`
path:nth-child(8) {
fill: #333333;
fill: ${globalColors.black};
opacity: 1;
}
path:nth-child(9) {
fill: #333333;
fill: ${globalColors.black};
opacity: 1;
}
`}

View File

@ -63,11 +63,15 @@ const StyledBody = styled.div`
css`
svg {
path {
fill: #adadad !important;
fill: ${(props) =>
props.theme.client.settings.payment.benefitsContainer
.iconsColor} !important;
}
mask + path {
fill: none !important;
stroke: #adadad !important;
stroke: ${(props) =>
props.theme.client.settings.payment.benefitsContainer
.iconsColor} !important;
}
}
`}

View File

@ -35,6 +35,7 @@ import {
StyledFolderTagSection,
} from "../StyledComponent";
import { getConvertedSize } from "@docspace/shared/utils/common";
import { globalColors } from "@docspace/shared/themes";
const calculateSize = (size, common) => {
if (common === -1) return 0;
@ -51,7 +52,12 @@ const getTags = (
usedPortalSpace,
) => {
const array = [];
const colors = ["#13B7EC", "#22C386", "#FF9933", "#FFD30F"];
const colors = [
globalColors.mainBlueLight,
globalColors.secondGreen,
globalColors.secondOrange,
globalColors.mainYellow,
];
let i = 0;
let commonSize = standalone ? tenantCustomQuota : maxTotalSizeByQuota;

View File

@ -43,7 +43,7 @@ export const commonSettingsStyles = css`
}
.category-item-description {
color: #555f65;
color: ${(props) => props.theme.client.settings.descriptionColor};
font-size: 12px;
max-width: 1024px;
}

View File

@ -27,13 +27,14 @@
import axios from "axios";
import config from "PACKAGE_FILE";
import { combineUrl } from "@docspace/shared/utils/combineUrl";
import { globalColors } from "@docspace/shared/themes";
export const generateLogo = (
width,
height,
text,
fontSize = 18,
fontColor = "#000",
fontColor = globalColors.darkBlack,
alignCenter,
) => {
const canvas = document.createElement("canvas");