chore(authentication): style authentication page

- Add box shadow to forms - Indicate active form with selected class
chidimo · May 17, 2019 · 4e3ad2f · 4e3ad2f
1 parent 673bc66
commit 4e3ad2f
Show file tree

Hide file tree

Showing 3 changed files with 24 additions and 14 deletions.
diff --git 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
@@ -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
@@ -15,23 +15,23 @@ 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 => {
     e.preventDefault();
     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 => {
     e.preventDefault();
     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');
 });