added logo on the login and registration pages

src/components/registration-form/RegistrationForm.js

@@ -16,8 +16,10 @@ let RegistrationForm = props => {
 
     return (
         <form className="form" onSubmit={handleSubmit(submit)}>
-            <Field name="name" component={customInput} type="text" id="name" label="Full name"/>
-            <div className="reg-radio">
+            <div className="form-item">
+                <Field name="name" component={customInput} type="text" id="name" label="Full name" />
+            </div>
+            <div className="reg-radio form-item">
                 <div className="radio-label">
                     <Field name="sex" component="input" type="radio" id="male" value="male" hidden/>
                     <label htmlFor="male">male</label>
@@ -28,12 +30,21 @@ let RegistrationForm = props => {
                     <label htmlFor="female">female</label>
                 </div>
             </div>
-            <Field name="phone" component={customInput} type="phone" id="phone" label="Phone"/>
-            <Field name="email" component={customInput} type="email" id="email" label="E-mail"/>
-            <Field name="password" component={customInput} type="password" id="password" label="Password"/>
-            <Field name="confirmPassword" component={customInput} type="password" id="confirmPassword" label="Confirm Password"/>
-            
-            <button type="submit" className="btn">Check in</button>
+            <div className="form-item">
+                <Field name="phone" component={customInput} type="phone" id="phone" label="Phone" />
+            </div>
+            <div className="form-item">
+                <Field name="email" component={customInput} type="email" id="email" label="E-mail" />
+            </div>
+            <div className="form-item password">
+                <Field name="password" component={customInput} type="password" id="password" label="Password" />
+            </div>
+            <div className="form-item password">
+                <Field name="confirmPassword" component={customInput} type="password" id="confirmPassword" label="Confirm Password" />
+            </div>
+            <div className="btn-group">
+                <button type="submit" className="btn">Check in</button>
+            </div>
         </form>
         )
 };

src/components/sidebar/sidebar.scss

@@ -32,22 +32,6 @@
         z-index: 3;
         padding: 2rem;
 
-        .logo {
-            margin-bottom: 3rem;
-
-            a {
-                color: $color-white;
-                font-weight: $bold;
-                font-size: 2rem;
-                text-transform: uppercase;
-
-                span {
-                    color: $color-mint;
-                    font-size: 3rem;
-                }
-            }
-        }
-
         ul {
             padding-left: 5rem;
             transform: translate(-5rem, 0);

src/conteiners/login/Login.js

@@ -14,6 +14,11 @@ export class Login extends React.Component {
         return (
             <div className="login-page">
                 <div className="form-login">
+                    <div className="logo blue">
+                        <Link to="/">
+                            Just_<span>tri</span>_it
+                        </Link>
+                    </div>
                     {
                         message === "User already exist" && <h3>{message}!</h3>
                     }

src/conteiners/login/login.scss

@@ -20,6 +20,10 @@
         border-radius: 4px;
         box-shadow: 0 1rem 2rem rgba($color-black, 0.1);
 
+        .logo {
+            text-align: center;
+        }
+
         h3 {
             font-size: 2.4rem;
             color: $color-error;

src/conteiners/registrationPage/RegistrationPage.js

@@ -15,6 +15,11 @@ export class Login extends React.Component {
         return (
             <div className="reg-page">
                 <div className="form-reg">
+                    <div className="logo blue">
+                        <Link to="/">
+                            Just_<span>tri</span>_it
+                        </Link>
+                    </div>
                     {
                         message === "User already exist" && <h3>{message}!</h3>
                     }

src/conteiners/registrationPage/registration-page.scss

@@ -13,13 +13,17 @@
     background: $color-grey-3;
 
     .form-reg {
-        max-width: 32rem;
+        max-width: 50rem;
         width: 100%;
         padding: 1.5rem;
         background: $color-white;
         border-radius: 4px;
         box-shadow: 0 1rem 2rem rgba($color-black, 0.1);
 
+        .logo {
+            text-align: center;
+        }
+
         h3 {
             font-size: 2.4rem;
             color: $color-error;
@@ -29,6 +33,10 @@
         }
 
         .form {
+            display: flex;
+            flex-wrap: wrap;
+            justify-content: space-between;
+
             label {
                 display: block;
                 width: 100%;
@@ -42,10 +50,35 @@
                     width: 100%;
                 }
             }
+
+            &-item {
+                width: 100%;
+
+                &.password {
+                    width: 48%;
+                }
+            }
+
+            .btn-group {
+                width: 100%;
+                padding: 0;
+            }
+        }
+    }
+
+    @media (max-width: $small) {
+        .form-reg {
+            .form {
+                &-item {
+                    &.password {
+                        width: 100%;
+                    }
+                }
+            }
         }
     }
 
-    @media (max-height: $height-499) {
+    @media (max-height: $height-630) {
         height: auto;
     }
 }

src/styles/logo.scss

@@ -0,0 +1,24 @@
+@import "variables";
+
+.logo {
+    margin-bottom: 3rem;
+
+    &.blue {
+        a {
+            color: $color-blue;
+        }
+    }
+
+    a {
+        color: $color-white;
+        font-weight: 700;
+        font-size: 2rem;
+        text-transform: uppercase;
+        display: inline-block;
+
+        span {
+            color: $color-mint;
+            font-size: 3rem;
+        }
+    }
+}

src/styles/main.scss

@@ -1,4 +1,5 @@
 @import url('https://fonts.googleapis.com/css?family=Josefin+Sans:300,400,600,700&display=swap');
 @import "variables";
 @import "base";
-@import "custom";
+@import "custom";
+@import "logo";

src/styles/variables.scss

@@ -32,7 +32,7 @@ $min-small: 768px;
 $min-xsmall: 576px;
 
 //max-height
-$height-499: 499px;
+$height-630: 630px;
 
 //mixins
 @mixin bg-settings {