fix(Input): More style changes

stevenfitzpatrick · Mar 20, 2018 · dce5c3a · dce5c3a
1 parent d070486
commit dce5c3a
Show file tree

Hide file tree

Showing 4 changed files with 21 additions and 18 deletions.
diff --git 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
@@ -38,14 +38,6 @@ initialState = {
     onChange={(_, v) => setState({ password: v })}
     required
   />
-  <Input
-    label="Name"
-    placeholder="Enter your name"
-    name="name"
-    value={state.name}
-    onChange={(_, v) => setState({ name: v })}
-    required
-  />
   <Input
     label="Email"
     placeholder="Enter your email"
@@ -55,6 +47,14 @@ initialState = {
     warning={<span>Invalid Email</span>}
     required
   />
+  <Input
+    label="Name"
+    placeholder="Enter your name"
+    name="name"
+    value={state.name}
+    onChange={(_, v) => setState({ name: v })}
+    required
+  />
 </div>;
 ```
 

diff --git 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
@@ -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)',