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

Merge branch 'develop' into feature/display-file-extension

Browse Source
This commit is contained in:
Alexey Safronov 2024-08-08 11:44:09 +04:00
commit 7f766abfa9
305 changed files with 3607 additions and 3753 deletions
Show Stats Download Patch File Download Diff File Expand all files Collapse all files

26
packages/client/src/Shell.jsx
View File

@ -43,6 +43,7 @@ import { DeviceType, IndexedDBStores } from "@docspace/shared/enums";
import indexedDbHelper from "@docspace/shared/utils/indexedDBHelper";
import { useThemeDetector } from "@docspace/shared/hooks/useThemeDetector";
import { sendToastReport } from "@docspace/shared/utils/crashReport";
import { combineUrl } from "@docspace/shared/utils/combineUrl";
import config from "PACKAGE_FILE";
@ -77,6 +78,7 @@ const Shell = ({ items = [], page = "home", ...rest }) => {
userTheme,
//user,
userId,
userLoginEventId,
currentDeviceType,
timezone,
showArticleLoader,
@ -134,6 +136,7 @@ const Shell = ({ items = [], page = "home", ...rest }) => {
command: "subscribe",
data: { roomParts: "backup-restore" },
});
socketHelper.on("restore-backup", () => {
getRestoreProgress()
.then((response) => {
@ -159,7 +162,27 @@ const Shell = ({ items = [], page = "home", ...rest }) => {
command: "subscribe",
data: { roomParts: "QUOTA", individual: true },
});
}, [socketHelper]);
socketHelper.emit({
command: "subscribe",
data: { roomParts: userId },
});
socketHelper.on("s:logout-session", (loginEventId) => {
console.log(`[WS] "logout-session"`, loginEventId, userLoginEventId);
if (userLoginEventId === loginEventId || loginEventId === 0) {
window.location.replace(
combineUrl(window.ClientConfig?.proxy?.url, "/login"),
);
}
});
}, [
socketHelper,
userLoginEventId,
setPreparationPortalDialogVisible,
userId,
]);
const { t, ready } = useTranslation(["Common"]); //TODO: if enable banner ["Common", "SmartBanner"]
@ -533,6 +556,7 @@ const ShellWrapper = inject(
setSnackbarExist,
userTheme: isFrame ? frameConfig?.theme : userTheme,
userId: userStore?.user?.id,
userLoginEventId: userStore?.user?.loginEventId,
currentDeviceType,
showArticleLoader: clientLoadingStore.showArticleLoader,
setPortalTariff,

3
packages/client/src/components/Article/MainButton/index.js
View File

@ -69,6 +69,7 @@ import styled, { css } from "styled-components";
import { resendInvitesAgain } from "@docspace/shared/api/people";
import { ArticleButtonLoader } from "@docspace/shared/skeletons/article";
import { isMobile, isTablet } from "react-device-detect";
import { globalColors } from "@docspace/shared/themes";
const StyledButton = styled(Button)`
font-weight: 700;
@ -120,7 +121,7 @@ const StyledButton = styled(Button)`
border-radius: 3px;
user-select: none;
-webkit-tap-highlight-color: rgba(0, 0, 0, 0);
-webkit-tap-highlight-color: ${globalColors.tapHighlight};
}
`;

5
packages/client/src/components/Badges.js
View File

@ -44,7 +44,7 @@ import { Badge } from "@docspace/shared/components/badge";
import { ColorTheme, ThemeId } from "@docspace/shared/components/color-theme";
import { RoomsType, ShareAccessRights } from "@docspace/shared/enums";
import { Base } from "@docspace/shared/themes";
import { Base, globalColors } from "@docspace/shared/themes";
import { isTablet, isDesktop, size, classNames } from "@docspace/shared/utils";
@ -56,7 +56,7 @@ const StyledWrapper = styled.div`
background: ${(props) => props.theme.filesBadges.backgroundColor};
padding: 6px;
border-radius: 4px;
box-shadow: 0px 2px 4px rgba(4, 15, 27, 0.16);
box-shadow: 0px 2px 4px ${globalColors.badgeShadow};
`;
StyledWrapper.defaultProps = { theme: Base };
@ -306,7 +306,6 @@ const Badges = ({
{/* {isForm && (
<BadgeWrapper isTile={isTile}>
<HelpButton
color="#F2675A"
place="bottom"
size={isViewTable ? 12 : 16}
className="bagde_alert icons-group"

4
packages/client/src/components/EditingWrapperComponent.js
View File

@ -158,7 +158,9 @@ const EditingWrapper = styled.div`
}
`};
${({ isDisabled }) => isDisabled && "background-color: #fff"}
${({ isDisabled }) =>
isDisabled &&
`background-color: ${(props) => props.theme.filesEditingWrapper.disabledBackground}`}
}
.edit-button {

4
packages/client/src/components/EmptyContainer/EmptyContainer.js
View File

@ -57,6 +57,10 @@ const EmptyFolderWrapper = styled.div`
.second-description {
margin: 32px 0 24px;
text-align: center;
& > span {
color: ${(props) => props.theme.filesEmptyContainer.descriptionColor};
}
}
.empty-folder_container-image {

2
packages/client/src/components/EmptyContainer/sub-components/CommonButtons.js
View File

@ -97,7 +97,7 @@ const InviteUsersComponent = (props) => {
return (
<>
<div className="second-description">
<Text as="span" color="#6A7378" fontSize="12px" noSelect>
<Text as="span" fontSize="12px" noSelect>
{t("AddMembersDescription")}
</Text>
</div>

34
packages/client/src/components/EmptyContainer/sub-components/EmptyViewContainer/EmptyViewContainer.helpers.tsx
View File

@ -75,19 +75,16 @@ export const getDescription = (
if (isFolder) {
return match([parentRoomType, folderType, access])
.with([P._, FolderType.Done, P._], () =>
t("Files:EmptyFormFolderDoneHeaderText"),
t("Files:EmptyFormFolderDoneDescriptionText"),
)
.with([P._, FolderType.InProgress, P._], () =>
t("Files:EmptyFormFolderProgressHeaderText"),
t("Files:EmptyFormFolderProgressDescriptionText"),
)
.with(
[
P._,
P.union(FolderType.SubFolderDone, FolderType.SubFolderInProgress),
P._,
],
() => t("Files:EmptyFormSubFolderHeaderText"),
.with([P._, FolderType.SubFolderDone, P._], () =>
t("Files:EmptyFormSubFolderDoneDescriptionText"),
)
.with([P._, FolderType.SubFolderInProgress, P._], () =>
t("Files:EmptyFormSubFolderProgressDescriptionText"),
)
.with(
[
@ -130,16 +127,19 @@ export const getTitle = (
if (isFolder) {
return match([parentRoomType, folderType, access])
.with([P._, FolderType.Done, P._], () =>
t("Files:EmptyFormFolderDoneDescriptionText"),
t("Files:EmptyFormFolderDoneHeaderText"),
)
.with([P._, FolderType.InProgress, P._], () =>
t("Files:EmptyFormFolderProgressDescriptionText"),
t("Files:EmptyFormFolderProgressHeaderText"),
)
.with([P._, FolderType.SubFolderDone, P._], () =>
t("Files:EmptyFormSubFolderDoneDescriptionText"),
)
.with([P._, FolderType.SubFolderInProgress, P._], () =>
t("Files:EmptyFormSubFolderProgressDescriptionText"),
.with(
[
P._,
P.union(FolderType.SubFolderDone, FolderType.SubFolderInProgress),
P._,
],
() => t("Files:EmptyFormSubFolderHeaderText"),
)
.with(
[

7
packages/client/src/components/GlobalEvents/ChangeUserTypeEvent.js
View File

@ -34,6 +34,7 @@ import { toastr } from "@docspace/shared/components/toast";
import { Link } from "@docspace/shared/components/link";
import { Text } from "@docspace/shared/components/text";
import { combineUrl } from "@docspace/shared/utils/combineUrl";
import { globalColors } from "@docspace/shared/themes";
const ChangeUserTypeEvent = ({
setVisible,
@ -105,7 +106,11 @@ const ChangeUserTypeEvent = ({
<>
<Text>{t("Common:QuotaPaidUserLimitError")}</Text>
{!isRoomAdmin && (
<Link color="#5387AD" isHovered={true} onClick={onClickPayments}>
<Link
color={globalColors.link}
isHovered={true}
onClick={onClickPayments}
>
{t("Common:PaymentsTitle")}
</Link>
)}

4
packages/client/src/components/NavMenu/sub-components/header-catalog-burger.js
View File

@ -30,7 +30,7 @@ import PropTypes from "prop-types";
import MenuIcon from "PUBLIC_DIR/images/menu.react.svg";
import { mobile } from "@docspace/shared/utils";
import { Base } from "@docspace/shared/themes";
import { Base, globalColors } from "@docspace/shared/themes";
const StyledIconBox = styled.div`
display: none;
@ -42,7 +42,7 @@ const StyledIconBox = styled.div`
align-items: center;
padding-inline-start: 16px;
-webkit-tap-highlight-color: rgba(0, 0, 0, 0);
-webkit-tap-highlight-color: ${globalColors.tapHighlight};
`;
const StyledMenuIcon = styled(MenuIcon)`

3
packages/client/src/components/NavMenu/sub-components/header-nav.js
View File

@ -31,6 +31,7 @@ import ProfileActions from "./profile-actions";
import { useTranslation } from "react-i18next";
import { mobile, tablet } from "@docspace/shared/utils";
import { inject, observer } from "mobx-react";
import { globalColors } from "@docspace/shared/themes";
const StyledNav = styled.nav`
display: flex;
@ -57,7 +58,7 @@ const StyledNav = styled.nav`
}
.icon-profile-menu {
cursor: pointer;
-webkit-tap-highlight-color: rgba(0, 0, 0, 0);
-webkit-tap-highlight-color: ${globalColors.tapHighlight};
z-index: 300;
}
`;

4
packages/client/src/components/NavMenu/sub-components/header-unauth.js
View File

@ -29,7 +29,7 @@ import PropTypes from "prop-types";
import styled from "styled-components";
import { Box } from "@docspace/shared/components/box";
import { inject, observer } from "mobx-react";
import { Base } from "@docspace/shared/themes";
import { Base, globalColors } from "@docspace/shared/themes";
import { mobile, getLogoUrl } from "@docspace/shared/utils";
import { WhiteLabelLogoType } from "@docspace/shared/enums";
import { LanguageCombobox } from "@docspace/shared/components/language-combobox";
@ -58,7 +58,7 @@ const Header = styled.header`
}
.header-logo-wrapper {
-webkit-tap-highlight-color: rgba(0, 0, 0, 0);
-webkit-tap-highlight-color: ${globalColors.tapHighlight};
}
.header-logo-min_icon {

4
packages/client/src/components/NavMenu/sub-components/header.js
View File

@ -42,7 +42,7 @@ import {
import { WhiteLabelLogoType } from "@docspace/shared/enums";
import { combineUrl } from "@docspace/shared/utils/combineUrl";
import HeaderCatalogBurger from "./header-catalog-burger";
import { Base } from "@docspace/shared/themes";
import { Base, globalColors } from "@docspace/shared/themes";
const Header = styled.header`
display: flex;
@ -59,7 +59,7 @@ const Header = styled.header`
display: flex;
align-items: center;
justify-items: center;
-webkit-tap-highlight-color: rgba(0, 0, 0, 0);
-webkit-tap-highlight-color: ${globalColors.tapHighlight};
${NoUserSelect}
}

6
packages/client/src/components/NavMenu/sub-components/nav-item.js
View File

@ -35,7 +35,7 @@ import { Text } from "@docspace/shared/components/text";
import { commonIconsStyles, tablet } from "@docspace/shared/utils";
import MenuIcon from "PUBLIC_DIR/images/menu.react.svg";
import { Base } from "@docspace/shared/themes";
import { Base, globalColors } from "@docspace/shared/themes";
const NavItemSeparator = styled.div`
border-bottom: 1px ${(props) => (props.dashed ? "dashed" : "solid")}
@ -123,9 +123,9 @@ const NavItemBadge = styled(Badge)`
`;
const VersionBadge = styled.div`
background-color: #3cb55b;
background-color: ${globalColors.lightStatusPositive};
border-radius: 5px;
color: #ffffff;
color: ${globalColors.white};
display: inline-block;
font-size: 10px;
line-height: 8px;

3
packages/client/src/components/NavMenu/sub-components/nav-logo-item.js
View File

@ -31,6 +31,7 @@ import styled from "styled-components";
import { inject, observer } from "mobx-react";
import { NoUserSelect, getLogoUrl } from "@docspace/shared/utils";
import { WhiteLabelLogoType } from "@docspace/shared/enums";
import { globalColors } from "@docspace/shared/themes";
const LogoItem = styled.div`
display: flex;
@ -41,7 +42,7 @@ const LogoItem = styled.div`
cursor: pointer;
.nav-logo-wrapper {
-webkit-tap-highlight-color: rgba(0, 0, 0, 0);
-webkit-tap-highlight-color: ${globalColors.tapHighlight};
${NoUserSelect}
}

4
packages/client/src/components/NavMenu/sub-components/nav.js
View File

@ -29,7 +29,7 @@ import PropTypes from "prop-types";
import styled from "styled-components";
import { Scrollbar } from "@docspace/shared/components/scrollbar";
import { isMobileOnly, isMobile } from "react-device-detect";
import { Base } from "@docspace/shared/themes";
import { Base, globalColors } from "@docspace/shared/themes";
const StyledNav = styled.nav`
background-color: ${(props) => props.theme.nav.backgroundColor};
@ -43,7 +43,7 @@ const StyledNav = styled.nav`
transition: width 0.3s ease-in-out;
width: ${(props) => (props.opened ? "240px" : "0")};
z-index: 200;
-webkit-tap-highlight-color: rgba(0, 0, 0, 0);
-webkit-tap-highlight-color: ${globalColors.tapHighlight};
.version-box {
position: absolute;

6
packages/client/src/components/TariffBar/helpers.js
View File

@ -24,8 +24,10 @@
// content are licensed under the terms of the Creative Commons Attribution-ShareAlike 4.0
// International. See the License terms at http://creativecommons.org/licenses/by-sa/4.0/legalcode
const ORANGE = "#F97A0B";
const RED = "#F2665A";
import { globalColors } from "@docspace/shared/themes";
const ORANGE = globalColors.mainOrange;
const RED = globalColors.mainRed;
export const getSaasBar = (
t,

7
packages/client/src/components/dialogs/BackupCodesDialog/index.js
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 {
@ -107,11 +108,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>

3
packages/client/src/components/dialogs/ChangeUserStatusDialog/index.js
View File

@ -40,6 +40,7 @@ import { withTranslation } from "react-i18next";
import { EmployeeStatus } from "@docspace/shared/enums";
import ModalDialogContainer from "../ModalDialogContainer";
import { inject, observer } from "mobx-react";
import { globalColors } from "@docspace/shared/themes";
class ChangeUserStatusDialogComponent extends React.Component {
constructor(props) {
@ -87,7 +88,7 @@ class ChangeUserStatusDialogComponent extends React.Component {
<>
<Text>{t("Common:QuotaPaidUserLimitError")}</Text>
<Link
color="#5387AD"
color={globalColors.link}
isHovered={true}
onClick={this.onClickPayments}
>

2
packages/client/src/components/dialogs/CreateEditGroupDialog/sub-components/GroupMemberRow/index.styled.ts
View File

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

5
packages/client/src/components/dialogs/CreateEditGroupDialog/sub-components/HeadOfGroupParam/index.styled.ts
View File

@ -30,7 +30,8 @@ export const Header = styled.div`
width: 100%;
padding: 8px 0 12px;
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};
}
`;

5
packages/client/src/components/dialogs/CreateEditGroupDialog/sub-components/MembersParam/index.styled.ts
View File

@ -30,7 +30,8 @@ export const Header = styled.div`
width: 100%;
padding: 8px 0 12px;
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};
}
`;

4
packages/client/src/components/dialogs/CreateEditRoomDialog/sub-components/RoomTypeDropdown/DropdownDesktop.js
View File

@ -28,7 +28,7 @@ import React from "react";
import styled from "styled-components";
import RoomType from "@docspace/shared/components/room-type";
import { Base } from "@docspace/shared/themes";
import { Base, globalColors } from "@docspace/shared/themes";
import { RoomsTypeValues } from "@docspace/shared/utils/common";
const StyledDropdownDesktop = styled.div`
@ -55,7 +55,7 @@ const StyledDropdownDesktop = styled.div`
display: flex;
flex-direction: column;
padding: 6px 0;
box-shadow: 0px 12px 40px rgba(4, 15, 27, 0.12);
box-shadow: 0px 12px 40px ${globalColors.popupShadow};
border-radius: 6px;
}
`;

5
packages/client/src/components/dialogs/CreateEditRoomDialog/sub-components/RoomTypeDropdown/DropdownMobile.js
View File

@ -32,7 +32,7 @@ import { RoomsTypeValues } from "@docspace/shared/utils/common";
import { Backdrop } from "@docspace/shared/components/backdrop";
import { Portal } from "@docspace/shared/components/portal";
import { Base } from "@docspace/shared/themes";
import { Base, globalColors } from "@docspace/shared/themes";
const StyledDropdownMobile = styled.div`
visibility: ${(props) => (props.isOpen ? "visible" : "hidden")};
@ -40,8 +40,7 @@ const StyledDropdownMobile = styled.div`
bottom: 0;
z-index: 500;
padding-top: 6px;
box-shadow: 0px -4px 60px rgba(4, 15, 27, 0.12);
box-shadow: 0px -4px 60px ${globalColors.popupShadow};
border-radius: 6px 6px 0px 0px;
background: ${(props) =>
props.theme.createEditRoomDialog.roomTypeDropdown.mobile.background};

5
packages/client/src/components/dialogs/CreateEditRoomDialog/sub-components/SecondaryInfoButton.js
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};
}
`;

4
packages/client/src/components/dialogs/CreateEditRoomDialog/sub-components/StyledDropdown.js
View File

@ -29,7 +29,7 @@ import styled from "styled-components";
import { mobile } from "@docspace/shared/utils";
import { DropDown } from "@docspace/shared/components/drop-down";
import { Base } from "@docspace/shared/themes";
import { Base, globalColors } from "@docspace/shared/themes";
const StyledDropDownWrapper = styled.div`
width: 100%;
@ -43,7 +43,7 @@ const StyledDropDown = styled(DropDown)`
props.theme.createEditRoomDialog.dropdown.background};
border: 1px solid
${(props) => props.theme.createEditRoomDialog.dropdown.borderColor};
box-shadow: 0px 12px 40px rgba(4, 15, 27, 0.12);
box-shadow: 0px 12px 40px ${globalColors.popupShadow};
border-radius: 3px;
overflow: hidden;
${(props) => !props.hasItems && "visibility: hidden"};

2
packages/client/src/components/dialogs/DataReassignmentDialog/sub-components/Body/AccountInfo.js
View File

@ -36,7 +36,7 @@ import { capitalize } from "lodash";
const StyledCatalogSpamIcon = styled(CatalogSpamIcon)`
${commonIconsStyles}
path {
fill: #f21c0e;
fill: ${(props) => props.theme.dialogs.errorText};
}
padding-inline-start: 8px;
`;

4
packages/client/src/components/dialogs/DataReassignmentDialog/sub-components/Body/Progress.js
View File

@ -32,13 +32,13 @@ import styled from "styled-components";
import CheckIcon from "PUBLIC_DIR/images/check.edit.react.svg";
import InterruptIcon from "PUBLIC_DIR/images/interrupt.icon.react.svg";
import { commonIconsStyles } from "@docspace/shared/utils";
import { Base } from "@docspace/shared/themes";
import { Base, globalColors } from "@docspace/shared/themes";
import { withTranslation, Trans } from "react-i18next";
const StyledCheckIcon = styled(CheckIcon)`
${commonIconsStyles}
path {
fill: rgba(53, 173, 23, 1) !important;
fill: ${globalColors.lightStatusPositive} !important;
}
`;

2
packages/client/src/components/dialogs/DeleteProfileEverDialog/index.js
View File

@ -69,7 +69,7 @@ const StyledModalDialogContainer = styled(ModalDialogContainer)`
}
.text-warning {
color: #f24724;
color: ${(props) => props.theme.peopleDialogs.deleteUser.textColor};
font-size: 16px;
font-weight: 700;
line-height: 22px;

4
packages/client/src/components/dialogs/DownloadDialog/StyledDownloadDialog.js
View File

@ -67,7 +67,7 @@ const StyledDownloadContent = styled.div`
isOpen ? "rotate(270deg)" : "rotate(90deg)"};
svg {
path {
fill: #333;
fill: ${(props) => props.theme.downloadDialog.iconFill};
}
}
}
@ -124,7 +124,7 @@ const StyledDownloadContent = styled.div`
}
.download-dialog-other-text {
text-align: end;
color: #a3a9ae;
color: ${(props) => props.theme.downloadDialog.textColor};
}
}
}

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

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

4
packages/client/src/components/panels/EditLinkPanel/LinkBlock.js
View File

@ -51,9 +51,7 @@ const LinkBlock = (props) => {
<Text className="edit-link-text" fontSize="16px" fontWeight={600}>
{t("LinkName")}
</Text>
<Text className="edit-link_required-icon" color="#F24724">
*
</Text>
<Text className="edit-link_required-icon">*</Text>
<TextInput
scale

1
packages/client/src/components/panels/EditLinkPanel/StyledEditLinkPanel.js
View File

@ -57,6 +57,7 @@ const StyledEditLinkPanel = styled(ModalDialog)`
.edit-link_required-icon {
display: inline-flex;
color: ${(props) => props.theme.editLink.requiredColor};
margin-inline-start: 2px;
}

3
packages/client/src/components/panels/EmbeddingPanel/StyledEmbeddingPanel.js
View File

@ -26,6 +26,7 @@
import styled, { css } from "styled-components";
import { ModalDialog } from "@docspace/shared/components/modal-dialog";
import { globalColors } from "@docspace/shared/themes";
const StyledModalDialog = styled(ModalDialog)`
.modal-header {
@ -116,7 +117,7 @@ const StyledBody = styled.div`
.embedding-panel_code-container {
margin-top: 16px;
-webkit-tap-highlight-color: rgba(0, 0, 0, 0);
-webkit-tap-highlight-color: ${globalColors.tapHighlight};
}
.embedding-panel_text {

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

@ -112,6 +112,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)`
@ -201,7 +205,7 @@ const StyledInviteInput = styled.div`
}
display: flex;
border: 1px solid rgb(208, 213, 218);
border: ${(props) => props.theme.filesPanels.invite.border};
border-radius: 3px;
.copy-link-icon {
@ -329,7 +333,7 @@ const StyledDropDown = styled(DropDown)`
gap: 4px;
p {
color: #4781d1;
color: ${(props) => props.theme.filesPanels.invite.addButtonColor};
}
svg {
@ -337,7 +341,7 @@ const StyledDropDown = styled(DropDown)`
theme.interfaceDirection === "rtl" && "transform: scaleX(-1);"};
path {
fill: #4781d1;
fill: ${(props) => props.theme.filesPanels.invite.addButtonColor};
}
}
}

5
packages/client/src/components/panels/InvitePanel/sub-components/ExternalLinks.js
View File

@ -49,6 +49,7 @@ import {
StyledToggleButton,
StyledDescription,
} from "../StyledInvitePanel";
import { globalColors } from "@docspace/shared/themes";
const ExternalLinks = ({
t,
@ -197,8 +198,8 @@ const ExternalLinks = ({
<IconButton
size={16}
iconName={MediaDownloadReactSvgUrl}
hoverColor="#333333"
iconColor="#A3A9AE"
hoverColor={globalColors.black}
iconColor={globalColors.gray}
onClick={toggleActionLinks}
/>
<DropDown

4
packages/client/src/components/panels/InvitePanel/sub-components/InfoBar.js
View File

@ -35,7 +35,7 @@ import { Text } from "@docspace/shared/components/text";
const StyledInfoBar = styled.div`
display: flex;
background-color: ${(props) => props.theme.infoBar.background};
color: #333;
color: ${(props) => props.theme.infoBar.textColor};
font-size: 12px;
padding: 12px 16px;
border-radius: 6px;
@ -55,7 +55,7 @@ const StyledInfoBar = styled.div`
.header-icon {
svg {
path {
fill: #ed7309;
fill: ${(props) => props.theme.infoBar.iconFill};
}
}
}

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}`}

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

@ -29,6 +29,7 @@ import {
RoomsType,
EmployeeType,
} from "@docspace/shared/enums";
import { globalColors } from "@docspace/shared/themes";
import { checkIfAccessPaid } from "SRC_DIR/helpers";
/**
@ -92,7 +93,7 @@ export const getAccessOptions = (
productName: t("Common:ProductName"),
}),
...(!standalone && { quota: t("Common:Paid") }),
color: "#EDC409",
color: globalColors.favoritesStatus,
access:
roomType === -1 ? EmployeeType.Admin : ShareAccessRights.FullAccess,
type: "admin",
@ -102,7 +103,7 @@ export const getAccessOptions = (
label: t("Common:RoomAdmin"),
description: getRoomAdminDescription(roomType, t),
...(!standalone && { quota: t("Common:Paid") }),
color: "#EDC409",
color: globalColors.favoritesStatus,
access:
roomType === -1 ? EmployeeType.User : ShareAccessRights.RoomManager,
type: "manager",
@ -112,7 +113,7 @@ export const getAccessOptions = (
label: t("Common:PowerUser"),
description: getPowerUserDescription(roomType, t),
...(!standalone && { quota: t("Common:Paid") }),
color: "#EDC409",
color: globalColors.favoritesStatus,
access:
roomType === -1
? EmployeeType.Collaborator

10
packages/client/src/components/panels/StyledPanels.js
View File

@ -29,7 +29,7 @@ import { Scrollbar } from "@docspace/shared/components/scrollbar";
import { Link } from "@docspace/shared/components/link";
import { desktop, mobile, tablet } from "@docspace/shared/utils";
import { isMobile } from "react-device-detect";
import { Base } from "@docspace/shared/themes";
import { Base, globalColors } from "@docspace/shared/themes";
const PanelStyles = css`
.panel_combo-box {
@ -378,7 +378,7 @@ const StyledLinkRow = styled.div`
.row_content {
display: grid;
grid-template-columns: 1fr 28px;
-webkit-tap-highlight-color: rgba(0, 0, 0, 0);
-webkit-tap-highlight-color: ${globalColors.tapHighlight};
}
.combo-button {
@ -452,7 +452,7 @@ const StyledModalRowContainer = styled.div`
}
.embedding-panel_code-container {
-webkit-tap-highlight-color: rgba(0, 0, 0, 0);
-webkit-tap-highlight-color: ${globalColors.tapHighlight};
}
.embedding-panel_text {
@ -472,7 +472,7 @@ const StyledModalRowContainer = styled.div`
.embedding-panel_link {
margin-inline-end: 8px;
border: 1px solid #eceef1;
border: ${(props) => props.theme.filesPanels.embedding.border};
border-radius: 16px;
line-height: 30px;
padding: 4px 15px;
@ -489,7 +489,7 @@ const StyledModalRowContainer = styled.div`
}
.embedding-panel_code-container {
-webkit-tap-highlight-color: rgba(0, 0, 0, 0);
-webkit-tap-highlight-color: ${globalColors.tapHighlight};
}
.embedding-panel_text {

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

@ -121,6 +121,7 @@ const StyledFileRow = styled(Row)`
}
.enter-password {
color: ${(props) => props.theme.filesPanels.upload.color};
margin-inline-end: 8px;
text-decoration: underline dashed;
cursor: pointer;
@ -132,6 +133,7 @@ const StyledFileRow = styled(Row)`
}
.convert_icon {
color: ${(props) => props.theme.filesPanels.upload.iconFill};
padding-inline-end: 12px;
}
@ -145,6 +147,18 @@ const StyledFileRow = styled(Row)`
cursor: pointer;
}
}
.upload-panel-file-error_text {
${(props) =>
props.isError &&
css`
color: ${props.theme.filesPanels.upload.color};
`}
}
.file-exst {
color: ${(props) => props.theme.filesPanels.upload.color};
}
`;
class FileRow extends Component {
constructor(props) {
@ -269,7 +283,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>
) : (
@ -295,14 +309,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}
>
@ -312,11 +326,11 @@ class FileRow extends Component {
) : (
<div className="upload-panel_file-name">
<Link
className="upload-panel-file-error_text"
onClick={() =>
onFileClick(item.fileInfo ? item.fileInfo.webUrl : "")
}
fontWeight="600"
color={item.error && "#A3A9AE"}
truncate
// href={item.fileInfo ? item.fileInfo.webUrl : ""}
// target={downloadInCurrentTab ? "_self" : "_blank"}
@ -328,7 +342,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

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

2
packages/client/src/helpers/plugins/components/Plugin.js
View File

@ -44,7 +44,7 @@ const StyledPlugin = styled.div`
height: 1px;
width: 100%;
background-color: #858585;
background-color: ${(props) => props.theme.plugins.color};
}
`;

2
packages/client/src/helpers/plugins/components/PluginInfo.js
View File

@ -58,7 +58,7 @@ const StyledInfo = styled.div`
gap: 16px;
.row-name {
color: #858585;
color: ${(props) => props.theme.plugins.color};
}
}
`;

2
packages/client/src/helpers/plugins/enums.ts
View File

@ -110,7 +110,7 @@ export const enum PluginComponents {
export const enum PluginUsersType {
owner = "Owner",
docSpaceAdmin = "DocspaceAdmin",
docSpaceAdmin = "DocSpaceAdmin",
roomAdmin = "RoomAdmin",
collaborator = "Collaborator",
user = "User",

4
packages/client/src/pages/Bonus/sub-components/OfficialDocumentation.js
View File

@ -37,9 +37,9 @@ const OfficialDocumentation = ({ dataBackupUrl }) => {
const { t } = useTranslation("PaymentsEnterprise");
const dockerLink =
"https://helpcenter.onlyoffice.com/installation/docspace-enterprise-install-docker.aspx";
"https://helpcenter.onlyoffice.com/installation/docspace-enterprise-install-script.aspx";
const linuxDocker =
"https://helpcenter.onlyoffice.com/installation/docspace-enterprise-install-linux.aspx";
"https://helpcenter.onlyoffice.com/installation/docspace-enterprise-install-script.aspx";
const windowsDocker =
"https://helpcenter.onlyoffice.com/installation/docspace-enterprise-install-windows.aspx";

2
packages/client/src/pages/Confirm/sub-components/LanguageCombobox.tsx
View File

@ -55,7 +55,7 @@ const LanguageComboboxWrapper = (props: TLanguageCombobox) => {
onSelectLanguage={onLanguageSelect}
cultures={cultures}
selectedCulture={currentCultureName}
withBorder={false}
withBorder={!isMobileView}
/>
);
};

3
packages/client/src/pages/Confirm/sub-components/StyledCreateUser.js
View File

@ -82,6 +82,7 @@ export const RegisterContainer = styled.div`
width: 100%;
.or-label {
color: ${(props) => props.theme.invitePage.textColor};
margin: 0 8px;
}
@ -90,7 +91,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;
}

4
packages/client/src/pages/Confirm/sub-components/createUser.js
View File

@ -709,9 +709,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}

4
packages/client/src/pages/DebugInfo/index.js
View File

@ -45,7 +45,7 @@ const StyledModalDialog = styled(ModalDialog)`
width: auto;
/* Light theme. */
--color-border-default: #d0d7de;
--color-border-default: ${(props) => props.theme.dialogs.borderColor};
--color-border-muted: hsla(210, 18%, 87%, 1);
.modal-footer {
@ -53,7 +53,7 @@ const StyledModalDialog = styled(ModalDialog)`
}
a {
color: #4781d1;
color: ${(props) => props.theme.dialogs.linkColor};
}
.debug-info-body,

11
packages/client/src/pages/FormGallery/TilesView/StyledTileView.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 TileContent from "./sub-components/TileContent";
import { ContextMenu } from "@docspace/shared/components/context-menu";
@ -51,14 +51,17 @@ const StyledTile = styled.div`
width: 100%;
border: ${(props) => props.theme.filesSection.tilesView.tile.border};
border-radius: 6px;
${(props) => props.showHotkeyBorder && "border-color: #2DA7DB"};
-webkit-tap-highlight-color: rgba(0, 0, 0, 0);
${(props) =>
props.showHotkeyBorder && `border-color: ${globalColors.lightSecondMain}`};
-webkit-tap-highlight-color: ${globalColors.tapHighlight};
${(props) => props.isSelected && checkedStyle}
&:before,
&:after {
${(props) => props.showHotkeyBorder && "border-color: #2DA7DB"};
${(props) =>
props.showHotkeyBorder &&
`border-color: ${globalColors.lightSecondMain}`};
}
&:before,

4
packages/client/src/pages/Home/InfoPanel/Body/styles/gallery.js
View File

@ -26,14 +26,14 @@
import styled from "styled-components";
import { isMobileOnly } from "react-device-detect";
import { Base } from "@docspace/shared/themes";
import { Base, globalColors } from "@docspace/shared/themes";
const StyledGalleryThumbnail = styled.div`
box-sizing: border-box;
width: 100%;
overflow: hidden;
border-radius: 6px;
-webkit-tap-highlight-color: rgba(0, 0, 0, 0);
-webkit-tap-highlight-color: ${globalColors.tapHighlight};
height: ${isMobileOnly ? "335px" : "346px"};
border: ${(props) =>
`solid 1px ${props.theme.infoPanel.gallery.borderColor}`};

4
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;
@ -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;

17
packages/client/src/pages/Home/InfoPanel/Body/sub-components/ItemTitle/AccountsItemTitle.js
View File

@ -38,6 +38,7 @@ import Badges from "@docspace/client/src/pages/Home/Section/AccountsBody/Badges"
import { StyledAccountsItemTitle } from "../../styles/accounts";
import { decode } from "he";
import { globalColors } from "@docspace/shared/themes";
const AccountsItemTitle = ({
t,
@ -114,8 +115,12 @@ const AccountsItemTitle = ({
id="sso-badge-info-panel"
className="sso-badge"
label={t("Common:SSO")}
color={"#FFFFFF"}
backgroundColor={theme.isBase ? "#22C386" : "#2E5E4C"}
color={globalColors.white}
backgroundColor={
theme.isBase
? globalColors.secondGreen
: globalColors.secondGreenDark
}
fontSize={"9px"}
fontWeight={800}
noHover
@ -133,8 +138,12 @@ const AccountsItemTitle = ({
id="ldap-badge-info-panel"
className="ldap-badge"
label={t("Common:LDAP")}
color={"#FFFFFF"}
backgroundColor={theme.isBase ? "#8570BD" : "#544C6A"}
color={globalColors.white}
backgroundColor={
theme.isBase
? globalColors.secondPurple
: globalColors.secondPurpleDark
}
fontSize={"9px"}
fontWeight={800}
noHover

5
packages/client/src/pages/Home/InfoPanel/Body/sub-components/ItemTitle/GroupsItemTitle.js
View File

@ -36,6 +36,7 @@ import { inject, observer } from "mobx-react";
import { decode } from "he";
import { Badge } from "@docspace/shared/components/badge";
import { Tooltip } from "@docspace/shared/components/tooltip";
import { globalColors } from "@docspace/shared/themes";
const GroupsItemTitle = ({
t,
@ -95,8 +96,8 @@ const GroupsItemTitle = ({
id="ldap-badge-info-panel"
className="ldap-badge"
label={t("Common:LDAP")}
color={"#FFFFFF"}
backgroundColor={theme.isBase ? "#8570BD" : "#544C6A"}
color={globalColors.white}
backgroundColor={globalColors.secondPurple}
fontSize={"9px"}
fontWeight={800}
noHover

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";
@ -68,6 +70,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;
@ -263,7 +267,7 @@ const User = ({
fontSize="12px"
noSelect
truncate
color="#A3A9AE !important"
color={theme.infoPanel.members.subtitleColor}
dir="auto"
>
{`${typeLabel} | ${user.email}`}
@ -356,7 +360,7 @@ const User = ({
fontSize="12px"
noSelect
truncate
color="#A3A9AE"
color={theme.infoPanel.members.subtitleColor}
dir="auto"
>
{`${typeLabel} | ${user.email}`}

20
packages/client/src/pages/Home/InfoPanel/Body/views/Members/sub-components/Styled.js
View File

@ -25,26 +25,8 @@
// International. See the License terms at http://creativecommons.org/licenses/by-sa/4.0/legalcode
import styled, { css } from "styled-components";
import CrossReactSvg from "PUBLIC_DIR/images/cross.react.svg";
import { commonIconsStyles } from "@docspace/shared/utils";
import { Base } from "@docspace/shared/themes";
const StyledCrossIcon = styled(CrossReactSvg)`
${commonIconsStyles}
g {
path {
fill: #657077;
}
}
path {
fill: #999976;
}
`;
const LinksBlock = styled.div`
display: flex;
height: 100%;
@ -158,4 +140,4 @@ export const StyledPublicRoomBarContainer = styled.div`
StyledLinkRow.defaultProps = { theme: Base };
export { StyledCrossIcon, LinksBlock, StyledLinkRow };
export { LinksBlock, StyledLinkRow };

28
packages/client/src/pages/Home/Section/AccountsBody/Badges.js
View File

@ -31,7 +31,7 @@ import { withTranslation } from "react-i18next";
import { useNavigate, useLocation } from "react-router-dom";
import { PaymentsType, AccountLoginType } from "@docspace/shared/enums";
import { globalColors } from "@docspace/shared/themes";
import { Badge } from "@docspace/shared/components/badge";
import { commonIconsStyles } from "@docspace/shared/utils";
@ -61,13 +61,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};
}
`;
@ -116,8 +116,12 @@ const Badges = ({
<Badge
className="accounts-badge"
label={t("Common:LDAP")}
color={"#FFFFFF"}
backgroundColor={theme.isBase ? "#8570BD" : "#544C6A"}
color={globalColors.white}
backgroundColor={
theme.isBase
? globalColors.secondPurple
: globalColors.secondPurpleDark
}
fontSize={"9px"}
fontWeight={800}
noHover
@ -129,8 +133,12 @@ const Badges = ({
<Badge
className="accounts-badge"
label={t("SSO")}
color={"#FFFFFF"}
backgroundColor={theme.isBase ? "#22C386" : "#2E5E4C"}
color={globalColors.white}
backgroundColor={
theme.isBase
? globalColors.secondGreen
: globalColors.secondGreenDark
}
fontSize={"9px"}
fontWeight={800}
noHover
@ -142,7 +150,11 @@ const Badges = ({
<StyledPaidBadge
className="paid-badge accounts-badge"
label={t("Paid")}
backgroundColor={theme.isBase ? "#EDC409" : "#A38A1A"}
backgroundColor={
theme.isBase
? globalColors.favoritesStatus
: globalColors.favoriteStatusDark
}
fontSize={"9px"}
fontWeight={800}
lineHeight={"13px"}

9
packages/client/src/pages/Home/Section/AccountsBody/Groups/RowView/index.styled.js
View File

@ -28,7 +28,7 @@ import styled, { css } from "styled-components";
import { RowContainer } from "@docspace/shared/components/row-container";
import { isMobile, isTablet } from "react-device-detect";
import { Row } from "@docspace/shared/components/row";
import { Base } from "@docspace/shared/themes";
import { Base, globalColors } from "@docspace/shared/themes";
import { mobile, tablet } from "@docspace/shared/utils/device";
import { RowContent } from "@docspace/shared/components/row-content";
@ -142,7 +142,7 @@ export const GroupsRow = styled(Row)`
position: unset;
-webkit-tap-highlight-color: rgba(0, 0, 0, 0);
-webkit-tap-highlight-color: ${globalColors.tapHighlight};
.styled-element {
height: 32px;
margin-inline-end: 12px;
@ -156,8 +156,9 @@ export const GroupsRow = styled(Row)`
font-size: 12px;
font-weight: 700;
line-height: 16px;
background: #eceef1;
color: #333;
background: ${(props) =>
props.theme.filesSection.tableView.row.backgroundGroup};
color: ${(props) => props.theme.filesSection.tableView.row.color};
border-radius: 50%;
}
`;

3
packages/client/src/pages/Home/Section/AccountsBody/Groups/TableView/GroupsTableItem.js
View File

@ -34,6 +34,7 @@ import * as Styled from "./index.styled";
import { Text } from "@docspace/shared/components/text";
import { Avatar } from "@docspace/shared/components/avatar";
import Badges from "../../Badges";
import { globalColors } from "@docspace/shared/themes";
const GroupsTableItem = ({
t,
@ -147,7 +148,7 @@ const GroupsTableItem = ({
fontSize="13px"
isTextOverflow
className="table-cell_group-manager"
color={"#A3A9AE"}
color={globalColors.gray}
dir="auto"
>
{item.manager?.displayName}

4
packages/client/src/pages/Home/Section/AccountsBody/InsideGroup/RowView/SimpleUserRow.js
View File

@ -29,7 +29,7 @@ import styled, { css } from "styled-components";
import { isMobile } from "react-device-detect";
import { Row } from "@docspace/shared/components/row";
import { Base } from "@docspace/shared/themes";
import { Base, globalColors } from "@docspace/shared/themes";
import withContent from "SRC_DIR/HOCs/withPeopleContent";
@ -112,7 +112,7 @@ const StyledSimpleUserRow = styled(Row)`
`}
position: unset;
-webkit-tap-highlight-color: rgba(0, 0, 0, 0);
-webkit-tap-highlight-color: ${globalColors.tapHighlight};
.styled-element {
height: 32px;

5
packages/client/src/pages/Home/Section/AccountsBody/People/RowView/SimpleUserRow.js
View File

@ -29,7 +29,7 @@ import styled, { css } from "styled-components";
import { isMobile } from "react-device-detect";
import { Row } from "@docspace/shared/components/row";
import { Base } from "@docspace/shared/themes";
import { Base, globalColors } from "@docspace/shared/themes";
import withContent from "SRC_DIR/HOCs/withPeopleContent";
@ -112,8 +112,7 @@ const StyledSimpleUserRow = styled(Row)`
`}
position: unset;
-webkit-tap-highlight-color: rgba(0, 0, 0, 0);
-webkit-tap-highlight-color: ${globalColors.tapHighlight};
.styled-element {
height: 32px;
margin-inline-end: 12px;

18
packages/client/src/pages/Home/Section/AccountsBody/People/TableView/TableHeader.js
View File

@ -141,25 +141,17 @@ class PeopleTableHeader extends React.Component {
const { filter, setFilter, setIsLoading, navigate, location } = this.props;
const newFilter = filter.clone();
if (newFilter.sortBy === sortBy && sortBy !== "AZ") {
if (
newFilter.sortBy === sortBy ||
(sortBy === "AZ" && newFilter.sortBy === "firstname")
) {
newFilter.sortOrder =
newFilter.sortOrder === "ascending" ? "descending" : "ascending";
} else {
newFilter.sortBy = sortBy;
if (sortBy === "AZ") {
if (
newFilter.sortBy !== "lastname" &&
newFilter.sortBy !== "firstname"
) {
newFilter.sortBy = "firstname";
} else if (newFilter.sortBy === "lastname") {
newFilter.sortBy = "firstname";
} else {
newFilter.sortBy = "lastname";
}
newFilter.sortOrder =
newFilter.sortOrder === "ascending" ? "descending" : "ascending";
newFilter.sortBy = "firstname";
}
}

1
packages/client/src/pages/Home/Section/AccountsBody/People/TableView/TableRow.js
View File

@ -605,6 +605,7 @@ const PeopleTableRow = (props) => {
onClick={onEmailClick}
isTextOverflow
dir="auto"
enableUserSelect
>
{email}
</Link>

6
packages/client/src/pages/Home/Section/Body/RowsView/SimpleFilesRow.js
View File

@ -44,7 +44,7 @@ import withQuickButtons from "../../../../../HOCs/withQuickButtons";
import withBadges from "../../../../../HOCs/withBadges";
import ItemIcon from "../../../../../components/ItemIcon";
import marginStyles from "./CommonStyles";
import { Base } from "@docspace/shared/themes";
import { Base, globalColors } from "@docspace/shared/themes";
import CursorPalmReactSvgUrl from "PUBLIC_DIR/images/cursor.palm.react.svg?url";
@ -89,7 +89,7 @@ const StyledWrapper = styled.div`
${(props) =>
props.showHotkeyBorder &&
css`
border-color: #2da7db !important;
border-color: ${globalColors.lightSecondMain} !important;
z-index: 1;
position: relative;
@ -142,7 +142,7 @@ const StyledSimpleFilesRow = styled(Row)`
}
`}
-webkit-tap-highlight-color: rgba(0, 0, 0, 0);
-webkit-tap-highlight-color: ${globalColors.tapHighlight};
.styled-element {
height: 32px;

12
packages/client/src/pages/Home/Section/Body/TableView/StyledTable.js
View File

@ -25,14 +25,18 @@
// 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/base";
import { Base, globalColors } from "@docspace/shared/themes";
import { TableRow } from "@docspace/shared/components/table";
import DragAndDrop from "@docspace/shared/components/drag-and-drop/DragAndDrop";
import CursorPalmSvgUrl from "PUBLIC_DIR/images/cursor.palm.react.svg?url";
const hotkeyBorderStyle = css`
border-image-slice: 1;
border-image-source: linear-gradient(to left, #2da7db 24px, #2da7db 24px);
border-image-source: linear-gradient(
to left,
${globalColors.lightSecondMain} 24px,
${globalColors.lightSecondMain} 24px
);
`;
const rowCheckboxDraggingStyle = css`
@ -128,7 +132,7 @@ const StyledTableRow = styled(TableRow)`
props.showHotkeyBorder &&
css`
z-index: 1;
border-color: #2da7db !important;
border-color: ${globalColors.lightSecondMain} !important;
`}
}
@ -338,7 +342,7 @@ const StyledQuickButtonsContainer = styled.div`
fill: ${(props) =>
props.theme.filesSection.tableView.row.shareHoverColor};
}
-webkit-tap-highlight-color: rgba(0, 0, 0, 0);
-webkit-tap-highlight-color: ${globalColors.tapHighlight};
}
`;

3
packages/client/src/pages/Home/Section/Body/TableView/sub-components/RoomCell.js
View File

@ -31,6 +31,7 @@ import React, { useState } from "react";
import { StyledText } from "./CellStyles";
import { getFolderPath } from "@docspace/shared/api/files";
import { CategoryType } from "@docspace/client/src/helpers/constants";
import { globalColors } from "@docspace/shared/themes";
const RoomCell = ({ sideColor, item }) => {
const { originRoomTitle, originId, originTitle } = item;
@ -78,7 +79,7 @@ const RoomCell = ({ sideColor, item }) => {
getContent={() => (
<span>
{isTooltipLoading ? (
<Loader color="#333333" size="12px" type="track" />
<Loader color={globalColors.black} size="12px" type="track" />
) : (
path.map((pathPart, i) => (
<Text key={pathPart.id} isBold={i === 0} isInline fontSize="12px">

1
packages/client/src/pages/Home/Section/Body/TilesView/sub-components/InfiniteGrid.js
View File

@ -196,6 +196,7 @@ const InfiniteGrid = (props) => {
key={key}
className={`tiles-loader ${type}`}
isFolder={type === "isFolder"}
isRoom={type === "isRoom"}
/>,
);
}

13
packages/client/src/pages/Home/Section/Body/TilesView/sub-components/Tile.js
View File

@ -36,7 +36,7 @@ import { isMobile } from "react-device-detect";
import { withTheme } from "styled-components";
import { Link } from "@docspace/shared/components/link";
import { Loader } from "@docspace/shared/components/loader";
import { Base } from "@docspace/shared/themes";
import { Base, globalColors } from "@docspace/shared/themes";
import { Tags } from "@docspace/shared/components/tags";
import { Tag } from "@docspace/shared/components/tag";
import { getRoomTypeName } from "SRC_DIR/helpers/filesUtils";
@ -154,10 +154,11 @@ const StyledTile = styled.div`
isRooms
? theme.filesSection.tilesView.tile.roomsBorderRadius
: theme.filesSection.tilesView.tile.borderRadius};
${(props) => props.showHotkeyBorder && "border-color: #2DA7DB"};
${(props) =>
props.showHotkeyBorder && `border-color: ${globalColors.lightSecondMain}`};
${(props) =>
props.isFolder && !props.isRooms && "border-start-start-radius: 6px;"}
-webkit-tap-highlight-color: rgba(0, 0, 0, 0);
-webkit-tap-highlight-color: ${globalColors.tapHighlight};
${(props) => props.isFolder && (props.isRoom ? roomsStyles : FlexBoxStyles)};
${(props) => (props.isFolder ? FolderStyles : FileStyles)};
@ -200,7 +201,9 @@ const StyledTile = styled.div`
&:before,
&:after {
${(props) => props.showHotkeyBorder && "border-color: #2DA7DB"};
${(props) =>
props.showHotkeyBorder &&
`border-color: ${globalColors.lightSecondMain}`};
}
&:before,
@ -468,7 +471,7 @@ const StyledIcons = styled.div`
background: ${(props) =>
props.theme.filesSection.tilesView.tile.backgroundBadgeColor};
border-radius: 4px;
box-shadow: 0px 2px 4px rgba(4, 15, 27, 0.16);
box-shadow: 0px 2px 4px ${globalColors.badgeShadow};
}
`;

3
packages/client/src/pages/Home/Section/Header/index.js
View File

@ -50,6 +50,7 @@ import {
getCategoryUrl,
} from "SRC_DIR/helpers/utils";
import TariffBar from "SRC_DIR/components/TariffBar";
import { globalColors } from "@docspace/shared/themes";
const StyledContainer = styled.div`
width: 100%;
@ -58,7 +59,7 @@ const StyledContainer = styled.div`
.table-container_group-menu {
margin-block: 0;
margin-inline: -20px 0;
-webkit-tap-highlight-color: rgba(0, 0, 0, 0);
-webkit-tap-highlight-color: ${globalColors.tapHighlight};
width: calc(100% + 40px);
height: 68px;

7
packages/client/src/pages/PortalSettings/Layout/Section/Header/index.js
View File

@ -40,6 +40,7 @@ import LoaderSectionHeader from "../loaderSectionHeader";
import { mobile, tablet, desktop, isMobile } from "@docspace/shared/utils";
import withLoading from "SRC_DIR/HOCs/withLoading";
import { Badge } from "@docspace/shared/components/badge";
import { globalColors } from "@docspace/shared/themes";
import {
getKeyByLink,
settingsTree,
@ -349,7 +350,11 @@ const SectionHeaderContent = (props) => {
<div className="header">{translatedHeader}</div>
{isNeedPaidIcon ? (
<Badge
backgroundColor={theme.isBase ? "#EDC409" : "#A38A1A"}
backgroundColor={
theme.isBase
? globalColors.favoritesStatus
: globalColors.favoriteStatusDark
}
label={t("Common:Paid")}
fontWeight="700"
className="settings-section_badge"

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

@ -68,12 +68,14 @@ const StyledComponent = styled.div`
margin-inline-end: 12px;
border-radius: 8px;
cursor: pointer;
background: ${(props) => (props.theme.isBase ? "#eceef1" : "#474747")}
background: ${(props) =>
props.theme.client.settings.common.appearance.themeAddBackground}
url(${PlusThemeSvgUrl}) no-repeat center;
}
.add-theme {
background: #d0d5da;
background: ${(props) =>
props.theme.client.settings.common.appearance.addThemeBackground};
padding-top: 16px;
padding-inline-start: 16px;
box-sizing: border-box;

82
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";
const StyledComponent = styled.div`
display: inline-flex;
@ -40,7 +40,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`
@ -63,7 +65,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;
}
@ -75,7 +79,8 @@ const StyledComponent = styled.div`
circle {
fill: ${(props) => props.colorPreview};
stroke: ${(props) => props.themePreview === "Dark" && "#292929"};
stroke: ${(props) =>
props.themePreview === "Dark" && globalColors.darkGrayLight};
}
}
@ -115,7 +120,7 @@ const StyledComponent = styled.div`
border-inline-start-style: none;
`}
background: ${(props) =>
props.themePreview === "Light" ? "#FFFFFF" : "#333333"};
props.themePreview === "Light" ? globalColors.white : globalColors.black};
}
.section-header {
@ -169,7 +174,7 @@ const StyledComponent = styled.div`
.color-badge rect {
fill: ${(props) =>
props.themePreview === "Dark" && props.selectThemeId === 7
? "#FFFFFF"
? globalColors.white
: props.colorPreview} !important;
}
@ -177,7 +182,7 @@ const StyledComponent = styled.div`
fill: ${(props) =>
props.themePreview === "Light"
? `${props.colorPreview} !important`
: `#FFFFFF !important`};
: `${globalColors.white} !important`};
}
.menu-section {
@ -193,7 +198,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;
}
@ -227,7 +234,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 {
@ -237,7 +244,9 @@ const StyledComponent = styled.div`
.border-color {
border-color: ${(props) =>
props.themePreview === "Light" ? "#d0d5da" : "#474747"};
props.themePreview === "Light"
? globalColors.grayStrong
: globalColors.grayDarkStrong};
}
.tile {
@ -250,7 +259,9 @@ const StyledComponent = styled.div`
.background {
background: ${(props) =>
props.themePreview === "Light" ? "#FFF" : "#292929"};
props.themePreview === "Light"
? globalColors.white
: globalColors.darkGrayLight};
}
.tile-name {
@ -314,7 +325,7 @@ const StyledComponent = styled.div`
fill: ${(props) =>
props.themePreview === "Light"
? `${props.colorPreview} !important`
: `#FFFFFF !important`};
: `${globalColors.white} !important`};
}
}
@ -323,7 +334,7 @@ const StyledComponent = styled.div`
}
.main-button_text {
color: #ffffff !important;
color: ${globalColors.white} !important;
}
`;
@ -339,7 +350,7 @@ const StyledFloatingButton = styled.div`
display: flex;
align-items: center;
justify-content: center;
box-shadow: 0px 12px 40px rgba(4, 15, 27, 0.12);
box-shadow: 0px 12px 40px ${globalColors.popupShadow};
`;
StyledFloatingButton.defaultProps = { theme: Base };
@ -361,10 +372,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;
@ -390,7 +403,7 @@ const StyledMobilePreview = styled.div`
.color-badge rect {
fill: ${(props) =>
props.themePreview === "Dark" && props.selectThemeId === 7
? "#FFFFFF"
? globalColors.white
: props.colorPreview} !important;
}
@ -398,7 +411,7 @@ const StyledMobilePreview = styled.div`
fill: ${(props) =>
props.themePreview === "Light"
? `${props.colorPreview} !important`
: `#FFFFFF !important`};
: `${globalColors.white} !important`};
}
.menu-section {
@ -409,33 +422,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 {
@ -448,7 +469,9 @@ const StyledMobilePreview = styled.div`
.background {
background: ${(props) =>
props.themePreview === "Light" ? "#FFF" : "#292929"};
props.themePreview === "Light"
? globalColors.white
: globalColors.darkGrayLight};
}
.tile-name {
@ -504,7 +527,7 @@ const StyledMobilePreview = styled.div`
fill: ${(props) =>
props.themePreview === "Light"
? `${props.colorPreview} !important`
: `#FFFFFF !important`};
: `${globalColors.white} !important`};
}
}
@ -523,7 +546,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;
}
@ -541,7 +566,7 @@ const StyledMobilePreview = styled.div`
.color-badge rect {
fill: ${({ themePreview, selectThemeId, colorPreview }) =>
themePreview === "Dark" && selectThemeId === 7
? "#FFFFFF"
? globalColors.white
: colorPreview} !important;
}
.section-badge {
@ -562,7 +587,8 @@ const StyledMobilePreview = styled.div`
.icon-button_svg {
svg {
path {
fill: #a3a9ae;
fill: ${(props) =>
props.theme.client.settings.common.appearance.iconFill};
}
}
}

18
packages/client/src/pages/PortalSettings/categories/common/Appearance/preview.js
View File

@ -40,6 +40,7 @@ import ButtonPlusIcon from "PUBLIC_DIR/images/actions.button.plus.react.svg";
import { saveToSessionStorage, getFromSessionStorage } from "../../../utils";
import { isMobile, isTablet } from "@docspace/shared/utils";
import { globalColors } from "@docspace/shared/themes";
const Preview = (props) => {
const {
@ -366,8 +367,21 @@ const Preview = (props) => {
fill="none"
xmlns="http://www.w3.org/2000/svg"
>
<rect x="4" y="6" width="20" height="20" rx="2" fill="#11A3D4" />
<circle cx="24" cy="6" r="5" fill="#11A3D4" stroke="#F8F9F9" />
<rect
x="4"
y="6"
width="20"
height="20"
rx="2"
fill={globalColors.secondBlue}
/>
<circle
cx="24"
cy="6"
r="5"
fill={globalColors.secondBlue}
stroke={globalColors.grayLight}
/>
</svg>
<RectangleSkeleton
animate={false}

8
packages/client/src/pages/PortalSettings/categories/common/Branding/CommonWhiteLabel.js
View File

@ -37,7 +37,7 @@ import { TextInput } from "@docspace/shared/components/text-input";
import { Button } from "@docspace/shared/components/button";
import { Badge } from "@docspace/shared/components/badge";
import { SaveCancelButtons } from "@docspace/shared/components/save-cancel-buttons";
import { globalColors } from "@docspace/shared/themes";
import WhiteLabelWrapper from "./StyledWhitelabel";
import Logo from "./sub-components/logo";
@ -68,7 +68,11 @@ const CommonWhiteLabel = ({
{!isSettingPaid && (
<Badge
className="paid-badge"
backgroundColor={theme.isBase ? "#EDC409" : "#A38A1A"}
backgroundColor={
theme.isBase
? globalColors.favoritesStatus
: globalColors.favoriteStatusDark
}
label={t("Common:Paid")}
isPaidBadge={true}
/>

11
packages/client/src/pages/PortalSettings/categories/common/Branding/companyInfoSettings.js
View File

@ -49,13 +49,18 @@ import { saveToSessionStorage, getFromSessionStorage } from "../../../utils";
const StyledComponent = styled.div`
.link {
font-weight: 600;
border-bottom: 1px dashed #333333;
border-color: ${(props) => !props.isSettingPaid && "#A3A9AE"};
border-bottom: ${(props) =>
props.theme.client.settings.common.companyInfo.border};
border-color: ${(props) =>
!props.isSettingPaid &&
props.theme.client.settings.common.companyInfo.color};
}
.description,
.link {
color: ${(props) => !props.isSettingPaid && "#A3A9AE"};
color: ${(props) =>
!props.isSettingPaid &&
props.theme.client.settings.common.companyInfo.color};
}
.text-input {

12
packages/client/src/pages/PortalSettings/categories/common/Branding/whitelabel.js
View File

@ -39,7 +39,7 @@ import { SaveCancelButtons } from "@docspace/shared/components/save-cancel-butto
import { toastr } from "@docspace/shared/components/toast";
import { isManagement } from "@docspace/shared/utils/common";
import { size } from "@docspace/shared/utils";
import { globalColors } from "@docspace/shared/themes";
import { saveToSessionStorage, getFromSessionStorage } from "../../../utils";
import WhiteLabelWrapper from "./StyledWhitelabel";
import LoaderWhiteLabel from "../sub-components/loaderWhiteLabel";
@ -177,7 +177,7 @@ const WhiteLabelComponent = (props) => {
options.height,
options.text,
options.fontSize,
isDocsEditorName ? "#fff" : "#000",
isDocsEditorName ? globalColors.white : globalColors.darkBlack,
options.alignCenter,
options.isEditor,
);
@ -186,7 +186,7 @@ const WhiteLabelComponent = (props) => {
options.height,
options.text,
options.fontSize,
"#fff",
globalColors.white,
options.alignCenter,
options.isEditor,
);
@ -289,7 +289,11 @@ const WhiteLabelComponent = (props) => {
<Badge
className="paid-badge"
fontWeight="700"
backgroundColor={theme.isBase ? "#EDC409" : "#A38A1A"}
backgroundColor={
theme.isBase
? globalColors.favoritesStatus
: globalColors.favoriteStatusDark
}
label={t("Common:Paid")}
isPaidBadge={true}
/>

6
packages/client/src/pages/PortalSettings/categories/common/Customization/StyledSettings.js
View File

@ -79,6 +79,10 @@ const StyledSettingsComponent = styled.div`
${(props) => props.standalone && "margin-top: 14px"};
}
.dns-error-text {
color: ${(props) => props.theme.client.settings.common.dns.errorColor};
}
.combo-button-label {
max-width: 100%;
font-weight: 400;
@ -92,7 +96,7 @@ const StyledSettingsComponent = styled.div`
.errorText {
position: absolute;
font-size: 10px;
color: #f21c0e;
color: ${(props) => props.theme.client.settings.common.dns.errorColor};
}
.settings-block__wrapper-language {

11
packages/client/src/pages/PortalSettings/categories/common/Customization/dns-settings.js
View File

@ -48,6 +48,7 @@ import { Text } from "@docspace/shared/components/text";
import { Link } from "@docspace/shared/components/link";
import { DeviceType } from "@docspace/shared/enums";
import { parseDomain } from "@docspace/shared/utils/common";
import { globalColors } from "@docspace/shared/themes";
const toggleStyle = {
position: "static",
@ -213,10 +214,10 @@ const DNSSettingsComponent = (props) => {
{errorText &&
errorText.map((err, index) => (
<Text
className="dns-error-text"
key={index}
fontSize="12px"
fontWeight="400"
color="#F24724"
>
{err}
</Text>
@ -227,7 +228,7 @@ const DNSSettingsComponent = (props) => {
key="dns-hint"
fontSize="12px"
fontWeight="400"
color="#A3A9AE"
color={globalColors.gray}
>
{`${t("Settings:DNSSettingsHint")}${domainExampleText}`}
</Text>
@ -290,7 +291,11 @@ const DNSSettingsComponent = (props) => {
<Badge
className="paid-badge"
fontWeight="700"
backgroundColor={theme.isBase ? "#EDC409" : "#A38A1A"}
backgroundColor={
theme.isBase
? globalColors.favoritesStatus
: globalColors.favoriteStatusDark
}
label={t("Common:Paid")}
isPaidBadge={true}
/>

5
packages/client/src/pages/PortalSettings/categories/common/appearance.js
View File

@ -54,6 +54,7 @@ import { isMobile } from "@docspace/shared/utils";
import { DeviceType } from "@docspace/shared/enums";
import { ModalDialog } from "@docspace/shared/components/modal-dialog";
import { ColorPicker } from "@docspace/shared/components/color-picker";
import { globalColors } from "@docspace/shared/themes";
const Appearance = (props) => {
const {
@ -469,8 +470,8 @@ const Appearance = (props) => {
]);
const getTextColor = (color) => {
const black = "#333333";
const white = "#FFFFFF";
const black = globalColors.black;
const white = globalColors.white;
const rgba = hexRgb(color);

65
packages/client/src/pages/PortalSettings/categories/common/sub-components/colorSchemeDialog.js
View File

@ -32,6 +32,7 @@ import { Button } from "@docspace/shared/components/button";
import { withTranslation } from "react-i18next";
import { isMobileOnly } from "react-device-detect";
import { isMobile } from "@docspace/shared/utils";
import { globalColors } from "@docspace/shared/themes";
const StyledComponent = styled(ModalDialog)`
.modal-dialog-aside-footer {
@ -39,7 +40,7 @@ const StyledComponent = styled(ModalDialog)`
bottom: 0 !important;
inset-inline-start: 0;
padding: 16px;
box-shadow: 0px 12px 40px rgba(4, 15, 27, 0.12);
box-shadow: 0px 12px 40px ${globalColors.popupShadow};
}
.new-colors-container {
@ -54,10 +55,12 @@ const StyledComponent = styled(ModalDialog)`
padding-bottom: 20px;
}
${!isMobile() &&
css`
max-width: 448px;
`}
${
!isMobile() &&
css`
max-width: 448px;
`
}
}
.name-color {
@ -74,19 +77,13 @@ const StyledComponent = styled(ModalDialog)`
background: ${(props) =>
props.currentColorAccent
? props.currentColorAccent
: props.theme.isBase
? `#eceef1 url(${PlusThemeSvgUrl}) no-repeat center`
: `#474747 url(${PlusThemeSvgUrl}) no-repeat center`};
}
: `${props.theme.client.settings.common.appearance.accentBoxBackground} url(${PlusThemeSvgUrl}) no-repeat center`}
.buttons-box {
background: ${(props) =>
props.currentColorButtons
? props.currentColorButtons
: props.theme.isBase
? `#eceef1 url(${PlusThemeSvgUrl}) no-repeat center`
: `#474747 url(${PlusThemeSvgUrl}) no-repeat center`};
}
: `${props.theme.client.settings.common.appearance.buttonBoxBackground} url(${PlusThemeSvgUrl}) no-repeat center`}
.modal-add-theme {
width: 46px;
@ -96,34 +93,40 @@ const StyledComponent = styled(ModalDialog)`
}
.drop-down-container-hex {
${isMobileOnly &&
css`
width: 100%;
`}
${
isMobileOnly &&
css`
width: 100%;
`
}
}
.drop-down-item-hex {
${isMobileOnly &&
css`
width: calc(100vw - 32px);
`}
${
isMobileOnly &&
css`
width: calc(100vw - 32px);
`
}
:hover {
background-color: unset;
}
${!isMobile() &&
css`
max-width: 227px;
${
!isMobile() &&
css`
max-width: 227px;
.hex-color-picker {
max-width: 195px;
}
.hex-color-picker {
max-width: 195px;
}
.react-colorful__interactive {
max-width: 183px;
}
`}
.react-colorful__interactive {
max-width: 183px;
}
`
}
}
`;

6
packages/client/src/pages/PortalSettings/categories/data-import/StyledDataImport.ts
View File

@ -28,7 +28,7 @@ import styled from "styled-components";
import { tablet, mobile } from "@docspace/shared/utils/device";
import { TableContainer } from "@docspace/shared/components/table";
import { Base } from "@docspace/shared/themes";
import { Base, globalColors } from "@docspace/shared/themes";
export const WorkspacesContainer = styled.div`
max-width: 700px;
@ -78,7 +78,7 @@ export const WorkspacesContainer = styled.div`
cursor: pointer;
&:hover {
border-color: #4781d1;
border-color: ${globalColors.lightBlueMain};
}
&:active {
@ -153,7 +153,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;

9
packages/client/src/pages/PortalSettings/categories/data-import/components/AddEmailsStep/AccountsTable/RowView/UsersRowContent.tsx
View File

@ -43,7 +43,7 @@ import EditSvg from "PUBLIC_DIR/images/access.edit.react.svg";
import CrossSvg from "PUBLIC_DIR/images/cross.edit.react.svg";
import CheckSvg from "PUBLIC_DIR/images/check.edit.react.svg";
import { Base } from "@docspace/shared/themes";
import { Base, globalColors } from "@docspace/shared/themes";
import EmailChangeDialog from "SRC_DIR/components/dialogs/EmailChangeDialog";
import {
@ -188,7 +188,12 @@ const UsersRowContent = (props: AddEmailRowContentProps) => {
<Text fontWeight={600} fontSize="14px">
{displayName}
</Text>
<Text className="user-email">
<Text
className="user-email"
fontWeight={600}
fontSize="12px"
color={globalColors.gray}
>
{prevEmail === "" ? t("Settings:NoEmail") : prevEmail}
</Text>
</div>

4
packages/client/src/pages/PortalSettings/categories/data-import/components/AddEmailsStep/AccountsTable/TableView/UsersTableRow.tsx
View File

@ -40,7 +40,7 @@ import EditSvg from "PUBLIC_DIR/images/access.edit.react.svg";
import CrossSvg from "PUBLIC_DIR/images/cross.edit.react.svg";
import CheckSvg from "PUBLIC_DIR/images/check.edit.react.svg";
import { Base } from "@docspace/shared/themes";
import { Base, globalColors } from "@docspace/shared/themes";
import { InputType } from "@docspace/shared/components/text-input";
import { TValidate } from "@docspace/shared/components/email-input/EmailInput.types";
@ -232,7 +232,7 @@ const UsersTableRow = (props: AddEmailTableRowProps) => {
) : (
<span onClick={openEmail} className="user-email" ref={emailTextRef}>
<EditSvg />
<Text className="user-email" truncate>
<Text color={globalColors.gray} className="user-email" truncate>
{prevEmail !== "" ? prevEmail : t("Settings:NoEmail")}
</Text>
</span>

2
packages/client/src/pages/PortalSettings/categories/data-import/components/Providers.tsx
View File

@ -100,9 +100,9 @@ const Providers = (props: ProvidersProps) => {
>
<ReactSVG src={workspace.logo} className="workspace-logo" />
<Link
className="link"
type={LinkType.page}
fontWeight="600"
color="#4781D1"
isHovered
isTextOverflow
>

51
packages/client/src/pages/PortalSettings/categories/data-import/components/SelectUsersStep/AccountsTable/RowView/index.tsx
View File

@ -38,6 +38,7 @@ import { Row } from "@docspace/shared/components/row";
import { Text } from "@docspace/shared/components/text";
import EmptyScreenUserReactSvgUrl from "PUBLIC_DIR/images/empty_screen_user.react.svg?url";
import ClearEmptyFilterSvgUrl from "PUBLIC_DIR/images/clear.empty.filter.svg?url";
import { globalColors } from "@docspace/shared/themes";
import { TEnhancedMigrationUser } from "@docspace/shared/api/settings/types";
import UsersRow from "./UsersRow";
import { InjectedRowViewProps, RowViewProps } from "../../../../types";
@ -45,6 +46,56 @@ import { InjectedRowViewProps, RowViewProps } from "../../../../types";
const StyledRowContainer = styled(RowContainer)`
margin: 0 0 20px;
.table-group-menu {
height: 61px;
position: sticky;
z-index: 201;
${(props) =>
props.theme.interfaceDirection === "rtl"
? css`
margin-right: -16px;
`
: css`
margin-left: -16px;
`}
width: 100%;
margin-top: 20px;
top: 61px;
margin-bottom: -29.5px;
.table-container_group-menu {
padding: 0px 16px;
border-image-slice: 0;
box-shadow: ${globalColors.menuShadow} 0px 15px 20px;
}
.table-container_group-menu-checkbox {
${(props) =>
props.theme.interfaceDirection === "rtl"
? css`
margin-right: 8px;
`
: css`
margin-left: 8px;
`}
}
.table-container_group-menu-separator {
margin: 0 16px;
}
}
.header-container-text {
font-size: 12px;
color: ${(props) =>
props.theme.client.settings.migration.tableRowTextColor};
}
.table-container_header {
position: absolute;
}
.clear-icon {
margin-inline-end: 8px;
}

3
packages/client/src/pages/PortalSettings/categories/data-import/components/SelectUsersTypeStep/AccountsTable/RowView/index.tsx
View File

@ -39,6 +39,7 @@ import { Text } from "@docspace/shared/components/text";
import ChangeTypeReactSvgUrl from "PUBLIC_DIR/images/change.type.react.svg?url";
import EmptyScreenUserReactSvgUrl from "PUBLIC_DIR/images/empty_screen_user.react.svg?url";
import ClearEmptyFilterSvgUrl from "PUBLIC_DIR/images/clear.empty.filter.svg?url";
import { globalColors } from "@docspace/shared/themes";
import UsersRow from "./UsersRow";
import {
InjectedTypeSelectRowViewProps,
@ -62,7 +63,7 @@ const StyledRowContainer = styled(RowContainer)`
.table-container_group-menu {
padding: 0px 16px;
border-image-slice: 0;
box-shadow: rgba(4, 15, 27, 0.07) 0px 15px 20px;
box-shadow: ${globalColors.menuShadow} 0px 15px 20px;
}
.table-container_group-menu-checkbox {

4
packages/client/src/pages/PortalSettings/categories/data-import/components/SelectUsersTypeStep/AccountsTable/TableView/index.tsx
View File

@ -26,7 +26,7 @@
import { useRef } from "react";
import { inject, observer } from "mobx-react";
import { Base } from "@docspace/shared/themes";
import { Base, globalColors } from "@docspace/shared/themes";
import styled from "styled-components";
import { EmptyScreenContainer } from "@docspace/shared/components/empty-screen-container";
@ -67,7 +67,7 @@ const UserSelectTableContainer = styled(StyledTableContainer)`
border-image-source: none;
border-bottom: ${(props) =>
props.theme.client.settings.migration.workspaceBorder};
box-shadow: rgba(4, 15, 27, 0.07) 0px 15px 20px;
box-shadow: ${globalColors.menuShadow} 0px 15px 20px;
padding: 0px;
}

29
packages/client/src/pages/PortalSettings/categories/data-import/sub-components/DataImportLoader.tsx
View File

@ -65,6 +65,35 @@ const StyledLoader = styled.div`
justify-content: flex-start;
flex-wrap: wrap;
gap: 20px;
.link {
color: ${(props) => props.theme.client.settings.migration.linkColor};
}
}
.workspace-item {
background: ${(props) =>
props.theme.client.settings.migration.workspaceBackground};
border: ${(props) => props.theme.client.settings.migration.workspaceBorder};
border-radius: 6px;
width: 340px;
height: 64px;
box-sizing: border-box;
padding: 12px 20px;
display: flex;
align-items: center;
justify-content: space-between;
cursor: pointer;
&:hover {
border-color: ${(props) =>
props.theme.client.settings.migration.workspaceHover};
}
&:active {
background-color: ${(props) =>
props.theme.client.settings.migration.workspaceBackground};
}
max-width: 700px;
@media ${tablet} {

11
packages/client/src/pages/PortalSettings/categories/data-management/backup/StyledBackup.js
View File

@ -31,6 +31,7 @@ import {
} from "../../../utils/commonSettingsStyles";
import { tablet, mobile } from "@docspace/shared/utils";
import { globalColors } from "@docspace/shared/themes";
const INPUT_LENGTH = "350px";
const TEXT_LENGTH = "700px";
@ -111,7 +112,7 @@ const commonStyles = css`
max-width: fit-content;
font-size: 12px;
line-height: 15px;
-webkit-tap-highlight-color: rgba(0, 0, 0, 0);
-webkit-tap-highlight-color: ${globalColors.tapHighlight};
}
`;
@ -345,7 +346,7 @@ const StyledRestoreBackup = styled.div`
const StyledModules = styled.div`
margin-bottom: 24px;
.backup-description {
${(props) => props.isDisabled && `color: #A3A9AE`};
${(props) => props.isDisabled && `color: ${globalColors.gray};`};
margin-inline-start: 25px;
max-width: 700px;
}
@ -523,7 +524,7 @@ const StyledBackupList = styled.div`
margin-top: -3px;
grid-area: trash;
path {
fill: #a3a9ae;
fill: ${globalColors.gray};
}
}
.backup-list_icon {
@ -537,7 +538,7 @@ const StyledBackupList = styled.div`
white-space: nowrap;
}
.backup-list_file-exst {
color: #a3a9ae;
color: ${globalColors.gray};
grid-area: ext;
}
.backup-list_radio-button {
@ -591,7 +592,7 @@ const StyledSettingsHeader = styled.div`
-ms-transition: top 0.3s cubic-bezier(0, 0, 0.8, 1);
-webkit-transition: top 0.3s cubic-bezier(0, 0, 0.8, 1);
-o-transition: top 0.3s cubic-bezier(0, 0, 0.8, 1);
background-color: #fff;
background-color: ${globalColors.white};
z-index: 149;
width: 100%;
height: 50px;

7
packages/client/src/pages/PortalSettings/categories/data-management/backup/auto-backup/index.js
View File

@ -59,6 +59,7 @@ import { Link } from "@docspace/shared/components/link";
import { getSettingsThirdParty } from "@docspace/shared/api/files";
import { setDocumentTitle } from "SRC_DIR/helpers/utils";
import { isManagement } from "@docspace/shared/utils/common";
import { globalColors } from "@docspace/shared/themes";
const { DocumentModuleType, ResourcesModuleType, StorageModuleType } =
BackupStorageType;
@ -505,7 +506,11 @@ class AutomaticBackup extends React.PureComponent {
</Text>
{!isEnableAuto && (
<Badge
backgroundColor={theme.isBase ? "#EDC409" : "#A38A1A"}
backgroundColor={
theme.isBase
? globalColors.favoritesStatus
: globalColors.favoriteStatusDark
}
label={t("Common:Paid")}
fontWeight="700"
className="auto-backup_badge"

2
packages/client/src/pages/PortalSettings/categories/delete-data/StyledDeleteData.js
View File

@ -33,7 +33,7 @@ export const DeleteDataLayout = styled.div`
hr {
margin: 24px 0;
border: none;
border-top: 1px solid #eceef1;
border-top: ${(props) => props.theme.client.settings.deleteData.borderTop};
}
`;

6
packages/client/src/pages/PortalSettings/categories/developer-tools/JavascriptSDK/presets/StyledPresets.js
View File

@ -46,7 +46,7 @@ export const SDKContainer = styled(Box)`
.linkHelp {
display: inline;
color: "#657077";
color: ${(props) => props.theme.sdkPresets.linkHelpColor};
}
`;
@ -273,6 +273,10 @@ export const Preview = styled(Box)`
min-width: 660px;
flex-direction: row;
.preview-description {
color: ${(props) => props.theme.sdkPresets.secondaryColor};
}
@media ${tablet} {
margin-top: 0;
min-width: 0;

26
packages/client/src/pages/PortalSettings/categories/developer-tools/JavascriptSDK/sub-components/CodeBlock.js
View File

@ -30,7 +30,7 @@ import styled from "styled-components";
import CodeMirror from "@uiw/react-codemirror";
import { javascript } from "@codemirror/lang-javascript";
import { githubLightInit, githubDarkInit } from "@uiw/codemirror-theme-github";
import { Base } from "@docspace/shared/themes";
import { Base, globalColors } from "@docspace/shared/themes";
import { SDK_SCRIPT_URL } from "@docspace/shared/constants";
const StyledContainer = styled.div`
@ -51,23 +51,23 @@ const CodeBlock = ({ config }) => {
const baseTheme = githubLightInit({
settings: {
background: "#FFFFFF",
caret: "#000000",
lineHighlight: "#F3F4F4",
gutterBorder: "#F8F9F9",
gutterBackground: "#F8F9F9",
gutterForeground: "#333333",
background: globalColors.white,
caret: globalColors.darkBlack,
lineHighlight: globalColors.lightGrayHover,
gutterBorder: globalColors.grayLight,
gutterBackground: globalColors.grayLight,
gutterForeground: globalColors.black,
},
});
const darkTheme = githubDarkInit({
settings: {
background: "#282828",
caret: "#FFFFFF",
lineHighlight: "#3D3D3D",
gutterBorder: "#242424",
gutterBackground: "#242424",
gutterForeground: "#ADADAD",
background: globalColors.darkGrayLight,
caret: globalColors.white,
lineHighlight: globalColors.lightDarkGrayHover,
gutterBorder: globalColors.grayDarkMid,
gutterBackground: globalColors.grayDarkMid,
gutterForeground: globalColors.darkGrayDark,
},
});

6
packages/client/src/pages/PortalSettings/categories/developer-tools/JavascriptSDK/sub-components/CodeToInsert.js
View File

@ -30,19 +30,19 @@ import CodeBlock from "../sub-components/CodeBlock";
import { CategorySubHeader, CodeWrapper } from "../presets/StyledPresets";
export const CodeToInsert = ({ t, theme, codeBlock, config }) => (
export const CodeToInsert = ({ t, codeBlock, config }) => (
<CodeWrapper height="fit-content">
<CategorySubHeader className="copy-window-code">
{`HTML ${t("CodeTitle")}`}
</CategorySubHeader>
<Text lineHeight="20px" color={theme.isBase ? "#657077" : "#ADADAD"}>
<Text lineHeight="20px" className="preview-description">
{t("HtmlCodeDescription", { productName: t("Common:ProductName") })}
</Text>
<Textarea value={codeBlock} heightTextArea={153} />
<CategorySubHeader className="copy-window-code">
{`JavaScript ${t("CodeTitle")}`}
</CategorySubHeader>
<Text lineHeight="20px" color={theme.isBase ? "#657077" : "#ADADAD"}>
<Text lineHeight="20px" className="preview-description">
{t("JavaScriptCodeDescription", { productName: t("Common:ProductName") })}
</Text>
<CodeBlock config={config} />

3
packages/client/src/pages/PortalSettings/categories/developer-tools/JavascriptSDK/sub-components/MainElementParameter.js
View File

@ -40,6 +40,7 @@ import {
ControlsSection,
RowContainer,
} from "../presets/StyledPresets";
import { globalColors } from "@docspace/shared/themes";
export const MainElementParameter = ({
t,
@ -117,7 +118,7 @@ export const MainElementParameter = ({
<ColorInput
scale
handleChange={setButtonColor}
defaultColor={"#5299E0"}
defaultColor={globalColors.lightSecondMain}
/>
</ControlsGroup>
<ControlsGroup>

4
packages/client/src/pages/PortalSettings/categories/developer-tools/JavascriptSDK/sub-components/PreviewBlock.js
View File

@ -51,9 +51,7 @@ export const PreviewBlock = ({
const codeBlock = `<div id="${frameId}">Fallback text</div>\n<script src="${scriptUrl}${params}"></script>`;
const code = (
<CodeToInsert t={t} theme={theme} codeBlock={codeBlock} config={config} />
);
const code = <CodeToInsert t={t} codeBlock={codeBlock} config={config} />;
const dataTabs = [
{
id: "preview",

3
packages/client/src/pages/PortalSettings/categories/developer-tools/JavascriptSDK/sub-components/TooltipContent.js
View File

@ -29,6 +29,7 @@ import { Text } from "@docspace/shared/components/text";
import styled from "styled-components";
import XImg from "PUBLIC_DIR/images/x.react.svg";
import { globalColors } from "@docspace/shared/themes";
const Wrapper = styled.div`
box-sizing: border-box;
@ -48,7 +49,7 @@ const HeaderContainer = styled.header`
svg {
cursor: pointer;
path {
fill: #333;
fill: ${globalColors.black};
}
}
`;

7
packages/client/src/pages/PortalSettings/categories/developer-tools/JavascriptSDK/sub-components/csp.js
View File

@ -39,6 +39,7 @@ import { SelectorAddButton } from "@docspace/shared/components/selector-add-butt
import { SelectedItem } from "@docspace/shared/components/selected-item";
import { tablet } from "@docspace/shared/utils";
import Base from "@docspace/shared/themes/base";
import { globalColors } from "@docspace/shared/themes";
const CategoryHeader = styled.div`
margin-top: 24px;
@ -88,7 +89,7 @@ const ChipsContainer = styled.div`
const InfoBar = styled.div`
display: flex;
background-color: ${(props) => props.theme.infoBar.background};
color: #333;
color: ${(props) => props.theme.infoBar.textColor};
font-size: 12px;
padding: 12px 16px;
border-radius: 6px;
@ -110,7 +111,7 @@ const InfoBar = styled.div`
.header-icon {
svg {
path {
fill: #ed7309;
fill: ${(props) => props.theme.infoBar.iconFill};
}
}
}
@ -258,7 +259,7 @@ const CSP = ({
</Container>
<Text
lineHeight="20px"
color={error ? theme?.input.focusErrorBorderColor : "#A3A9AE"}
color={error ? theme?.input.focusErrorBorderColor : globalColors.gray}
>
{error
? error

6
packages/client/src/pages/PortalSettings/categories/developer-tools/OAuth/sub-components/ClientForm/ClientForm.styled.ts
View File

@ -1,7 +1,7 @@
import styled from "styled-components";
import { mobile } from "@docspace/shared/utils/device";
import { Base } from "@docspace/shared/themes";
import { Base, globalColors } from "@docspace/shared/themes";
const StyledContainer = styled.div`
width: 100%;
@ -276,11 +276,11 @@ const StyledInputAddBlock = styled.div`
gap: 4px;
p {
color: #4781d1;
color: ${globalColors.lightBlueMain};
}
svg path {
fill: #4781d1;
fill: ${globalColors.lightBlueMain};
}
}
`;

Some files were not shown because too many files have changed in this diff Show More