Shared: use colors from theme
This commit is contained in:
parent
b46c1605fe
commit
495c333940
@ -118,8 +118,8 @@ describe("DatePicker tests", () => {
|
|||||||
// // @ts-expect-error TS(2582): Cannot find name 'it'. Do you need to install type... Remove this comment to see the full error message
|
// // @ts-expect-error TS(2582): Cannot find name 'it'. Do you need to install type... Remove this comment to see the full error message
|
||||||
// it("DatePicker themeColor test", () => {
|
// it("DatePicker themeColor test", () => {
|
||||||
// // @ts-expect-error TS(2322): Type '{ themeColor: string; }' is not assignable t... Remove this comment to see the full error message
|
// // @ts-expect-error TS(2322): Type '{ themeColor: string; }' is not assignable t... Remove this comment to see the full error message
|
||||||
// const wrapper = mount(<DatePicker themeColor={"#fff"} />);
|
// const wrapper = mount(<DatePicker themeColor={""} />);
|
||||||
// expect(wrapper.props().themeColor).toEqual("#fff");
|
// expect(wrapper.props().themeColor).toEqual("");
|
||||||
// });
|
// });
|
||||||
|
|
||||||
// // @ts-expect-error TS(2582): Cannot find name 'it'. Do you need to install type... Remove this comment to see the full error message
|
// // @ts-expect-error TS(2582): Cannot find name 'it'. Do you need to install type... Remove this comment to see the full error message
|
||||||
@ -228,7 +228,6 @@ describe("DatePicker tests", () => {
|
|||||||
// isDisabled: false,
|
// isDisabled: false,
|
||||||
// isReadOnly: false,
|
// isReadOnly: false,
|
||||||
// hasError: false,
|
// hasError: false,
|
||||||
// themeColor: "#ED7309",
|
|
||||||
// locale: "en",
|
// locale: "en",
|
||||||
// };
|
// };
|
||||||
|
|
||||||
|
@ -31,6 +31,7 @@ import { Avatar, AvatarRole, AvatarSize } from "../../avatar";
|
|||||||
import { Text } from "../../text";
|
import { Text } from "../../text";
|
||||||
|
|
||||||
import { mobile } from "../../../utils";
|
import { mobile } from "../../../utils";
|
||||||
|
import { globalColors } from "../../../themes";
|
||||||
|
|
||||||
const StyledWrapper = styled.div`
|
const StyledWrapper = styled.div`
|
||||||
width: 100%;
|
width: 100%;
|
||||||
@ -54,7 +55,7 @@ const StyledWrapper = styled.div`
|
|||||||
gap: 8px;
|
gap: 8px;
|
||||||
align-items: center;
|
align-items: center;
|
||||||
padding: 8px;
|
padding: 8px;
|
||||||
border: 1px solid #eceef1;
|
border: 1px solid ${globalColors.grayLightMid};
|
||||||
border-radius: 6px;
|
border-radius: 6px;
|
||||||
}
|
}
|
||||||
`;
|
`;
|
||||||
|
@ -267,7 +267,6 @@
|
|||||||
// // @ts-expect-error TS(2322): Type '{ children: any; className: string; color: s... Remove this comment to see the full error message
|
// // @ts-expect-error TS(2322): Type '{ children: any; className: string; color: s... Remove this comment to see the full error message
|
||||||
// <Text
|
// <Text
|
||||||
// className="phone-input_error-text"
|
// className="phone-input_error-text"
|
||||||
// color="#f21c0e"
|
|
||||||
// fontSize="11px"
|
// fontSize="11px"
|
||||||
// lineHeight="14px"
|
// lineHeight="14px"
|
||||||
// >
|
// >
|
||||||
|
@ -25,7 +25,7 @@
|
|||||||
// 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 "../../themes";
|
import { Base, globalColors } from "../../themes";
|
||||||
import { mobileMore, mobile } from "../../utils";
|
import { mobileMore, mobile } from "../../utils";
|
||||||
|
|
||||||
const displaySettings = css<{
|
const displaySettings = css<{
|
||||||
@ -39,7 +39,7 @@ const displaySettings = css<{
|
|||||||
align-items: flex-start;
|
align-items: flex-start;
|
||||||
border-top: ${(props) =>
|
border-top: ${(props) =>
|
||||||
props.hasScroll && !props.showReminder && !props.hideBorder
|
props.hasScroll && !props.showReminder && !props.hideBorder
|
||||||
? "1px solid #ECEEF1"
|
? `1px solid ${globalColors.grayLightMid}`
|
||||||
: "none"};
|
: "none"};
|
||||||
|
|
||||||
${(props) =>
|
${(props) =>
|
||||||
@ -90,7 +90,7 @@ const displaySettings = css<{
|
|||||||
props.hasScroll &&
|
props.hasScroll &&
|
||||||
css`
|
css`
|
||||||
.unsaved-changes {
|
.unsaved-changes {
|
||||||
border-top: 1px solid #eceef1;
|
border-top: 1px solid ${globalColors.grayLightMid};
|
||||||
width: calc(100% - 16px);
|
width: calc(100% - 16px);
|
||||||
|
|
||||||
${props.theme.interfaceDirection === "rtl"
|
${props.theme.interfaceDirection === "rtl"
|
||||||
|
@ -34,7 +34,7 @@ const TimeInput = styled.div<{ hasError?: boolean; isFocused?: boolean }>`
|
|||||||
padding: 0px 6px;
|
padding: 0px 6px;
|
||||||
direction: ltr;
|
direction: ltr;
|
||||||
|
|
||||||
border: 1px solid #d0d5da;
|
border: 1px solid ${globalColors.grayStrong};
|
||||||
border-radius: 3px;
|
border-radius: 3px;
|
||||||
|
|
||||||
transition: "all 0.2s ease 0s";
|
transition: "all 0.2s ease 0s";
|
||||||
@ -42,7 +42,8 @@ const TimeInput = styled.div<{ hasError?: boolean; isFocused?: boolean }>`
|
|||||||
display: flex;
|
display: flex;
|
||||||
align-items: center;
|
align-items: center;
|
||||||
|
|
||||||
border-color: ${(props) => (props.hasError ? "#f21c0e" : "#d0d5da")};
|
border-color: ${(props) =>
|
||||||
|
props.hasError ? globalColors.lightErrorStatus : globalColors.grayStrong};
|
||||||
|
|
||||||
background-color: ${(props) => props.theme.input.backgroundColor};
|
background-color: ${(props) => props.theme.input.backgroundColor};
|
||||||
|
|
||||||
|
Loading…
Reference in New Issue
Block a user