From f674a8c6a5db6691f04fb07aff197175e9336320 Mon Sep 17 00:00:00 2001
From: pangnoah <pangnoah@yahoo.com>
Date: Mon, 27 Nov 2023 13:02:08 -0600
Subject: [PATCH] Update CSS and UI

---
 app/static/css/analytics.css    | 12 ++---
 app/static/css/dashboard.css    | 10 ++---
 app/static/css/homepage.css     | 78 ++++++++++++++++-----------------
 app/static/css/manage-users.css | 11 +++++
 app/templates/base.html         |  1 +
 app/templates/manage_users.html |  9 +++-
 6 files changed, 69 insertions(+), 52 deletions(-)
 create mode 100644 app/static/css/manage-users.css

diff --git a/app/static/css/analytics.css b/app/static/css/analytics.css
index f8b66ed..def6a49 100644
--- a/app/static/css/analytics.css
+++ b/app/static/css/analytics.css
@@ -13,12 +13,12 @@ body{
 .container{
   margin: auto;
   display: flex;
-  width: 1300px;
+  width: 1275px;
 }
 
 nav{
-  width: 425px;
-  height: 120vh;
+  width: 450px;
+  height: 125vh;
   background: #ffffff;
 }
 
@@ -35,7 +35,7 @@ nav i{
 
 .nav-title{
   margin: 1.5rem;
-  padding-bottom: 1.25rem;
+  padding-bottom: 1.2rem;
   display: flex;
   align-items: center;
   color: #000000;
@@ -75,7 +75,7 @@ li a{
 
 .card{
   width: 97%;
-  padding: 12px;
+  padding: 14px;
   cursor: pointer;
   background: #fff;
   margin-bottom: 15px;
@@ -85,4 +85,4 @@ li a{
 
 .card_container .text{
   margin-left: 2rem;
-}
\ No newline at end of file
+}
diff --git a/app/static/css/dashboard.css b/app/static/css/dashboard.css
index e419b03..83605a4 100644
--- a/app/static/css/dashboard.css
+++ b/app/static/css/dashboard.css
@@ -13,12 +13,12 @@ body{
 .container{
   margin: auto;
   display: flex;
-  width: 1300px;
+  width: 1275px;
 }
 
 nav{
-  width: 425px;
-  height: 120vh;
+  width: 450px;
+  height: 125vh;
   background: #ffffff;
 }
 
@@ -35,7 +35,7 @@ nav i{
 
 .nav-title{
   margin: 1.5rem;
-  padding-bottom: 1.25rem;
+  padding-bottom: 1.2rem;
   display: flex;
   align-items: center;
   color: #000000;
@@ -67,4 +67,4 @@ li a{
   background: #ffffff;
   padding: 12px;
   text-align: center;
-}
\ No newline at end of file
+}
diff --git a/app/static/css/homepage.css b/app/static/css/homepage.css
index fc604c2..62cc232 100644
--- a/app/static/css/homepage.css
+++ b/app/static/css/homepage.css
@@ -14,12 +14,12 @@ body{
 .container{
     margin: auto;
     display: flex;
-    width: 1300px;
+    width: 1275px;
 }
 
 nav{
-    width: 425px;
-    height: 120vh;
+    width: 450px;
+    height: 125vh;
     background: #ffffff;
 }
 
@@ -29,14 +29,14 @@ nav{
 }
 
 nav i{
-    width: 50px;
+    width: 45px;
     font-size: 18px;
     text-align: center;
 }
 
 .nav-title{
     margin: 1.5rem;
-    padding-bottom: 1.25rem;
+    padding-bottom: 1.2rem;
     display: flex;
     align-items: center;
     color: #000000;
@@ -81,7 +81,7 @@ li a:hover{
 
 .card{
     width: 97%;
-    padding: 12px;
+    padding: 14px;
     cursor: pointer;
     background: #fff;
     margin-bottom: 15px;
@@ -137,55 +137,55 @@ tr:nth-child(even) {
 }
 /* for popup in my_cases */
 .overlay {
-	position: fixed;
-	top: 0;
-	bottom: 0;
-	left: 0;
-	right: 0;
-	background: rgba(102, 36, 132, 0.8);
-	transition: opacity 500ms;
-	visibility: hidden;
-	opacity: 0;
+    position: fixed;
+    top: 0;
+    bottom: 0;
+    left: 0;
+    right: 0;
+    background: rgba(102, 36, 132, 0.8);
+    transition: opacity 500ms;
+    visibility: hidden;
+    opacity: 0;
 }
 .overlay:target {
-	visibility: visible;
-	opacity: 1;
+    visibility: visible;
+    opacity: 1;
 }
 
 .wrapper {
-	margin: 70px auto;
-	padding: 20px;
-	background: #e7e7e7;
-	border-radius: 5px;
-	width: 30%;
+    margin: 70px auto;
+    padding: 20px;
+    background: #e7e7e7;
+    border-radius: 5px;
+    width: 30%;
     height: 100%;
-	position: relative;
-	transition: all 5s ease-in-out;
+    position: relative;
+    transition: all 5s ease-in-out;
 }
 .wrapper h2 {
-	margin-top: 0;
+    margin-top: 0;
 }
 .wrapper .close {
-	position: absolute;
-	top: 20px;
-	right: 30px;
-	transition: all 200ms;
-	font-size: 30px;
-	font-weight: bold;
-	text-decoration: none;
-	color: #662484;
+    position: absolute;
+    top: 20px;
+    right: 30px;
+    transition: all 200ms;
+    font-size: 30px;
+    font-weight: bold;
+    text-decoration: none;
+    color: #662484;
 }
 .wrapper .close:hover {
-	color: yellow;
+    color: yellow;
 }
 .wrapper .content {
     height: 70%;
-	overflow-y: scroll;
+    overflow-y: scroll;
 }
 
 .popupContent {
     margin-bottom: 20px;
-	border-radius: 5px;
-	background-color: #e7e7e7;
-	padding: 20px 0;
-}
\ No newline at end of file
+    border-radius: 5px;
+    background-color: #e7e7e7;
+    padding: 20px 0;
+}
diff --git a/app/static/css/manage-users.css b/app/static/css/manage-users.css
new file mode 100644
index 0000000..8d7bb33
--- /dev/null
+++ b/app/static/css/manage-users.css
@@ -0,0 +1,11 @@
+.purple-button{
+    margin: 10px;
+    background-color: #662484;
+    border: none;
+    color: white;
+    text-align: center;
+    cursor: pointer;
+    padding: 5px 10px;
+    font-size: 16px;
+    border-radius: 4px;
+}
diff --git a/app/templates/base.html b/app/templates/base.html
index ba70f89..612c4b2 100644
--- a/app/templates/base.html
+++ b/app/templates/base.html
@@ -14,6 +14,7 @@
     <script src="https://maxcdn.bootstrapcdn.com/bootstrap/4.5.2/js/bootstrap.min.js"></script>
     <script src="https://cdn.datatables.net/1.13.7/js/jquery.dataTables.min.js"></script>
     <script src="https://cdn.datatables.net/1.11.5/js/jquery.dataTables.js"></script>
+    {% block addhead %}{% endblock %}
 </head>
 
 <body>
diff --git a/app/templates/manage_users.html b/app/templates/manage_users.html
index 407989e..1797d9e 100644
--- a/app/templates/manage_users.html
+++ b/app/templates/manage_users.html
@@ -1,9 +1,13 @@
 {% extends 'base.html' %}
 
+{% block addhead %}
+<link rel="stylesheet" type="text/css" href="{{ url_for('static', filename='css/manage-users.css') }}"/>
+{% endblock %}
+
 {% block header %}
   <div style="display: flex; justify-content: space-between; align-items: center;">
     <h2>{% block title %}Manage Users{% endblock %}</h2>
-    <button id="addUser" class="btn btn-primary">Add User</button>
+    <button id="addUser" class="btn btn-primary purple-button">Add User</button>
   </div>
 {% endblock %}
 
@@ -60,7 +64,7 @@ <h5 class="modal-title" id="userModalLabel">Add/Edit User</h5>
               <!-- Options for roles -->
             </select>
           </div>
-          <button type="button" id="saveUser" class="btn btn-primary">Save</button>
+          <button type="button" id="saveUser" class="btn btn-primary purple-button">Save</button>
         </form>
       </div>
     </div>
@@ -74,4 +78,5 @@ <h5 class="modal-title" id="userModalLabel">Add/Edit User</h5>
     let users = JSON.parse('{{ users | tojson | safe }}');
   </script>
   <script src="{{ url_for('static', filename='js/manage_users.js') }}"></script>
+  
 {% endblock %}