From 273d5c3d9d1634d5cc85961aa7e42e8d0585626f Mon Sep 17 00:00:00 2001
From: Lucas Patenaude <LUPA7501@colorado.edu>
Date: Wed, 10 Apr 2024 02:16:31 -0600
Subject: [PATCH] Additional code clean up and login page stylizations

---
 .../resources/css/navigation-bar/login.css    | 20 ++++++++++++++++++-
 .../css/navigation-bar/navigation-bar.css     | 10 ++++++++++
 .../resources/js/navigation-bar/user/login.js | 18 +++++++----------
 .../views/partials/navigation-bar/login.hbs   |  2 +-
 .../src/views/partials/navigation-bar/nav.hbs | 12 +----------
 5 files changed, 38 insertions(+), 24 deletions(-)

diff --git a/ProjectSourceCode/src/resources/css/navigation-bar/login.css b/ProjectSourceCode/src/resources/css/navigation-bar/login.css
index d845822..8d6ff07 100644
--- a/ProjectSourceCode/src/resources/css/navigation-bar/login.css
+++ b/ProjectSourceCode/src/resources/css/navigation-bar/login.css
@@ -5,9 +5,27 @@
     top: 150px; /* Adjust this value as needed */
     right: 20px; /* Adjust this value as needed */
     z-index: 10;
-    background-color: white;
+    background: linear-gradient(to bottom, white, rgb(245, 245, 245), rgb(227, 227, 227)); /* Gradient from white to gray */
+    box-shadow: 0px 4px 8px rgba(0, 0, 0, 0.5);
     border: 1px solid gray;
     border-radius: 8px;
 }
 
+#login-submit {
+    padding: 5px 10px;
+    background-color: red;
+    border-color: red;
+
+    border: 1px solid red;
+    border-radius: 8px;
+    color: white;
+}
+
+#login-submit:hover {
+    background-color: darkred;
+    border-color: darkred;
+    color: white;
+}
+
+
   
\ No newline at end of file
diff --git a/ProjectSourceCode/src/resources/css/navigation-bar/navigation-bar.css b/ProjectSourceCode/src/resources/css/navigation-bar/navigation-bar.css
index 74cc966..fb18001 100644
--- a/ProjectSourceCode/src/resources/css/navigation-bar/navigation-bar.css
+++ b/ProjectSourceCode/src/resources/css/navigation-bar/navigation-bar.css
@@ -31,6 +31,16 @@
     font-size: 30px;
 }
 
+#user {
+    width: 25px;
+    transition: width 0.3s ease; /* Adding transition for smooth effect */
+}
+
+#user:hover {
+    width: 30px;
+}
+
+
 #line {
     height: 100%; /* spans the entire height of the navigation bar */
     width: 10px;
diff --git a/ProjectSourceCode/src/resources/js/navigation-bar/user/login.js b/ProjectSourceCode/src/resources/js/navigation-bar/user/login.js
index 1afd585..cfeb437 100644
--- a/ProjectSourceCode/src/resources/js/navigation-bar/user/login.js
+++ b/ProjectSourceCode/src/resources/js/navigation-bar/user/login.js
@@ -1,12 +1,8 @@
-// Function to render login.hbs when #user is clicked
-function renderLogin() {
-    // Assuming you're using jQuery
-    $('#user').on('click', function() {
-      // Load the login.hbs template content using AJAX
-      res.render('/login');
-    });
-  }
-  
-  // Call the function to enable rendering login.hbs
-  renderLogin();
+$(document).ready(function() {
+  // When #user is clicked
+  $('#user').click(function() {
+    // Toggle the visibility of the login container
+    $('#login-container').toggle();
+  });
+});
   
diff --git a/ProjectSourceCode/src/views/partials/navigation-bar/login.hbs b/ProjectSourceCode/src/views/partials/navigation-bar/login.hbs
index c671fb1..64d7202 100644
--- a/ProjectSourceCode/src/views/partials/navigation-bar/login.hbs
+++ b/ProjectSourceCode/src/views/partials/navigation-bar/login.hbs
@@ -20,7 +20,7 @@
           <input type="password" class="form-control" id="password" name="password" required>
           </div>
 
-          <button type="submit" class="btn btn-primary">Submit</button>
+          <button type="submit" id="login-submit">Submit</button>
 
         </form>
 
diff --git a/ProjectSourceCode/src/views/partials/navigation-bar/nav.hbs b/ProjectSourceCode/src/views/partials/navigation-bar/nav.hbs
index 87c56bd..9be4ec2 100644
--- a/ProjectSourceCode/src/views/partials/navigation-bar/nav.hbs
+++ b/ProjectSourceCode/src/views/partials/navigation-bar/nav.hbs
@@ -41,7 +41,7 @@
       </ul>
     </div>
     <div id="user" class="d-sm-flex">
-      <img src="img/navigation-bar/user.png" alt="Your Image" class="img-fluid" style="width: 30px;">
+      <img src="img/navigation-bar/user.png" alt="Your Image" class="img-fluid">
     </div>
   </div>
 </nav>
@@ -51,15 +51,5 @@
   {{> navigation-bar/login}}
 </div>
 
-<!-- JavaScript to handle click event -->
-<script>
-  $(document).ready(function() {
-    // When #user is clicked
-    $('#user').click(function() {
-      // Toggle the visibility of the login container
-      $('#login-container').toggle();
-    });
-  });
-</script>