Client: use colors from theme
This commit is contained in:
parent
2e66688239
commit
7dd068611d
@ -67,7 +67,7 @@ const StyledDownloadContent = styled.div`
|
||||
isOpen ? "rotate(270deg)" : "rotate(90deg)"};
|
||||
svg {
|
||||
path {
|
||||
fill: #333;
|
||||
fill: ${(props) => props.theme.downloadDialog.iconFill};
|
||||
}
|
||||
}
|
||||
}
|
||||
|
||||
@ -36,7 +36,7 @@ const StyledCrossIcon = styled(CrossReactSvg)`
|
||||
|
||||
g {
|
||||
path {
|
||||
fill: #657077;
|
||||
fill: ${({ theme }) => theme.infoPanel.members.crossFill};
|
||||
}
|
||||
}
|
||||
|
||||
|
||||
@ -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 {
|
||||
|
||||
@ -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);
|
||||
|
||||
|
||||
@ -148,11 +148,7 @@ const NextcloudWorkspace = (props) => {
|
||||
return (
|
||||
<>
|
||||
<NextcloudWrapper>
|
||||
<Text
|
||||
className="data-import-description"
|
||||
lineHeight="20px"
|
||||
color={theme.isBase ? "#657077" : "#ADADAD"}
|
||||
>
|
||||
<Text className="data-import-description" lineHeight="20px">
|
||||
{t("Settings:AboutDataImport", {
|
||||
productName: PRODUCT_NAME,
|
||||
organizationName,
|
||||
|
||||
@ -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;
|
||||
|
||||
@ -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,
|
||||
},
|
||||
});
|
||||
|
||||
|
||||
@ -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 }) => (
|
||||
<CodeWrapper height="fit-content">
|
||||
<CategorySubHeader className="copy-window-code">
|
||||
{`HTML ${t("CodeTitle")}`}
|
||||
</CategorySubHeader>
|
||||
<Text lineHeight="20px" color={theme.isBase ? "#657077" : "#ADADAD"}>
|
||||
<Text lineHeight="20px" className="preview-description">
|
||||
{t("HtmlCodeDescription", { productName: PRODUCT_NAME })}
|
||||
</Text>
|
||||
<Textarea value={codeBlock} heightTextArea={153} />
|
||||
<CategorySubHeader className="copy-window-code">
|
||||
{`JavaScript ${t("CodeTitle")}`}
|
||||
</CategorySubHeader>
|
||||
<Text lineHeight="20px" color={theme.isBase ? "#657077" : "#ADADAD"}>
|
||||
<Text lineHeight="20px" className="preview-description">
|
||||
{t("JavaScriptCodeDescription", { productName: PRODUCT_NAME })}
|
||||
</Text>
|
||||
<CodeBlock config={config} />
|
||||
|
||||
@ -51,9 +51,7 @@ export const PreviewBlock = ({
|
||||
|
||||
const codeBlock = `<div id="${frameId}">Fallback text</div>\n<script src="${scriptUrl}${params}"></script>`;
|
||||
|
||||
const code = (
|
||||
<CodeToInsert t={t} theme={theme} codeBlock={codeBlock} config={config} />
|
||||
);
|
||||
const code = <CodeToInsert t={t} codeBlock={codeBlock} config={config} />;
|
||||
const dataTabs = [
|
||||
{
|
||||
id: "preview",
|
||||
|
||||
@ -89,7 +89,7 @@ const ChipsContainer = styled.div`
|
||||
const InfoBar = styled.div`
|
||||
display: flex;
|
||||
background-color: ${(props) => props.theme.infoBar.background};
|
||||
color: #333;
|
||||
color: ${(props) => props.theme.infoBar.textColor};
|
||||
font-size: 12px;
|
||||
padding: 12px 16px;
|
||||
border-radius: 6px;
|
||||
|
||||
@ -131,7 +131,7 @@ const MainProfile = (props) => {
|
||||
: DefaultUserAvatarMax;
|
||||
|
||||
const tooltipLanguage = (
|
||||
<Text as="div" fontSize="12px" color="#333333">
|
||||
<Text as="div" fontSize="12px">
|
||||
<Trans t={t} i18nKey="NotFoundLanguage" ns="Common">
|
||||
"In case you cannot find your language in the list of the available
|
||||
ones, feel free to write to us at
|
||||
|
||||
Loading…
Reference in New Issue
Block a user