Skip to content

Commit 963cfbe

Browse files
pettinarippettinarip
authored
Merge pull request #8794 from amit-ksh/chakra/roadmap
Migrate `Roadmap.tsx` to Chakra
2 parents 74816b9 + 264023a commit 963cfbe

File tree

1 file changed

+88
-65
lines changed

1 file changed

+88
-65
lines changed

‎src/components/Roadmap.tsx

Lines changed: 88 additions & 65 deletions
Original file line numberDiff line numberDiff line change
@@ -1,27 +1,24 @@
11
import React, { useState, useEffect } from "react"
22
import { useIntl } from "react-intl"
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 { translateMessageId } from "../utils/translations"
119

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

2623
export interface Label {
2724
name: string
@@ -44,24 +41,50 @@ export interface IPropsIssueSection {
4441
}
4542

4643
const IssueSection: React.FC<IPropsIssueSection> = ({ issues }) => {
44+
const [cardBoxShadow] = useToken("colors", ["cardBoxShadow"])
45+
4746
if (!issues) {
4847
return null
4948
}
5049
return (
51-
<Section>
50+
<Flex flexWrap="wrap" my={8} width="full" gap={4}>
5251
{issues.map((issue, idx) => {
5352
const url = issue.html_url ? issue.html_url : "#"
5453
return (
55-
<Item to={url} key={idx} hideArrow={true}>
56-
<div>{issue.title}</div>
57-
{issue.errorMsg && <ErrorMsg>{issue.errorMsg}</ErrorMsg>}
58-
<div>
59-
{issue.html_url && <FakeLinkExternal>Discuss</FakeLinkExternal>}
60-
</div>
61-
</Item>
54+
<LinkBox
55+
key={idx}
56+
flex={{ base: "1 1 240px", sm: "0 1 240px" }}
57+
w="100%"
58+
p={4}
59+
color="text"
60+
borderRadius="2px"
61+
border="1px solid"
62+
borderColor="lightBorder"
63+
transition="all 0.5s cubic-bezier(0.25, 0.8, 0.25, 1)"
64+
cursor="pointer"
65+
_hover={{
66+
boxShadow: cardBoxShadow,
67+
border: "1px solid",
68+
borderColor: "black300",
69+
}}
70+
>
71+
<Box>{issue.title}</Box>
72+
{issue.errorMsg && (
73+
<Text color="fail" mb={0}>
74+
{issue.errorMsg}
75+
</Text>
76+
)}
77+
<Box>
78+
{issue.html_url && (
79+
<LinkOverlay as={Link} href={url}>
80+
Discuss
81+
</LinkOverlay>
82+
)}
83+
</Box>
84+
</LinkBox>
6285
)
6386
})}
64-
</Section>
87+
</Flex>
6588
)
6689
}
6790

@@ -158,94 +181,94 @@ const Roadmap: React.FC<IProps> = () => {
158181
}, [intl])
159182

160183
return (
161-
<div>
162-
<p>
184+
<Box>
185+
<Text>
163186
<Translation id="page-about-p-1" />
164-
</p>
165-
<p>
187+
</Text>
188+
<Text>
166189
<Link to="https://github.com/ethereum/ethereum-org-website/blob/master/LICENSE">
167190
<Translation id="page-about-link-1" />
168191
</Link>
169192
.
170-
</p>
171-
<p>
193+
</Text>
194+
<Text>
172195
<Translation id="page-about-p-2" />{" "}
173196
<Link to="https://github.com/ethereum/ethereum-org-website">
174197
<Translation id="page-about-link-2" />
175198
</Link>
176199
<Translation id="page-about-p-3" />
177-
</p>
178-
<ul>
179-
<li>
200+
</Text>
201+
<UnorderedList>
202+
<ListItem>
180203
<Translation id="page-about-li-1" />
181-
</li>
182-
<li>
204+
</ListItem>
205+
<ListItem>
183206
<Translation id="page-about-li-2" />
184-
</li>
185-
<li>
207+
</ListItem>
208+
<ListItem>
186209
<Translation id="page-about-li-3" />
187-
</li>
188-
</ul>
189-
<p>
210+
</ListItem>
211+
</UnorderedList>
212+
<Text>
190213
<Translation id="page-about-p-4" />
191-
</p>
192-
<h3>
214+
</Text>
215+
<Heading as="h3">
193216
<Translation id="page-about-h3" />
194-
</h3>
195-
<p>
217+
</Heading>
218+
<Text>
196219
<Translation id="page-about-p-5" />{" "}
197220
<Link to="https://github.com/ethereum/ethereum-org-website/labels/Status%3A%20In%20Progress">
198221
<Translation id="page-about-link-3" />{" "}
199222
</Link>
200223
.
201-
</p>
224+
</Text>
202225
<IssueSection issues={issues.inProgress} />
203-
<h3>
226+
<Heading as="h3">
204227
<Translation id="page-about-h3-2" />
205-
</h3>
206-
<p>
228+
</Heading>
229+
<Text>
207230
<Translation id="page-about-p-6" />{" "}
208231
<Link to="https://github.com/ethereum/ethereum-org-website/issues?q=is%3Aissue+is%3Aopen+label%3A%22Status%3A+Up+Next%22">
209232
<Translation id="page-about-link-3" />
210233
</Link>
211234
.
212-
</p>
235+
</Text>
213236
<IssueSection issues={issues.planned} />
214-
<h3>
237+
<Heading as="h3">
215238
<Translation id="page-about-h3-1" />
216-
</h3>
217-
<p>
239+
</Heading>
240+
<Text>
218241
<Translation id="page-about-p-7" />{" "}
219242
<Link to="https://github.com/ethereum/ethereum-org-website/issues?q=is%3Aissue+is%3Aclosed">
220243
<Translation id="page-about-link-6" />{" "}
221244
</Link>
222245
.
223-
</p>
246+
</Text>
224247
<IssueSection issues={issues.implemented} />
225-
<h2>
248+
<Heading as="h2">
226249
<Translation id="page-about-h2" />
227-
</h2>
228-
<p>
250+
</Heading>
251+
<Text>
229252
<Translation id="page-about-p-8" />
230-
</p>
231-
<ul>
232-
<li>
253+
</Text>
254+
<UnorderedList>
255+
<ListItem>
233256
<Link to="https://discord.gg/bTCfS8C">
234257
<Translation id="page-about-link-4" />
235258
</Link>
236-
</li>
237-
<li>
259+
</ListItem>
260+
<ListItem>
238261
<Link to="https://github.com/ethereum/ethereum-org-website/issues/new/choose">
239262
<Translation id="page-about-link-7" />
240263
</Link>
241-
</li>
242-
<li>
264+
</ListItem>
265+
<ListItem>
243266
<Link to="https://twitter.com/ethdotorg">
244267
<Translation id="page-about-link-5" />
245268
</Link>
246-
</li>
247-
</ul>
248-
</div>
269+
</ListItem>
270+
</UnorderedList>
271+
</Box>
249272
)
250273
}
251274

0 commit comments

Comments
 (0)