Skip to content

Commit 2c56d90

Browse files
pettinarippettinarip
authored
Merge pull request #8529 from TylerAPfledderer/refactor/leadboard-to-list
Refactor `Leaderboard` (Post Chakra Migration)
2 parents c1817ab + 4f01fe2 commit 2c56d90

File tree

2 files changed

+94
-62
lines changed

2 files changed

+94
-62
lines changed

‎src/components/Leaderboard.tsx

Lines changed: 93 additions & 62 deletions
Original file line numberDiff line numberDiff line change
@@ -3,13 +3,17 @@ import {
33
Box,
44
Avatar,
55
Flex,
6-
useColorMode,
76
LinkOverlay,
87
LinkBox,
8+
useColorModeValue,
9+
VisuallyHidden,
10+
List,
11+
ListItem,
912
} from "@chakra-ui/react"
13+
import { useTranslation } from "gatsby-plugin-react-i18next"
14+
1015
import Emoji from "./Emoji"
1116
import Link from "./Link"
12-
1317
import Translation from "./Translation"
1418

1519
const githubUrl = `https://github.com/`
@@ -26,14 +30,29 @@ export interface IProps {
2630
}
2731

2832
const Leaderboard: React.FC<IProps> = ({ content, limit = 100 }) => {
29-
const { colorMode } = useColorMode()
33+
const colorModeStyles = useColorModeValue(
34+
{
35+
listBoxShadow: "tableBox.light",
36+
linkBoxShadow: "tableItemBox.light",
37+
scoreColor: "blackAlpha.700",
38+
},
39+
{
40+
listBoxShadow: "tableBox.dark",
41+
linkBoxShadow: "tableItemBox.dark",
42+
scoreColor: "whiteAlpha.600",
43+
}
44+
)
45+
46+
const { t } = useTranslation()
3047

3148
return (
32-
<Box
49+
<List
3350
bgColor="background"
34-
boxShadow={colorMode === "dark" ? "tableBox.dark" : "tableBox.light"}
51+
boxShadow={colorModeStyles.listBoxShadow}
3552
w="100%"
3653
mb={8}
54+
ml={0}
55+
aria-label={t("page-upgrades-bug-bounty-leaderboard-list")}
3756
>
3857
{content
3958
.filter((_, idx) => idx < limit)
@@ -53,67 +72,79 @@ const Leaderboard: React.FC<IProps> = ({ content, limit = 100 }) => {
5372
} else if (idx === 2) {
5473
emoji = ":3rd_place_medal:"
5574
}
56-
return (
57-
<LinkBox
58-
key={idx}
59-
display="flex"
60-
justifyContent="space-between"
61-
alignItems="center"
62-
boxShadow={
63-
colorMode === "dark"
64-
? "tableItemBox.dark"
65-
: "tableItemBox.light"
66-
}
67-
mb={0.25}
68-
p={4}
69-
w="100%"
70-
_hover={{
71-
textDecor: "none",
72-
borderRadius: 0.5,
73-
boxShadow: "0 0 1px primary",
74-
background: "tableBackgroundHover",
75-
}}
76-
>
77-
<Box mr={4} opacity="0.4">
78-
{idx + 1}
79-
</Box>
80-
<Avatar
81-
src={avatarImg}
82-
name={avatarAlt}
83-
mr={4}
84-
h={10}
85-
w={10}
86-
display={{ base: "none", xs: "block" }}
87-
/>
88-
<Flex flex="1 1 75%" direction="column" mr={8}>
89-
<LinkOverlay
90-
as={Link}
91-
href={hasGitHub ? `${githubUrl}${username}` : "#"}
92-
textDecor="none"
93-
color="text"
94-
hideArrow
95-
>
96-
{name}{" "}
97-
</LinkOverlay>
9875

99-
<Box fontSize="sm" opacity="0.6">
100-
{score}{" "}
101-
<Translation id="page-upgrades-bug-bounty-leaderboard-points" />
102-
</Box>
103-
</Flex>
104-
{emoji && <Emoji mr={8} fontSize="2xl" text={emoji} />}
105-
<Box
106-
as="span"
107-
_after={{
108-
content: '"↗"',
109-
ml: 0.5,
110-
mr: 1.5,
76+
const PLACE_WORDS = [
77+
"first",
78+
"second",
79+
"third",
80+
"fourth",
81+
"fifth",
82+
] as const
83+
return (
84+
<ListItem mb={0}>
85+
<LinkBox
86+
key={idx}
87+
display="flex"
88+
justifyContent="space-between"
89+
alignItems="center"
90+
boxShadow={colorModeStyles.linkBoxShadow}
91+
mb={0.25}
92+
p={4}
93+
w="100%"
94+
_hover={{
95+
textDecor: "none",
96+
borderRadius: 0.5,
97+
boxShadow: "0 0 1px primary",
98+
background: "tableBackgroundHover",
11199
}}
112-
></Box>
113-
</LinkBox>
100+
>
101+
<Box mr={4} opacity="0.4">
102+
{idx + 1}
103+
</Box>
104+
<Avatar
105+
src={avatarImg}
106+
name={avatarAlt}
107+
mr={4}
108+
h={10}
109+
w={10}
110+
display={{ base: "none", xs: "block" }}
111+
/>
112+
<Flex flex="1 1 75%" direction="column" mr={8}>
113+
<LinkOverlay
114+
as={Link}
115+
href={hasGitHub ? `${githubUrl}${username}` : "#"}
116+
textDecor="none"
117+
color="text"
118+
hideArrow
119+
>
120+
<VisuallyHidden>{`In place number ${
121+
idx + 1
122+
} with ${score} points`}</VisuallyHidden>
123+
{name}{" "}
124+
{hasGitHub && (
125+
<VisuallyHidden>(See Github Profile)</VisuallyHidden>
126+
)}
127+
</LinkOverlay>
128+
129+
<Box fontSize="sm" color={colorModeStyles.scoreColor}>
130+
{score}{" "}
131+
<Translation id="page-upgrades-bug-bounty-leaderboard-points" />
132+
</Box>
133+
</Flex>
134+
{emoji && <Emoji mr={8} fontSize="2xl" text={emoji} />}
135+
<Box
136+
as="span"
137+
_after={{
138+
content: '"↗"',
139+
ml: 0.5,
140+
mr: 1.5,
141+
}}
142+
></Box>
143+
</LinkBox>
144+
</ListItem>
114145
)
115146
})}
116-
</Box>
147+
</List>
117148
)
118149
}
119150

‎src/intl/en/page-upgrades-get-involved-bug-bounty.json

Lines changed: 1 addition & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -27,6 +27,7 @@
2727
"page-upgrades-bug-bounty-hunting-li-3": "Employees and contractors of the Ethereum Foundation or client teams in scope of the bounty program may participate in the program only in the accrual of points and will not receive monetary rewards.",
2828
"page-upgrades-bug-bounty-hunting-li-4": "Ethereum bounty program considers a number of variables in determining rewards. Determinations of eligibility, score and all terms related to an award are at the sole and final discretion of the Ethereum Foundation bug bounty panel.",
2929
"page-upgrades-bug-bounty-leaderboard": "See full leaderboards",
30+
"page-upgrades-bug-bounty-leaderboard-list": "Bug bounty leaderboard",
3031
"page-upgrades-bug-bounty-leaderboard-points": "points",
3132
"page-upgrades-bug-bounty-ledger-desc": "The Ethereum Specifications detail the design rationale for the Execution Layer and Consensus Layer.",
3233
"page-upgrades-bug-bounty-ledger-title": "Specification bugs",

0 commit comments

Comments
 (0)