Merge branch 'develop' into feature/move-quick-buttons
This commit is contained in:
commit
540693ac29
@ -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,
|
||||
|
@ -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};
|
||||
}
|
||||
`;
|
||||
|
||||
|
@ -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"
|
||||
|
@ -158,7 +158,9 @@ const EditingWrapper = styled.div`
|
||||
}
|
||||
`};
|
||||
|
||||
${({ isDisabled }) => isDisabled && "background-color: #fff"}
|
||||
${({ isDisabled }) =>
|
||||
isDisabled &&
|
||||
`background-color: ${(props) => props.theme.filesEditingWrapper.disabledBackground}`}
|
||||
}
|
||||
|
||||
.edit-button {
|
||||
|
@ -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 {
|
||||
|
@ -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>
|
||||
|
@ -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(
|
||||
[
|
||||
|
@ -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>
|
||||
)}
|
||||
|
@ -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)`
|
||||
|
@ -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;
|
||||
}
|
||||
`;
|
||||
|
@ -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 {
|
||||
|
@ -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}
|
||||
}
|
||||
|
@ -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;
|
||||
|
@ -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}
|
||||
}
|
||||
|
||||
|
@ -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;
|
||||
|
@ -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,
|
||||
|
@ -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>
|
||||
|
||||
|
@ -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}
|
||||
>
|
||||
|
@ -76,7 +76,7 @@ export const GroupMemberRow = styled.div<{}>`
|
||||
|
||||
svg {
|
||||
path {
|
||||
fill: #a3a9ae;
|
||||
fill: ${(props) => props.theme.createEditGroupDialog.iconFill};
|
||||
}
|
||||
}
|
||||
}
|
||||
|
@ -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};
|
||||
}
|
||||
`;
|
||||
|
@ -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};
|
||||
}
|
||||
`;
|
||||
|
@ -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;
|
||||
}
|
||||
`;
|
||||
|
@ -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};
|
||||
|
@ -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};
|
||||
}
|
||||
`;
|
||||
|
||||
|
@ -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"};
|
||||
|
@ -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;
|
||||
`;
|
||||
|
@ -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;
|
||||
}
|
||||
`;
|
||||
|
||||
|
@ -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;
|
||||
|
@ -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};
|
||||
}
|
||||
}
|
||||
}
|
||||
|
@ -448,7 +448,7 @@ const AddUsersPanel = ({
|
||||
fontSize="12px"
|
||||
noSelect
|
||||
truncate
|
||||
color="#A3A9AE"
|
||||
color={theme.filesPanels.addUsers.textColor}
|
||||
dir="auto"
|
||||
>
|
||||
{`${userType} | ${email}`}
|
||||
|
@ -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
|
||||
|
@ -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;
|
||||
}
|
||||
|
||||
|
@ -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 {
|
||||
|
@ -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};
|
||||
}
|
||||
}
|
||||
}
|
||||
|
@ -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
|
||||
|
@ -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};
|
||||
}
|
||||
}
|
||||
}
|
||||
|
@ -196,11 +196,10 @@ const Item = ({
|
||||
|
||||
{!isGroup && (
|
||||
<Text
|
||||
className="label"
|
||||
className="label about-label"
|
||||
fontWeight={400}
|
||||
fontSize="12px"
|
||||
noSelect
|
||||
color="#A3A9AE"
|
||||
truncate
|
||||
>
|
||||
{`${typeLabel} | ${email}`}
|
||||
|
@ -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
|
||||
|
@ -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 {
|
||||
|
@ -121,6 +121,7 @@ const StyledFileRow = styled(Row)`
|
||||
}
|
||||
|
||||
.enter-password {
|
||||
color: ${(props) => props.theme.filesPanels.upload.textColor};
|
||||
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.textColor};
|
||||
`}
|
||||
}
|
||||
|
||||
.file-exst {
|
||||
color: ${(props) => props.theme.filesPanels.upload.textColor};
|
||||
}
|
||||
`;
|
||||
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>
|
||||
|
@ -55,7 +55,6 @@ const ActionsUploadedFile = ({ item, onCancelCurrentUpload }) => {
|
||||
className="convert_icon"
|
||||
size="medium"
|
||||
isfill={true}
|
||||
color="#A3A9AE"
|
||||
/>
|
||||
</div>
|
||||
)}
|
||||
|
@ -70,7 +70,6 @@ const ErrorFileUpload = ({
|
||||
<Text
|
||||
className="enter-password"
|
||||
fontWeight="600"
|
||||
color="#A3A9AE"
|
||||
onClick={onTextClick}
|
||||
>
|
||||
{showPasswordInput ? t("HideInput") : t("EnterPassword")}
|
||||
|
@ -44,7 +44,7 @@ const StyledPlugin = styled.div`
|
||||
height: 1px;
|
||||
width: 100%;
|
||||
|
||||
background-color: #858585;
|
||||
background-color: ${(props) => props.theme.plugins.color};
|
||||
}
|
||||
`;
|
||||
|
||||
|
@ -58,7 +58,7 @@ const StyledInfo = styled.div`
|
||||
gap: 16px;
|
||||
|
||||
.row-name {
|
||||
color: #858585;
|
||||
color: ${(props) => props.theme.plugins.color};
|
||||
}
|
||||
}
|
||||
`;
|
||||
|
@ -110,7 +110,7 @@ export const enum PluginComponents {
|
||||
|
||||
export const enum PluginUsersType {
|
||||
owner = "Owner",
|
||||
docSpaceAdmin = "DocspaceAdmin",
|
||||
docSpaceAdmin = "DocSpaceAdmin",
|
||||
roomAdmin = "RoomAdmin",
|
||||
collaborator = "Collaborator",
|
||||
user = "User",
|
||||
|
@ -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";
|
||||
|
||||
|
@ -55,7 +55,7 @@ const LanguageComboboxWrapper = (props: TLanguageCombobox) => {
|
||||
onSelectLanguage={onLanguageSelect}
|
||||
cultures={cultures}
|
||||
selectedCulture={currentCultureName}
|
||||
withBorder={false}
|
||||
withBorder={!isMobileView}
|
||||
/>
|
||||
);
|
||||
};
|
||||
|
@ -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;
|
||||
}
|
||||
|
@ -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}
|
||||
|
@ -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,
|
||||
|
@ -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,
|
||||
|
@ -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}`};
|
||||
|
@ -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;
|
||||
|
@ -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
|
||||
|
@ -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
|
||||
|
@ -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}`}
|
||||
|
@ -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 };
|
||||
|
@ -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"}
|
||||
|
@ -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%;
|
||||
}
|
||||
`;
|
||||
|
@ -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}
|
||||
|
@ -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;
|
||||
|
@ -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;
|
||||
|
@ -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";
|
||||
}
|
||||
}
|
||||
|
||||
|
@ -605,6 +605,7 @@ const PeopleTableRow = (props) => {
|
||||
onClick={onEmailClick}
|
||||
isTextOverflow
|
||||
dir="auto"
|
||||
enableUserSelect
|
||||
>
|
||||
{email}
|
||||
</Link>
|
||||
|
@ -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;
|
||||
|
@ -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;
|
||||
`}
|
||||
}
|
||||
|
||||
@ -334,7 +338,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};
|
||||
}
|
||||
`;
|
||||
|
||||
|
@ -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">
|
||||
|
@ -196,6 +196,7 @@ const InfiniteGrid = (props) => {
|
||||
key={key}
|
||||
className={`tiles-loader ${type}`}
|
||||
isFolder={type === "isFolder"}
|
||||
isRoom={type === "isRoom"}
|
||||
/>,
|
||||
);
|
||||
}
|
||||
|
@ -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};
|
||||
}
|
||||
`;
|
||||
|
||||
|
@ -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;
|
||||
|
@ -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"
|
||||
|
@ -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;
|
||||
|
@ -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};
|
||||
}
|
||||
}
|
||||
}
|
||||
|
@ -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}
|
||||
|
@ -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}
|
||||
/>
|
||||
|
@ -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 {
|
||||
|
@ -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}
|
||||
/>
|
||||
|
@ -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 {
|
||||
|
@ -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}
|
||||
/>
|
||||
|
@ -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);
|
||||
|
||||
|
@ -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;
|
||||
}
|
||||
`
|
||||
}
|
||||
}
|
||||
`;
|
||||
|
||||
|
@ -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;
|
||||
|
@ -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>
|
||||
|
@ -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>
|
||||
|
@ -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
|
||||
>
|
||||
|
@ -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;
|
||||
}
|
||||
|
@ -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 {
|
||||
|
@ -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;
|
||||
}
|
||||
|
||||
|
@ -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} {
|
||||
|
@ -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;
|
||||
|
@ -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"
|
||||
|
@ -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};
|
||||
}
|
||||
`;
|
||||
|
||||
|
@ -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;
|
||||
|
@ -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,
|
||||
},
|
||||
});
|
||||
|
||||
|
@ -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} />
|
||||
|
@ -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>
|
||||
|
@ -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",
|
||||
|
@ -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};
|
||||
}
|
||||
}
|
||||
`;
|
||||
|
@ -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
|
||||
|
@ -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
Loading…
Reference in New Issue
Block a user