Client: use colors from theme

This commit is contained in:
Viktor Fomin 2024-06-19 16:32:58 +03:00
parent a132cd12f9
commit c8ea1e2939
6 changed files with 26 additions and 11 deletions

View File

@ -48,6 +48,8 @@ import PluginSDK from "./PluginSDK";
import { Badge } from "@docspace/shared/components/badge";
import { SECTION_HEADER_HEIGHT } from "@docspace/shared/components/section/Section.constants";
import { globalColors } from "@docspace/shared/themes";
const DeveloperToolsWrapper = (props) => {
const { loadBaseInfo, currentDeviceType } = props;
const navigate = useNavigate();
@ -77,7 +79,7 @@ const DeveloperToolsWrapper = (props) => {
<Badge
label={t("Common:BetaLabel")}
backgroundColor="#533ED1"
backgroundColor={globalColors.mainPurple}
fontSize="9px"
borderRadius="50px"
noHover={true}

View File

@ -48,6 +48,16 @@ const StyledCertificateDialogBody = styled(Box)`
border-radius: 3px;
padding: 4px;
margin-bottom: 8px;
& > p {
color: ${(props) =>
props.theme.client.settings.integration.ldap.textColor};
}
}
.ldap-error-text {
color: ${(props) =>
props.theme.client.settings.integration.ldap.errorColor};
}
`;

View File

@ -114,34 +114,34 @@ const CertificateDialog = ({
</Text>
</Box>
<Box className="ldap-settings-crt-details">
<Text as="p" color="#A3A9AE">
<Text as="p">
{t("LdapSettingsSerialNumber")}: {cerficateIssue.serialNumber}
</Text>
<Text as="p" color="#A3A9AE">
<Text as="p">
{t("LdapSettingsIssuerName")}: {cerficateIssue.issuerName}
</Text>
<Text as="p" color="#A3A9AE">
<Text as="p">
{t("LdapSettingsSubjectName")}: {cerficateIssue.subjectName}
</Text>
<Text as="p" color="#A3A9AE">
<Text as="p">
{t("LdapSettingsValidFrom")}: {cerficateIssue.validFrom}
</Text>
<Text as="p" color="#A3A9AE">
<Text as="p">
{t("LdapSettingsValidUntil")}: {cerficateIssue.validUntil}
</Text>
<Text as="p" color="#A3A9AE">
<Text as="p">
{t("LdapSettingsUniqueHash")}: {cerficateIssue.uniqueHash}
</Text>
</Box>
{hasError && (
<Box>
{cerficateIssue.errors.map((err) => (
<Text color="#F24724">{mapError(err)}</Text>
<Text className="ldap-error-text">{mapError(err)}</Text>
))}
</Box>
)}

View File

@ -32,6 +32,7 @@ import { Text } from "@docspace/shared/components/text";
import { ToggleButton } from "@docspace/shared/components/toggle-button";
import { Badge } from "@docspace/shared/components/badge";
import { toastr } from "@docspace/shared/components/toast";
import { globalColors } from "@docspace/shared/themes";
const borderProp = { radius: "6px" };
@ -92,7 +93,7 @@ const ToggleAutoSync = ({
</Text>
{!isLdapAvailable && (
<Badge
backgroundColor="#EDC409"
backgroundColor={globalColors.favoritesStatus}
label={t("Common:Paid")}
className="toggle-caption_title_badge"
isPaidBadge={true}

View File

@ -32,6 +32,7 @@ import { Text } from "@docspace/shared/components/text";
import { ToggleButton } from "@docspace/shared/components/toggle-button";
import { Badge } from "@docspace/shared/components/badge";
import { PRODUCT_NAME } from "@docspace/shared/constants";
import { globalColors } from "@docspace/shared/themes";
const borderProp = { radius: "6px" };
@ -87,7 +88,7 @@ const ToggleLDAP = ({
</Text>
{!isLdapAvailable && (
<Badge
backgroundColor="#EDC409"
backgroundColor={globalColors.favoritesStatus}
label={t("Common:Paid")}
className="toggle-caption_title_badge"
isPaidBadge={true}

View File

@ -42,6 +42,7 @@ import PluginPage from "./Plugins";
import { Badge } from "@docspace/shared/components/badge";
import { Box } from "@docspace/shared/components/box";
import { SECTION_HEADER_HEIGHT } from "@docspace/shared/components/section/Section.constants";
import { globalColors } from "@docspace/shared/themes";
const IntegrationWrapper = (props) => {
const {
@ -103,7 +104,7 @@ const IntegrationWrapper = (props) => {
<Badge
label={t("Common:BetaLabel")}
backgroundColor="#533ED1"
backgroundColor={globalColors.mainPurple}
fontSize="9px"
borderRadius="50px"
noHover={true}