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, 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/components/Navigation/FooterNav.tsx b/frontend/src/tw-components/FooterNav.tsx similarity index 50% rename from frontend/src/components/Navigation/FooterNav.tsx rename to frontend/src/tw-components/FooterNav.tsx index f9694a23..3199f062 100644 --- a/frontend/src/components/Navigation/FooterNav.tsx +++ b/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 ( - - Civic Tech Jobs - Home - Civic Tech Jobs - Home - - ); - }; - - return ( - - ); -} - -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 ( + + Civic Tech Jobs - Home + Civic Tech Jobs - Home + + ); +}; + +function FooterNav() { + return ( + + ); +} + +export default FooterNav; 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 ( - - Civic Tech Jobs - Home - - ); - }; +const Logo = () => { + return ( + + Civic Tech Jobs - Home + + ); +}; +function HeaderNav() { return (
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"; diff --git a/frontend/tailwind.config.js b/frontend/tailwind.config.js index 7541c68e..c4b7b5ad 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,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: [],