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-14 16:53:02 +05:00
parent 656cb4395b
commit 75edaf37af
19 changed files with 67 additions and 30 deletions
Show Stats Download Patch File Download Diff File Expand all files Collapse all files

2
packages/client/src/components/panels/AddUsersPanel/index.tsx
View File

@ -449,7 +449,7 @@ const AddUsersPanel = ({
fontSize="12px"
noSelect
truncate
color="#A3A9AE"
color={theme.filesPanels.addUsers.textColor}
dir="auto"
>
{`${userType} | ${email}`}

6
packages/client/src/components/panels/InvitePanel/StyledInvitePanel.js
View File

@ -137,6 +137,10 @@ const StyledInviteUserBody = styled.div`
display: flex;
flex-direction: column;
overflow: auto;
.about-label {
color: ${(props) => props.theme.filesPanels.invite.textColor};
}
`;
const StyledHeading = styled(Heading)`
@ -425,7 +429,7 @@ const StyledCrossIcon = styled(CrossIcon)`
StyledCrossIcon.defaultProps = { theme: Base };
const StyledDeleteIcon = styled(DeleteIcon)`
cursor: pointer;
cursor: pointer;
${(props) =>
props.theme.interfaceDirection === "rtl"
? css`

3
packages/client/src/components/panels/InvitePanel/sub-components/Item.js
View File

@ -196,11 +196,10 @@ const Item = ({
{!isGroup && (
<Text
className="label"
className="label about-label"
fontWeight={400}
fontSize="12px"
noSelect
color="#A3A9AE"
truncate
>
{`${typeLabel} | ${email}`}

28
packages/client/src/components/panels/UploadPanel/FileRow.js
View File

@ -162,6 +162,7 @@ const StyledFileRow = styled(Row)`
}
.enter-password {
color: ${(props) => props.theme.filesPanels.upload.textColor};
${(props) =>
props.theme.interfaceDirection === "rtl"
? css`
@ -181,6 +182,8 @@ const StyledFileRow = styled(Row)`
}
.convert_icon {
color: ${(props) => props.theme.filesPanels.upload.iconFill};
${(props) =>
props.theme.interfaceDirection === "rtl"
? css`
@ -201,6 +204,17 @@ const StyledFileRow = styled(Row)`
cursor: pointer;
}
}
.upload-panel-file-error_text {
${props.isError &&
css`
color: ${(props) => props.theme.filesPanels.upload.textColor};
`}
}
.file-exst {
color: ${(props) => props.theme.filesPanels.upload.textColor};
}
`;
class FileRow extends Component {
constructor(props) {
@ -325,7 +339,7 @@ class FileRow extends Component {
const { showPasswordInput, password, passwordValid } = this.state;
const fileExtension = ext ? (
<Text as="span" fontWeight="600" color="#A3A9AE">
<Text as="span" fontWeight="600" className="file-exst">
{ext}
</Text>
) : (
@ -346,14 +360,14 @@ class FileRow extends Component {
isMediaActive={isMediaActive}
showPasswordInput={showPasswordInput}
withoutBorder
isError={item.error}
>
<>
{item.fileId ? (
isMedia || (isPlugin && onPluginClick) ? (
<Link
className="upload-panel_file-row-link"
className="upload-panel_file-row-link upload-panel-file-error_text"
fontWeight="600"
color={item.error && "#A3A9AE"}
truncate
onClick={isMedia ? onMediaClick : onPluginClick}
>
@ -363,8 +377,8 @@ class FileRow extends Component {
) : (
<div className="upload-panel_file-name">
<Link
className="upload-panel-file-error_text"
fontWeight="600"
color={item.error && "#A3A9AE"}
truncate
href={item.fileInfo ? item.fileInfo.webUrl : ""}
target={downloadInCurrentTab ? "_self" : "_blank"}
@ -376,7 +390,11 @@ class FileRow extends Component {
)
) : (
<div className="upload-panel_file-name">
<Text fontWeight="600" color={item.error && "#A3A9AE"} truncate>
<Text
fontWeight="600"
truncate
className="upload-panel-file-error_text"
>
{name}
{fileExtension}
</Text>

1
packages/client/src/components/panels/UploadPanel/SubComponents/ActionsUploadedFile.js
View File

@ -55,7 +55,6 @@ const ActionsUploadedFile = ({ item, onCancelCurrentUpload }) => {
className="convert_icon"
size="medium"
isfill={true}
color="#A3A9AE"
/>
</div>
)}

1
packages/client/src/components/panels/UploadPanel/SubComponents/ErrorFileUpload.js
View File

@ -67,7 +67,6 @@ const ErrorFileUpload = ({
<Text
className="enter-password"
fontWeight="600"
color="#A3A9AE"
onClick={onTextClick}
>
{showPasswordInput ? t("HideInput") : t("EnterPassword")}

7
packages/client/src/components/panels/UploadPanel/index.js
View File

@ -160,13 +160,6 @@ class UploadPanelComponent extends React.Component {
/>
)}
</div>
{/*<div className="upload_panel-vertical-dots-icon">
<IconButton
size="20"
iconName={VerticalDotsReactSvgUrl}
color="#A3A9AE"
/>
</div>*/}
</div>
</StyledHeaderContent>
<StyledBody className="upload-panel_body">

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

@ -65,7 +65,7 @@ export const GroupsContent = styled.div<{}>`
.email {
max-width: 180px;
color: #a3a9ae;
color: ${(props) => props.theme.infoPanel.groups.textColor};
font-size: 12px;
line-height: 16px;
font-style: normal;

8
packages/client/src/pages/Home/InfoPanel/Body/views/Members/User.js
View File

@ -26,6 +26,8 @@
import { useState } from "react";
import { inject, observer } from "mobx-react";
import { useTheme } from "styled-components";
import AtReactSvgUrl from "PUBLIC_DIR/images/@.react.svg?url";
import { StyledUser } from "../../styles/members";
import { Avatar } from "@docspace/shared/components/avatar";
@ -69,6 +71,8 @@ const User = ({
if (!infoPanelSelection) return null;
if (!user.displayName && !user.name && !user.email) return null;
const theme = useTheme();
const security = infoPanelSelection ? infoPanelSelection.security : {};
const isExpect = user.isExpect;
const canInviteUserInRoomAbility = security?.EditAccess;
@ -264,7 +268,7 @@ const User = ({
fontSize="12px"
noSelect
truncate
color="#A3A9AE !important"
color={theme.infoPanel.members.subtitleColor}
dir="auto"
>
{`${typeLabel} | ${user.email}`}
@ -357,7 +361,7 @@ const User = ({
fontSize="12px"
noSelect
truncate
color="#A3A9AE"
color={theme.infoPanel.members.subtitleColor}
dir="auto"
>
{`${typeLabel} | ${user.email}`}

5
packages/client/src/pages/PortalSettings/categories/integration/SingleSignOn/styled-containers/StyledCertificatesTable.js
View File

@ -67,6 +67,11 @@ const StyledCertificatesTable = styled.div`
.column-row {
display: flex;
.description {
color: ${(props) =>
props.theme.client.settings.integration.sso.textColor};
}
}
}

2
packages/client/src/pages/PortalSettings/categories/integration/SingleSignOn/sub-components/CertificatesTable.js
View File

@ -97,7 +97,7 @@ const CertificatesTable = (props) => {
</div>
<div className="column-row">
<Text
color="#a3a9ae"
className="description"
fontSize="12px"
fontWeight={600}
lineHeight="16px"

2
packages/client/src/pages/PortalSettings/categories/integration/ThirdPartyServicesSettings/sub-components/consumerItem.js
View File

@ -40,7 +40,7 @@ const StyledItem = styled.div`
!props.isThirdPartyAvailable &&
!props.isSet &&
css`
color: #a3a9ae;
color: ${(props) => props.theme.client.settings.integration.textColor};
`}
}
`;

8
packages/client/src/pages/PortalSettings/categories/security/login-history/RowView/HistoryContent.js
View File

@ -54,6 +54,11 @@ const StyledRowContent = styled(RowContent)`
width: min-content;
}
.date-text {
color: ${(props) =>
props.theme.client.settings.security.loginHistory.textColor};
}
${(props) => props.isSettingNotPaid && UnavailableStyles}
`;
@ -82,8 +87,7 @@ const HistoryContent = ({ sectionWidth, item, locale, theme }) => {
fontSize="12px"
fontWeight={600}
truncate={true}
color="#A3A9AE"
className="settings_unavailable"
className="settings_unavailable date-text"
>
{dateStr}
</Text>

2
packages/client/src/pages/Profile/Section/Body/sub-components/login-settings/index.js
View File

@ -68,7 +68,7 @@ const LoginSettings = (props) => {
<Text fontSize="16px" fontWeight={700} lineHeight="22px">
{t("Settings:TwoFactorAuth")}
</Text>
<Text color="#A3A9AE">{t("TwoFactorDescription")}</Text>
<Text className="description">{t("TwoFactorDescription")}</Text>
</div>
<div className="actions">
<Button

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

@ -39,6 +39,10 @@ export const StyledWrapper = styled.div`
gap: 4px;
}
.description {
color: ${(props) => props.theme.profile.login.textColor};
}
.actions {
display: flex;
gap: 16px;

4
packages/client/src/pages/VersionHistory/Section/Body/StyledVersionHistory.js
View File

@ -277,6 +277,10 @@ const StyledVersionRow = styled(Row)`
.version-comment-wrapper {
white-space: normal !important;
.version_text {
color: ${(props) => props.theme.filesVersionHistory.commentColor};
}
}
.row_context-menu-wrapper {

2
packages/client/src/pages/VersionHistory/Section/Body/VersionRow.js
View File

@ -316,7 +316,7 @@ const VersionRow = (props) => {
</>
)}
<Text className="version_text" color="#A3A9AE" truncate={true}>
<Text className="version_text" truncate={true}>
{info.comment}
</Text>
</>

4
packages/client/src/pages/Wizard/StyledWizard.js
View File

@ -162,6 +162,10 @@ export const StyledInfo = styled.div`
margin-bottom: 4px;
.text {
color: ${(props) => props.theme.client.wizard.textColor};
}
.machine-name {
padding-bottom: 4px;
padding-top: 4px;

6
packages/client/src/pages/Wizard/index.js
View File

@ -419,7 +419,7 @@ const Wizard = (props) => {
</FieldContainer>
)}
<StyledInfo>
<Text color="#A3A9AE" fontWeight={400}>
<Text className="text" fontWeight={400}>
{t("Common:Domain")}
</Text>
<Text fontWeight={600} className="machine-name">
@ -427,7 +427,7 @@ const Wizard = (props) => {
</Text>
</StyledInfo>
<StyledInfo>
<Text color="#A3A9AE" fontWeight={400}>
<Text className="text" fontWeight={400}>
{t("Common:Language")}
</Text>
<div className="wrapper__language-selector">
@ -455,7 +455,7 @@ const Wizard = (props) => {
</div>
</StyledInfo>
<StyledInfo>
<Text color="#A3A9AE" fontWeight={400}>
<Text className="text" fontWeight={400}>
{t("Timezone")}
</Text>
<ComboBox