Skip to content

Commit 2a0e354

Browse files
amit-kshamit-ksh
committed
refactor: Roadmap to chakra
1 parent b24db7d commit 2a0e354

File tree

1 file changed

+93
-65
lines changed

1 file changed

+93
-65
lines changed

‎src/components/Roadmap.tsx

Lines changed: 93 additions & 65 deletions
Original file line numberDiff line numberDiff line change
@@ -1,25 +1,23 @@
11
import React, { useState, useEffect } from "react"
22
import { useI18next, useTranslation } from "gatsby-plugin-react-i18next"
3-
import styled from "@emotion/styled"
43
import axios from "axios"
54

65
import Translation from "./Translation"
76
import Link from "./Link"
8-
import { FakeLinkExternal, CardItem as Item } from "./SharedStyledComponents"
97

108
import { GATSBY_FUNCTIONS_PATH } from "../constants"
11-
12-
const Section = styled.div`
13-
display: flex;
14-
flex-wrap: wrap;
15-
margin-top: 2rem;
16-
margin-bottom: 2rem;
17-
width: 100%;
18-
`
19-
20-
const ErrorMsg = styled.div`
21-
color: ${(props) => props.theme.colors.fail};
22-
`
9+
import {
10+
Box,
11+
Flex,
12+
Heading,
13+
LinkBox,
14+
LinkOverlay,
15+
ListItem,
16+
Text,
17+
UnorderedList,
18+
useToken,
19+
VStack,
20+
} from "@chakra-ui/react"
2321

2422
export interface Label {
2523
name: string
@@ -42,24 +40,54 @@ export interface IPropsIssueSection {
4240
}
4341

4442
const IssueSection: React.FC<IPropsIssueSection> = ({ issues }) => {
43+
const [cardBoxShadow] = useToken("colors", ["cardBoxShadow"])
44+
4545
if (!issues) {
4646
return null
4747
}
4848
return (
49-
<Section>
49+
<Flex flexWrap="wrap" my={8} width="full" gap={4}>
5050
{issues.map((issue, idx) => {
5151
const url = issue.html_url ? issue.html_url : "#"
5252
return (
53-
<Item to={url} key={idx} hideArrow={true}>
54-
<div>{issue.title}</div>
55-
{issue.errorMsg && <ErrorMsg>{issue.errorMsg}</ErrorMsg>}
56-
<div>
57-
{issue.html_url && <FakeLinkExternal>Discuss</FakeLinkExternal>}
58-
</div>
59-
</Item>
53+
<LinkBox
54+
key={idx}
55+
flex={{ base: "1 1 240px", sm: "0 1 240px" }}
56+
w="100%"
57+
p={4}
58+
color="text"
59+
borderRadius="2px"
60+
border="1px solid"
61+
borderColor="lightBorder"
62+
transition="all 0.5s cubic-bezier(0.25, 0.8, 0.25, 1)"
63+
cursor="pointer"
64+
_hover={{
65+
boxShadow: cardBoxShadow,
66+
border: "1px solid",
67+
borderColor: "black300",
68+
}}
69+
>
70+
<Box>{issue.title}</Box>
71+
{issue.errorMsg && <Text color="fail">{issue.errorMsg}</Text>}
72+
<Box>
73+
{issue.html_url && (
74+
<LinkOverlay
75+
href={url}
76+
textDecoration="none"
77+
_after={{
78+
content: '"↗"',
79+
ml: 0.5,
80+
}}
81+
isExternal
82+
>
83+
Discuss
84+
</LinkOverlay>
85+
)}
86+
</Box>
87+
</LinkBox>
6088
)
6189
})}
62-
</Section>
90+
</Flex>
6391
)
6492
}
6593

@@ -157,94 +185,94 @@ const Roadmap: React.FC<IProps> = () => {
157185
}, [language])
158186

159187
return (
160-
<div>
161-
<p>
188+
<Box>
189+
<Text>
162190
<Translation id="page-about-p-1" />
163-
</p>
164-
<p>
191+
</Text>
192+
<Text>
165193
<Link to="https://github.com/ethereum/ethereum-org-website/blob/master/LICENSE">
166194
<Translation id="page-about-link-1" />
167195
</Link>
168196
.
169-
</p>
170-
<p>
197+
</Text>
198+
<Text>
171199
<Translation id="page-about-p-2" />{" "}
172200
<Link to="https://github.com/ethereum/ethereum-org-website">
173201
<Translation id="page-about-link-2" />
174202
</Link>
175203
<Translation id="page-about-p-3" />
176-
</p>
177-
<ul>
178-
<li>
204+
</Text>
205+
<UnorderedList>
206+
<ListItem>
179207
<Translation id="page-about-li-1" />
180-
</li>
181-
<li>
208+
</ListItem>
209+
<ListItem>
182210
<Translation id="page-about-li-2" />
183-
</li>
184-
<li>
211+
</ListItem>
212+
<ListItem>
185213
<Translation id="page-about-li-3" />
186-
</li>
187-
</ul>
188-
<p>
214+
</ListItem>
215+
</UnorderedList>
216+
<Text>
189217
<Translation id="page-about-p-4" />
190-
</p>
191-
<h3>
218+
</Text>
219+
<Heading as="h3">
192220
<Translation id="page-about-h3" />
193-
</h3>
194-
<p>
221+
</Heading>
222+
<Text>
195223
<Translation id="page-about-p-5" />{" "}
196224
<Link to="https://github.com/ethereum/ethereum-org-website/labels/Status%3A%20In%20Progress">
197225
<Translation id="page-about-link-3" />{" "}
198226
</Link>
199227
.
200-
</p>
228+
</Text>
201229
<IssueSection issues={issues.inProgress} />
202-
<h3>
230+
<Heading as="h3">
203231
<Translation id="page-about-h3-2" />
204-
</h3>
205-
<p>
232+
</Heading>
233+
<Text>
206234
<Translation id="page-about-p-6" />{" "}
207235
<Link to="https://github.com/ethereum/ethereum-org-website/issues?q=is%3Aissue+is%3Aopen+label%3A%22Status%3A+Up+Next%22">
208236
<Translation id="page-about-link-3" />
209237
</Link>
210238
.
211-
</p>
239+
</Text>
212240
<IssueSection issues={issues.planned} />
213-
<h3>
241+
<Heading as="h3">
214242
<Translation id="page-about-h3-1" />
215-
</h3>
216-
<p>
243+
</Heading>
244+
<Text>
217245
<Translation id="page-about-p-7" />{" "}
218246
<Link to="https://github.com/ethereum/ethereum-org-website/issues?q=is%3Aissue+is%3Aclosed">
219247
<Translation id="page-about-link-6" />{" "}
220248
</Link>
221249
.
222-
</p>
250+
</Text>
223251
<IssueSection issues={issues.implemented} />
224-
<h2>
252+
<Heading as="h2">
225253
<Translation id="page-about-h2" />
226-
</h2>
227-
<p>
254+
</Heading>
255+
<Text>
228256
<Translation id="page-about-p-8" />
229-
</p>
230-
<ul>
231-
<li>
257+
</Text>
258+
<UnorderedList>
259+
<ListItem>
232260
<Link to="https://discord.gg/bTCfS8C">
233261
<Translation id="page-about-link-4" />
234262
</Link>
235-
</li>
236-
<li>
263+
</ListItem>
264+
<ListItem>
237265
<Link to="https://github.com/ethereum/ethereum-org-website/issues/new/choose">
238266
<Translation id="page-about-link-7" />
239267
</Link>
240-
</li>
241-
<li>
268+
</ListItem>
269+
<ListItem>
242270
<Link to="https://twitter.com/ethdotorg">
243271
<Translation id="page-about-link-5" />
244272
</Link>
245-
</li>
246-
</ul>
247-
</div>
273+
</ListItem>
274+
</UnorderedList>
275+
</Box>
248276
)
249277
}
250278

0 commit comments

Comments
 (0)