From dc0b69fd674ad6ba0601dbff7768e541692260c0 Mon Sep 17 00:00:00 2001
From: Steven Sparks <s1sds28@gmail.com>
Date: Wed, 28 Feb 2024 20:51:02 -0500
Subject: [PATCH] Update header

---
 .../src/app/components/header/header.css      | 79 ++++++++++++-------
 .../src/app/components/header/header.tsx      | 14 ++--
 2 files changed, 58 insertions(+), 35 deletions(-)

diff --git a/apps/frontend/src/app/components/header/header.css b/apps/frontend/src/app/components/header/header.css
index cf4c535..631155a 100644
--- a/apps/frontend/src/app/components/header/header.css
+++ b/apps/frontend/src/app/components/header/header.css
@@ -32,9 +32,22 @@
 .header-container {
 	display: flex;
 	justify-content: center;
+	align-items: center;
+	width: 100%;
+	flex-basis: auto;
+}
+
+.header-sub-container {
+	justify-content: space-around;
+	margin-left: 1.75rem;
+	width: 100%;
+	align-items: center;
 	width: 100%;
+	flex-basis: auto;
+	flex-grow: 1;
 }
 
+
 .trademark-image,
 .trademark-letter {
 	font-size: large;
@@ -72,32 +85,6 @@
 	justify-content: space-around;
 }
 
-.header-first-time-user-text {
-	font-family: 'Sofia Pro', sans-serif;
-	font-size: 1rem;
-	font-weight: 800;
-	letter-spacing: 0px;
-	text-align: center;
-	display: flex;
-	justify-content: center;
-	align-items: center;
-	border-width: 3px;
-	padding: 1rem 2rem;
-	height: 2rem;
-	border-color: white;
-	border-radius: 30px;
-	color: white;
-}
-
-.header-first-time-user-text:hover {
-	text-decoration: underline;
-}
-
-.head-profile-image {
-	height: 2rem;
-	width: 2rem;
-	border-radius: 10rem;
-}
 
 .head-trademark-container {
 	padding-top: 25%;
@@ -157,6 +144,42 @@
 	padding: 0;
 }
 
-ul li {
-	margin-right: 0;
+.li-navlink {
+	color: white;
+	font-weight: bold;
+	margin-bottom: 0;
+	padding-right: 0.5rem;
+}
+
+.li-navlink:hover {
+	text-decoration: underline;
+}
+
+.header-first-time-user-text {
+	font-family: 'Sofia Pro', sans-serif;
+	font-size: 1rem;
+	font-weight: 800;
+	letter-spacing: 0px;
+	text-align: center;
+	display: flex;
+	justify-content: center;
+	align-items: center;
+	border-width: 3px;
+	padding: 1rem 2.5rem 1rem 2.5rem;
+	height: 2rem;
+	border-color: white;
+	border-radius: 30px;
+	color: white;
+}
+
+.header-first-time-user-text:hover {
+	text-decoration: underline;
+}
+
+
+
+.header-profile-image {
+	height: 2rem;
+	width: 2rem;
+	border-radius: 10rem;
 }
diff --git a/apps/frontend/src/app/components/header/header.tsx b/apps/frontend/src/app/components/header/header.tsx
index 6af10b3..d17e25e 100644
--- a/apps/frontend/src/app/components/header/header.tsx
+++ b/apps/frontend/src/app/components/header/header.tsx
@@ -110,7 +110,7 @@ export default function Header() {
             data-te-collapse-item
           >
             <div
-              className="!visible hidden grow basis-[100%] items-center lg:!flex lg:basis-auto ml-7 justify-around w-full"
+              className="!visible hidden grow basis-[100%] lg:!flex header-sub-container"
               id="navbarSupportedContentY"
               data-te-collapse-item
             >
@@ -140,22 +140,22 @@ export default function Header() {
                     </div>
                   </div>
                 </li>
-                <li className="hover:underline mb-4 lg:mb-0 lg:pr-2 text-white font-bold">
+                <li className="li-navlink">
                   <NavLink className="block lg:p-2" to="/dashboard">
                     Dashboard
                   </NavLink>
                 </li>
-                <li className="hover:underline mb-4 lg:mb-0 lg:pr-2 text-white font-bold">
+                <li className="li-navlink">
                   <NavLink className="block lg:p-2" to="/cashflow">
                     Cash Flow
                   </NavLink>
                 </li>
-                <li className="hover:underline mb-4 lg:mb-0 lg:pr-2 text-white font-bold">
+                <li className="li-navlink">
                   <NavLink className="block lg:p-2" to="/assets">
                     Assets
                   </NavLink>
                 </li>
-                <li className="hover:underline mb-4 lg:mb-0 lg:pr-2 text-white font-bold">
+                <li className="li-navlink">
                   <NavLink className="block lg:p-2" to="/liabilities">
                     Liabilities
                   </NavLink>
@@ -163,7 +163,7 @@ export default function Header() {
                 <li>
                   <button
                     id="FirstTimeUserBTN"
-                    className="header-first-time-user-text pr-10"
+                    className="header-first-time-user-text"
                   >
                     First Time User?
                   </button>
@@ -172,7 +172,7 @@ export default function Header() {
                   <img
                     src={hankHill}
                     alt="Frame2"
-                    className="head-profile-image"
+                    className="header-profile-image"
                   />
                 </li>
               </ul>