Skip to content

Commit 28fbbd6

Browse files
pettinarippettinarip
authored
Merge pull request #8372 from TylerAPfledderer/refactor/call-to-contribute
Refactor `CallToContribute` component
2 parents 981a0e8 + e263802 commit 28fbbd6

File tree

1 file changed

+95
-77
lines changed

1 file changed

+95
-77
lines changed

‎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

0 commit comments

Comments
 (0)