Client: use colors from theme

This commit is contained in:
Viktor Fomin 2024-07-01 14:52:54 +03:00
parent 6203bb9b6d
commit 2b02895e52
16 changed files with 29 additions and 24 deletions

View File

@ -44,7 +44,7 @@ import { Badge } from "@docspace/shared/components/badge";
import { ColorTheme, ThemeId } from "@docspace/shared/components/color-theme";
import { RoomsType, ShareAccessRights } from "@docspace/shared/enums";
import { Base } from "@docspace/shared/themes";
import { Base, globalColors } from "@docspace/shared/themes";
import { isTablet, isDesktop, size, classNames } from "@docspace/shared/utils";
@ -56,7 +56,7 @@ const StyledWrapper = styled.div`
background: ${(props) => props.theme.filesBadges.backgroundColor};
padding: 6px;
border-radius: 4px;
box-shadow: 0px 2px 4px rgba(4, 15, 27, 0.16);
box-shadow: 0px 2px 4px ${globalColors.badgeShadow};
`;
StyledWrapper.defaultProps = { theme: Base };

View File

@ -28,7 +28,7 @@ import React from "react";
import styled from "styled-components";
import RoomType from "@docspace/shared/components/room-type";
import { Base } from "@docspace/shared/themes";
import { Base, globalColors } from "@docspace/shared/themes";
import { RoomsTypeValues } from "@docspace/shared/utils/common";
const StyledDropdownDesktop = styled.div`
@ -56,7 +56,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;
}
`;

View File

@ -31,7 +31,7 @@ import RoomType from "@docspace/shared/components/room-type";
import { RoomsTypeValues } from "@docspace/shared/utils/common";
import { Backdrop } from "@docspace/shared/components/backdrop";
import { Base } from "@docspace/shared/themes";
import { Base, globalColors } from "@docspace/shared/themes";
const StyledDropdownMobile = styled.div`
visibility: ${(props) => (props.isOpen ? "visible" : "hidden")};
@ -44,7 +44,7 @@ const StyledDropdownMobile = styled.div`
theme.interfaceDirection === "rtl"
? `margin-right: -16px;`
: `margin-left: -16px;`}
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};

View File

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

View File

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

View File

@ -533,7 +533,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};
}
`;

View File

@ -454,7 +454,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 };

View File

@ -32,6 +32,7 @@ import { Button } from "@docspace/shared/components/button";
import { withTranslation } from "react-i18next";
import { isMobileOnly } from "react-device-detect";
import { isMobile } from "@docspace/shared/utils";
import { globalColors } from "@docspace/shared/themes";
const StyledComponent = styled(ModalDialog)`
.modal-dialog-aside-footer {
@ -46,7 +47,7 @@ const StyledComponent = styled(ModalDialog)`
left: 0;
`}
padding: 16px;
box-shadow: 0px 12px 40px rgba(4, 15, 27, 0.12);
box-shadow: 0px 12px 40px ${globalColors.popupShadow};
}
.flex {

View File

@ -41,6 +41,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";
const StyledRowContainer = styled(RowContainer)`
margin: 0 0 20px;
@ -66,7 +67,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 {

View File

@ -26,7 +26,7 @@
import { useState, useRef } from "react";
import { inject, observer } from "mobx-react";
import { Base } from "@docspace/shared/themes";
import { Base, globalColors } from "@docspace/shared/themes";
import styled, { css } from "styled-components";
import UsersTypeTableHeader from "./UsersTypeTableHeader";
@ -62,7 +62,7 @@ const StyledTableContainer = styled(TableContainer)`
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;
}

View File

@ -41,6 +41,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";
const StyledRowContainer = styled(RowContainer)`
margin: 0 0 20px;
@ -66,7 +67,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 {

View File

@ -26,7 +26,7 @@
import { useState, useRef } from "react";
import { inject, observer } from "mobx-react";
import { Base } from "@docspace/shared/themes";
import { Base, globalColors } from "@docspace/shared/themes";
import styled, { css } from "styled-components";
import UsersTableHeader from "./UsersTableHeader";
@ -60,7 +60,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;
}

View File

@ -41,6 +41,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";
const StyledRowContainer = styled(RowContainer)`
margin: 0 0 20px;
@ -66,7 +67,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 {

View File

@ -26,7 +26,7 @@
import { useState, useRef } from "react";
import { inject, observer } from "mobx-react";
import { Base } from "@docspace/shared/themes";
import { Base, globalColors } from "@docspace/shared/themes";
import styled, { css } from "styled-components";
import UsersTypeTableHeader from "./UsersTypeTableHeader";
@ -62,7 +62,7 @@ const StyledTableContainer = styled(TableContainer)`
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;
}

View File

@ -32,6 +32,7 @@ import { inject, observer } from "mobx-react";
import DangerIcon from "PUBLIC_DIR/images/danger.toast.react.svg?url";
import { useTranslation } from "react-i18next";
import { globalColors } from "@docspace/shared/themes";
const DetailsWrapper = styled.div`
width: 100%;
@ -61,7 +62,7 @@ const ErrorMessageTooltip = styled.div`
background: ${(props) =>
props.theme.client.settings.webhooks.toastBackground};
box-shadow: 0px 5px 20px rgba(4, 15, 27, 0.07);
box-shadow: 0px 5px 20px ${globalColors.menuShadow};
border-radius: 6px;
display: flex;
align-items: center;

View File

@ -98,7 +98,7 @@ const EmptyFilter = (props) => {
<Text
fontSize="12px"
color={
theme.isBase ? globalColors.grayText : "rgba(255, 255, 255, 0.6)"
theme.isBase ? globalColors.grayText : globalColors.grayDarkText
}
>
{t("NoResultsMatched")}