From c7bb705e5bf3f9e81cf449f5e301e7c4c3abffd3 Mon Sep 17 00:00:00 2001
From: Alexandru Munteanu <alexandru.munt@gmail.com>
Date: Wed, 5 Sep 2018 11:00:42 +0300
Subject: [PATCH] fix(TextField): fix colors for different statuses
---
.../hindawi-theme/src/elements/TextField.js | 21 ++++++++++---------
1 file changed, 11 insertions(+), 10 deletions(-)
diff --git a/packages/hindawi-theme/src/elements/TextField.js b/packages/hindawi-theme/src/elements/TextField.js
index 3683d3b9d..a35039d6d 100644
--- a/packages/hindawi-theme/src/elements/TextField.js
+++ b/packages/hindawi-theme/src/elements/TextField.js
@@ -1,17 +1,18 @@
import { css } from 'styled-components'
-import { th, validationColor } from '@pubsweet/ui-toolkit'
+import { th } from '@pubsweet/ui-toolkit'
-const textColor = ({ theme, validationStatus = 'default' }) =>
- ({
- error: theme.colorError,
- success: theme.colorText,
- default: theme.colorFurniture,
- warning: theme.colorWarning,
- }[validationStatus])
+const textColor = ({ validationStatus }) =>
+ validationStatus === 'error' ? th('colorError') : th('colorText')
+
+const validatedBorder = ({ validationStatus }) =>
+ validationStatus === 'error' ? th('colorError') : th('colorFurniture')
+
+const activeBorder = ({ validationStatus }) =>
+ validationStatus === 'error' ? th('colorError') : th('textField.activeBorder')
export default {
Input: css`
- border: ${th('borderWidth')} ${th('borderStyle')} ${validationColor};
+ border: ${th('borderWidth')} ${th('borderStyle')} ${validatedBorder};
color: ${textColor};
font-family: ${th('fontReading')};
@@ -21,7 +22,7 @@ export default {
&:active,
&:focus {
- border-color: ${th('textField.activeBorder')};
+ border-color: ${activeBorder};
outline: none;
}
--
GitLab