Shared: use colors from theme
This commit is contained in:
parent
2a19bc3106
commit
a3b537747c
@ -1,12 +1,16 @@
|
||||
import PropTypes from "prop-types";
|
||||
import { ThemeProvider } from "../../components/theme-provider";
|
||||
import { globalColors } from "../../themes";
|
||||
|
||||
const ThemeWrapper = ({ theme, children }) => {
|
||||
return (
|
||||
<ThemeProvider
|
||||
theme={theme}
|
||||
currentColorScheme={{
|
||||
main: { accent: "#4781D1", buttons: "#5299E0" },
|
||||
main: {
|
||||
accent: globalColors.lightBlueMain,
|
||||
buttons: globalColors.lightSecondMain,
|
||||
},
|
||||
}}
|
||||
>
|
||||
{children}
|
||||
|
@ -33,6 +33,7 @@ import { DropDown } from "../drop-down";
|
||||
|
||||
import { ColorInputProps } from "./ColorInput.types";
|
||||
import { ColorPicker } from "../color-picker";
|
||||
import { globalColors } from "../../themes";
|
||||
|
||||
const ColorInput = ({
|
||||
className,
|
||||
@ -45,7 +46,9 @@ const ColorInput = ({
|
||||
hasError,
|
||||
hasWarning,
|
||||
}: ColorInputProps) => {
|
||||
const [color, setColor] = useState(defaultColor || "#4781D1");
|
||||
const [color, setColor] = useState(
|
||||
defaultColor || globalColors.lightBlueMain,
|
||||
);
|
||||
const [isPickerOpen, setIsPickerOpen] = useState(false);
|
||||
|
||||
const closePicker = () => setIsPickerOpen(false);
|
||||
|
@ -32,6 +32,7 @@ import { Button } from "../button";
|
||||
import Wrapper from "./ColorPicker.styled";
|
||||
import { ColorPickerProps } from "./ColorPicker.types";
|
||||
import { ButtonSize } from "../button/Button.enums";
|
||||
import { globalColors } from "../../themes";
|
||||
|
||||
const ColorPicker = ({
|
||||
className,
|
||||
@ -45,7 +46,9 @@ const ColorPicker = ({
|
||||
handleChange,
|
||||
hexCodeLabel,
|
||||
}: ColorPickerProps) => {
|
||||
const [color, setColor] = useState(appliedColor || "#4781D1");
|
||||
const [color, setColor] = useState(
|
||||
appliedColor || globalColors.lightBlueMain,
|
||||
);
|
||||
|
||||
useEffect(() => {
|
||||
if (!isPickerOnly && appliedColor && appliedColor !== color) {
|
||||
@ -105,7 +108,7 @@ ColorPicker.defaultProps = {
|
||||
isPickerOnly: false,
|
||||
onClose: () => {},
|
||||
onApply: () => {},
|
||||
appliedColor: "#4781D1",
|
||||
appliedColor: globalColors.lightBlueMain,
|
||||
applyButtonLabel: "Apply",
|
||||
cancelButtonLabel: "Cancel",
|
||||
hexCodeLabel: "Hex code",
|
||||
|
@ -1,5 +1,6 @@
|
||||
import styled from "styled-components";
|
||||
import { mobile } from "@docspace/shared/utils";
|
||||
import { globalColors } from "../../themes";
|
||||
|
||||
export const EmptyViewWrapper = styled.div`
|
||||
margin-inline: auto;
|
||||
@ -68,34 +69,34 @@ export const EmptyViewItemWrapper = styled.div`
|
||||
|
||||
:nth-child(1) .ev-item__icon {
|
||||
rect {
|
||||
color: #5299e0;
|
||||
color: ${globalColors.lightSecondMain};
|
||||
}
|
||||
path {
|
||||
color: #4781d1;
|
||||
color: ${globalColors.lightBlueMain};
|
||||
}
|
||||
}
|
||||
:nth-child(2) .ev-item__icon {
|
||||
rect {
|
||||
color: #2db482;
|
||||
color: ${globalColors.mainGreen};
|
||||
}
|
||||
path {
|
||||
color: #2db482;
|
||||
color: ${globalColors.mainGreen};
|
||||
}
|
||||
}
|
||||
:nth-child(3) .ev-item__icon {
|
||||
rect {
|
||||
color: #f97a0b;
|
||||
color: ${globalColors.mainOrange};
|
||||
}
|
||||
path {
|
||||
color: #f97a0b;
|
||||
color: ${globalColors.mainOrange};
|
||||
}
|
||||
}
|
||||
:nth-child(4) .ev-item__icon {
|
||||
rect {
|
||||
color: #6d4ec2;
|
||||
color: ${globalColors.purple};
|
||||
}
|
||||
path {
|
||||
color: #6d4ec2;
|
||||
color: ${globalColors.purple};
|
||||
}
|
||||
}
|
||||
|
||||
|
@ -37,6 +37,7 @@ import { getExpiredOptions } from "../Share.helpers";
|
||||
import { ExpiredComboBoxProps } from "../Share.types";
|
||||
|
||||
import ShareCalendar from "./ShareCalendar";
|
||||
import { globalColors } from "../../../themes";
|
||||
|
||||
const ExpiredComboBox = ({
|
||||
link,
|
||||
@ -136,7 +137,7 @@ const ExpiredComboBox = ({
|
||||
The link will expire after
|
||||
<LinkWithDropdown
|
||||
className="expired-options"
|
||||
color="#4781D1"
|
||||
color={globalColors.lightBlueMain}
|
||||
dropdownType="alwaysDashed"
|
||||
data={expiredOptions}
|
||||
fontSize="12px"
|
||||
@ -157,7 +158,7 @@ const ExpiredComboBox = ({
|
||||
The link is valid for
|
||||
<LinkWithDropdown
|
||||
className="expired-options"
|
||||
color="#4781D1"
|
||||
color={globalColors.lightBlueMain}
|
||||
dropdownType="alwaysDashed"
|
||||
data={expiredOptions}
|
||||
fontSize="12px"
|
||||
@ -180,7 +181,7 @@ const ExpiredComboBox = ({
|
||||
type={LinkType.action}
|
||||
fontWeight={400}
|
||||
fontSize="12px"
|
||||
color="#4781D1"
|
||||
color={globalColors.lightBlueMain}
|
||||
onClick={onRegenerateClick}
|
||||
>
|
||||
{t("Common:Regenerate")}
|
||||
|
@ -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 "../../themes";
|
||||
import { Base, globalColors } from "../../themes";
|
||||
|
||||
const TimeInput = styled.div<{ hasError?: boolean; isFocused?: boolean }>`
|
||||
width: 57px;
|
||||
@ -49,11 +49,11 @@ const TimeInput = styled.div<{ hasError?: boolean; isFocused?: boolean }>`
|
||||
${(props) =>
|
||||
props.isFocused &&
|
||||
css`
|
||||
border-color: #4781d1;
|
||||
border-color: ${globalColors.lightBlueMain};
|
||||
`}
|
||||
|
||||
:focus {
|
||||
border-color: #4781d1;
|
||||
border-color: ${globalColors.lightBlueMain};
|
||||
}
|
||||
|
||||
input {
|
||||
|
@ -61,6 +61,7 @@ export const globalColors = {
|
||||
secondOrange: "#FF9933",
|
||||
mainRed: "#F2665A",
|
||||
mainPurple: "#533ED1",
|
||||
purple: "#6D4EC2",
|
||||
secondPurple: "#8570BD",
|
||||
mainBlueLight: "#13B7EC",
|
||||
secondBlue: "#11A3D4",
|
||||
|
Loading…
Reference in New Issue
Block a user