Client: use colors from theme
This commit is contained in:
parent
3d23c9a782
commit
592ca47ab8
@ -43,6 +43,7 @@ import { isDesktop } from "@docspace/shared/utils";
|
|||||||
const StyledModal = styled(ModalDialogContainer)`
|
const StyledModal = styled(ModalDialogContainer)`
|
||||||
.backup-codes-counter {
|
.backup-codes-counter {
|
||||||
margin-top: 16px;
|
margin-top: 16px;
|
||||||
|
color: ${(props) => props.theme.client.settings.security.tfa.textColor};
|
||||||
}
|
}
|
||||||
|
|
||||||
.backup-codes-print-link-wrapper {
|
.backup-codes-print-link-wrapper {
|
||||||
@ -110,11 +111,7 @@ class BackupCodesDialogComponent extends React.Component {
|
|||||||
{t("BackupCodesSecondDescription")}
|
{t("BackupCodesSecondDescription")}
|
||||||
</Text>
|
</Text>
|
||||||
|
|
||||||
<Text
|
<Text className="backup-codes-counter" fontWeight={600}>
|
||||||
className="backup-codes-counter"
|
|
||||||
fontWeight={600}
|
|
||||||
color="#A3A9AE"
|
|
||||||
>
|
|
||||||
{backupCodesCount} {t("CodesCounter")}
|
{backupCodesCount} {t("CodesCounter")}
|
||||||
</Text>
|
</Text>
|
||||||
|
|
||||||
|
@ -76,7 +76,7 @@ export const GroupMemberRow = styled.div<{}>`
|
|||||||
|
|
||||||
svg {
|
svg {
|
||||||
path {
|
path {
|
||||||
fill: #a3a9ae;
|
fill: ${(props) => props.theme.createEditGroupDialog.iconFill};
|
||||||
}
|
}
|
||||||
}
|
}
|
||||||
}
|
}
|
||||||
|
@ -30,7 +30,8 @@ export const Header = styled.div`
|
|||||||
width: 100%;
|
width: 100%;
|
||||||
padding: 8px 0 12px 0;
|
padding: 8px 0 12px 0;
|
||||||
|
|
||||||
color: #a3a9ae;
|
color: ${(props) =>
|
||||||
|
props.theme.createEditRoomDialog.commonParam.descriptionColor};
|
||||||
font-size: 14px;
|
font-size: 14px;
|
||||||
font-weight: 600;
|
font-weight: 600;
|
||||||
line-height: 16px;
|
line-height: 16px;
|
||||||
@ -50,6 +51,6 @@ export const SelectGroupManager = styled.div<{}>`
|
|||||||
font-size: 13px;
|
font-size: 13px;
|
||||||
font-weight: 600;
|
font-weight: 600;
|
||||||
line-height: 20px;
|
line-height: 20px;
|
||||||
color: #a3a9ae;
|
color: ${(props) => props.theme.createEditGroupDialog.textColor};
|
||||||
}
|
}
|
||||||
`;
|
`;
|
||||||
|
@ -30,7 +30,8 @@ export const Header = styled.div`
|
|||||||
width: 100%;
|
width: 100%;
|
||||||
padding: 8px 0 12px 0;
|
padding: 8px 0 12px 0;
|
||||||
|
|
||||||
color: #a3a9ae;
|
color: ${(props) =>
|
||||||
|
props.theme.createEditRoomDialog.commonParam.descriptionColor};
|
||||||
font-size: 14px;
|
font-size: 14px;
|
||||||
font-weight: 600;
|
font-weight: 600;
|
||||||
line-height: 16px;
|
line-height: 16px;
|
||||||
@ -50,6 +51,6 @@ export const AddMembersButton = styled.div<{}>`
|
|||||||
font-size: 13px;
|
font-size: 13px;
|
||||||
font-weight: 600;
|
font-weight: 600;
|
||||||
line-height: 20px;
|
line-height: 20px;
|
||||||
color: #a3a9ae;
|
color: ${(props) => props.theme.createEditGroupDialog.textColor};
|
||||||
}
|
}
|
||||||
`;
|
`;
|
||||||
|
@ -32,10 +32,11 @@ import { HelpButton } from "@docspace/shared/components/help-button";
|
|||||||
|
|
||||||
const StyledHelpButton = styled(HelpButton)`
|
const StyledHelpButton = styled(HelpButton)`
|
||||||
border-radius: 50%;
|
border-radius: 50%;
|
||||||
background-color: #a3a9ae;
|
background-color: ${(props) =>
|
||||||
|
props.theme.createEditRoomDialog.helpButton.background};
|
||||||
circle,
|
circle,
|
||||||
rect {
|
rect {
|
||||||
fill: #ffffff;
|
fill: ${(props) => props.theme.createEditRoomDialog.helpButton.fill};
|
||||||
}
|
}
|
||||||
`;
|
`;
|
||||||
|
|
||||||
|
@ -127,7 +127,7 @@ const StyledDownloadContent = styled.div`
|
|||||||
}
|
}
|
||||||
.download-dialog-other-text {
|
.download-dialog-other-text {
|
||||||
text-align: end;
|
text-align: end;
|
||||||
color: #a3a9ae;
|
color: ${(props) => props.theme.downloadDialog.textColor};
|
||||||
}
|
}
|
||||||
}
|
}
|
||||||
}
|
}
|
||||||
|
@ -83,6 +83,7 @@ export const RegisterContainer = styled.div`
|
|||||||
width: 100%;
|
width: 100%;
|
||||||
|
|
||||||
.or-label {
|
.or-label {
|
||||||
|
color: ${(props) => props.theme.invitePage.textColor};
|
||||||
margin: 0 8px;
|
margin: 0 8px;
|
||||||
}
|
}
|
||||||
|
|
||||||
@ -91,7 +92,7 @@ export const RegisterContainer = styled.div`
|
|||||||
display: flex;
|
display: flex;
|
||||||
width: 100%;
|
width: 100%;
|
||||||
align-items: center;
|
align-items: center;
|
||||||
color: ${(props) => props.theme.invitePage.borderColor};;
|
color: ${(props) => props.theme.invitePage.borderColor};
|
||||||
padding-top: 35px;
|
padding-top: 35px;
|
||||||
margin-bottom: 32px;
|
margin-bottom: 32px;
|
||||||
}
|
}
|
||||||
|
@ -713,9 +713,7 @@ const CreateUserForm = (props) => {
|
|||||||
{!emailFromLink && (oauthDataExists() || ssoExists()) && (
|
{!emailFromLink && (oauthDataExists() || ssoExists()) && (
|
||||||
<>
|
<>
|
||||||
<div className="line">
|
<div className="line">
|
||||||
<Text color="#A3A9AE" className="or-label">
|
<Text className="or-label">{t("Common:orContinueWith")}</Text>
|
||||||
{t("Common:orContinueWith")}
|
|
||||||
</Text>
|
|
||||||
</div>
|
</div>
|
||||||
<SocialButtonsGroup
|
<SocialButtonsGroup
|
||||||
providers={providers}
|
providers={providers}
|
||||||
|
@ -75,13 +75,13 @@ const StyledPaidBadge = styled(Badge)`
|
|||||||
const StyledSendClockIcon = styled(SendClockIcon)`
|
const StyledSendClockIcon = styled(SendClockIcon)`
|
||||||
${commonIconsStyles}
|
${commonIconsStyles}
|
||||||
path {
|
path {
|
||||||
fill: #a3a9ae;
|
fill: ${(props) => props.theme.accountsBadges.pendingColor};
|
||||||
}
|
}
|
||||||
`;
|
`;
|
||||||
const StyledCatalogSpamIcon = styled(CatalogSpamIcon)`
|
const StyledCatalogSpamIcon = styled(CatalogSpamIcon)`
|
||||||
${commonIconsStyles}
|
${commonIconsStyles}
|
||||||
path {
|
path {
|
||||||
fill: #f21c0e;
|
fill: ${(props) => props.theme.accountsBadges.disabledColor};
|
||||||
}
|
}
|
||||||
`;
|
`;
|
||||||
|
|
||||||
|
@ -665,7 +665,8 @@ const StyledMobilePreview = styled.div`
|
|||||||
.icon-button_svg {
|
.icon-button_svg {
|
||||||
svg {
|
svg {
|
||||||
path {
|
path {
|
||||||
fill: #a3a9ae;
|
fill: ${(props) =>
|
||||||
|
props.theme.client.settings.common.appearance.iconFill};
|
||||||
}
|
}
|
||||||
}
|
}
|
||||||
}
|
}
|
||||||
|
@ -86,8 +86,6 @@ const SectionHeaderContent = (props) => {
|
|||||||
<IconButton
|
<IconButton
|
||||||
iconName={ArrowPathReactSvgUrl}
|
iconName={ArrowPathReactSvgUrl}
|
||||||
size="17"
|
size="17"
|
||||||
// color="#A3A9AE"
|
|
||||||
// hoverColor="#657077"
|
|
||||||
isFill={true}
|
isFill={true}
|
||||||
onClick={onClickBack}
|
onClick={onClickBack}
|
||||||
className="arrow-button"
|
className="arrow-button"
|
||||||
|
Loading…
Reference in New Issue
Block a user