From 4e3ad2fe63e5e0ee03e54d634e5dd1c1e259dd2a Mon Sep 17 00:00:00 2001
From: Chidi Orji <orjichidi95@gmail.com>
Date: Fri, 17 May 2019 17:21:27 +0100
Subject: [PATCH] chore(authentication): style authentication page

- Add box shadow to forms
- Indicate active form with selected class
---
 UI/authentication.html  | 10 ++++++++--
 UI/css/style.css        | 18 +++++++++++-------
 UI/js/authentication.js | 10 +++++-----
 3 files changed, 24 insertions(+), 14 deletions(-)

diff --git a/UI/authentication.html b/UI/authentication.html
index fd54142..59224a8 100644
--- a/UI/authentication.html
+++ b/UI/authentication.html
@@ -25,11 +25,11 @@
                 <section class="authentication_section">
         
                     <div id="reg_form_toggle" class="container">
-                        <div id="activate_signin" class="authentication_div">
+                        <div id="activate_signin" class="authentication_div selected">
                             <h4>Sign In</h4>
                         </div>
         
-                        <div id='activate_signup' class="authentication_div deselected">
+                        <div id='activate_signup' class="authentication_div">
                             <h4>Sign Up</h4>
                         </div>
                     </div>
@@ -61,6 +61,12 @@ <h1 class="authentication_title">Create your account</h1>
                                 <label for="email"><b>Email</b></label>
                                 <input type="email" placeholder="Enter email" name="email">
             
+                                <label for="first_name"><b>First Name</b></label>
+                                <input type="text" placeholder="First Name" name="first_name" required>
+                
+                                <label for="last_name"><b>Last Name</b></label>
+                                <input type="text" placeholder="Last Name" name="last_name" required>
+                
                                 <label for="password"><b>Password</b></label>
                                 <input type="password" placeholder="Enter password" name="password">
             
diff --git a/UI/css/style.css b/UI/css/style.css
index 6dd79c6..3ba7f9d 100644
--- a/UI/css/style.css
+++ b/UI/css/style.css
@@ -84,8 +84,8 @@ hr {
     margin-right: auto;
     padding: 0 30px 30px 30px;
     background: #ffffff;
-    border-bottom-left-radius: 5px;
-    border-bottom-right-radius: 5px;
+    border-radius: 5px;
+    box-shadow: 5px 5px 15px rgb(51, 58, 86, 0.5);
 }
 
 .form_wrapper input[type='email'],
@@ -433,18 +433,21 @@ footer {
 /* authentication */
 
 .authentication_div {
-    background: #ffffff;
     text-align: center;
     cursor: pointer;
+    opacity: 0.4
 }
 
 #reg_form_toggle {
     margin-top: 30px;
     display: grid;
     max-width: 650px;
+    border-radius: 5px;
     grid-template-columns: 50% 50%;
     border-top-right-radius: 5px;
     border-top-left-radius: 5px;
+    background: #f1f1f1;
+    padding-top: 0;
 }
 
 #reg_form_toggle h4 {
@@ -453,11 +456,12 @@ footer {
     text-transform: uppercase;
 }
 
-.deselected {
-    border-bottom: 1px solid #132B40;
-    background: #F7F5E6;
+.selected {
+    /* border-bottom: 1px solid rgb(51, 58, 86, 0.3); */
+    background: #FFFFFF;
     color:#333A56;
-    font-size: 14px;
+    font-size: 18px;
+    opacity: 1;
 }
 
 .hide_form {
diff --git a/UI/js/authentication.js b/UI/js/authentication.js
index a68d1fe..74caef5 100644
--- a/UI/js/authentication.js
+++ b/UI/js/authentication.js
@@ -15,7 +15,7 @@ sign_in_button.addEventListener('click', e => {
 
 sign_up_button.addEventListener('click', e => {
     e.preventDefault();
-    window.location = './profile.edit.html';
+    window.location = './dashboard.html';
 });
 
 activate_signin.addEventListener('click', e => {
@@ -23,8 +23,8 @@ activate_signin.addEventListener('click', e => {
     signup_form.classList.add('hide_form');
     signin_form.classList.remove('hide_form');
 
-    activate_signin.classList.remove('deselected');
-    activate_signup.classList.add('deselected');
+    activate_signin.classList.add('selected');
+    activate_signup.classList.remove('selected');
 });
 
 activate_signup.addEventListener('click', e => {
@@ -32,6 +32,6 @@ activate_signup.addEventListener('click', e => {
     signin_form.classList.add('hide_form');
     signup_form.classList.remove('hide_form');
 
-    activate_signup.classList.remove('deselected');
-    activate_signin.classList.add('deselected');
+    activate_signup.classList.add('selected');
+    activate_signin.classList.remove('selected');
 });