From a20d6fe6d873ff21d499eefbe97007756c20f863 Mon Sep 17 00:00:00 2001 From: Krzysztof Bialoglowicz Date: Thu, 26 Sep 2019 16:23:51 +0200 Subject: [PATCH 1/4] Fix input error style --- src/theme.ts | 35 ++++++++++++++++++++++++++++------- 1 file changed, 28 insertions(+), 7 deletions(-) diff --git a/src/theme.ts b/src/theme.ts index 076ff5de7..52b6afb59 100644 --- a/src/theme.ts +++ b/src/theme.ts @@ -111,11 +111,6 @@ export default (colors: IThemeColors): Theme => MuiFormLabel: { filled: { color: [[colors.primary], "!important"] as any - }, - root: { - "&$focused": { - color: [[colors.font.gray], "!important"] as any - } } }, MuiIconButton: { @@ -154,6 +149,12 @@ export default (colors: IThemeColors): Theme => } }, MuiInputLabel: { + error: { + "&$focused": { + color: colors.error + }, + color: colors.error + }, formControl: { transform: "translate(0, 1.5px) scale(0.75)", transformOrigin: "top left" as "top left", @@ -171,7 +172,7 @@ export default (colors: IThemeColors): Theme => color: `${fade(colors.primary, 0.4)} !important` as any }, "&$focused": { - color: [[colors.primary], "!important"] as any + color: colors.primary }, color: colors.input.text }, @@ -223,6 +224,26 @@ export default (colors: IThemeColors): Theme => } }, MuiOutlinedInput: { + error: { + "&$focused": { + "& fieldset": { + borderColor: [[colors.error], "!important"] as any + }, + "& input": { + color: colors.error, + zIndex: 2 + } + }, + "&:hover": { + "& fieldset": { + borderColor: [[colors.error], "!important"] as any + }, + "& input": { + color: colors.error, + zIndex: 2 + } + } + }, input: { "&:-webkit-autofill": { boxShadow: `0 0 0px 1000px rgba(19, 190, 187, 0.1) inset`, @@ -246,7 +267,7 @@ export default (colors: IThemeColors): Theme => root: { "& fieldset": { background: colors.background.paper, - borderColor: [[colors.input.border], "!important"] as any + borderColor: colors.input.border }, "& legend": { display: "none" From f71b82d612f1354a5ed5932ae293efb77b95c92f Mon Sep 17 00:00:00 2001 From: Krzysztof Bialoglowicz Date: Thu, 26 Sep 2019 16:25:47 +0200 Subject: [PATCH 2/4] Update change log --- CHANGELOG.md | 1 + 1 file changed, 1 insertion(+) diff --git a/CHANGELOG.md b/CHANGELOG.md index c85282781..b271b978d 100644 --- a/CHANGELOG.md +++ b/CHANGELOG.md @@ -25,3 +25,4 @@ All notable, unreleased changes to this project will be documented in this file. - Add sorting to product list - #173 by @dominik-zeglen - Add Heroku integration - #175 by @bogdal - Add testcafe tags to attributes, categories, collections and product types - #178 by @dominik-zeglen +- Fix input error style - #183 by @benekex2 From 96b1a445f02f85815b51234c168e76cd9a2edb96 Mon Sep 17 00:00:00 2001 From: Krzysztof Bialoglowicz Date: Thu, 26 Sep 2019 16:31:45 +0200 Subject: [PATCH 3/4] Remove unused importants --- src/theme.ts | 8 ++++---- 1 file changed, 4 insertions(+), 4 deletions(-) diff --git a/src/theme.ts b/src/theme.ts index 52b6afb59..07d12fcf1 100644 --- a/src/theme.ts +++ b/src/theme.ts @@ -227,7 +227,7 @@ export default (colors: IThemeColors): Theme => error: { "&$focused": { "& fieldset": { - borderColor: [[colors.error], "!important"] as any + borderColor: colors.error }, "& input": { color: colors.error, @@ -236,7 +236,7 @@ export default (colors: IThemeColors): Theme => }, "&:hover": { "& fieldset": { - borderColor: [[colors.error], "!important"] as any + borderColor: colors.error }, "& input": { color: colors.error, @@ -284,7 +284,7 @@ export default (colors: IThemeColors): Theme => }, "&$focused": { "& fieldset": { - borderColor: [[colors.primary], "!important"] as any + borderColor: colors.primary }, "& input": { "&::placeholder": { @@ -296,7 +296,7 @@ export default (colors: IThemeColors): Theme => }, "&:hover": { "& fieldset": { - borderColor: [[colors.primary], "!important"] as any + borderColor: colors.primary }, "& input": { color: colors.font.default, From 1bc91e0cfcf7d3bdf1d772270d5564e53697ddf4 Mon Sep 17 00:00:00 2001 From: dominik-zeglen Date: Thu, 26 Sep 2019 16:51:28 +0200 Subject: [PATCH 4/4] Fix input's hover effect when errored --- src/components/Theme/ThemeProvider.tsx | 2 ++ src/theme.ts | 47 ++++++++++++++++++++------ 2 files changed, 38 insertions(+), 11 deletions(-) diff --git a/src/components/Theme/ThemeProvider.tsx b/src/components/Theme/ThemeProvider.tsx index 793fbb574..cc45447e2 100644 --- a/src/components/Theme/ThemeProvider.tsx +++ b/src/components/Theme/ThemeProvider.tsx @@ -34,6 +34,7 @@ const dark: IThemeColors = { disabled: "#393939", disabledBackground: "#292A2D", disabledText: "#9D9D9D", + error: "#8C2054", text: "#FCFCFC", textHover: "#616161" }, @@ -69,6 +70,7 @@ const light: IThemeColors = { disabled: "#EAEAEA", disabledBackground: "#F4F4F4", disabledText: "#9D9D9D", + error: "#8C2054", text: "#3D3D3D", textHover: "#616161" }, diff --git a/src/theme.ts b/src/theme.ts index 07d12fcf1..6e9698d6e 100644 --- a/src/theme.ts +++ b/src/theme.ts @@ -34,6 +34,7 @@ export type IThemeColors = Record< | "disabled" | "disabledBackground" | "disabledText" + | "error" | "text" | "textHover", string @@ -110,7 +111,14 @@ export default (colors: IThemeColors): Theme => }, MuiFormLabel: { filled: { - color: [[colors.primary], "!important"] as any + "&&:not($error)": { + color: colors.primary + } + }, + root: { + "&&$focused:not($error)": { + color: colors.font.gray + } } }, MuiIconButton: { @@ -171,8 +179,13 @@ export default (colors: IThemeColors): Theme => "&$disabled": { color: `${fade(colors.primary, 0.4)} !important` as any }, - "&$focused": { - color: colors.primary + "&&$focused": { + "&$error": { + color: colors.error + }, + "&:not($error)": { + color: colors.primary + } }, color: colors.input.text }, @@ -266,8 +279,10 @@ export default (colors: IThemeColors): Theme => }, root: { "& fieldset": { - background: colors.background.paper, - borderColor: colors.input.border + "&&:not($error)": { + borderColor: colors.input.border + }, + background: colors.background.paper }, "& legend": { display: "none" @@ -283,24 +298,34 @@ export default (colors: IThemeColors): Theme => } }, "&$focused": { - "& fieldset": { - borderColor: colors.primary - }, "& input": { "&::placeholder": { opacity: [[1], "!important"] as any }, color: colors.font.default, zIndex: 2 + }, + "&&&": { + "& fieldset": { + borderColor: colors.primary + }, + "&$error fieldset": { + borderColor: colors.error + } } }, "&:hover": { - "& fieldset": { - borderColor: colors.primary - }, "& input": { color: colors.font.default, zIndex: 2 + }, + "&&&": { + "& fieldset": { + borderColor: colors.primary + }, + "&$error fieldset": { + borderColor: colors.input.error + } } }, borderColor: colors.input.border