Client: use colors from theme

This commit is contained in:
Viktor Fomin 2024-06-14 13:59:13 +05:00
parent 3d23c9a782
commit 592ca47ab8
11 changed files with 20 additions and 22 deletions

View File

@ -43,6 +43,7 @@ import { isDesktop } from "@docspace/shared/utils";
const StyledModal = styled(ModalDialogContainer)`
.backup-codes-counter {
margin-top: 16px;
color: ${(props) => props.theme.client.settings.security.tfa.textColor};
}
.backup-codes-print-link-wrapper {
@ -110,11 +111,7 @@ class BackupCodesDialogComponent extends React.Component {
{t("BackupCodesSecondDescription")}
</Text>
<Text
className="backup-codes-counter"
fontWeight={600}
color="#A3A9AE"
>
<Text className="backup-codes-counter" fontWeight={600}>
{backupCodesCount} {t("CodesCounter")}
</Text>

View File

@ -76,7 +76,7 @@ export const GroupMemberRow = styled.div<{}>`
svg {
path {
fill: #a3a9ae;
fill: ${(props) => props.theme.createEditGroupDialog.iconFill};
}
}
}

View File

@ -30,7 +30,8 @@ export const Header = styled.div`
width: 100%;
padding: 8px 0 12px 0;
color: #a3a9ae;
color: ${(props) =>
props.theme.createEditRoomDialog.commonParam.descriptionColor};
font-size: 14px;
font-weight: 600;
line-height: 16px;
@ -50,6 +51,6 @@ export const SelectGroupManager = styled.div<{}>`
font-size: 13px;
font-weight: 600;
line-height: 20px;
color: #a3a9ae;
color: ${(props) => props.theme.createEditGroupDialog.textColor};
}
`;

View File

@ -30,7 +30,8 @@ export const Header = styled.div`
width: 100%;
padding: 8px 0 12px 0;
color: #a3a9ae;
color: ${(props) =>
props.theme.createEditRoomDialog.commonParam.descriptionColor};
font-size: 14px;
font-weight: 600;
line-height: 16px;
@ -50,6 +51,6 @@ export const AddMembersButton = styled.div<{}>`
font-size: 13px;
font-weight: 600;
line-height: 20px;
color: #a3a9ae;
color: ${(props) => props.theme.createEditGroupDialog.textColor};
}
`;

View File

@ -32,10 +32,11 @@ import { HelpButton } from "@docspace/shared/components/help-button";
const StyledHelpButton = styled(HelpButton)`
border-radius: 50%;
background-color: #a3a9ae;
background-color: ${(props) =>
props.theme.createEditRoomDialog.helpButton.background};
circle,
rect {
fill: #ffffff;
fill: ${(props) => props.theme.createEditRoomDialog.helpButton.fill};
}
`;

View File

@ -127,7 +127,7 @@ const StyledDownloadContent = styled.div`
}
.download-dialog-other-text {
text-align: end;
color: #a3a9ae;
color: ${(props) => props.theme.downloadDialog.textColor};
}
}
}

View File

@ -83,6 +83,7 @@ export const RegisterContainer = styled.div`
width: 100%;
.or-label {
color: ${(props) => props.theme.invitePage.textColor};
margin: 0 8px;
}
@ -91,7 +92,7 @@ export const RegisterContainer = styled.div`
display: flex;
width: 100%;
align-items: center;
color: ${(props) => props.theme.invitePage.borderColor};;
color: ${(props) => props.theme.invitePage.borderColor};
padding-top: 35px;
margin-bottom: 32px;
}

View File

@ -713,9 +713,7 @@ const CreateUserForm = (props) => {
{!emailFromLink && (oauthDataExists() || ssoExists()) && (
<>
<div className="line">
<Text color="#A3A9AE" className="or-label">
{t("Common:orContinueWith")}
</Text>
<Text className="or-label">{t("Common:orContinueWith")}</Text>
</div>
<SocialButtonsGroup
providers={providers}

View File

@ -75,13 +75,13 @@ const StyledPaidBadge = styled(Badge)`
const StyledSendClockIcon = styled(SendClockIcon)`
${commonIconsStyles}
path {
fill: #a3a9ae;
fill: ${(props) => props.theme.accountsBadges.pendingColor};
}
`;
const StyledCatalogSpamIcon = styled(CatalogSpamIcon)`
${commonIconsStyles}
path {
fill: #f21c0e;
fill: ${(props) => props.theme.accountsBadges.disabledColor};
}
`;

View File

@ -665,7 +665,8 @@ const StyledMobilePreview = styled.div`
.icon-button_svg {
svg {
path {
fill: #a3a9ae;
fill: ${(props) =>
props.theme.client.settings.common.appearance.iconFill};
}
}
}

View File

@ -86,8 +86,6 @@ const SectionHeaderContent = (props) => {
<IconButton
iconName={ArrowPathReactSvgUrl}
size="17"
// color="#A3A9AE"
// hoverColor="#657077"
isFill={true}
onClick={onClickBack}
className="arrow-button"