Feature: Design system, FooterNav

frontend/src/components/Navigation/_index.scss

@@ -1,2 +1 @@
-@forward "FooterNav";
 @forward "ProgressBar";

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,

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 (

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";
 

frontend/src/components/Navigation/FooterNav.tsx → frontend/src/tw-components/FooterNav.tsx

@@ -1,69 +1,69 @@
-// 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 };
+// 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="box-border flex flex-col items-center gap-6 bg-blue-dark py-8 lg:flex-row lg:px-[176px]">
+      <Logo />
+      <nav
+        className="flex max-lg:order-3 max-lg:w-[220px]"
+        aria-label="footer-navigation"
+      >
+        {menuItems.map((item, index) => {
+          return (
+            <Fragment key={index}>
+              <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="mx-0 flex lg:ml-auto">
+        <Button
+          color="primary-dark"
+          href="https://www.hackforla.org/donate/"
+          size="sm"
+        >
+          Donate
+        </Button>
+      </div>
+    </footer>
+  );
+}
+
+export default FooterNav;

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>

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";

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,10 @@ 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) { ... }
     },
     colors: {
       // Primary Colors
@@ -37,13 +37,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"],
@@ -57,18 +57,31 @@ module.exports = {
       black: "900",
     },
     extend: {
-      lineHeight: {
-        "extra-tight": "1.125rem",
-      },
       borderRadius: {
         DEFAULT: "20px",
         large: "60px",
         "x-large": "100px",
       },
+      lineHeight: {
+        "extra-tight": "1.125rem",
+      },
       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: [],