diff --git a/src/components/Input/Input.styled.js b/src/components/Input/Input.styled.js
index df994d1..21e457c 100644
--- a/src/components/Input/Input.styled.js
+++ b/src/components/Input/Input.styled.js
@@ -8,16 +8,16 @@ import { spacing } from '../../styles/spacing';
const FormField = styled.label`
position: relative;
display: block;
- margin-bottom: ${spacing.xl};
+ margin-bottom: ${spacing.xxxxxl};
${errorMixin};
`;
const FormError = styled.span`
+ position: absolute;
display: block;
color: ${colors.errorActive};
font-size: ${font.m};
- margin-top: ${spacing.s};
`;
const FitzyLabel = styled.label`
@@ -46,7 +46,6 @@ const FitzyInput = styled.input`
background-color: transparent;
border: none;
- border: 1px solid transparent;
border-bottom: 1px solid ${p => p.theme.Input.border};
color: #fff;
transition: border 0.3s ease-in-out;
@@ -57,19 +56,20 @@ const FitzyInput = styled.input`
opacity: ${p => (p.value ? 1 : 0)};
}
+ &::-webkit-input-placeholder {
+ color: ${p => p.theme.Input.placeholder};
+ }
+
&:-webkit-autofill {
- -webkit-box-shadow: 0 0 0 30px white inset;
- -webkit-text-fill-color: yellow !important;
+ -webkit-box-shadow: 0 0 0 30px ${colors.bgColor} inset;
+ -webkit-text-fill-color: ${colors.light} !important;
+
~ label {
transform: translateY(-${spacing.xxxxl});
opacity: 1;
}
}
- &::-webkit-input-placeholder {
- color: ${p => p.theme.Input.placeholder};
- }
-
&:focus {
border-bottom: 1px solid ${p => p.theme.Input.borderActive};
outline: none;
diff --git a/src/components/Input/README.md b/src/components/Input/README.md
index 56cc80e..6563103 100644
--- a/src/components/Input/README.md
+++ b/src/components/Input/README.md
@@ -38,14 +38,6 @@ initialState = {
onChange={(_, v) => setState({ password: v })}
required
/>
- setState({ name: v })}
- required
- />
Invalid Email}
required
/>
+ setState({ name: v })}
+ required
+ />
;
```
diff --git a/src/styles/spacing.js b/src/styles/spacing.js
index 888cfeb..40ed091 100644
--- a/src/styles/spacing.js
+++ b/src/styles/spacing.js
@@ -5,5 +5,6 @@ export const spacing = {
xl: '1.5rem',
xxl: '1.75rem',
xxxl: '2rem',
- xxxxl: '2.25rem'
+ xxxxl: '2.25rem',
+ xxxxxl: '2.5rem'
};
diff --git a/src/theme/theme.js b/src/theme/theme.js
index e4c30fe..f7e57a2 100644
--- a/src/theme/theme.js
+++ b/src/theme/theme.js
@@ -1,6 +1,8 @@
import { setThemeColors } from './utils';
export const colors = {
+ // Background colors
+ bgColor: '#172025',
// Shadow Colors
textShadowDark: '0 1px 2px rgba(0, 0, 0, 0.2)',
boxShadowDark: 'hsla(0, 0%, 0%, 0.2)',