From c0e7061cf58004844090d214882f39ba65aa4bf7 Mon Sep 17 00:00:00 2001
From: Terence Lo <terencelomoa@gmail.com>
Date: Mon, 10 Mar 2025 14:41:21 -0700
Subject: [PATCH 1/7] clean up tailwind config

---
 frontend/tailwind.config.js | 41 ++++++++++++++++++++++++-------------
 1 file changed, 27 insertions(+), 14 deletions(-)

diff --git a/frontend/tailwind.config.js b/frontend/tailwind.config.js
index 7541c68e..781ca6dd 100644
--- a/frontend/tailwind.config.js
+++ b/frontend/tailwind.config.js
@@ -1,6 +1,11 @@
 /** @type {import('tailwindcss').Config} */
+
+/*
+ * Please refer to CTJ Figma Design System for more details about custom theme values
+ **/
+
 module.exports = {
-  darkMode: "class", // Enables dark mode with a class
+  darkMode: "class",
   content: [
     "./src/pages/Demo/DemoTailwind.tsx",
     "./src/pages/Authentication/*.tsx",
@@ -12,15 +17,15 @@ module.exports = {
   theme: {
     screens: {
       xs: "480px",
-      // => @media (min-width: 480px) { ... }
       sm: "577px",
-      // => @media (min-width: 577px) { ... }
       md: "769px",
-      // => @media (min-width: 769px) { ... }
       lg: "1025px",
-      // => @media (min-width: 1025px) { ... }
       xl: "1201px",
-      // => @media (min-width: 1201px) { ... }
+    },
+    borderRadius: {
+      DEFAULT: "20px",
+      large: "60px",
+      "x-large": "100px",
     },
     colors: {
       // Primary Colors
@@ -37,13 +42,13 @@ module.exports = {
       "tan-light": "#ffefdb",
       "tan-bg": "#fbe8ce",
       green: "#13831e",
-      red: "#CC0023",
+      red: "#c93329",
       // Neutral Colors
-      white: "#fff",
+      white: "#ffffff",
       "grey-light": "#f2f2f2",
       grey: "#c1c1c1",
       "grey-dark": "#585858",
-      charcoal: "#333",
+      charcoal: "#333333",
     },
     fontFamily: {
       sans: ["Roboto", "Tahoma", "Verdana", "sans-serif"],
@@ -60,15 +65,23 @@ module.exports = {
       lineHeight: {
         "extra-tight": "1.125rem",
       },
-      borderRadius: {
-        DEFAULT: "20px",
-        large: "60px",
-        "x-large": "100px",
-      },
       rotate: {
         290: "290deg",
         345: "345deg",
       },
+      spacing: {
+        p0: "0px",
+        p1: "8px",
+        p2: "16px",
+        p3: "24px",
+        p4: "32px",
+        p5: "40px",
+        p6: "48px",
+        p7: "56px",
+        p8: "64px",
+        p9: "72px",
+        p10: "80px",
+      },
     },
   },
   plugins: [],

From 13f762bbf3b474b0ddf89be9faf6e9c3dd2d097e Mon Sep 17 00:00:00 2001
From: Terence Lo <terencelomoa@gmail.com>
Date: Mon, 10 Mar 2025 14:47:17 -0700
Subject: [PATCH 2/7] fix border radius

---
 frontend/tailwind.config.js | 10 +++++-----
 1 file changed, 5 insertions(+), 5 deletions(-)

diff --git a/frontend/tailwind.config.js b/frontend/tailwind.config.js
index 781ca6dd..c4b7b5ad 100644
--- a/frontend/tailwind.config.js
+++ b/frontend/tailwind.config.js
@@ -22,11 +22,6 @@ module.exports = {
       lg: "1025px",
       xl: "1201px",
     },
-    borderRadius: {
-      DEFAULT: "20px",
-      large: "60px",
-      "x-large": "100px",
-    },
     colors: {
       // Primary Colors
       "blue-dark": "#3450a1",
@@ -62,6 +57,11 @@ module.exports = {
       black: "900",
     },
     extend: {
+      borderRadius: {
+        DEFAULT: "20px",
+        large: "60px",
+        "x-large": "100px",
+      },
       lineHeight: {
         "extra-tight": "1.125rem",
       },

From 43d972cc2817d0175780158df643306942241086 Mon Sep 17 00:00:00 2001
From: Terence Lo <terencelomoa@gmail.com>
Date: Mon, 10 Mar 2025 15:00:39 -0700
Subject: [PATCH 3/7] refactor Logo

---
 frontend/src/tw-components/HeaderNav.tsx | 24 ++++++++++++------------
 1 file changed, 12 insertions(+), 12 deletions(-)

diff --git a/frontend/src/tw-components/HeaderNav.tsx b/frontend/src/tw-components/HeaderNav.tsx
index a1935911..46ce641c 100644
--- a/frontend/src/tw-components/HeaderNav.tsx
+++ b/frontend/src/tw-components/HeaderNav.tsx
@@ -21,19 +21,19 @@ const menuItems: menuObject[] = [
   { name: "Projects", link: "https://www.hackforla.org/projects/" },
 ];
 
-function HeaderNav() {
-  const Logo = () => {
-    return (
-      <a href="/" rel="noopener noreferrer">
-        <img
-          className="max-h-[24px] md:max-h-[32px]"
-          src={logoHorizontal}
-          alt="Civic Tech Jobs - Home"
-        />
-      </a>
-    );
-  };
+const Logo = () => {
+  return (
+    <a href="/" rel="noopener noreferrer">
+      <img
+        className="max-h-p3 md:max-h-p4"
+        src={logoHorizontal}
+        alt="Civic Tech Jobs - Home"
+      />
+    </a>
+  );
+};
 
+function HeaderNav() {
   return (
     <header className="flex h-16 w-full items-center justify-between px-3 py-1 shadow-[-1px_1px_2px_rgb(51,51,51,0.2)] lg:justify-around">
       <div>

From 1bdc11e0632a9ea015bbf7e3323e17f5a4cc81f4 Mon Sep 17 00:00:00 2001
From: Terence Lo <terencelomoa@gmail.com>
Date: Mon, 10 Mar 2025 15:28:49 -0700
Subject: [PATCH 4/7] init tw footerNav

---
 frontend/src/tw-components/FooterNav.tsx | 69 ++++++++++++++++++++++++
 1 file changed, 69 insertions(+)
 create mode 100644 frontend/src/tw-components/FooterNav.tsx

diff --git a/frontend/src/tw-components/FooterNav.tsx b/frontend/src/tw-components/FooterNav.tsx
new file mode 100644
index 00000000..3629e65f
--- /dev/null
+++ b/frontend/src/tw-components/FooterNav.tsx
@@ -0,0 +1,69 @@
+// External imports
+import React, { Fragment } from "react";
+import { Link } from "react-router-dom";
+
+// Internal imports
+import { Button } from "components/components";
+import { logoHorizontalOnDark, logoStackedOnDark } from "assets/images/images";
+
+interface menuObject {
+  name?: string;
+  link: string;
+}
+
+const menuItems: menuObject[] = [
+  { name: "Credits", link: "credits" },
+  { name: "Sitemap", link: "#" },
+  { name: "Join Us", link: "qualifier/1" },
+];
+
+const Logo = () => {
+  return (
+    <Link className="block" to="/">
+      <img
+        className="hidden sm:block"
+        src={logoHorizontalOnDark}
+        alt="Civic Tech Jobs - Home"
+      />
+      <img
+        className="sm:hidden"
+        src={logoStackedOnDark}
+        alt="Civic Tech Jobs - Home"
+      />
+    </Link>
+  );
+};
+
+function FooterNav() {
+  return (
+    <footer className="footer-nav flex-container px-[176px]">
+      <Logo />
+      <nav
+        className="footer-menu flex-container"
+        aria-label="footer-navigation"
+      >
+        {menuItems.map((item, index) => {
+          return (
+            <Fragment key={index}>
+              <div className="footer-menu-vertical-line"></div>
+              <Link className="footer-links" to={item.link}>
+                {item.name}
+              </Link>
+            </Fragment>
+          );
+        })}
+      </nav>
+      <div className="footer-donate-button flex-container">
+        <Button
+          color="primary-dark"
+          href="https://www.hackforla.org/donate/"
+          size="sm"
+        >
+          Donate
+        </Button>
+      </div>
+    </footer>
+  );
+}
+
+export { FooterNav };

From 9f7533c00ab0e24a5593171e438a587f36b359e6 Mon Sep 17 00:00:00 2001
From: Terence Lo <terencelomoa@gmail.com>
Date: Mon, 10 Mar 2025 16:40:49 -0700
Subject: [PATCH 5/7] convert sass to TW

---
 frontend/src/tw-components/FooterNav.tsx | 10 +++++-----
 1 file changed, 5 insertions(+), 5 deletions(-)

diff --git a/frontend/src/tw-components/FooterNav.tsx b/frontend/src/tw-components/FooterNav.tsx
index 3629e65f..ecf9e5a1 100644
--- a/frontend/src/tw-components/FooterNav.tsx
+++ b/frontend/src/tw-components/FooterNav.tsx
@@ -36,24 +36,24 @@ const Logo = () => {
 
 function FooterNav() {
   return (
-    <footer className="footer-nav flex-container px-[176px]">
+    <footer className="box-border flex flex-col items-center gap-6 bg-blue-dark py-8 lg:flex-row lg:px-[176px]">
       <Logo />
       <nav
-        className="footer-menu flex-container"
+        className="flex max-lg:order-3 max-lg:w-[220px]"
         aria-label="footer-navigation"
       >
         {menuItems.map((item, index) => {
           return (
             <Fragment key={index}>
-              <div className="footer-menu-vertical-line"></div>
-              <Link className="footer-links" to={item.link}>
+              <div className="visible m-auto block w-5 rotate-90 border border-white first:hidden lg:invisible lg:w-p5 lg:first:visible lg:first:block"></div>
+              <Link className="text-[16px] font-bold text-white" to={item.link}>
                 {item.name}
               </Link>
             </Fragment>
           );
         })}
       </nav>
-      <div className="footer-donate-button flex-container">
+      <div className="mx-0 flex lg:ml-auto">
         <Button
           color="primary-dark"
           href="https://www.hackforla.org/donate/"

From fd71d2407973b86e3dafaf5804b551d278f34502 Mon Sep 17 00:00:00 2001
From: Terence Lo <terencelomoa@gmail.com>
Date: Mon, 10 Mar 2025 16:45:04 -0700
Subject: [PATCH 6/7] replace old FooterNavs

---
 frontend/src/layouts/DefaultNavLayout.tsx        | 3 +--
 frontend/src/pages/NotFoundPage/NotFoundPage.tsx | 3 +--
 frontend/src/tw-components/FooterNav.tsx         | 2 +-
 frontend/src/tw-components/index.tsx             | 3 ++-
 4 files changed, 5 insertions(+), 6 deletions(-)

diff --git a/frontend/src/layouts/DefaultNavLayout.tsx b/frontend/src/layouts/DefaultNavLayout.tsx
index 8043de97..6a76f545 100644
--- a/frontend/src/layouts/DefaultNavLayout.tsx
+++ b/frontend/src/layouts/DefaultNavLayout.tsx
@@ -1,7 +1,6 @@
 import React from "react";
 import { Outlet } from "react-router-dom";
-import { FooterNav } from "components/components";
-import { HeaderNav } from "tw-components";
+import { HeaderNav, FooterNav } from "tw-components";
 
 const DefaultNavLayout = () => {
   return (
diff --git a/frontend/src/pages/NotFoundPage/NotFoundPage.tsx b/frontend/src/pages/NotFoundPage/NotFoundPage.tsx
index c86de5ef..2119d50b 100644
--- a/frontend/src/pages/NotFoundPage/NotFoundPage.tsx
+++ b/frontend/src/pages/NotFoundPage/NotFoundPage.tsx
@@ -4,8 +4,7 @@ import React from "react";
 import { useNavigate } from "react-router-dom";
 
 // Internal Imports
-import { HeaderNav } from "tw-components";
-import { FooterNav } from "components/components";
+import { HeaderNav, FooterNav } from "tw-components";
 import { Button } from "components/components";
 import { notFoundPageImg } from "assets/images/images";
 
diff --git a/frontend/src/tw-components/FooterNav.tsx b/frontend/src/tw-components/FooterNav.tsx
index ecf9e5a1..3199f062 100644
--- a/frontend/src/tw-components/FooterNav.tsx
+++ b/frontend/src/tw-components/FooterNav.tsx
@@ -66,4 +66,4 @@ function FooterNav() {
   );
 }
 
-export { FooterNav };
+export default FooterNav;
diff --git a/frontend/src/tw-components/index.tsx b/frontend/src/tw-components/index.tsx
index 0da7033b..3e11e226 100644
--- a/frontend/src/tw-components/index.tsx
+++ b/frontend/src/tw-components/index.tsx
@@ -1,4 +1,5 @@
 export { default as AuthNav } from "./AuthNav";
-export { default as HeaderNav } from "./HeaderNav";
 export { default as CookieBanner } from "./CookieBanner";
+export { default as FooterNav } from "./FooterNav";
+export { default as HeaderNav } from "./HeaderNav";
 export { default as TextField } from "./TextField";

From 4e038f83cdc649167ed983ca7b3f527a46cd0e84 Mon Sep 17 00:00:00 2001
From: Terence Lo <terencelomoa@gmail.com>
Date: Mon, 10 Mar 2025 16:48:05 -0700
Subject: [PATCH 7/7] delete old FooterNav

---
 .../src/components/Navigation/FooterNav.tsx   | 69 --------------
 .../src/components/Navigation/_FooterNav.scss | 94 -------------------
 .../src/components/Navigation/_index.scss     |  1 -
 frontend/src/components/components.tsx        |  2 -
 4 files changed, 166 deletions(-)
 delete mode 100644 frontend/src/components/Navigation/FooterNav.tsx
 delete mode 100644 frontend/src/components/Navigation/_FooterNav.scss

diff --git a/frontend/src/components/Navigation/FooterNav.tsx b/frontend/src/components/Navigation/FooterNav.tsx
deleted file mode 100644
index f9694a23..00000000
--- a/frontend/src/components/Navigation/FooterNav.tsx
+++ /dev/null
@@ -1,69 +0,0 @@
-// External imports
-import React, { Fragment } from "react";
-import { Link } from "react-router-dom";
-
-// Internal imports
-import { Button } from "../Buttons/Button";
-import { logoHorizontalOnDark, logoStackedOnDark } from "assets/images/images";
-
-interface menuObject {
-  name?: string;
-  link: string;
-}
-
-const menuItems: menuObject[] = [
-  { name: "Credits", link: "credits" },
-  { name: "Sitemap", link: "#" },
-  { name: "Join Us", link: "qualifier/1" },
-];
-
-function FooterNav() {
-  const Logo = () => {
-    return (
-      <a className="footer-icons-on-dark" href="/" rel="noopener noreferrer">
-        <img
-          className="logo-desktop-footer"
-          src={logoHorizontalOnDark}
-          alt="Civic Tech Jobs - Home"
-        />
-        <img
-          className="logo-mobile-footer"
-          src={logoStackedOnDark}
-          alt="Civic Tech Jobs - Home"
-        />
-      </a>
-    );
-  };
-
-  return (
-    <footer className="footer-nav flex-container">
-      <Logo />
-      <nav
-        className="footer-menu flex-container"
-        aria-label="footer-navigation"
-      >
-        {menuItems.map((item, index) => {
-          return (
-            <Fragment key={index}>
-              <div className="footer-menu-vertical-line"></div>
-              <Link className="footer-links" to={item.link}>
-                {item.name}
-              </Link>
-            </Fragment>
-          );
-        })}
-      </nav>
-      <div className="footer-donate-button flex-container">
-        <Button
-          color="primary-dark"
-          href="https://www.hackforla.org/donate/"
-          size="sm"
-        >
-          Donate
-        </Button>
-      </div>
-    </footer>
-  );
-}
-
-export { FooterNav };
diff --git a/frontend/src/components/Navigation/_FooterNav.scss b/frontend/src/components/Navigation/_FooterNav.scss
deleted file mode 100644
index 935f3262..00000000
--- a/frontend/src/components/Navigation/_FooterNav.scss
+++ /dev/null
@@ -1,94 +0,0 @@
-@use "../Basics" as *;
-
-.footer-nav {
-  background-color: $color-blue-darker;
-  height: 128px;
-  align-items: center;
-
-  @include breakpoint-media-max("lgtablet") {
-    height: 226px;
-    flex-direction: column;
-    justify-content: space-evenly;
-  }
-}
-
-.logo-desktop-footer {
-  @include breakpoint-media-max("mobile") {
-    @include hidden;
-  }
-}
-
-.logo-mobile-footer {
-  @include hidden;
-  @include breakpoint-media-max("mobile") {
-    display: block;
-  }
-}
-
-.footer-icons-on-dark {
-  display: block;
-  margin-left: 176px;
-
-  @include breakpoint-media-max("lgtablet") {
-    margin-left: 0;
-    margin-bottom: -17px;
-  }
-}
-
-.footer-menu {
-  @include breakpoint-media-max("lgtablet") {
-    width: 220px;
-    order: 3;
-  }
-}
-
-.footer-donate-button {
-  margin-left: auto;
-  margin-right: 188px;
-
-  @include breakpoint-media-max("lgtablet") {
-    margin-left: 0;
-    margin-right: 0;
-  }
-}
-
-.footer-menu-vertical-line {
-  border: 1px solid $color-white;
-  width: 40px;
-  transform: rotate(-90deg);
-  margin: auto;
-
-  &:first-child {
-    display: block;
-  }
-
-  &:not(:first-child) {
-    visibility: hidden;
-  }
-
-  @include breakpoint-media-max("lgtablet") {
-    width: 20px;
-
-    &:first-child {
-      @include hidden;
-    }
-
-    &:not(:first-child) {
-      visibility: visible;
-    }
-  }
-}
-
-.footer-links {
-  color: $color-white;
-  text-decoration: none;
-  @include title(6);
-
-  @include breakpoint-media-max("mobile") {
-    @include title(7);
-  }
-
-  &:hover {
-    text-decoration: underline;
-  }
-}
diff --git a/frontend/src/components/Navigation/_index.scss b/frontend/src/components/Navigation/_index.scss
index cb3d7a16..14058e4a 100644
--- a/frontend/src/components/Navigation/_index.scss
+++ b/frontend/src/components/Navigation/_index.scss
@@ -1,2 +1 @@
-@forward "FooterNav";
 @forward "ProgressBar";
diff --git a/frontend/src/components/components.tsx b/frontend/src/components/components.tsx
index d99c8b23..020180e0 100644
--- a/frontend/src/components/components.tsx
+++ b/frontend/src/components/components.tsx
@@ -7,7 +7,6 @@ import { Checkbox } from "./Inputs/Checkbox";
 import { Chip } from "./Inputs/Chip";
 import { Dropdown, DropdownOption } from "./Inputs/Dropdown";
 import { TextField } from "./Inputs/Textfield";
-import { FooterNav } from "./Navigation/FooterNav";
 import { ProgressBar } from "./Navigation/ProgressBar";
 import { Notification } from "./Notification/Notification";
 import { TransitionWrapper } from "./Transition/Wrapper";
@@ -30,7 +29,6 @@ export {
   DropdownOption,
   TextField,
   // Navigation
-  FooterNav,
   ProgressBar,
   // Notification
   Notification,