Skip to content

Commit 30c10b2

Browse files
pettinarippettinarip
authored
Merge pull request #8739 from Marcelixoo/refactor/migrate-bug-bounty-cards-to-chakra-ui
Migrate BugBountyCards component to chakra UI [Relates to #6374]
2 parents dbfc5d8 + 53b8efe commit 30c10b2

File tree

2 files changed

+171
-120
lines changed

2 files changed

+171
-120
lines changed

‎src/@chakra-ui/gatsby-plugin/foundations/shadows.ts

Lines changed: 1 addition & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -10,6 +10,7 @@ const shadows = {
1010
"0 14px 66px rgba(0,0,0,.07), 0 10px 17px rgba(0,0,0,.03), 0 4px 7px rgba(0,0,0,.05)",
1111
dark: "0 14px 66px hsla(0,0%,96.1%,.07), 0 10px 17px hsla(0,0%,96.1%,.03), 0 4px 7px hsla(0,0%,96.1%,.05)",
1212
},
13+
tableBoxHover: "0px 8px 17px rgba(0, 0, 0, 0.15)",
1314
tableItemBox: {
1415
light: "0 1px 1px rgba(0, 0, 0, 0.1)",
1516
dark: "0 1px 1px hsla(0,0%,100%,.1)",

‎src/components/BugBountyCards.tsx

Lines changed: 170 additions & 120 deletions
Original file line numberDiff line numberDiff line change
@@ -1,113 +1,163 @@
11
import React from "react"
2-
import styled from "@emotion/styled"
2+
import {
3+
Center,
4+
CenterProps,
5+
Flex,
6+
FlexProps,
7+
Heading,
8+
HeadingProps,
9+
Text,
10+
TextProps,
11+
Divider,
12+
Box,
13+
BoxProps,
14+
useToken,
15+
} from "@chakra-ui/react"
16+
317
import { TranslationKey } from "../utils/translations"
418
import ButtonLink from "./ButtonLink"
519

620
import Translation from "./Translation"
721

8-
const CardRow = styled.div`
9-
display: flex;
10-
justify-content: space-between;
11-
margin: 4rem 1rem;
12-
flex-wrap: wrap;
13-
`
14-
15-
const StyledButton = styled(ButtonLink)`
16-
margin: 1rem;
17-
`
18-
19-
const Card = styled.div`
20-
flex: 1 1 260px;
21-
@media (max-width: 1228px) {
22-
flex: 1 1 360px;
23-
}
24-
display: flex;
25-
flex-direction: column;
26-
background: ${(props) => props.theme.colors.Background};
27-
border-radius: 2px;
28-
box-shadow: ${(props) => props.theme.colors.tableBoxShadow};
29-
border: 1px solid ${(props) => props.theme.colors.border};
30-
margin: 1rem;
31-
justify-content: space-between;
32-
&:hover {
33-
border-radius: 4px;
34-
box-shadow: 0px 8px 17px rgba(0, 0, 0, 0.15);
35-
background: ${(props) => props.theme.colors.tableBackgroundHover};
36-
transition: transform 0.1s;
37-
transform: scale(1.02);
38-
}
39-
`
40-
41-
const Label = styled.div`
42-
display: flex;
43-
justify-content: center;
44-
font-size: 0.875rem;
45-
text-transform: uppercase;
46-
border-top-left-radius: 1px;
47-
border-top-right-radius: 1px;
48-
border-bottom-right-radius: 0;
49-
border-bottom-left-radius: 0;
50-
border-bottom: 1px solid ${(props) => props.theme.colors.border};
51-
padding: 0.25rem 0rem;
52-
`
53-
54-
const LowLabel = styled(Label)`
55-
background: ${(props) => props.theme.colors.lowBug};
56-
color: ${(props) => props.theme.colors.black300};
57-
`
58-
59-
const MediumLabel = styled(Label)`
60-
background: ${(props) => props.theme.colors.mediumBug};
61-
color: ${(props) => props.theme.colors.black300};
62-
`
63-
64-
const HighLabel = styled(Label)`
65-
background: ${(props) => props.theme.colors.fail400};
66-
color: ${(props) => props.theme.colors.white};
67-
`
68-
69-
const CriticalLabel = styled(Label)`
70-
background: ${(props) => props.theme.colors.fail600};
71-
color: ${(props) => props.theme.colors.white};
72-
`
73-
74-
const H2 = styled.h2`
75-
font-size: 1.5rem;
76-
font-style: normal;
77-
font-weight: 700;
78-
line-height: 22px;
79-
letter-spacing: 0px;
80-
padding: 1rem;
81-
text-align: left;
82-
margin-bottom: -0.5rem;
83-
margin-top: 0.5rem;
84-
`
85-
86-
const Description = styled.p`
87-
font-size: 1.25rem;
88-
padding: 1rem;
89-
padding-top: 0rem;
90-
padding-bottom: 0rem;
91-
opacity: 0.6;
92-
`
93-
94-
const Divider = styled.div`
95-
border-bottom: 1px solid ${(props) => props.theme.colors.border};
96-
`
97-
98-
const SubHeader = styled.p`
99-
text-transform: uppercase;
100-
font-size: 0.875rem;
101-
margin-left: 1rem;
102-
margin-top: 1rem;
103-
margin-bottom: 0.5rem;
104-
opacity: 0.6;
105-
`
106-
107-
const Text = styled.div`
108-
margin: 1rem;
109-
margin-top: 0.5rem;
110-
`
22+
const CardRow = ({ children }) => (
23+
<Flex justifyContent="space-between" my={16} mx={4} flexWrap="wrap">
24+
{children}
25+
</Flex>
26+
)
27+
28+
const SubmitBugBountyButton = ({ children, ...props }) => (
29+
<ButtonLink m={4} to="https://forms.gle/Gnh4gzGh66Yc3V7G8" {...props}>
30+
{children}
31+
</ButtonLink>
32+
)
33+
34+
const Card = ({ children, ...props }: FlexProps) => {
35+
const tableBoxShadow = useToken("colors", "tableBoxShadow")
36+
37+
return (
38+
<Flex
39+
flexDir="column"
40+
flex={{ base: "1 1 412px", xl: "1 1 260px" }}
41+
justifyContent="space-between"
42+
bg="background"
43+
borderRadius="2px"
44+
boxShadow={tableBoxShadow}
45+
border="1px solid"
46+
borderColor="border"
47+
m={4}
48+
_hover={{
49+
borderRadius: "base",
50+
boxShadow: "tableBoxHover",
51+
background: "tableBackgroundHover",
52+
transition: "transform 0.1s",
53+
transform: "scale(1.02)",
54+
}}
55+
{...props}
56+
>
57+
{children}
58+
</Flex>
59+
)
60+
}
61+
62+
type LabelVariant = "low" | "medium" | "high" | "critical"
63+
64+
type LabelProps = CenterProps & {
65+
variant: LabelVariant
66+
}
67+
68+
const stylePropsByVariant = {
69+
low: {
70+
bg: "lowBug",
71+
color: "black300",
72+
},
73+
medium: {
74+
bg: "mediumBug",
75+
color: "black300",
76+
},
77+
high: {
78+
bg: "fail400",
79+
color: "white",
80+
},
81+
critical: {
82+
bg: "fail600",
83+
color: "white",
84+
},
85+
}
86+
87+
const Label = ({ children, variant = "medium", ...props }: LabelProps) => {
88+
const variantStyleProps = stylePropsByVariant[variant]
89+
90+
return (
91+
<Center
92+
borderTopRightRadius="1px"
93+
borderTopLeftRadius="1px"
94+
borderBottomRightRadius={0}
95+
borderBottomLeftRadius={0}
96+
borderBottom="1px solid"
97+
borderColor="border"
98+
fontSize="sm"
99+
px={0}
100+
py={1}
101+
textTransform="uppercase"
102+
{...variantStyleProps}
103+
{...props}
104+
>
105+
{children}
106+
</Center>
107+
)
108+
}
109+
110+
const H2 = ({ children, ...props }: HeadingProps) => {
111+
return (
112+
<Heading
113+
fontSize="2xl"
114+
fontStyle="normal"
115+
fontWeight="bold"
116+
lineHeight="22px"
117+
letterSpacing={0}
118+
p={4}
119+
textAlign="left"
120+
mb={-2}
121+
mt={2}
122+
{...props}
123+
>
124+
{children}
125+
</Heading>
126+
)
127+
}
128+
129+
const Description = ({ children, ...props }: TextProps) => {
130+
return (
131+
<Text as="p" fontSize="xl" px={4} py={0} opacity="0.6" {...props}>
132+
{children}
133+
</Text>
134+
)
135+
}
136+
137+
const SubHeader = ({ children, ...props }: TextProps) => {
138+
return (
139+
<Text
140+
as="p"
141+
textTransform="uppercase"
142+
fontSize="sm"
143+
ml={4}
144+
mt={4}
145+
mb={2}
146+
opacity="0.6"
147+
{...props}
148+
>
149+
{children}
150+
</Text>
151+
)
152+
}
153+
154+
const TextBox = ({ children, ...props }: BoxProps) => {
155+
return (
156+
<Box m={4} mt={2} {...props}>
157+
{children}
158+
</Box>
159+
)
160+
}
111161

112162
export interface BugBountyCardInfo {
113163
lowLabelTranslationId?: TranslationKey
@@ -188,24 +238,24 @@ const BugBountyCards: React.FC<IProps> = () => (
188238
{bugBountyCardsInfo.map((card, idx) => (
189239
<Card key={`bug-bounty-card-${idx}`}>
190240
{card.lowLabelTranslationId && (
191-
<LowLabel>
241+
<Label variant="low">
192242
<Translation id={card.lowLabelTranslationId} />
193-
</LowLabel>
243+
</Label>
194244
)}
195245
{card.mediumLabelTranslationId && (
196-
<MediumLabel>
246+
<Label variant="medium">
197247
<Translation id={card.mediumLabelTranslationId} />
198-
</MediumLabel>
248+
</Label>
199249
)}
200250
{card.highLabelTranslationId && (
201-
<HighLabel>
251+
<Label variant="high">
202252
<Translation id={card.highLabelTranslationId} />
203-
</HighLabel>
253+
</Label>
204254
)}
205255
{card.criticalLabelTranslationId && (
206-
<CriticalLabel>
256+
<Label variant="critical">
207257
<Translation id={card.criticalLabelTranslationId} />
208-
</CriticalLabel>
258+
</Label>
209259
)}
210260
<H2>
211261
<Translation id={card.h2TranslationId} />
@@ -216,29 +266,29 @@ const BugBountyCards: React.FC<IProps> = () => (
216266
<SubHeader>
217267
<Translation id={card.subDescriptionTranslationId} />
218268
</SubHeader>
219-
<Divider />
269+
<Divider opacity="1" />
220270
<SubHeader>
221271
<Translation id={card.subHeader1TranslationId} />
222272
</SubHeader>
223-
<Text>
273+
<TextBox>
224274
<ul>
225275
{card.severityList.map((listItemId) => (
226276
<li key={`${listItemId}`}>
227277
<Translation id={listItemId} />
228278
</li>
229279
))}
230280
</ul>
231-
</Text>
232-
<Divider />
281+
</TextBox>
282+
<Divider opacity="1" />
233283
<SubHeader>
234284
<Translation id={card.subHeader2TranslationId} />
235285
</SubHeader>
236-
<Text>
286+
<TextBox>
237287
<Translation id={card.textTranslationId} />
238-
</Text>
239-
<StyledButton to="https://forms.gle/Gnh4gzGh66Yc3V7G8">
288+
</TextBox>
289+
<SubmitBugBountyButton>
240290
<Translation id={card.styledButtonTranslationId} />
241-
</StyledButton>
291+
</SubmitBugBountyButton>
242292
</Card>
243293
))}
244294
</CardRow>

0 commit comments

Comments
 (0)