styled form fields

src/components/auth/signinForm.js

@@ -1,22 +1,37 @@
-import React, { Component } from 'react';
-import { reduxForm, Field } from 'redux-form';
+import React, { Component } from "react";
+import { reduxForm, Field } from "redux-form";
 
-import { FormTitle } from '../formTitle';
-import { FormInput } from '../formFields';
+import { FormTitle } from "../formTitle";
+import { FormInput } from "../formFields";
 
 class SigninForm extends Component {
-    render() {
-        return (
-            <form className='sign-in-form'>
-                <FormTitle className='sign-in-form__title' text='Login'/>   
-                <Field className='sign-in-form__email' component={FormInput} name='email' type='email'/>
-            </form>
-        )
-    }
+  render() {
+    return (
+      <form className="sign-in-form">
+        <FormTitle className="sign-in-form__title" text="Login" />
+        <Field
+          className="sign-in-form__email"
+          placeholder="Enter Email"
+          name="email"
+          type="email"
+          title="Email"
+          component={FormInput}
+        />
+        <Field
+          className="sign-in-form__password"
+          placeholder="Enter Password"
+          name="password"
+          type="password"
+          title="Password"
+          component={FormInput}
+        />
+      </form>
+    );
+  }
 }
 
 SigninForm = reduxForm({
-    form: 'signin'
+  form: "signin"
 })(SigninForm);
 
-export default SigninForm;
+export default SigninForm;

src/components/formFields.js

@@ -3,11 +3,16 @@ import React, { Component } from 'react';
 
 export class FormInput extends Component {
     render() {
-        const { className, title } = this.props;
+        const { className, title, input, type, placeholder } = this.props;
         return (
             <div className='form-input'>
-                <label>{title}</label>
-                <input className={`${className} form-input`}/>
+                <label className='form-input__title'>{title}</label>
+                <input
+                    className={`${className} form-input__input`}
+                    type={type}
+                    {...input}
+                    placeholder={placeholder}    
+                />
             </div>
         )
     }

src/style/form-fields.scss

@@ -0,0 +1,36 @@
+.form-input {
+    display: grid;
+    grid-template-rows: 1fr;
+    grid-template-columns: 129px 500px;
+
+    align-items: center;
+    width: 629px;
+    justify-content: center;
+
+    &__title {
+        grid-row: 1/-1;
+        grid-column: 1/2;
+    }
+    &__input {
+        grid-row: 1/-1;
+        grid-column: 2/3;
+    }
+}
+
+.form-input {
+    &__title {
+        color: $color-red-BA;
+        font-size: 1.8rem;
+        font-weight: 500;
+        line-height: 2.3rem;
+    }
+    &__input {
+        height: 4rem;
+        width: 50rem;
+        border: 1px solid $color-gray-E6;
+        border-radius: .5rem;
+        padding-left: 2rem;
+        font-size: 1.6rem;
+        font-weight: 500;
+    }
+}

src/style/main.scss

@@ -10,4 +10,5 @@
 @import 'signup';
 
 // HELPERS
-@import 'form-title';
+@import 'form-title';
+@import 'form-fields';

src/style/signin.scss

@@ -1,4 +1,18 @@
 .sign-in {
     grid-row: content-s/content-e;
     grid-column: content-s/content-e;
+}
+
+.sign-in-form {
+    display: grid;
+    justify-items: center;
+    &__title {
+        width: 100%;
+    }
+    &__email {
+
+    }
+    &__password {
+
+    }
 }