edit error in style

client/src/components/pages/SignIn/index.js

@@ -71,7 +71,6 @@ class SignInForm extends Component {
                   ],
                 })(
                   <Input
-                    size="large"
                     prefix={
                       <Icon type="mail" style={{ color: 'rgba(0,0,0,.25)' }} />
                     }
@@ -89,7 +88,6 @@ class SignInForm extends Component {
                   ],
                 })(
                   <Input.Password
-                    size="large"
                     prefix={
                       <Icon type="lock" style={{ color: 'rgba(0,0,0,.25)' }} />
                     }
@@ -105,15 +103,16 @@ class SignInForm extends Component {
                     htmlType="submit"
                     onClick={this.handleSubmit}
                     className="login-form-button"
-                    size="large"
                     block
                   >
                     Log in
                   </Button>
                   <span className={styles.signup__message}>
-                    Don&apos;t have an account?{' '}
+                    Don&apos;t have an account?
+                    <Link to="/sign-up" className={styles.signup}>
+                      Register now
+                    </Link>
                   </span>
-                  <Link to="/sign-up">Regregister now!</Link>
                 </Form.Item>
               </div>
             </Form>

client/src/components/pages/SignIn/signIn.module.css

@@ -20,7 +20,7 @@
 }
 
 .logo {
-  width: 35%;
+  width: 40%;
   height: auto;
 }
 
@@ -39,9 +39,14 @@
   font-size: 1rem;
 }
 
+.signup {
+  margin-left: 0.5rem;
+  color: var(--main-color--light);
+}
+
 @media (max-width: 600px) {
   .signIn {
-    margin: 23% 10%;
+    margin: 5% 5%;
   }
 
   .formSection {
@@ -54,7 +59,7 @@
   }
 
   .logo__layout {
-    margin-bottom: 30rem;
+    margin-bottom: 10rem;
   }
 
   .heading {

client/src/components/pages/SignUp/index.js

@@ -76,7 +76,7 @@ class SignUp extends Component {
       form: { getFieldDecorator },
     } = this.props;
     return (
-      <div className={`${styles.signUpPage} signUp-controller`}>
+      <div className="signUp-controller">
         <div className={styles.signUp}>
           <div className={styles.logoSection} />
           <div className={styles.formSection}>
@@ -154,14 +154,12 @@ class SignUp extends Component {
                 <Button type="primary" htmlType="submit" block>
                   Sign Up
                 </Button>
-                <div className={styles.hasAccount}>
-                  <span>
-                    Already a member?
-                    <Link to="/sign-in">
-                      <h4 className={styles.signin}>Sign in</h4>
-                    </Link>
-                  </span>
-                </div>
+                <span className={styles.signin__message}>
+                  Already a member?
+                  <Link to="/sign-in" className={styles.signin}>
+                    Sign in
+                  </Link>
+                </span>
               </Form.Item>
             </Form>
           </div>

client/src/components/pages/SignUp/signUp.module.css

@@ -1,27 +1,32 @@
 .signUp {
   display: flex;
-  justify-content: space-between;
+  justify-content: space-around;
 }
+
 .logoSection {
   background: linear-gradient(rgba(0, 0, 0, 0.5), rgba(0, 0, 0, 0.5)),
-  url('https://imgur.com/Pi6j1NV.jpg');
+    url('https://imgur.com/Pi6j1NV.jpg');
   background-size: cover;
   background-position: center;
   width: 60%;
   height: 100vh;
 }
+
 .formSection {
   width: 30%;
-  margin: 3rem auto;  
+  margin: 2% auto auto;
 }
 
-.logo__layout{
+.logo__layout {
   width: 100%;
   display: flex;
   justify-content: space-between;
+  margin-bottom: 4rem;
 }
+
 .logo {
-  width: 30%;
+  width: 40%;
+  height: auto;
 }
 
 .heading {
@@ -30,44 +35,39 @@
   font-weight: bold;
   margin-top: 2rem;
 }
-.signUpBtn {
-  text-align: center;
-}
-.hasAccount {
-  text-align: center;
-  color: var(--main-black);
-  font-family: 'roboto';
+
+.signin__message {
+  font-size: 1rem;
 }
+
 .signin {
-  display: inline;
-  font-size: 1.2rem;
   margin-left: 0.5rem;
   color: var(--main-color--light);
 }
 
 @media (max-width: 600px) {
   .signUp {
-    margin: 23% 10%;
+    margin: 5% 5%;
   }
 
   .formSection {
-     margin: 0;
-     width: 100%;
+    margin: 0 auto auto;
+    width: 100%;
+  }
+
+  .logo__layout {
+    margin-bottom: 10rem;
   }
 
   .logoSection {
     display: none;
   }
 
-  .logo {
-    margin: -30% auto auto;
-  }
   .heading {
     margin-bottom: 10rem;
   }
 
-  .signin {
-    font-size: 4rem;
-    margin-left: 1rem;
+  .signin__message {
+    font-size: 3rem;
   }
-}
+}