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)',