Skip to content

Commit 55a6ea6

Browse files
SebastianSupremeSebastianSupreme
authored
Merge branch 'ethereum:dev' into dev
2 parents 7475a40 + 28fbbd6 commit 55a6ea6

File tree

4 files changed

+161
-141
lines changed

4 files changed

+161
-141
lines changed

‎.all-contributorsrc‎

Lines changed: 9 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -9399,6 +9399,15 @@
93999399
"contributions": [
94009400
"content"
94019401
]
9402+
},
9403+
{
9404+
"login": "victorpatru",
9405+
"name": "Victor Patru",
9406+
"avatar_url": "https://avatars.githubusercontent.com/u/102596893?v=4",
9407+
"profile": "http://victorpatru.xyz",
9408+
"contributions": [
9409+
"code"
9410+
]
94029411
}
94039412
],
94049413
"contributorsPerLine": 7,

‎README.md‎

Lines changed: 1 addition & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -1482,6 +1482,7 @@ Thanks goes to these wonderful people ([emoji key](https://allcontributors.org/d
14821482
</tr>
14831483
<tr>
14841484
<td align="center"><a href="https://github.com/crypto8893"><img src="https://avatars.githubusercontent.com/u/115051650?v=4?s=100" width="100px;" alt="crypto8893"/><br /><sub><b>crypto8893</b></sub></a><br /><a href="#content-crypto8893" title="Content">🖋</a></td>
1485+
<td align="center"><a href="http://victorpatru.xyz"><img src="https://avatars.githubusercontent.com/u/102596893?v=4?s=100" width="100px;" alt="Victor Patru"/><br /><sub><b>Victor Patru</b></sub></a><br /><a href="https://github.com/ethereum/ethereum-org-website/commits?author=victorpatru" title="Code">💻</a></td>
14851486
</tr>
14861487
</tbody>
14871488
</table>

‎src/components/CallToContribute.tsx‎

Lines changed: 95 additions & 77 deletions
Original file line numberDiff line numberDiff line change
@@ -1,6 +1,6 @@
1-
import { Flex, Heading, Icon, Text } from "@chakra-ui/react"
1+
import { Flex, Heading, Icon, Show, Text, useToken } from "@chakra-ui/react"
22
import { FaGithub } from "react-icons/fa"
3-
import React from "react"
3+
import React, { ReactNode } from "react"
44
import Link from "./Link"
55
import ButtonLink from "./ButtonLink"
66

@@ -10,85 +10,103 @@ export interface IProps {
1010
editPath: string
1111
}
1212

13-
const CallToContribute: React.FC<IProps> = ({ editPath }) => (
13+
export type ChildOnlyType = {
14+
children: ReactNode
15+
}
16+
17+
const ContentColumn = ({ children }: ChildOnlyType) => (
1418
<Flex
15-
bg="ednBackground"
16-
align="center"
17-
mt={8}
18-
border="1px"
19-
borderColor="primary"
20-
borderRadius="base"
21-
boxShadow="inset 0 -2px 0 0 var(--eth-colors-primary400)"
19+
direction="column"
20+
flexGrow={1}
21+
flexShrink={1}
22+
flexBasis="50%"
23+
p={4}
24+
color="text"
25+
textAlign={{ base: "center", lg: "left" }}
2226
>
27+
{children}
28+
</Flex>
29+
)
30+
31+
const DescriptionParagraph = ({ children }: ChildOnlyType) => (
32+
<Text lineHeight="140%" color="text" fontFamily="monospace">
33+
{children}
34+
</Text>
35+
)
36+
37+
const CallToContribute: React.FC<IProps> = ({ editPath }) => {
38+
/**
39+
* TODO: After completion of the UI migration,
40+
* Remove this and pass the token value directly
41+
* into the `above` prop of `Show`
42+
*/
43+
const largeBp = useToken("breakpoints", "lg")
44+
45+
return (
2346
<Flex
24-
direction="column"
25-
flexGrow={1}
26-
flexShrink={1}
27-
flexBasis="50%"
28-
p={4}
29-
color="text"
30-
textAlign={{ base: "center", lg: "left" }}
31-
display={{ base: "none", lg: "flex" }}
32-
>
33-
░░░░░░░░░▄░░░░░░░░░░░░░░▄░░░░ ░░░░░░░░▌▒█░░░░░░░░░░░▄▀▒▌░░░
34-
░░░░░░░░▌▒▒█░░░░░░░░▄▀▒▒▒▐░░░ ░░░░░░░▐▄▀▒▒▀▀▀▀▄▄▄▀▒▒▒▒▒▐░░░
35-
░░░░░▄▄▀▒░▒▒▒▒▒▒▒▒▒█▒▒▄█▒▐░░░ ░░░▄▀▒▒▒░░░▒▒▒░░░▒▒▒▀██▀▒▌░░░
36-
░░▐▒▒▒▄▄▒▒▒▒░░░▒▒▒▒▒▒▒▀▄▒▒▌░░ ░░▌░░▌█▀▒▒▒▒▒▄▀█▄▒▒▒▒▒▒▒█▒▐░░
37-
░▐░░░▒▒▒▒▒▒▒▒▌██▀▒▒░░░▒▒▒▀▄▌░ ░▌░▒▄██▄▒▒▒▒▒▒▒▒▒░░░░░░▒▒▒▒▌░
38-
▀▒▀▐▄█▄█▌▄░▀▒▒░░░░░░░░░░▒▒▒▐░ ▐▒▒▐▀▐▀▒░▄▄▒▄▒▒▒▒▒▒░▒░▒░▒▒▒▒▌
39-
▐▒▒▒▀▀▄▄▒▒▒▄▒▒▒▒▒▒▒▒░▒░▒░▒▒▐░ ░▌▒▒▒▒▒▒▀▀▀▒▒▒▒▒▒░▒░▒░▒░▒▒▒▌░
40-
░▐▒▒▒▒▒▒▒▒▒▒▒▒▒▒░▒░▒░▒▒▄▒▒▐░░ ░░▀▄▒▒▒▒▒▒▒▒▒▒▒░▒░▒░▒▄▒▒▒▒▌░░
41-
░░░░▀▄▒▒▒▒▒▒▒▒▒▒▄▄▄▀▒▒▒▒▄▀░░░ ░░░░░░▀▄▄▄▄▄▄▀▀▀▒▒▒▒▒▄▄▀░░░░░
42-
░░░░░░░░░▒▒▒▒▒▒▒▒▒▒▀▀░░░░░░░░
43-
</Flex>
44-
<Flex
45-
direction="column"
46-
flexGrow={1}
47-
flexShrink={1}
48-
flexBasis="50%"
49-
p={4}
50-
color="text"
51-
textAlign={{ base: "center", lg: "left" }}
47+
bg="ednBackground"
48+
align="center"
49+
mt={8}
50+
border="1px"
51+
borderColor="primary"
52+
borderRadius="base"
53+
boxShadow="inset 0 -2px 0 0 var(--eth-colors-primary400)"
5254
>
53-
<Heading
54-
as="h2"
55-
fontFamily="monospace"
56-
textTransform="uppercase"
57-
bg="border"
58-
p={1}
59-
fontSize="2rem"
60-
lineHeight={1.4}
61-
>
62-
<Translation id="page-calltocontribute-title" />
63-
</Heading>
64-
<Text lineHeight="140%" color="text" fontFamily="monospace">
65-
<Translation id="page-calltocontribute-desc-1" />
66-
</Text>
67-
<Text lineHeight="140%" color="text" fontFamily="monospace">
68-
<Translation id="page-calltocontribute-desc-2" />
69-
</Text>
70-
<Text lineHeight="140%" color="text" fontFamily="monospace">
71-
<Translation id="page-calltocontribute-desc-3" />{" "}
72-
<Link to="https://www.notion.so/efdn/Writer-template-4b40d196cde7422ca6a2091de33550bd">
73-
<Translation id="page-calltocontribute-link" />
74-
</Link>
75-
</Text>
76-
<Text lineHeight="140%" color="text" fontFamily="monospace">
77-
<Translation id="page-calltocontribute-desc-4" />{" "}
78-
<Link to="https://discord.gg/CetY6Y4">
79-
<Translation id="page-calltocontribute-link-2" />
80-
</Link>{" "}
81-
</Text>
82-
<ButtonLink
83-
to={editPath}
84-
leftIcon={
85-
<Icon fill="background" w={6} h={6} as={FaGithub} name="github" />
86-
}
87-
>
88-
<Translation id="page-calltocontribute-span" />
89-
</ButtonLink>
55+
<Show above={largeBp}>
56+
<ContentColumn>
57+
░░░░░░░░░▄░░░░░░░░░░░░░░▄░░░░ ░░░░░░░░▌▒█░░░░░░░░░░░▄▀▒▌░░░
58+
░░░░░░░░▌▒▒█░░░░░░░░▄▀▒▒▒▐░░░ ░░░░░░░▐▄▀▒▒▀▀▀▀▄▄▄▀▒▒▒▒▒▐░░░
59+
░░░░░▄▄▀▒░▒▒▒▒▒▒▒▒▒█▒▒▄█▒▐░░░ ░░░▄▀▒▒▒░░░▒▒▒░░░▒▒▒▀██▀▒▌░░░
60+
░░▐▒▒▒▄▄▒▒▒▒░░░▒▒▒▒▒▒▒▀▄▒▒▌░░ ░░▌░░▌█▀▒▒▒▒▒▄▀█▄▒▒▒▒▒▒▒█▒▐░░
61+
░▐░░░▒▒▒▒▒▒▒▒▌██▀▒▒░░░▒▒▒▀▄▌░ ░▌░▒▄██▄▒▒▒▒▒▒▒▒▒░░░░░░▒▒▒▒▌░
62+
▀▒▀▐▄█▄█▌▄░▀▒▒░░░░░░░░░░▒▒▒▐░ ▐▒▒▐▀▐▀▒░▄▄▒▄▒▒▒▒▒▒░▒░▒░▒▒▒▒▌
63+
▐▒▒▒▀▀▄▄▒▒▒▄▒▒▒▒▒▒▒▒░▒░▒░▒▒▐░ ░▌▒▒▒▒▒▒▀▀▀▒▒▒▒▒▒░▒░▒░▒░▒▒▒▌░
64+
░▐▒▒▒▒▒▒▒▒▒▒▒▒▒▒░▒░▒░▒▒▄▒▒▐░░ ░░▀▄▒▒▒▒▒▒▒▒▒▒▒░▒░▒░▒▄▒▒▒▒▌░░
65+
░░░░▀▄▒▒▒▒▒▒▒▒▒▒▄▄▄▀▒▒▒▒▄▀░░░ ░░░░░░▀▄▄▄▄▄▄▀▀▀▒▒▒▒▒▄▄▀░░░░░
66+
░░░░░░░░░▒▒▒▒▒▒▒▒▒▒▀▀░░░░░░░░
67+
</ContentColumn>
68+
</Show>
69+
<ContentColumn>
70+
<Heading
71+
as="h2"
72+
fontFamily="monospace"
73+
textTransform="uppercase"
74+
bg="border"
75+
p={1}
76+
fontSize="2rem"
77+
lineHeight={1.4}
78+
>
79+
<Translation id="page-calltocontribute-title" />
80+
</Heading>
81+
<DescriptionParagraph>
82+
<Translation id="page-calltocontribute-desc-1" />
83+
</DescriptionParagraph>
84+
<DescriptionParagraph>
85+
<Translation id="page-calltocontribute-desc-2" />
86+
</DescriptionParagraph>
87+
<DescriptionParagraph>
88+
<Translation id="page-calltocontribute-desc-3" />{" "}
89+
<Link to="https://www.notion.so/efdn/Writer-template-4b40d196cde7422ca6a2091de33550bd">
90+
<Translation id="page-calltocontribute-link" />
91+
</Link>
92+
</DescriptionParagraph>
93+
<DescriptionParagraph>
94+
<Translation id="page-calltocontribute-desc-4" />{" "}
95+
<Link to="https://discord.gg/CetY6Y4">
96+
<Translation id="page-calltocontribute-link-2" />
97+
</Link>{" "}
98+
</DescriptionParagraph>
99+
<ButtonLink
100+
to={editPath}
101+
leftIcon={
102+
<Icon fill="background" w={6} h={6} as={FaGithub} name="github" />
103+
}
104+
>
105+
<Translation id="page-calltocontribute-span" />
106+
</ButtonLink>
107+
</ContentColumn>
90108
</Flex>
91-
</Flex>
92-
)
109+
)
110+
}
93111

94112
export default CallToContribute

‎src/components/MergeInfographic.tsx‎

Lines changed: 56 additions & 64 deletions
Original file line numberDiff line numberDiff line change
@@ -1,6 +1,6 @@
11
// Library imports
22
import React from "react"
3-
import styled from "@emotion/styled"
3+
import { AspectRatio, Box, chakra, Icon } from "@chakra-ui/react"
44
import { useIntl } from "react-intl"
55
// Component imports
66
import Translation from "./Translation"
@@ -9,60 +9,13 @@ import { translateMessageId, TranslationKey } from "../utils/translations"
99
// SVG imports
1010
import InfographicBg from "../assets/upgrades/merge-infographic-bg.svg"
1111

12-
const Container = styled.div`
13-
position: relative;
14-
width: 100%;
15-
aspect-ratio: 25 / 11;
16-
isolation: isolate;
17-
`
18-
19-
const ExecutionLayer = styled.div`
20-
position: absolute;
21-
top: 40%;
22-
left: 2%;
23-
width: 81%;
24-
height: 18%;
25-
margin: 0;
26-
padding: 0;
27-
z-index: 2;
28-
29-
display: flex;
30-
justify-content: center;
31-
text-align: center;
32-
align-items: center;
33-
34-
line-height: 1em;
35-
max-height: 2em;
36-
color: ${({ theme }) => theme.colors.background};
37-
38-
font-size: 1.375em;
39-
@media (max-width: ${({ theme }) => theme.breakpoints.l}) {
40-
font-size: 1.125em;
41-
}
42-
@media (max-width: ${({ theme }) => theme.breakpoints.m}) {
43-
font-size: 0.875em;
44-
}
45-
@media (max-width: ${({ theme }) => theme.breakpoints.s}) {
46-
font-size: 0.625em;
47-
}
48-
`
49-
50-
const Background = styled(InfographicBg)`
51-
position: absolute;
52-
width: 100%;
53-
height: 100%;
54-
z-index: 0;
55-
`
56-
57-
const StyledSvg = styled.svg`
58-
position: absolute;
59-
z-index: 1;
60-
`
61-
62-
const Text = styled.text`
63-
text-anchor: start;
64-
fill: currentColor;
65-
`
12+
const Background = chakra(InfographicBg)
13+
const Text = chakra("text", {
14+
baseStyle: {
15+
textAnchor: "start",
16+
fill: "currentColor",
17+
},
18+
})
6619

6720
export type StringGetter = (key: TranslationKey) => string
6821

@@ -73,7 +26,9 @@ export interface SvgProps {
7326
const SvgText: React.FC<SvgProps> = ({ getString }) => {
7427
const [sm, lg] = ["7px", "8px"]
7528
return (
76-
<StyledSvg
29+
<Icon
30+
position="absolute"
31+
zIndex={1}
7732
width="100%"
7833
height="100%"
7934
viewBox="0 0 250 110"
@@ -97,7 +52,7 @@ const SvgText: React.FC<SvgProps> = ({ getString }) => {
9752
<Text x="63%" y="95%" fontSize={sm}>
9853
🌳 {getString("page-upgrades-get-involved-ethresearch-1")}
9954
</Text>
100-
</StyledSvg>
55+
</Icon>
10156
)
10257
}
10358

@@ -111,20 +66,57 @@ const MergeInfographic: React.FC<IProps> = ({ className }) => {
11166
translateMessageId(id, intl)
11267

11368
return (
114-
<Container
69+
<AspectRatio
11570
className={className}
11671
role="img"
11772
aria-label={translateMessageId(
11873
"page-upgrades-merge-infographic-alt-text",
11974
intl
12075
)}
76+
position="relative"
77+
width="100%"
78+
ratio={25 / 11}
79+
sx={{
80+
isolation: "isolate",
81+
}}
12182
>
122-
<ExecutionLayer aria-hidden="true">
123-
<Translation id="page-upgrades-merge-infographic-el" />
124-
</ExecutionLayer>
125-
<SvgText getString={getString} />
126-
<Background aria-hidden="true" />
127-
</Container>
83+
<Box>
84+
<Box
85+
position="absolute"
86+
top="40%"
87+
left="2%"
88+
width="81%"
89+
height="18%"
90+
margin={0}
91+
padding={0}
92+
zIndex={2}
93+
display="flex"
94+
justifyContent="center"
95+
alignItems="center"
96+
lineHeight="1em"
97+
textAlign="center"
98+
maxHeight="2em"
99+
color="background"
100+
fontSize={{
101+
base: "0.625em",
102+
sm: "0.875em",
103+
md: "1.125em",
104+
lg: "1.375em",
105+
}}
106+
aria-hidden="true"
107+
>
108+
<Translation id="page-upgrades-merge-infographic-el" />
109+
</Box>
110+
<SvgText getString={getString} />
111+
<Background
112+
aria-hidden="true"
113+
position="absolute"
114+
width="100%"
115+
height="100%"
116+
zIndex={0}
117+
/>
118+
</Box>
119+
</AspectRatio>
128120
)
129121
}
130122

0 commit comments

Comments
 (0)