Update header

VSchool · Feb 29, 2024 · dc0b69f · dc0b69f
1 parent ff4ab11
commit dc0b69f
Show file tree

Hide file tree

Showing 2 changed files with 58 additions and 35 deletions.
diff --git 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
@@ -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,30 +140,30 @@ 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>
                 </li>
                 <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>