Client: use colors from theme
This commit is contained in:
parent
6203bb9b6d
commit
2b02895e52
@ -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 };
|
||||
|
@ -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;
|
||||
}
|
||||
`;
|
||||
|
@ -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};
|
||||
|
@ -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"};
|
||||
|
@ -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;
|
||||
}
|
||||
`;
|
||||
|
||||
|
@ -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};
|
||||
}
|
||||
`;
|
||||
|
||||
|
@ -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 };
|
||||
|
@ -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 {
|
||||
|
@ -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 {
|
||||
|
@ -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;
|
||||
}
|
||||
|
||||
|
@ -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 {
|
||||
|
@ -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;
|
||||
}
|
||||
|
||||
|
@ -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 {
|
||||
|
@ -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;
|
||||
}
|
||||
|
||||
|
@ -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;
|
||||
|
@ -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")}
|
||||
|
Loading…
Reference in New Issue
Block a user