Client: use colors from theme
This commit is contained in:
parent
b5de6064a5
commit
cca52d5b1f
@ -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,
|
||||
|
@ -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};
|
||||
}
|
||||
}
|
||||
|
||||
|
@ -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%;
|
||||
}
|
||||
`;
|
||||
|
@ -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;
|
||||
|
@ -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>
|
||||
|
@ -111,7 +111,7 @@ const InfoBar = styled.div`
|
||||
.header-icon {
|
||||
svg {
|
||||
path {
|
||||
fill: #ed7309;
|
||||
fill: ${(props) => props.theme.infoBar.iconFill};
|
||||
}
|
||||
}
|
||||
}
|
||||
|
@ -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;
|
||||
}
|
||||
`}
|
||||
|
@ -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;
|
||||
}
|
||||
}
|
||||
`}
|
||||
|
@ -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;
|
||||
|
@ -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;
|
||||
}
|
||||
|
@ -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");
|
||||
|
Loading…
Reference in New Issue
Block a user