diff --git a/ui/src/components/input/index.js b/ui/src/components/input/index.js
index 4e6c6958..63fa5d72 100644
--- a/ui/src/components/input/index.js
+++ b/ui/src/components/input/index.js
@@ -23,33 +23,40 @@ const {
} = Styled;
const Label = styled.label`
- color: #464646;
+ color: ${props => props.error ? colors.alert : colors.fonts.regular}
`;
const InputField = styled.input`
background: ${colors.brandSecondary};
+ color: ${props => props.error ? colors.alert : colors.fonts.semibold}
display: block;
font-size: 16px;
height: ${remcalc(50)};
- padding-left: ${remcalc(15)};
- padding-right: ${remcalc(15)};
+ padding: ${remcalc(16)};
visibility: visible;
width: 100%;
-
- ${baseBox()}
-
+ ${baseBox()};
+ border-color: ${props => props.error ? colors.alert : 'auto'};
+
&:focus {
border-color: ${boxes.border.checked};
outline: none;
}
`;
+const Error = styled.span`
+ float: right;
+ color: ${colors.alert};
+ font-size: ${remcalc(14)};
+`;
+
const Input = ({
autoComplete,
autoFocus,
children,
className,
disabled = false,
+ error,
form,
id,
inputMode,
@@ -71,17 +78,23 @@ const Input = ({
}) => {
const _label = label || children;
const _children = label && children ? children : null;
+ const _error = error ? (