Client: use colors from theme
This commit is contained in:
parent
b4698bf439
commit
6f2ec3aeb9
@ -36,6 +36,7 @@ import {
|
|||||||
mobileMore,
|
mobileMore,
|
||||||
getCorrectFourValuesStyle,
|
getCorrectFourValuesStyle,
|
||||||
} from "@docspace/shared/utils";
|
} from "@docspace/shared/utils";
|
||||||
|
import { globalColors } from "@docspace/shared/themes";
|
||||||
|
|
||||||
const FlexBoxStyles = css`
|
const FlexBoxStyles = css`
|
||||||
display: flex;
|
display: flex;
|
||||||
@ -57,14 +58,17 @@ const StyledTile = styled.div`
|
|||||||
width: 100%;
|
width: 100%;
|
||||||
border: ${(props) => props.theme.filesSection.tilesView.tile.border};
|
border: ${(props) => props.theme.filesSection.tilesView.tile.border};
|
||||||
border-radius: 6px;
|
border-radius: 6px;
|
||||||
${(props) => props.showHotkeyBorder && "border-color: #2DA7DB"};
|
${(props) =>
|
||||||
|
props.showHotkeyBorder && `border-color: ${globalColors.lightSecondMain}`};
|
||||||
-webkit-tap-highlight-color: rgba(0, 0, 0, 0);
|
-webkit-tap-highlight-color: rgba(0, 0, 0, 0);
|
||||||
|
|
||||||
${(props) => props.isSelected && checkedStyle}
|
${(props) => props.isSelected && checkedStyle}
|
||||||
|
|
||||||
&:before,
|
&:before,
|
||||||
&:after {
|
&:after {
|
||||||
${(props) => props.showHotkeyBorder && "border-color: #2DA7DB"};
|
${(props) =>
|
||||||
|
props.showHotkeyBorder &&
|
||||||
|
`border-color: ${globalColors.lightSecondMain}`};
|
||||||
}
|
}
|
||||||
|
|
||||||
&:before,
|
&:before,
|
||||||
|
@ -44,7 +44,7 @@ import withQuickButtons from "../../../../../HOCs/withQuickButtons";
|
|||||||
import withBadges from "../../../../../HOCs/withBadges";
|
import withBadges from "../../../../../HOCs/withBadges";
|
||||||
import ItemIcon from "../../../../../components/ItemIcon";
|
import ItemIcon from "../../../../../components/ItemIcon";
|
||||||
import marginStyles from "./CommonStyles";
|
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";
|
import CursorPalmReactSvgUrl from "PUBLIC_DIR/images/cursor.palm.react.svg?url";
|
||||||
|
|
||||||
@ -90,7 +90,7 @@ const StyledWrapper = styled.div`
|
|||||||
${(props) =>
|
${(props) =>
|
||||||
props.showHotkeyBorder &&
|
props.showHotkeyBorder &&
|
||||||
css`
|
css`
|
||||||
border-color: #2da7db !important;
|
border-color: ${globalColors.lightSecondMain} !important;
|
||||||
z-index: 1;
|
z-index: 1;
|
||||||
position: relative;
|
position: relative;
|
||||||
|
|
||||||
|
@ -25,14 +25,18 @@
|
|||||||
// International. See the License terms at http://creativecommons.org/licenses/by-sa/4.0/legalcode
|
// International. See the License terms at http://creativecommons.org/licenses/by-sa/4.0/legalcode
|
||||||
|
|
||||||
import styled, { css } from "styled-components";
|
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 { TableRow } from "@docspace/shared/components/table";
|
||||||
import DragAndDrop from "@docspace/shared/components/drag-and-drop/DragAndDrop";
|
import DragAndDrop from "@docspace/shared/components/drag-and-drop/DragAndDrop";
|
||||||
import CursorPalmSvgUrl from "PUBLIC_DIR/images/cursor.palm.react.svg?url";
|
import CursorPalmSvgUrl from "PUBLIC_DIR/images/cursor.palm.react.svg?url";
|
||||||
|
|
||||||
const hotkeyBorderStyle = css`
|
const hotkeyBorderStyle = css`
|
||||||
border-image-slice: 1;
|
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`
|
const rowCheckboxDraggingStyle = css`
|
||||||
@ -161,7 +165,7 @@ const StyledTableRow = styled(TableRow)`
|
|||||||
props.showHotkeyBorder &&
|
props.showHotkeyBorder &&
|
||||||
css`
|
css`
|
||||||
z-index: 1;
|
z-index: 1;
|
||||||
border-color: #2da7db !important;
|
border-color: ${globalColors.lightSecondMain} !important;
|
||||||
`}
|
`}
|
||||||
}
|
}
|
||||||
|
|
||||||
|
@ -36,7 +36,7 @@ import { isMobile } from "react-device-detect";
|
|||||||
import { withTheme } from "styled-components";
|
import { withTheme } from "styled-components";
|
||||||
import { Link } from "@docspace/shared/components/link";
|
import { Link } from "@docspace/shared/components/link";
|
||||||
import { Loader } from "@docspace/shared/components/loader";
|
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 { Tags } from "@docspace/shared/components/tags";
|
||||||
import { Tag } from "@docspace/shared/components/tag";
|
import { Tag } from "@docspace/shared/components/tag";
|
||||||
import { ROOMS_TYPE_TRANSLATIONS } from "@docspace/shared/constants";
|
import { ROOMS_TYPE_TRANSLATIONS } from "@docspace/shared/constants";
|
||||||
@ -154,7 +154,8 @@ const StyledTile = styled.div`
|
|||||||
isRooms
|
isRooms
|
||||||
? theme.filesSection.tilesView.tile.roomsBorderRadius
|
? theme.filesSection.tilesView.tile.roomsBorderRadius
|
||||||
: theme.filesSection.tilesView.tile.borderRadius};
|
: theme.filesSection.tilesView.tile.borderRadius};
|
||||||
${(props) => props.showHotkeyBorder && "border-color: #2DA7DB"};
|
${(props) =>
|
||||||
|
props.showHotkeyBorder && `border-color: ${globalColors.lightSecondMain}`};
|
||||||
${(props) =>
|
${(props) =>
|
||||||
props.isFolder && !props.isRooms && "border-top-left-radius: 6px;"}
|
props.isFolder && !props.isRooms && "border-top-left-radius: 6px;"}
|
||||||
-webkit-tap-highlight-color: rgba(0, 0, 0, 0);
|
-webkit-tap-highlight-color: rgba(0, 0, 0, 0);
|
||||||
@ -200,7 +201,9 @@ const StyledTile = styled.div`
|
|||||||
|
|
||||||
&:before,
|
&:before,
|
||||||
&:after {
|
&:after {
|
||||||
${(props) => props.showHotkeyBorder && "border-color: #2DA7DB"};
|
${(props) =>
|
||||||
|
props.showHotkeyBorder &&
|
||||||
|
`border-color: ${globalColors.lightSecondMain}`};
|
||||||
}
|
}
|
||||||
|
|
||||||
&:before,
|
&:before,
|
||||||
|
@ -39,7 +39,7 @@ import EditSvg from "PUBLIC_DIR/images/access.edit.react.svg";
|
|||||||
import CrossSvg from "PUBLIC_DIR/images/cross.edit.react.svg";
|
import CrossSvg from "PUBLIC_DIR/images/cross.edit.react.svg";
|
||||||
import CheckSvg from "PUBLIC_DIR/images/check.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";
|
||||||
|
|
||||||
const EmailInputWrapper = styled.div`
|
const EmailInputWrapper = styled.div`
|
||||||
display: flex;
|
display: flex;
|
||||||
@ -72,7 +72,7 @@ const StyledRowContent = styled(RowContent)`
|
|||||||
.user-email {
|
.user-email {
|
||||||
margin-right: 5px;
|
margin-right: 5px;
|
||||||
path {
|
path {
|
||||||
fill: #a3a9ae;
|
fill: ${globalColors.gray};
|
||||||
}
|
}
|
||||||
}
|
}
|
||||||
|
|
||||||
@ -156,7 +156,7 @@ const UsersRowContent = ({
|
|||||||
<Text fontWeight={600} fontSize="14px">
|
<Text fontWeight={600} fontSize="14px">
|
||||||
{displayName}
|
{displayName}
|
||||||
</Text>
|
</Text>
|
||||||
<Text fontWeight={600} fontSize="12px" color="#A3A9AE">
|
<Text fontWeight={600} fontSize="12px" color={globalColors.gray}>
|
||||||
{prevEmail === "" ? t("Settings:NoEmail") : prevEmail}
|
{prevEmail === "" ? t("Settings:NoEmail") : prevEmail}
|
||||||
</Text>
|
</Text>
|
||||||
</div>
|
</div>
|
||||||
|
@ -41,7 +41,7 @@ import EditSvg from "PUBLIC_DIR/images/access.edit.react.svg";
|
|||||||
import CrossSvg from "PUBLIC_DIR/images/cross.edit.react.svg";
|
import CrossSvg from "PUBLIC_DIR/images/cross.edit.react.svg";
|
||||||
import CheckSvg from "PUBLIC_DIR/images/check.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";
|
||||||
|
|
||||||
const EmailInputWrapper = styled.div`
|
const EmailInputWrapper = styled.div`
|
||||||
display: flex;
|
display: flex;
|
||||||
@ -59,7 +59,7 @@ const StyledTableRow = styled(TableRow)`
|
|||||||
gap: 8px;
|
gap: 8px;
|
||||||
overflow: hidden;
|
overflow: hidden;
|
||||||
path {
|
path {
|
||||||
fill: #a3a9ae;
|
fill: ${globalColors.gray};
|
||||||
}
|
}
|
||||||
}
|
}
|
||||||
|
|
||||||
@ -196,7 +196,11 @@ const UsersTableRow = ({
|
|||||||
) : (
|
) : (
|
||||||
<span onClick={openEmail} className="user-email" ref={emailTextRef}>
|
<span onClick={openEmail} className="user-email" ref={emailTextRef}>
|
||||||
<EditSvg />
|
<EditSvg />
|
||||||
<Text fontWeight={600} color="#A3A9AE" className="textOverflow">
|
<Text
|
||||||
|
fontWeight={600}
|
||||||
|
color={globalColors.gray}
|
||||||
|
className="textOverflow"
|
||||||
|
>
|
||||||
{prevEmail !== "" ? prevEmail : t("Settings:NoEmail")}
|
{prevEmail !== "" ? prevEmail : t("Settings:NoEmail")}
|
||||||
</Text>
|
</Text>
|
||||||
</span>
|
</span>
|
||||||
|
@ -31,6 +31,7 @@ import {
|
|||||||
} from "../../../utils/commonSettingsStyles";
|
} from "../../../utils/commonSettingsStyles";
|
||||||
|
|
||||||
import { tablet, mobile } from "@docspace/shared/utils";
|
import { tablet, mobile } from "@docspace/shared/utils";
|
||||||
|
import { globalColors } from "@docspace/shared/themes";
|
||||||
|
|
||||||
const INPUT_LENGTH = "350px";
|
const INPUT_LENGTH = "350px";
|
||||||
const TEXT_LENGTH = "700px";
|
const TEXT_LENGTH = "700px";
|
||||||
@ -449,7 +450,7 @@ const StyledRestoreBackup = styled.div`
|
|||||||
const StyledModules = styled.div`
|
const StyledModules = styled.div`
|
||||||
margin-bottom: 24px;
|
margin-bottom: 24px;
|
||||||
.backup-description {
|
.backup-description {
|
||||||
${(props) => props.isDisabled && `color: #A3A9AE`};
|
${(props) => props.isDisabled && `color: ${globalColors.gray};`};
|
||||||
${(props) =>
|
${(props) =>
|
||||||
props.theme.interfaceDirection === "rtl"
|
props.theme.interfaceDirection === "rtl"
|
||||||
? css`
|
? css`
|
||||||
@ -653,7 +654,7 @@ const StyledBackupList = styled.div`
|
|||||||
margin-top: -3px;
|
margin-top: -3px;
|
||||||
grid-area: trash;
|
grid-area: trash;
|
||||||
path {
|
path {
|
||||||
fill: #a3a9ae;
|
fill: ${globalColors.gray};
|
||||||
}
|
}
|
||||||
}
|
}
|
||||||
.backup-list_icon {
|
.backup-list_icon {
|
||||||
@ -667,7 +668,7 @@ const StyledBackupList = styled.div`
|
|||||||
white-space: nowrap;
|
white-space: nowrap;
|
||||||
}
|
}
|
||||||
.backup-list_file-exst {
|
.backup-list_file-exst {
|
||||||
color: #a3a9ae;
|
color: ${globalColors.gray};
|
||||||
grid-area: ext;
|
grid-area: ext;
|
||||||
}
|
}
|
||||||
.backup-list_radio-button {
|
.backup-list_radio-button {
|
||||||
@ -746,7 +747,7 @@ const StyledSettingsHeader = styled.div`
|
|||||||
-ms-transition: top 0.3s cubic-bezier(0, 0, 0.8, 1);
|
-ms-transition: top 0.3s cubic-bezier(0, 0, 0.8, 1);
|
||||||
-webkit-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);
|
-o-transition: top 0.3s cubic-bezier(0, 0, 0.8, 1);
|
||||||
background-color: #fff;
|
background-color: ${globalColors.white};
|
||||||
z-index: 149;
|
z-index: 149;
|
||||||
width: 100%;
|
width: 100%;
|
||||||
height: 50px;
|
height: 50px;
|
||||||
|
Loading…
Reference in New Issue
Block a user