Skip to content
This repository was archived by the owner on Dec 26, 2023. It is now read-only.

Commit dbb24a4

Browse files
joneskj55naz3eh
joneskj55
and
naz3eh
authored
Add Footer component (#211)
* initial footer layout * minor tweaks (spacing & responsiveness need work) * mobile enhancements * add urls * responsiveness updates * Fix padding and margins for mobile devices * Add text decoration to links * Fix spacing between the `Stack` * Remove duplicate marquee and add toggle theme in header Co-authored-by: Nazeeh Vahora <[email protected]>
1 parent a468809 commit dbb24a4

File tree

3 files changed

+189
-24
lines changed

3 files changed

+189
-24
lines changed

‎frontend/src/Components/Footer/index.tsx

Lines changed: 154 additions & 2 deletions
Original file line numberDiff line numberDiff line change
@@ -1,7 +1,159 @@
1-
import { Box } from '@chakra-ui/react';
1+
import { ReactNode } from 'react';
2+
import {
3+
Box,
4+
Link,
5+
SimpleGrid,
6+
Stack,
7+
Text,
8+
Flex,
9+
Image,
10+
useColorMode,
11+
ButtonGroup,
12+
} from '@chakra-ui/react';
13+
import { FaTwitter, FaDiscord, FaGithub } from 'react-icons/fa';
14+
15+
const ListHeader = ({ children }: { children: ReactNode }) => {
16+
return (
17+
<Text fontWeight={'500'} fontSize={'md'} mb={6}>
18+
{children}
19+
</Text>
20+
);
21+
};
222

323
const Footer = () => {
4-
return <Box>Footer</Box>;
24+
const { colorMode } = useColorMode();
25+
return (
26+
<Box pt={{ base: 8, lg: 16 }}>
27+
<SimpleGrid
28+
templateColumns={{
29+
sm: '4fr 2fr',
30+
md: '1.5fr 1.5fr 1fr 1fr',
31+
}}
32+
spacing={{ base: 10, md: 16 }}
33+
>
34+
<Stack>
35+
<Flex alignItems="center">
36+
<Image
37+
width="4rem"
38+
h="4rem"
39+
src={`/D_D_logo-${colorMode === 'dark' ? 'dark' : 'light'}.svg`}
40+
alt="logo"
41+
/>
42+
<Text
43+
ml={'1.25rem'}
44+
mr={{ base: '0', md: '3rem' }}
45+
fontWeight="bold"
46+
variant="medium"
47+
color={colorMode === 'dark' ? '#FFFFFF' : '#000000'}
48+
>
49+
Developer DAO
50+
</Text>
51+
</Flex>
52+
</Stack>
53+
54+
<Stack align={'flex-start'}>
55+
<ListHeader>Useful Links</ListHeader>
56+
<Link
57+
textDecoration="underline"
58+
_hover={{ textDecoration: 'none' }}
59+
href={
60+
'https://developerdao.notion.site/developerdao/Developer-DAO-Wiki-eff4dcb00bef46fbaa93e9e4cf940e2e'
61+
}
62+
isExternal
63+
>
64+
Wiki
65+
</Link>
66+
<Link
67+
textDecoration="underline"
68+
_hover={{ textDecoration: 'none' }}
69+
href={'https://forum.developerdao.com/'}
70+
isExternal
71+
>
72+
Forum
73+
</Link>
74+
<Link
75+
textDecoration="underline"
76+
_hover={{ textDecoration: 'none' }}
77+
href={
78+
'https://developerdao.notion.site/How-to-use-Snapshot-32692309faf446ddb2a898f22050fb5f#05f55b4052c044169402a443b36945ff'
79+
}
80+
isExternal
81+
>
82+
Snapshot
83+
</Link>
84+
<Link
85+
textDecoration="underline"
86+
_hover={{ textDecoration: 'none' }}
87+
href={'#'}
88+
isExternal
89+
>
90+
Podcast
91+
</Link>
92+
<Link
93+
textDecoration="underline"
94+
_hover={{ textDecoration: 'none' }}
95+
href={
96+
'https://developerdao.notion.site/Newsletter-d9c971f2bea446338624042ea20547f9'
97+
}
98+
isExternal
99+
>
100+
Newsletter
101+
</Link>
102+
</Stack>
103+
<Stack align={'flex-start'}>
104+
<ListHeader>Discover</ListHeader>
105+
<Link
106+
textDecoration="underline"
107+
_hover={{ textDecoration: 'none' }}
108+
href={'https://devdao.mirror.xyz/'}
109+
isExternal
110+
>
111+
Blog
112+
</Link>
113+
<Link
114+
textDecoration="underline"
115+
_hover={{ textDecoration: 'none' }}
116+
href={'https://airtable.com/shrzgqiMiHE18Iy9O/tbljejdzelezqT0W7'}
117+
isExternal
118+
>
119+
Learning Resources
120+
</Link>
121+
<Link
122+
textDecoration="underline"
123+
_hover={{ textDecoration: 'none' }}
124+
href={
125+
'https://developerdao.notion.site/Projects-c2240a6c0b0c41bea285f1ef9629f6db'
126+
}
127+
isExternal
128+
>
129+
Projects
130+
</Link>
131+
<Link
132+
textDecoration="underline"
133+
_hover={{ textDecoration: 'none' }}
134+
href={'#'}
135+
isExternal
136+
>
137+
Partners
138+
</Link>
139+
</Stack>
140+
<Stack align={'flex-start'}>
141+
<ListHeader>Social</ListHeader>
142+
<ButtonGroup>
143+
<a href="https://twitter.com/developer_dao">
144+
<FaTwitter aria-label="Twitter" />
145+
</a>
146+
<a href="https://t.co/k407RuG8eV">
147+
<FaDiscord aria-label="Discord" />
148+
</a>
149+
<a href="https://github.com/Developer-DAO">
150+
<FaGithub aria-label="Github" />
151+
</a>
152+
</ButtonGroup>
153+
</Stack>
154+
</SimpleGrid>
155+
</Box>
156+
);
5157
};
6158

7159
export default Footer;

‎frontend/src/Components/Header/index.tsx

Lines changed: 33 additions & 20 deletions
Original file line numberDiff line numberDiff line change
@@ -65,27 +65,33 @@ const NavBar = () => {
6565
);
6666
};
6767

68-
const CloseIcon = () => (
69-
<svg width="24" viewBox="0 0 20 20" xmlns="http://www.w3.org/2000/svg">
70-
<title>Close</title>
71-
<path
72-
fill="white"
73-
d="M9.00023 7.58599L13.9502 2.63599L15.3642 4.04999L10.4142 8.99999L15.3642 13.95L13.9502 15.364L9.00023 10.414L4.05023 15.364L2.63623 13.95L7.58623 8.99999L2.63623 4.04999L4.05023 2.63599L9.00023 7.58599Z"
74-
/>
75-
</svg>
76-
);
68+
const CloseIcon = () => {
69+
const { colorMode } = useColorMode();
70+
return (
71+
<svg width="24" viewBox="0 0 20 20" xmlns="http://www.w3.org/2000/svg">
72+
<title>Close</title>
73+
<path
74+
fill={colorMode === 'dark' ? 'white' : 'black'}
75+
d="M9.00023 7.58599L13.9502 2.63599L15.3642 4.04999L10.4142 8.99999L15.3642 13.95L13.9502 15.364L9.00023 10.414L4.05023 15.364L2.63623 13.95L7.58623 8.99999L2.63623 4.04999L4.05023 2.63599L9.00023 7.58599Z"
76+
/>
77+
</svg>
78+
);
79+
};
7780

78-
const MenuIcon = () => (
79-
<svg
80-
width="24px"
81-
viewBox="0 0 20 20"
82-
xmlns="http://www.w3.org/2000/svg"
83-
fill="white"
84-
>
85-
<title>Menu</title>
86-
<path d="M0 3h20v2H0V3zm0 6h20v2H0V9zm0 6h20v2H0v-2z" />
87-
</svg>
88-
);
81+
const MenuIcon = () => {
82+
const { colorMode } = useColorMode();
83+
return (
84+
<svg
85+
width="24px"
86+
viewBox="0 0 20 20"
87+
xmlns="http://www.w3.org/2000/svg"
88+
fill={colorMode === 'dark' ? 'white' : 'black'}
89+
>
90+
<title>Menu</title>
91+
<path d="M0 3h20v2H0V3zm0 6h20v2H0V9zm0 6h20v2H0v-2z" />
92+
</svg>
93+
);
94+
};
8995

9096
const MenuToggle = ({
9197
toggle,
@@ -124,6 +130,7 @@ const MenuItem = ({
124130
};
125131

126132
const MenuLinks = ({ isOpen }: { isOpen: boolean }) => {
133+
const { toggleColorMode } = useColorMode();
127134
return (
128135
<Box display={{ base: isOpen ? 'flex' : 'none', md: 'block' }}>
129136
<Stack
@@ -137,6 +144,12 @@ const MenuLinks = ({ isOpen }: { isOpen: boolean }) => {
137144
<MenuItem to="/DAO Wiki">DAO Wiki </MenuItem>
138145
<MenuItem to="/pricing">Job Board </MenuItem>
139146
<MenuItem to="/pricing">Projects </MenuItem>
147+
<Switch
148+
size="md"
149+
display={{ base: 'block', md: 'none' }}
150+
onChange={toggleColorMode}
151+
colorScheme="blackAlpha"
152+
/>
140153
</Stack>
141154
</Box>
142155
);

‎frontend/src/layout/Page/index.tsx

Lines changed: 2 additions & 2 deletions
Original file line numberDiff line numberDiff line change
@@ -17,7 +17,7 @@ function Page({ children }: { children?: object }) {
1717
position: 'fixed',
1818
}}
1919
gradient={false}
20-
loop={1}
20+
loop={0}
2121
speed={60}
2222
>
2323
<Flex>
@@ -52,7 +52,7 @@ function Page({ children }: { children?: object }) {
5252
position: 'fixed',
5353
}}
5454
gradient={false}
55-
loop={1}
55+
loop={0}
5656
speed={60}
5757
>
5858
<Flex>

0 commit comments

Comments
 (0)