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

Commit 0e12880

Browse files
sam0110sam0110
authored
Add the Values section (#212)
* Fix component variant definitions They were not working because they needed to be wrapped in a `components` property * Add the values component
1 parent 07750dc commit 0e12880

File tree

4 files changed

+251
-54
lines changed

4 files changed

+251
-54
lines changed

‎frontend/public/locales/en/common.json

Lines changed: 6 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -33,6 +33,12 @@
3333
"body1": "Onboard, Educate & Support Web3 Developers",
3434
"body2": "Foster & Build Web3 Tools & Public Goods"
3535
},
36+
"callToAction": {
37+
"wiki": {
38+
"title": "DAO WIKI",
39+
"body": "Take a look at what's going on"
40+
}
41+
},
3642
"membership": {
3743
"title": "How do I join?",
3844
"body": "Membership is temporarily closed but will be open again soon. Follow us on Twitter for updates!"

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

Lines changed: 170 additions & 3 deletions
Original file line numberDiff line numberDiff line change
@@ -1,7 +1,174 @@
1-
import { Box } from '@chakra-ui/react';
1+
import {
2+
Flex,
3+
Box,
4+
Heading,
5+
Text,
6+
OrderedList,
7+
ListItem,
8+
LinkBox,
9+
LinkOverlay,
10+
Icon,
11+
useColorModeValue,
12+
useBreakpointValue,
13+
} from '@chakra-ui/react';
14+
import { useTranslation } from 'react-i18next';
15+
import { DEVELOPER_DAO_WIKI } from '../../utils/DeveloperDaoConstants';
16+
import { BsArrowUpRight } from 'react-icons/bs';
217

318
const Values = () => {
4-
return <Box>Values</Box>;
5-
};
19+
const isMobile = useBreakpointValue({ base: true, lg: false });
20+
const { t } = useTranslation();
21+
const valuesListStyle = {
22+
counterReset: 'values',
23+
marginLeft: '2.3rem',
24+
'li::marker': {
25+
content: 'counter(values) " "',
26+
},
27+
li: {
28+
counterIncrement: 'values',
29+
margin: '2rem 0',
30+
},
31+
};
32+
const goalsListStyle = {
33+
counterReset: 'goals',
34+
marginLeft: '2.3rem',
35+
'li::marker': {
36+
content: 'counter(goals) " - "',
37+
},
38+
li: {
39+
counterIncrement: 'goals',
40+
margin: '1rem 0',
41+
},
42+
};
43+
44+
const capitalized = (body: String) => {
45+
return body
46+
.toLowerCase()
47+
.split(' ')
48+
.map((word) => word[0].toUpperCase() + word.substring(1))
49+
.join(' ');
50+
};
51+
52+
const ValuesItem = (title: String, body: String) => {
53+
return (
54+
<Box flexDir="column">
55+
<Text
56+
variant={isMobile ? 'normal' : 'large'}
57+
fontWeight="bold"
58+
mb="1rem"
59+
>
60+
{title}
61+
</Text>
62+
<Text variant={isMobile ? 'normalMobile' : 'normal'}>
63+
{capitalized(body)}
64+
</Text>
65+
</Box>
66+
);
67+
};
668

69+
const transparency = ValuesItem(
70+
t('values.transparency.title'),
71+
t('values.transparency.body'),
72+
);
73+
const diversity = ValuesItem(
74+
t('values.diversity.title'),
75+
t('values.diversity.body'),
76+
);
77+
const responsibility = ValuesItem(
78+
t('values.responsibility.title'),
79+
t('values.responsibility.body'),
80+
);
81+
const kindness = ValuesItem(
82+
t('values.kindness.title'),
83+
t('values.kindness.body'),
84+
);
85+
86+
return (
87+
<Flex justify="center" wrap="wrap-reverse" w={isMobile ? '95vw' : 'auto'}>
88+
<Box className="box-border" flex="3" minW={isMobile ? '100%' : '20rem'}>
89+
<Heading variant={isMobile ? 'mediumMobile' : 'medium'}>
90+
{t('values.title')}
91+
</Heading>
92+
<OrderedList sx={valuesListStyle}>
93+
<ListItem>{transparency}</ListItem>
94+
<ListItem>{diversity}</ListItem>
95+
<ListItem>{responsibility}</ListItem>
96+
<ListItem>{kindness}</ListItem>
97+
</OrderedList>
98+
</Box>
99+
<Flex
100+
className="box-border"
101+
flex="2"
102+
justifyContent="space-between"
103+
alignItems="center"
104+
flexDir="column"
105+
minW={isMobile ? '100%' : '20rem'}
106+
>
107+
<Box>
108+
<Box mb="4.4rem">
109+
<Text
110+
variant="normal"
111+
fontSize={isMobile ? 'md' : 'lg'}
112+
fontWeight="bold"
113+
mb="0.9rem"
114+
>
115+
{t('mission.title')}
116+
</Text>
117+
<Text variant={isMobile ? 'normalMobile' : 'normal'}>
118+
{t('mission.body')}
119+
</Text>
120+
</Box>
121+
<Box mb="3.4rem">
122+
<Text variant="large" fontWeight="bold" mb="1rem">
123+
{t('goals.title')}
124+
</Text>
125+
<OrderedList sx={goalsListStyle}>
126+
<ListItem>
127+
<Text variant={isMobile ? 'normalMobile' : 'normal'}>
128+
{t('goals.body1')}
129+
</Text>
130+
</ListItem>
131+
<ListItem>
132+
<Text variant={isMobile ? 'normalMobile' : 'normal'}>
133+
{t('goals.body2')}
134+
</Text>
135+
</ListItem>
136+
</OrderedList>
137+
</Box>
138+
</Box>
139+
<LinkBox
140+
as="article"
141+
rounded="10"
142+
border="1px solid black"
143+
backgroundColor={useColorModeValue('black', 'white')}
144+
width="100%"
145+
maxWidth="30rem"
146+
height="18rem"
147+
padding="1rem"
148+
>
149+
<LinkOverlay href={DEVELOPER_DAO_WIKI} target="_blank">
150+
<Icon
151+
as={BsArrowUpRight}
152+
position="absolute"
153+
right="1rem"
154+
color={useColorModeValue('white', 'black')}
155+
/>
156+
<Box position="absolute" bottom="0.2rem" padding="1rem 0.5rem">
157+
<Text variant="large" color={useColorModeValue('white', 'black')}>
158+
{t('callToAction.wiki.title')}
159+
</Text>
160+
<Text
161+
variant="normal"
162+
fontSize="xs"
163+
color={useColorModeValue('white', 'black')}
164+
>
165+
{t('callToAction.wiki.body')}
166+
</Text>
167+
</Box>
168+
</LinkOverlay>
169+
</LinkBox>
170+
</Flex>
171+
</Flex>
172+
);
173+
};
7174
export default Values;

‎frontend/src/theme.ts

Lines changed: 73 additions & 51 deletions
Original file line numberDiff line numberDiff line change
@@ -23,65 +23,81 @@ export const theme = extendTheme({
2323
'5xl': '6rem',
2424
'6xl': '8rem',
2525
},
26-
Text: {
27-
variants: {
28-
normal: {
29-
fontFamily: 'Inter',
30-
fontSize: '1.25rem',
31-
fontWeight: '500',
32-
fontStyle: 'normal',
33-
lineHeight: '1.81rem',
34-
},
35-
large: {
36-
fontFamily: 'Inter',
37-
fontSize: '1.5rem',
38-
fontWeight: '700',
39-
fontStyle: 'normal',
40-
lineHeight: '2rem',
41-
},
42-
medium: {
43-
fontFamily: 'Inter',
44-
fontSize: '1rem',
45-
fontWeight: '500',
46-
fontStyle: 'normal',
47-
lineHeight: '1.21rem',
26+
components: {
27+
Text: {
28+
variants: {
29+
normal: {
30+
fontFamily: 'Inter',
31+
fontSize: '1.25rem',
32+
fontWeight: '500',
33+
fontStyle: 'normal',
34+
lineHeight: '1.81rem',
35+
},
36+
normalMobile: {
37+
fontFamily: 'Inter',
38+
fontSize: '1.125rem',
39+
fontWeight: '500',
40+
fontStyle: 'normal',
41+
lineHeight: '1.5rem',
42+
},
43+
large: {
44+
fontFamily: 'Inter',
45+
fontSize: '1.5rem',
46+
fontWeight: '700',
47+
fontStyle: 'normal',
48+
lineHeight: '2rem',
49+
},
50+
medium: {
51+
fontFamily: 'Inter',
52+
fontSize: '1rem',
53+
fontWeight: '500',
54+
fontStyle: 'normal',
55+
lineHeight: '1.21rem',
56+
},
4857
},
4958
},
50-
},
51-
Heading: {
52-
variants: {
53-
large: {
54-
fontFamily: 'Inter',
55-
fontSize: '5.375rem',
56-
fontWeight: '800',
57-
fontStyle: 'normal',
58-
lineHeight: '6.5rem',
59-
},
60-
medium: {
61-
fontFamily: 'Inter',
62-
fontSize: '3.5625rem',
63-
fontWeight: '800',
64-
fontStyle: 'normal',
65-
lineHeight: '4.311rem',
59+
Heading: {
60+
variants: {
61+
large: {
62+
fontFamily: 'Inter',
63+
fontSize: '5.375rem',
64+
fontWeight: '800',
65+
fontStyle: 'normal',
66+
lineHeight: '6.5rem',
67+
},
68+
medium: {
69+
fontFamily: 'Inter',
70+
fontSize: '3.5625rem',
71+
fontWeight: '800',
72+
fontStyle: 'normal',
73+
lineHeight: '4.311rem',
74+
},
75+
mediumMobile: {
76+
fontFamily: 'Inter',
77+
fontSize: '1.875rem',
78+
fontWeight: '800',
79+
fontStyle: 'normal',
80+
lineHeight: '2.25rem',
81+
},
82+
normal: {
83+
fontFamily: 'Inter',
84+
fontSize: '3.375rem',
85+
fontWeight: '800',
86+
fontStyle: 'normal',
87+
lineHeight: '3.96rem',
88+
},
6689
},
67-
normal: {
90+
},
91+
Link: {
92+
variants: {
6893
fontFamily: 'Inter',
69-
fontSize: '3.375rem',
70-
fontWeight: '800',
94+
fontWeight: '500',
95+
fontSize: '1.375rem',
7196
fontStyle: 'normal',
72-
lineHeight: '3.96rem',
97+
lineHeight: '1.66rem',
7398
},
7499
},
75100
},
76-
Link: {
77-
variants: {
78-
fontFamily: 'Inter',
79-
fontWeight: '500',
80-
fontSize: '1.375rem',
81-
fontStyle: 'normal',
82-
lineHeight: '1.66rem',
83-
},
84-
},
85101
styles: {
86102
global: (props: any) => ({
87103
body: {
@@ -91,6 +107,12 @@ export const theme = extendTheme({
91107
py: 10,
92108
px: { base: 2, sm: 4, md: 8 },
93109
},
110+
'.box-border': {
111+
border: `1px solid ${mode('black', 'white')(props)}`,
112+
borderRadius: 10,
113+
padding: '1.5rem',
114+
margin: '0.75rem',
115+
},
94116
}),
95117
},
96118
});

‎frontend/src/utils/DeveloperDaoConstants.ts

Lines changed: 2 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -6,6 +6,8 @@ export const DEVELOPER_DAO_CONTRACT_NETWORK_PROVIDER = process.env
66
.NEXT_PUBLIC_DEVELOPER_DAO_CONTRACT_NETWORK as string;
77
export const NETWORK_ID = process.env.NEXT_PUBLIC_NETWORK_ID;
88
export const DEVELOPER_DAO_WEBSITE = 'https://www.developerdao.com';
9+
export const DEVELOPER_DAO_WIKI =
10+
'https://developerdao.notion.site/developerdao/Developer-DAO-Wiki-eff4dcb00bef46fbaa93e9e4cf940e2e';
911
export const OPENSEA_DIRECT_LINK_PREFIX = process.env
1012
.NEXT_PUBLIC_OPENSEA_DIRECT_LINK_PREFIX as string;
1113
export const OPENSEA_COLLECTION_LINK = process.env

0 commit comments

Comments
 (0)