Skip to content

Commit d7a0a34

Browse files
LoTerenceLoTerence
authored
Feature: Design system, FooterNav (#653)
* clean up tailwind config * fix border radius * refactor Logo * init tw footerNav * convert sass to TW * replace old FooterNavs * delete old FooterNav
1 parent 87a7483 commit d7a0a34

File tree

9 files changed

+110
-195
lines changed

9 files changed

+110
-195
lines changed

‎frontend/src/components/Navigation/_FooterNav.scss‎

Lines changed: 0 additions & 94 deletions
This file was deleted.

‎frontend/src/components/Navigation/_index.scss‎

Lines changed: 0 additions & 1 deletion
Original file line numberDiff line numberDiff line change
@@ -1,2 +1 @@
1-
@forward "FooterNav";
21
@forward "ProgressBar";

‎frontend/src/components/components.tsx‎

Lines changed: 0 additions & 2 deletions
Original file line numberDiff line numberDiff line change
@@ -7,7 +7,6 @@ import { Checkbox } from "./Inputs/Checkbox";
77
import { Chip } from "./Inputs/Chip";
88
import { Dropdown, DropdownOption } from "./Inputs/Dropdown";
99
import { TextField } from "./Inputs/Textfield";
10-
import { FooterNav } from "./Navigation/FooterNav";
1110
import { ProgressBar } from "./Navigation/ProgressBar";
1211
import { Notification } from "./Notification/Notification";
1312
import { TransitionWrapper } from "./Transition/Wrapper";
@@ -30,7 +29,6 @@ export {
3029
DropdownOption,
3130
TextField,
3231
// Navigation
33-
FooterNav,
3432
ProgressBar,
3533
// Notification
3634
Notification,

‎frontend/src/layouts/DefaultNavLayout.tsx‎

Lines changed: 1 addition & 2 deletions
Original file line numberDiff line numberDiff line change
@@ -1,7 +1,6 @@
11
import React from "react";
22
import { Outlet } from "react-router-dom";
3-
import { FooterNav } from "components/components";
4-
import { HeaderNav } from "tw-components";
3+
import { HeaderNav, FooterNav } from "tw-components";
54

65
const DefaultNavLayout = () => {
76
return (

‎frontend/src/pages/NotFoundPage/NotFoundPage.tsx‎

Lines changed: 1 addition & 2 deletions
Original file line numberDiff line numberDiff line change
@@ -4,8 +4,7 @@ import React from "react";
44
import { useNavigate } from "react-router-dom";
55

66
// Internal Imports
7-
import { HeaderNav } from "tw-components";
8-
import { FooterNav } from "components/components";
7+
import { HeaderNav, FooterNav } from "tw-components";
98
import { Button } from "components/components";
109
import { notFoundPageImg } from "assets/images/images";
1110

‎frontend/src/components/Navigation/FooterNav.tsx‎ renamed to ‎frontend/src/tw-components/FooterNav.tsx‎

Lines changed: 69 additions & 69 deletions
Original file line numberDiff line numberDiff line change
@@ -1,69 +1,69 @@
1-
// External imports
2-
import React, { Fragment } from "react";
3-
import { Link } from "react-router-dom";
4-
5-
// Internal imports
6-
import { Button } from "../Buttons/Button";
7-
import { logoHorizontalOnDark, logoStackedOnDark } from "assets/images/images";
8-
9-
interface menuObject {
10-
name?: string;
11-
link: string;
12-
}
13-
14-
const menuItems: menuObject[] = [
15-
{ name: "Credits", link: "credits" },
16-
{ name: "Sitemap", link: "#" },
17-
{ name: "Join Us", link: "qualifier/1" },
18-
];
19-
20-
function FooterNav() {
21-
const Logo = () => {
22-
return (
23-
<a className="footer-icons-on-dark" href="/" rel="noopener noreferrer">
24-
<img
25-
className="logo-desktop-footer"
26-
src={logoHorizontalOnDark}
27-
alt="Civic Tech Jobs - Home"
28-
/>
29-
<img
30-
className="logo-mobile-footer"
31-
src={logoStackedOnDark}
32-
alt="Civic Tech Jobs - Home"
33-
/>
34-
</a>
35-
);
36-
};
37-
38-
return (
39-
<footer className="footer-nav flex-container">
40-
<Logo />
41-
<nav
42-
className="footer-menu flex-container"
43-
aria-label="footer-navigation"
44-
>
45-
{menuItems.map((item, index) => {
46-
return (
47-
<Fragment key={index}>
48-
<div className="footer-menu-vertical-line"></div>
49-
<Link className="footer-links" to={item.link}>
50-
{item.name}
51-
</Link>
52-
</Fragment>
53-
);
54-
})}
55-
</nav>
56-
<div className="footer-donate-button flex-container">
57-
<Button
58-
color="primary-dark"
59-
href="https://www.hackforla.org/donate/"
60-
size="sm"
61-
>
62-
Donate
63-
</Button>
64-
</div>
65-
</footer>
66-
);
67-
}
68-
69-
export { FooterNav };
1+
// External imports
2+
import React, { Fragment } from "react";
3+
import { Link } from "react-router-dom";
4+
5+
// Internal imports
6+
import { Button } from "components/components";
7+
import { logoHorizontalOnDark, logoStackedOnDark } from "assets/images/images";
8+
9+
interface menuObject {
10+
name?: string;
11+
link: string;
12+
}
13+
14+
const menuItems: menuObject[] = [
15+
{ name: "Credits", link: "credits" },
16+
{ name: "Sitemap", link: "#" },
17+
{ name: "Join Us", link: "qualifier/1" },
18+
];
19+
20+
const Logo = () => {
21+
return (
22+
<Link className="block" to="/">
23+
<img
24+
className="hidden sm:block"
25+
src={logoHorizontalOnDark}
26+
alt="Civic Tech Jobs - Home"
27+
/>
28+
<img
29+
className="sm:hidden"
30+
src={logoStackedOnDark}
31+
alt="Civic Tech Jobs - Home"
32+
/>
33+
</Link>
34+
);
35+
};
36+
37+
function FooterNav() {
38+
return (
39+
<footer className="box-border flex flex-col items-center gap-6 bg-blue-dark py-8 lg:flex-row lg:px-[176px]">
40+
<Logo />
41+
<nav
42+
className="flex max-lg:order-3 max-lg:w-[220px]"
43+
aria-label="footer-navigation"
44+
>
45+
{menuItems.map((item, index) => {
46+
return (
47+
<Fragment key={index}>
48+
<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>
49+
<Link className="text-[16px] font-bold text-white" to={item.link}>
50+
{item.name}
51+
</Link>
52+
</Fragment>
53+
);
54+
})}
55+
</nav>
56+
<div className="mx-0 flex lg:ml-auto">
57+
<Button
58+
color="primary-dark"
59+
href="https://www.hackforla.org/donate/"
60+
size="sm"
61+
>
62+
Donate
63+
</Button>
64+
</div>
65+
</footer>
66+
);
67+
}
68+
69+
export default FooterNav;

‎frontend/src/tw-components/HeaderNav.tsx‎

Lines changed: 12 additions & 12 deletions
Original file line numberDiff line numberDiff line change
@@ -21,19 +21,19 @@ const menuItems: menuObject[] = [
2121
{ name: "Projects", link: "https://www.hackforla.org/projects/" },
2222
];
2323

24-
function HeaderNav() {
25-
const Logo = () => {
26-
return (
27-
<a href="/" rel="noopener noreferrer">
28-
<img
29-
className="max-h-[24px] md:max-h-[32px]"
30-
src={logoHorizontal}
31-
alt="Civic Tech Jobs - Home"
32-
/>
33-
</a>
34-
);
35-
};
24+
const Logo = () => {
25+
return (
26+
<a href="/" rel="noopener noreferrer">
27+
<img
28+
className="max-h-p3 md:max-h-p4"
29+
src={logoHorizontal}
30+
alt="Civic Tech Jobs - Home"
31+
/>
32+
</a>
33+
);
34+
};
3635

36+
function HeaderNav() {
3737
return (
3838
<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">
3939
<div>

‎frontend/src/tw-components/index.tsx‎

Lines changed: 2 additions & 1 deletion
Original file line numberDiff line numberDiff line change
@@ -1,4 +1,5 @@
11
export { default as AuthNav } from "./AuthNav";
2-
export { default as HeaderNav } from "./HeaderNav";
32
export { default as CookieBanner } from "./CookieBanner";
3+
export { default as FooterNav } from "./FooterNav";
4+
export { default as HeaderNav } from "./HeaderNav";
45
export { default as TextField } from "./TextField";

‎frontend/tailwind.config.js‎

Lines changed: 25 additions & 12 deletions
Original file line numberDiff line numberDiff line change
@@ -1,6 +1,11 @@
11
/** @type {import('tailwindcss').Config} */
2+
3+
/*
4+
* Please refer to CTJ Figma Design System for more details about custom theme values
5+
**/
6+
27
module.exports = {
3-
darkMode: "class", // Enables dark mode with a class
8+
darkMode: "class",
49
content: [
510
"./src/pages/Demo/DemoTailwind.tsx",
611
"./src/pages/Authentication/*.tsx",
@@ -12,15 +17,10 @@ module.exports = {
1217
theme: {
1318
screens: {
1419
xs: "480px",
15-
// => @media (min-width: 480px) { ... }
1620
sm: "577px",
17-
// => @media (min-width: 577px) { ... }
1821
md: "769px",
19-
// => @media (min-width: 769px) { ... }
2022
lg: "1025px",
21-
// => @media (min-width: 1025px) { ... }
2223
xl: "1201px",
23-
// => @media (min-width: 1201px) { ... }
2424
},
2525
colors: {
2626
// Primary Colors
@@ -37,13 +37,13 @@ module.exports = {
3737
"tan-light": "#ffefdb",
3838
"tan-bg": "#fbe8ce",
3939
green: "#13831e",
40-
red: "#CC0023",
40+
red: "#c93329",
4141
// Neutral Colors
42-
white: "#fff",
42+
white: "#ffffff",
4343
"grey-light": "#f2f2f2",
4444
grey: "#c1c1c1",
4545
"grey-dark": "#585858",
46-
charcoal: "#333",
46+
charcoal: "#333333",
4747
},
4848
fontFamily: {
4949
sans: ["Roboto", "Tahoma", "Verdana", "sans-serif"],
@@ -57,18 +57,31 @@ module.exports = {
5757
black: "900",
5858
},
5959
extend: {
60-
lineHeight: {
61-
"extra-tight": "1.125rem",
62-
},
6360
borderRadius: {
6461
DEFAULT: "20px",
6562
large: "60px",
6663
"x-large": "100px",
6764
},
65+
lineHeight: {
66+
"extra-tight": "1.125rem",
67+
},
6868
rotate: {
6969
290: "290deg",
7070
345: "345deg",
7171
},
72+
spacing: {
73+
p0: "0px",
74+
p1: "8px",
75+
p2: "16px",
76+
p3: "24px",
77+
p4: "32px",
78+
p5: "40px",
79+
p6: "48px",
80+
p7: "56px",
81+
p8: "64px",
82+
p9: "72px",
83+
p10: "80px",
84+
},
7285
},
7386
},
7487
plugins: [],

0 commit comments

Comments
 (0)