From ff4ab114c60e3b7b2f713d29d8bec12e48e4b366 Mon Sep 17 00:00:00 2001
From: Steven Sparks <s1sds28@gmail.com>
Date: Wed, 28 Feb 2024 12:55:39 -0500
Subject: [PATCH] Update header css

---
 .../src/app/components/header/header.css      | 107 +++++-----
 .../src/app/components/header/header.tsx      | 183 ++++++++----------
 2 files changed, 134 insertions(+), 156 deletions(-)

diff --git a/apps/frontend/src/app/components/header/header.css b/apps/frontend/src/app/components/header/header.css
index c8de311..cf4c535 100644
--- a/apps/frontend/src/app/components/header/header.css
+++ b/apps/frontend/src/app/components/header/header.css
@@ -9,7 +9,7 @@
 	left: 0;
 	transition: 650ms;
 	z-index: 999;
-  	color: black;
+	color: black;
 }
 
 .HideSidebarNav {
@@ -26,36 +26,32 @@
 }
 
 .SidebarWrap {
-  width: 100%;
+	width: 100%;
 }
 
 .header-container {
 	display: flex;
 	justify-content: center;
 	width: 100%;
-	justify-content: center;
 }
 
-
-  
-.trademark-image {
+.trademark-image,
+.trademark-letter {
 	font-size: large;
 	color: white;
 }
-  
+
 .trademark-letter {
-	font-size: large;
-	color: white;
 	margin-top: 0.25rem;
 	padding-left: 1rem;
 	padding-right: 1rem;
 }
-  
+
 .vertical-line {
 	position: relative;
 	display: flex;
 }
-  
+
 .vertical-line::before {
 	content: ' ';
 	position: absolute;
@@ -65,18 +61,12 @@
 	width: 1px;
 	background-color: rgb(255, 255, 255);
 }
-  
+
 .head-trademark-lineList {
 	margin-top: 0.40rem;
 	width: 1.25rem;
 }
 
-
-  
-
-
-
-
 .navLink-list {
 	display: flex;
 	justify-content: space-around;
@@ -118,56 +108,55 @@
 	justify-content: center;
 	gap: 1rem;
 	height: 10rem;
-  }
-  
+}
 
 .head-trademark-letter {
 	font-size: 1.5rem;
 	color: white;
-	padding: 0px;
-	margin: 0px;
-	bottom: 0px;
+	padding: 0;
+	margin: 0;
+	bottom: 0;
+}
 
-  }
-  
-  .head-trademark-symbol {
+.head-trademark-symbol {
 	width: 1.55rem;
 	height: 1.55rem;
-	padding: 0px;
-	margin: 0px;
-  
-  }
-  
-  .head-vertical-line {
-	  position: relative;
-	  display: flex;
-	
-  }
-  
-  .head-vertical-line::before {
-	  content: '';
-	  position: absolute;
-	  top: 0rem;
-	  bottom: 0rem;
-	  left: 0.02rem;
-	  width: 1px;
-	  background-color: rgb(255, 255, 255);
-  }
-  
-  .head-crystalball {
+	padding: 0;
+	margin: 0;
+}
+
+.head-vertical-line {
+	position: relative;
+	display: flex;
+}
+
+.head-vertical-line::before {
+	content: '';
+	position: absolute;
+	top: 0.35rem;
+	bottom: 0.25rem;
+	left: 0.02rem;
+	width: 1px;
+	background-color: rgb(255, 255, 255);
+}
+
+.head-crystalball {
 	width: 1.95rem;
 	height: 1.95rem;
-	padding: 0px;
-	margin: 0px;
-	
+	padding: 0;
+	margin: 0;
 	padding-left: 0.5rem;
-  }
+}
 
-  ul {
-	margin: 0;
+.unordered-list {
+	justify-content: space-around;
+	width: 100%;
+	display: flex;
+	flex-direction: row;
+	margin-right: auto;
 	padding: 0;
-  }
-  
-  ul.li {
-	margin-right: 0px;
-  }
\ No newline at end of file
+}
+
+ul li {
+	margin-right: 0;
+}
diff --git a/apps/frontend/src/app/components/header/header.tsx b/apps/frontend/src/app/components/header/header.tsx
index 9bac577..6af10b3 100644
--- a/apps/frontend/src/app/components/header/header.tsx
+++ b/apps/frontend/src/app/components/header/header.tsx
@@ -81,116 +81,105 @@ export default function Header() {
     return classes.filter(Boolean).join(' ');
   }
 
-    return (
+  return (
     <header className="py-5 bg-white lg:bg-black">
       <nav className="relative z-50 flex justify-center">
         <div className="flex w-full flex-wrap items-center justify-start px-3">
           <button
-              onClick={toggleSidebar}
-              className="border-0 bg-transparent px-2 text-xl leading-none Transition-shadow duration-150 ease-in-out lg:hidden"
-              type="button"
-              data-te-collapse-init
-              data-te-target="#navbarSupportedContentY"
-              aria-controls="navbarSupportedContentY"
-              aria-expanded="false"
-              aria-label="Toggle navigation"
-            >
-              <img
-                src={hamburger_menu}
-                alt="Hamburger Menu"
-                className="w-10 h-10"
-              />
+            onClick={toggleSidebar}
+            className="border-0 bg-transparent px-2 text-xl leading-none Transition-shadow duration-150 ease-in-out lg:hidden"
+            type="button"
+            data-te-collapse-init
+            data-te-target="#navbarSupportedContentY"
+            aria-controls="navbarSupportedContentY"
+            aria-expanded="false"
+            aria-label="Toggle navigation"
+          >
+            <img
+              src={hamburger_menu}
+              alt="Hamburger Menu"
+              className="w-10 h-10"
+            />
           </button>
-          <div onClick={toggleSidebar} className='lg:hidden'>
-          <HamburgerNav 
-            show={showSidebar} 
-          />
+          <div onClick={toggleSidebar} className="lg:hidden">
+            <HamburgerNav show={showSidebar} />
           </div>
           <div
-              className="header-container"
-              id="navbarSupportedContentY"
-              data-te-collapse-item
-            >
-
+            className="header-container"
+            id="navbarSupportedContentY"
+            data-te-collapse-item
+          >
             <div
               className="!visible hidden grow basis-[100%] items-center lg:!flex lg:basis-auto ml-7 justify-around w-full"
               id="navbarSupportedContentY"
-              data-te-collapse-item>
-            <ul className="mr-auto flex flex-col lg:flex-row justify-around w-full">
-            <li>
-            <div className="head-tradmark-container flex pr-10">
-              <div id="W" className="trademark-letter">
-                W
-              </div>
-              <img src={lineList} alt="lineList" id="lineList" className="head-trademark-lineList" />
-              <div id="L" className="trademark-letter">
-                L
-              </div>
-              <div className="head-vertical-line">
-                " "
-                <img
-                  src={crystalBall}
-                  alt="CrystalBall"
-                  id="CrystalBall"
-                  className="mb-0 mt-1"
-                />
-              </div>
-            </div>
-            </li>
-            <li className="hover:underline mb-4 lg:mb-0 lg:pr-2 text-white font-bold">
-                  <NavLink
-                    className="block lg:p-2"
-                    to='/dashboard'
-                    >
-                      Dashboard
+              data-te-collapse-item
+            >
+              <ul className="unordered-list">
+                <li>
+                  <div className="head-tradmark-container flex pr-10">
+                    <div id="W" className="trademark-letter">
+                      W
+                    </div>
+                    <img
+                      src={lineList}
+                      alt="lineList"
+                      id="lineList"
+                      className="head-trademark-lineList"
+                    />
+                    <div id="L" className="trademark-letter">
+                      L
+                    </div>
+                    <div className="head-vertical-line">
+                      " "
+                      <img
+                        src={crystalBall}
+                        alt="CrystalBall"
+                        id="CrystalBall"
+                        className="mb-0 mt-1"
+                      />
+                    </div>
+                  </div>
+                </li>
+                <li className="hover:underline mb-4 lg:mb-0 lg:pr-2 text-white font-bold">
+                  <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">
-                <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">
-                <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">
-                <NavLink
-                  className="block lg:p-2" 
-                  to="/liabilities"
-                >
-                  Liabilities
-                </NavLink>
-              </li>
-              <li>
-              <button 
-                id="FirstTimeUserBTN"
-                className='header-first-time-user-text pr-10'
-              >
-                  First Time User?
-              </button>
-              </li>
-              <li>
-              <img
-                src={hankHill}
-                alt="Frame2"
-                className='head-profile-image'
-            />
-            </li>
-            </ul>
-          </div>
-
-
+                </li>
+                <li className="hover:underline mb-4 lg:mb-0 lg:pr-2 text-white font-bold">
+                  <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">
+                  <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">
+                  <NavLink className="block lg:p-2" to="/liabilities">
+                    Liabilities
+                  </NavLink>
+                </li>
+                <li>
+                  <button
+                    id="FirstTimeUserBTN"
+                    className="header-first-time-user-text pr-10"
+                  >
+                    First Time User?
+                  </button>
+                </li>
+                <li>
+                  <img
+                    src={hankHill}
+                    alt="Frame2"
+                    className="head-profile-image"
+                  />
+                </li>
+              </ul>
+            </div>
           </div>
         </div>
       </nav>
     </header>
-  )
+  );
 }
\ No newline at end of file