styled formfields components

src/components/auth/signinForm.js

@@ -21,6 +21,7 @@ class SignInForm extends Component {
                 placeholder='Password'
                 name='password'
                 component={FormInput}/>
+                <div className='sign-in-form__line'></div>
                 <Field className='sign-in-form__login'
                 onClick={() => console.log('tryna submit')}
                 type='submit'

src/style/auth/signin.scss

@@ -8,5 +8,7 @@
 }
 
 .sign-in-form {
-
+    &__line {
+        border-top: 1px solid #ccc;
+    }
 }

src/style/form-fields.scss

@@ -0,0 +1,37 @@
+.form-input {
+    display: grid;
+    grid-gap: 6.5px;
+
+    & > * {
+        padding-left: 20px;
+    }
+
+    &__label {
+        font-size: 14px;
+    }
+    &__input {
+        box-sizing: border-box;
+        height: 39px;
+        width: 426px;
+        border: 1px solid #E6E6E6;
+        border-radius: 20px;
+        color: #333333;
+        font-size: 18px;
+    }
+}
+
+.form-button {
+    &__button {
+        height: 38px;
+        width: 243px;
+        border-radius: 20px;
+        background-color: #00CB79;
+
+        font-size: 16px;
+        color: white;
+
+        &:focus {
+            outline: none;
+        }
+    }
+}

src/style/main.scss

@@ -12,10 +12,16 @@ html {
     box-sizing: inherit;
 }
 
+body {
+    font-family: "Open Sans";
+    color: #808080;
+}
+
 
 @import 'layout';
 @import 'headernavbar';
 @import 'auth/signin';
 @import 'auth/signup';
 
-@import 'page-title';
+@import 'page-title';
+@import 'form-fields';