IlyaSobolev/DocSpace-client
1
0
Fork 0
Code Issues Pull Requests Actions Packages Projects Releases Wiki Activity

Client: use colors from theme

Browse Source
This commit is contained in:
Viktor Fomin 2024-06-19 16:24:36 +03:00
parent 728275a370
commit 5eec1dc070
11 changed files with 82 additions and 53 deletions
Show Stats Download Patch File Download Diff File Expand all files Collapse all files

2
packages/client/src/pages/Home/InfoPanel/Body/styles/groups.styled.ts
View File

@ -83,7 +83,7 @@ export const GroupsContent = styled.div<{}>`
margin-inline-start: auto;
.group-manager-tag {
white-space: nowrap;
color: #d0d5da;
color: ${(props) => props.theme.infoPanel.groups.tagColor};
font-size: 12px;
font-weight: 600;
line-height: 16px;

3
packages/client/src/pages/PortalSettings/categories/common/Appearance/StyledApperance.js
View File

@ -81,7 +81,8 @@ const StyledComponent = styled.div`
}
.add-theme {
background: #d0d5da;
background: ${(props) =>
props.theme.client.settings.common.appearance.addThemeBackground};
padding-top: 16px;
${(props) =>
props.theme.interfaceDirection === "rtl"

77
packages/client/src/pages/PortalSettings/categories/common/Appearance/StyledPreview.js
View File

@ -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 "@docspace/shared/themes";
import { Base, globalColors } from "@docspace/shared/themes";
import {
getCorrectBorderRadius,
getCorrectFourValuesStyle,
@ -44,7 +44,9 @@ const StyledComponent = styled.div`
height: 100%;
background: ${(props) =>
props.themePreview === "Light" ? "#f8f9f9" : "#292929"};
props.themePreview === "Light"
? globalColors.grayLight
: globalColors.darkGrayLight};
${(props) =>
props.withBorder &&
css`
@ -69,7 +71,9 @@ const StyledComponent = styled.div`
width: 20px;
height: 1px;
background: ${(props) =>
props.themePreview === "Light" ? "#eceef1" : "#474747"};
props.themePreview === "Light"
? globalColors.grayLightMid
: globalColors.grayDarkStrong};
margin: 0 20px 31px 20px;
}
@ -81,7 +85,8 @@ const StyledComponent = styled.div`
circle {
fill: ${(props) => props.colorPreview};
stroke: ${(props) => props.themePreview === "Dark" && "#292929"};
stroke: ${(props) =>
props.themePreview === "Dark" && globalColors.darkGrayLight};
}
}
@ -136,7 +141,7 @@ const StyledComponent = styled.div`
`}
`}
background: ${(props) =>
props.themePreview === "Light" ? "#FFFFFF" : "#333333"};
props.themePreview === "Light" ? globalColors.white : globalColors.black};
}
.section-header {
@ -217,7 +222,7 @@ const StyledComponent = styled.div`
.color-badge rect {
fill: ${(props) =>
props.themePreview === "Dark" && props.selectThemeId === 7
? "#FFFFFF"
? globalColors.white
: props.colorPreview} !important;
}
@ -225,7 +230,7 @@ const StyledComponent = styled.div`
fill: ${(props) =>
props.themePreview === "Light"
? `${props.colorPreview} !important`
: `#FFFFFF !important`};
: `${globalColors.white} !important`};
}
.menu-section {
@ -241,7 +246,9 @@ const StyledComponent = styled.div`
.loaders-theme {
background-color: ${(props) =>
props.themePreview === "Light" ? "#FFF" : "#858585"};
props.themePreview === "Light"
? globalColors.white
: globalColors.grayDark};
border-radius: 3px;
}
@ -289,7 +296,7 @@ const StyledComponent = styled.div`
padding-top: 9px;
padding-bottom: 9px !important;
background: ${(props) =>
props.themePreview === "Light" ? "#f0f0f0" : "#333333"};
props.themePreview === "Light" ? globalColors.white : globalColors.black};
}
.section-tile {
@ -302,7 +309,9 @@ const StyledComponent = styled.div`
.border-color {
border-color: ${(props) =>
props.themePreview === "Light" ? "#d0d5da" : "#474747"};
props.themePreview === "Light"
? globalColors.grayStrong
: globalColors.grayDarkStrong};
}
.tile {
@ -315,7 +324,9 @@ const StyledComponent = styled.div`
.background {
background: ${(props) =>
props.themePreview === "Light" ? "#FFF" : "#292929"};
props.themePreview === "Light"
? globalColors.white
: globalColors.darkGrayLight};
}
.tile-name {
@ -411,7 +422,7 @@ const StyledComponent = styled.div`
fill: ${(props) =>
props.themePreview === "Light"
? `${props.colorPreview} !important`
: `#FFFFFF !important`};
: `${globalColors.white} !important`};
}
}
@ -420,7 +431,7 @@ const StyledComponent = styled.div`
}
.main-button_text {
color: #ffffff !important;
color: ${globalColors.white} !important;
}
`;
@ -465,10 +476,12 @@ const StyledMobilePreview = styled.div`
border-radius: 16px;
padding: 0px 16px;
background: ${({ themePreview }) =>
themePreview === "Light" ? "#FFFFFF" : "#333333"};
themePreview === "Light" ? globalColors.white : globalColors.black};
border: ${({ themePreview }) =>
themePreview === "Light" ? "1px solid #d0d5da" : "1px solid #474747"};
themePreview === "Light"
? `1px solid ${globalColors.grayStrong}`
: `1px solid ${globalColors.grayDarkStrong}`};
.section-search {
height: 30px;
@ -494,7 +507,7 @@ const StyledMobilePreview = styled.div`
.color-badge rect {
fill: ${(props) =>
props.themePreview === "Dark" && props.selectThemeId === 7
? "#FFFFFF"
? globalColors.white
: props.colorPreview} !important;
}
@ -502,7 +515,7 @@ const StyledMobilePreview = styled.div`
fill: ${(props) =>
props.themePreview === "Light"
? `${props.colorPreview} !important`
: `#FFFFFF !important`};
: `${globalColors.white} !important`};
}
.menu-section {
@ -513,33 +526,41 @@ const StyledMobilePreview = styled.div`
.loaders-theme {
background-color: ${(props) =>
props.themePreview === "Light" ? "#FFF" : "#545454"};
props.themePreview === "Light"
? globalColors.white
: globalColors.grayDark};
border-radius: 3px;
}
.loaders-tile-theme {
background: ${(props) =>
props.themePreview === "Light" ? "#F1F1F1" : "#333333"};
props.themePreview === "Light" ? globalColors.white : globalColors.black};
border-radius: 3px;
}
.loaders-tile-text-theme {
background: ${(props) =>
props.themePreview === "Light" ? "#D0D5DA" : "#858585"};
props.themePreview === "Light"
? globalColors.grayStrong
: globalColors.grayDark};
border-radius: 3px;
}
.loaders-theme-avatar {
background-color: ${(props) =>
props.themePreview === "Light" ? "#FFF" : "#545454"};
props.themePreview === "Light"
? globalColors.white
: globalColors.grayDark};
border-radius: 50px;
}
.border-color {
border-color: ${(props) =>
props.themePreview === "Light" ? "#d0d5da" : "#474747"};
props.themePreview === "Light"
? globalColors.grayStrong
: globalColors.grayDarkStrong};
}
.tile {
@ -552,7 +573,9 @@ const StyledMobilePreview = styled.div`
.background {
background: ${(props) =>
props.themePreview === "Light" ? "#FFF" : "#292929"};
props.themePreview === "Light"
? globalColors.white
: globalColors.darkGrayLight};
}
.tile-name {
@ -607,7 +630,7 @@ const StyledMobilePreview = styled.div`
fill: ${(props) =>
props.themePreview === "Light"
? `${props.colorPreview} !important`
: `#FFFFFF !important`};
: `${globalColors.white} !important`};
}
}
@ -626,7 +649,9 @@ const StyledMobilePreview = styled.div`
padding: 0 16px;
background: ${({ themePreview }) =>
themePreview === "Light" ? "#FFFFFF" : "#282828"};
themePreview === "Light"
? globalColors.white
: globalColors.darkGrayLight};
border-radius: 16px 16px 0px 0px;
}
@ -644,7 +669,7 @@ const StyledMobilePreview = styled.div`
.color-badge rect {
fill: ${({ themePreview, selectThemeId, colorPreview }) =>
themePreview === "Dark" && selectThemeId === 7
? "#FFFFFF"
? globalColors.white
: colorPreview} !important;
}
.section-badge {

2
packages/client/src/pages/PortalSettings/categories/data-import/NextCloudWorkspace/Stepper/StyledStepper.js
View File

@ -75,7 +75,7 @@ export const UsersInfoBlock = styled.div`
display: flex;
align-items: center;
max-width: 660px;
background: #f8f9f9;
background: ${(props) => props.theme.client.settings.migration.background};
padding: 12px 16px;
border-radius: 6px;
margin: 16px 0;

3
packages/client/src/pages/PortalSettings/categories/developer-tools/Webhooks/WebhookEventDetails/sub-components/RequestDetails.js
View File

@ -58,7 +58,8 @@ const ErrorMessageTooltip = styled.div`
width: 100%;
max-width: 1200px;
padding: 8px 12px;
background: #f7cdbe;
background: ${(props) =>
props.theme.client.settings.webhooks.toastBackground};
box-shadow: 0px 5px 20px rgba(4, 15, 27, 0.07);
border-radius: 6px;

12
packages/client/src/pages/PortalSettings/categories/developer-tools/Webhooks/WebhookEventDetails/sub-components/ResponseDetails.js
View File

@ -26,14 +26,16 @@
import React from "react";
import styled, { css } from "styled-components";
import { inject, observer } from "mobx-react";
import { useTranslation } from "react-i18next";
import json_beautifier from "csvjson-json_beautifier";
import { Textarea } from "@docspace/shared/components/textarea";
import { Button } from "@docspace/shared/components/button";
import { Text } from "@docspace/shared/components/text";
import { inject, observer } from "mobx-react";
import json_beautifier from "csvjson-json_beautifier";
import { isMobile } from "@docspace/shared/utils";
import { useTranslation } from "react-i18next";
import { globalColors } from "@docspace/shared/themes";
const DetailsWrapper = styled.div`
width: 100%;
@ -67,7 +69,7 @@ const LargePayloadStub = styled.div`
padding: 12px 10px;
margin-top: 4px;
background: #f8f9f9;
background: ${(props) => props.theme.client.settings.webhooks.background};
border: ${(props) => props.theme.client.settings.webhooks.border};
border-radius: 3px;
@ -139,7 +141,7 @@ const ResponseDetails = ({ eventDetails }) => {
</Text>
{responsePayload.length > 4000 || numberOfLines > 100 ? (
<LargePayloadStub>
<Text fontWeight={600} color="#657077">
<Text fontWeight={600} color={globalColors.lightGrayDark}>
{t("PayloadIsTooLarge")}
</Text>
<Button

12
packages/client/src/pages/PortalSettings/categories/developer-tools/Webhooks/WebhookHistory/sub-components/EmptyFilter.js
View File

@ -26,15 +26,15 @@
import React from "react";
import styled from "styled-components";
import { inject, observer } from "mobx-react";
import { useTranslation } from "react-i18next";
import EmptyFilterImg from "PUBLIC_DIR/images/empty_filter.react.svg?url";
import EmptyFilterDarkImg from "PUBLIC_DIR/images/empty_filter_dark.react.svg?url";
import ClearEmptyFilterIcon from "PUBLIC_DIR/images/clear.empty.filter.svg?url";
import { Text } from "@docspace/shared/components/text";
import { Link } from "@docspace/shared/components/link";
import { inject, observer } from "mobx-react";
import { useTranslation } from "react-i18next";
import { globalColors } from "@docspace/shared/themes";
const EmptyFilterWrapper = styled.div`
width: 100%;
@ -97,7 +97,9 @@ const EmptyFilter = (props) => {
</Text>
<Text
fontSize="12px"
color={theme.isBase ? "#555F65" : "rgba(255, 255, 255, 0.6)"}
color={
theme.isBase ? globalColors.grayText : "rgba(255, 255, 255, 0.6)"
}
>
{t("NoResultsMatched")}
</Text>
@ -108,7 +110,7 @@ const EmptyFilter = (props) => {
className="clearFilterIcon"
/>
<Link
color={theme.isBase ? "#657077" : "inherit"}
color={theme.isBase ? globalColors.lightGrayDark : "inherit"}
isHovered
fontWeight={600}
type="action"

4
packages/client/src/pages/PortalSettings/categories/developer-tools/Webhooks/WebhookHistory/sub-components/HistoryHeader.js
View File

@ -48,7 +48,7 @@ import { useParams } from "react-router-dom";
import { FloatingButton } from "@docspace/shared/components/floating-button";
import Base from "@docspace/shared/themes/base";
import { Base, globalColors } from "@docspace/shared/themes";
const HeaderContainer = styled.div`
position: sticky;
@ -114,7 +114,7 @@ const HeaderContainer = styled.div`
svg {
path {
fill: ${(props) =>
props.isDisabled ? "#d0d5da" : props.theme.color};
props.isDisabled ? globalColors.grayStrong : props.theme.color};
}
}
}

13
packages/client/src/pages/PortalSettings/categories/integration/LDAP/styled-components/StyledCerticateDialog.js
View File

@ -40,14 +40,11 @@ const StyledCertificateDialogBody = styled(Box)`
flex-direction: column;
gap: 4px;
background-color: ${(props) =>
props.theme.isBase ? "#f8f9f9" : "#474747"};
border: 1px solid
${(props) =>
props.hasError
? "#F24724"
: props.theme.isBase
? "#eceef1"
: "#474747"};
props.theme.client.settings.integration.ldap.certificateBackground};
border: ${(props) =>
props.hasError
? props.theme.client.settings.integration.ldap.errorBorder
: props.theme.client.settings.integration.ldap.border};
border-radius: 3px;
padding: 4px;
margin-bottom: 8px;

3
packages/client/src/pages/PortalSettings/categories/security/sub-components/HistoryMainContent.js
View File

@ -75,7 +75,8 @@ const MainContainer = styled.div`
.login-subheader {
font-size: 13px;
color: #657077;
color: ${(props) =>
props.theme.client.settings.security.loginHistory.subheaderColor};
}
.latest-text {

4
packages/client/src/pages/Profile/Section/Body/sub-components/main-profile/styled-main-profile.js
View File

@ -185,7 +185,7 @@ export const StyledInfo = styled.div`
min-width: 12px;
svg path {
fill: ${(props) => props.theme.isBase && `#657077`};
fill: ${(props) => props.theme.profile.main.iconFill};
}
}
@ -344,7 +344,7 @@ export const StyledInfo = styled.div`
min-width: 12px;
svg path {
fill: ${(props) => props.theme.isBase && `#657077`};
fill: ${(props) => props.theme.profile.main.iconFill};
}
}