Shared: use colors from theme
This commit is contained in:
parent
a41546cbb5
commit
dedbc057ae
@ -64,7 +64,7 @@ const InputWrapper = styled.div`
|
||||
}
|
||||
|
||||
input:focus {
|
||||
border: 1px solid #5299e0;
|
||||
border: ${(props) => props.theme.codeInput.focusBorder};
|
||||
outline: none;
|
||||
}
|
||||
|
||||
|
@ -26,6 +26,7 @@
|
||||
|
||||
import styled, { css } from "styled-components";
|
||||
import { isMobileOnly } from "react-device-detect";
|
||||
import { globalColors } from "../../themes";
|
||||
|
||||
const Wrapper = styled.div`
|
||||
.save-button {
|
||||
@ -74,19 +75,23 @@ const Wrapper = styled.div`
|
||||
width: 30px;
|
||||
height: 30px;
|
||||
box-shadow: 0px 3px 10px rgba(0, 0, 0, 0.25);
|
||||
border: 8px solid #fff;
|
||||
border: 8px solid ${globalColors.white};
|
||||
}
|
||||
|
||||
.hex-value {
|
||||
height: 32px;
|
||||
outline: none;
|
||||
padding: 6px 8px;
|
||||
border: 1px solid ${(props) => (props.theme.isBase ? "#d0d5da" : "#474747")};
|
||||
border: 1px solid
|
||||
${(props) =>
|
||||
props.theme.isBase
|
||||
? globalColors.grayStrong
|
||||
: globalColors.grayDarkStrong};
|
||||
border-radius: 3px;
|
||||
width: 100%;
|
||||
box-sizing: border-box;
|
||||
background: ${(props) => !props.theme.isBase && "#282828"};
|
||||
color: ${(props) => !props.theme.isBase && "#5C5C5C"};
|
||||
background: ${(props) => !props.theme.isBase && globalColors.darkGrayLight};
|
||||
color: ${(props) => !props.theme.isBase && globalColors.grayDarkText};
|
||||
}
|
||||
|
||||
.hex-value-label {
|
||||
|
@ -25,7 +25,7 @@
|
||||
// International. See the License terms at http://creativecommons.org/licenses/by-sa/4.0/legalcode
|
||||
|
||||
import styled, { css } from "styled-components";
|
||||
import { Base } from "../../themes";
|
||||
import { Base, globalColors } from "../../themes";
|
||||
import { mobile } from "../../utils";
|
||||
|
||||
import { Calendar } from "../calendar";
|
||||
@ -106,7 +106,7 @@ const Wrapper = styled.div`
|
||||
height: 12px;
|
||||
padding: 0 10px 0 2px;
|
||||
path {
|
||||
fill: #657077;
|
||||
fill: ${globalColors.lightGrayDark};
|
||||
}
|
||||
}
|
||||
}
|
||||
|
@ -26,7 +26,7 @@
|
||||
|
||||
import styled, { css } from "styled-components";
|
||||
import { getCorrectFourValuesStyle } from "../../utils";
|
||||
import { Base } from "../../themes";
|
||||
import { Base, globalColors } from "../../themes";
|
||||
|
||||
const Selectors = styled.div<{ hasError?: boolean }>`
|
||||
position: relative;
|
||||
@ -56,7 +56,8 @@ const TimeCell = styled.span<{ hasError?: boolean }>`
|
||||
width: 73px;
|
||||
height: 32px;
|
||||
|
||||
background-color: ${(props) => (props.theme.isBase ? "#eceef1" : "#242424")};
|
||||
background-color: ${(props) =>
|
||||
props.theme.isBase ? globalColors.grayLightMid : globalColors.grayDarkMid};
|
||||
border-radius: 3px;
|
||||
|
||||
padding: 6px 8px;
|
||||
|
@ -50,7 +50,7 @@ const StyledErrorContainer = styled.div<{ isEditor: boolean }>`
|
||||
box-sizing: border-box;
|
||||
|
||||
.error_description_link {
|
||||
color: #2da7db;
|
||||
color: ${(props) => props.theme.errorContainer.linkColor};
|
||||
font-size: 13px;
|
||||
font-weight: 600;
|
||||
}
|
||||
|
@ -49,13 +49,13 @@ const FillingStatusContainer = styled.div<{
|
||||
}
|
||||
|
||||
.status-interrupted-text {
|
||||
color: ${(props) => props.isInterrupted && "#F2675A"};
|
||||
color: ${(props) => props.isInterrupted && globalColors.mainRed};
|
||||
}
|
||||
|
||||
.status-interrupted-icon {
|
||||
circle,
|
||||
path {
|
||||
stroke: ${(props) => props.isInterrupted && "#F2675A"};
|
||||
stroke: ${(props) => props.isInterrupted && globalColors.mainRed};
|
||||
}
|
||||
}
|
||||
|
||||
|
@ -65,7 +65,6 @@ const ProgressBarMobile = ({
|
||||
<Text
|
||||
className="progress-header"
|
||||
fontSize="14px"
|
||||
// color="#657077"
|
||||
onClick={onClickHeaderAction}
|
||||
truncate
|
||||
>
|
||||
|
@ -39,6 +39,7 @@ import { BarConfig, SnackbarProps } from "./Snackbar.types";
|
||||
import { StyledAction, StyledSnackBar, StyledIframe } from "./Snackbar.styled";
|
||||
import StyledCrossIcon from "./SnackbarAction.styled";
|
||||
import StyledLogoIcon from "./SnackbarLogo.styled.ts";
|
||||
import { globalColors } from "../../themes";
|
||||
|
||||
class SnackBar extends React.Component<SnackbarProps, { isLoaded: boolean }> {
|
||||
static show(barConfig: BarConfig) {
|
||||
@ -128,7 +129,7 @@ class SnackBar extends React.Component<SnackbarProps, { isLoaded: boolean }> {
|
||||
text,
|
||||
headerText,
|
||||
btnText,
|
||||
textColor = "#000",
|
||||
textColor = globalColors.darkBlack,
|
||||
showIcon,
|
||||
fontSize,
|
||||
fontWeight,
|
||||
@ -139,7 +140,7 @@ class SnackBar extends React.Component<SnackbarProps, { isLoaded: boolean }> {
|
||||
isCampaigns,
|
||||
onAction,
|
||||
sectionWidth,
|
||||
backgroundColor = "#F7E6BE",
|
||||
backgroundColor = globalColors.lightToastAlert,
|
||||
...rest
|
||||
} = this.props;
|
||||
|
||||
|
@ -31,13 +31,14 @@ import ShareTwitterReactSvgUrl from "PUBLIC_DIR/images/share.twitter.react.svg?u
|
||||
import ShareLinkedinReactSvgUrl from "PUBLIC_DIR/images/share.linkedin.react.svg?url";
|
||||
import ShareMicrosoftReactSvgUrl from "PUBLIC_DIR/images/share.microsoft.react.svg?url";
|
||||
import ShareZoomReactSvgUrl from "PUBLIC_DIR/images/share.zoom.react.svg?url";
|
||||
import { globalColors } from "../themes/globalColors";
|
||||
|
||||
export const LOADER_STYLE = Object.freeze({
|
||||
title: "",
|
||||
width: "100%",
|
||||
height: "32",
|
||||
backgroundColor: "#000000",
|
||||
foregroundColor: "#000000",
|
||||
backgroundColor: globalColors.darkBlack,
|
||||
foregroundColor: globalColors.darkBlack,
|
||||
backgroundOpacity: 0.1,
|
||||
foregroundOpacity: 0.15,
|
||||
borderRadius: "3",
|
||||
|
@ -27,6 +27,7 @@
|
||||
/* eslint-disable no-console */
|
||||
import axios from "axios";
|
||||
import isEqual from "lodash/isEqual";
|
||||
import { globalColors } from "../themes";
|
||||
|
||||
export type TWhiteLabel = {
|
||||
path: { light: string; dark: string };
|
||||
@ -40,7 +41,7 @@ export const generateLogo = (
|
||||
text: string,
|
||||
alignCenter: boolean,
|
||||
fontSize: number = 18,
|
||||
fontColor: string = "#000",
|
||||
fontColor: string = globalColors.darkBlack,
|
||||
) => {
|
||||
const canvas = document.createElement("canvas");
|
||||
canvas.width = width;
|
||||
@ -179,7 +180,7 @@ export const getLogosAsText = (
|
||||
options.text,
|
||||
options.alignCenter || false,
|
||||
options.fontSize,
|
||||
isDocsEditorName ? "#fff" : "#000",
|
||||
isDocsEditorName ? globalColors.white : globalColors.darkBlack,
|
||||
);
|
||||
const logoDark = generateLogo(
|
||||
options.width,
|
||||
@ -187,7 +188,7 @@ export const getLogosAsText = (
|
||||
options.text,
|
||||
options.alignCenter || false,
|
||||
options.fontSize,
|
||||
"#fff",
|
||||
globalColors.white,
|
||||
);
|
||||
newLogos[i].path.light = logoLight;
|
||||
newLogos[i].path.dark = logoDark;
|
||||
|
Loading…
Reference in New Issue
Block a user