Skip to content

Commit a654b63

Browse files
authored
Merge pull request #7975 from vdusart/feat/convert-CallToContribute-Chakra
Feat/convert call to contribute chakra
2 parents 6638d76 + e44ef33 commit a654b63

File tree

1 file changed

+59
-88
lines changed

1 file changed

+59
-88
lines changed

src/components/CallToContribute.tsx

Lines changed: 59 additions & 88 deletions
Original file line numberDiff line numberDiff line change
@@ -1,82 +1,35 @@
1+
import { Flex, Heading, Icon, Text } from "@chakra-ui/react"
2+
import { FaGithub } from "react-icons/fa"
13
import React from "react"
2-
import styled from "@emotion/styled"
34
import Link from "./Link"
45
import ButtonLink from "./ButtonLink"
5-
import Icon from "./Icon"
66

77
import Translation from "./Translation"
88

9-
const StyledCard = styled.div`
10-
display: flex;
11-
background: ${(props) => props.theme.colors.ednBackground};
12-
align-items: center;
13-
margin-top: 2rem;
14-
border: 1px solid ${(props) => props.theme.colors.primary};
15-
border-radius: 4px;
16-
box-shadow: inset 0 -2px 0 0 ${(props) => props.theme.colors.primary400};
17-
`
18-
19-
const Column = styled.div`
20-
flex: 1 1 50%;
21-
padding: 1rem;
22-
display: flex;
23-
flex-direction: column;
24-
color: ${(props) => props.theme.colors.text};
25-
@media (max-width: ${(props) => props.theme.breakpoints.l}) {
26-
text-align: center;
27-
}
28-
`
29-
30-
const ImageColumn = styled(Column)`
31-
@media (max-width: ${(props) => props.theme.breakpoints.l}) {
32-
display: none;
33-
}
34-
`
35-
36-
const GithubButton = styled(ButtonLink)`
37-
display: flex;
38-
align-items: center;
39-
justify-content: center;
40-
color: ${(props) => props.theme.colors.background};
41-
background-color: ${(props) => props.theme.colors.secondaryButtonBackground};
42-
border: 1px solid ${(props) => props.theme.colors.secondaryButtonBorder};
43-
&:hover {
44-
background-color: ${(props) =>
45-
props.theme.colors.secondaryButtonBackgroundHover};
46-
color: ${(props) => props.theme.colors.secondaryButtonHoverColor};
47-
}
48-
&:active {
49-
background-color: ${(props) =>
50-
props.theme.colors.secondaryButtonBackgroundActive};
51-
color: ${(props) => props.theme.colors.secondaryButtonHoverColor};
52-
}
53-
`
54-
55-
const GithubIcon = styled(Icon)`
56-
fill: ${(props) => props.theme.colors.background};
57-
margin-right: 0.5rem;
58-
`
59-
60-
const Description = styled.p`
61-
line-height: 140%;
62-
color: ${(props) => props.theme.colors.text};
63-
font-family: ${(props) => props.theme.fonts.monospace};
64-
`
65-
66-
const Title = styled.h2`
67-
font-family: ${(props) => props.theme.fonts.monospace};
68-
text-transform: uppercase;
69-
background: ${(props) => props.theme.colors.border};
70-
padding: 0.25rem;
71-
`
72-
739
export interface IProps {
7410
editPath: string
7511
}
7612

7713
const CallToContribute: React.FC<IProps> = ({ editPath }) => (
78-
<StyledCard>
79-
<ImageColumn>
14+
<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)"
22+
>
23+
<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+
>
8033
░░░░░░░░░▄░░░░░░░░░░░░░░▄░░░░ ░░░░░░░░▌▒█░░░░░░░░░░░▄▀▒▌░░░
8134
░░░░░░░░▌▒▒█░░░░░░░░▄▀▒▒▒▐░░░ ░░░░░░░▐▄▀▒▒▀▀▀▀▄▄▄▀▒▒▒▒▒▐░░░
8235
░░░░░▄▄▀▒░▒▒▒▒▒▒▒▒▒█▒▒▄█▒▐░░░ ░░░▄▀▒▒▒░░░▒▒▒░░░▒▒▒▀██▀▒▌░░░
@@ -87,37 +40,55 @@ const CallToContribute: React.FC<IProps> = ({ editPath }) => (
8740
░▐▒▒▒▒▒▒▒▒▒▒▒▒▒▒░▒░▒░▒▒▄▒▒▐░░ ░░▀▄▒▒▒▒▒▒▒▒▒▒▒░▒░▒░▒▄▒▒▒▒▌░░
8841
░░░░▀▄▒▒▒▒▒▒▒▒▒▒▄▄▄▀▒▒▒▒▄▀░░░ ░░░░░░▀▄▄▄▄▄▄▀▀▀▒▒▒▒▒▄▄▀░░░░░
8942
░░░░░░░░░▒▒▒▒▒▒▒▒▒▒▀▀░░░░░░░░
90-
</ImageColumn>
91-
<Column>
92-
<Title>
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" }}
52+
>
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+
>
9362
<Translation id="page-calltocontribute-title" />
94-
</Title>
95-
<Description>
63+
</Heading>
64+
<Text lineHeight="140%" color="text" fontFamily="monospace">
9665
<Translation id="page-calltocontribute-desc-1" />
97-
</Description>
98-
<Description>
66+
</Text>
67+
<Text lineHeight="140%" color="text" fontFamily="monospace">
9968
<Translation id="page-calltocontribute-desc-2" />
100-
</Description>
101-
<Description>
69+
</Text>
70+
<Text lineHeight="140%" color="text" fontFamily="monospace">
10271
<Translation id="page-calltocontribute-desc-3" />{" "}
10372
<Link to="https://www.notion.so/efdn/Writer-template-4b40d196cde7422ca6a2091de33550bd">
10473
<Translation id="page-calltocontribute-link" />
10574
</Link>
106-
</Description>
107-
<Description>
75+
</Text>
76+
<Text lineHeight="140%" color="text" fontFamily="monospace">
10877
<Translation id="page-calltocontribute-desc-4" />{" "}
10978
<Link to="https://discord.gg/CetY6Y4">
11079
<Translation id="page-calltocontribute-link-2" />
11180
</Link>{" "}
112-
</Description>
113-
<GithubButton to={editPath}>
114-
<GithubIcon name="github" />{" "}
115-
<span>
116-
<Translation id="page-calltocontribute-span" />
117-
</span>
118-
</GithubButton>
119-
</Column>
120-
</StyledCard>
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>
90+
</Flex>
91+
</Flex>
12192
)
12293

12394
export default CallToContribute

0 commit comments

Comments
 (0)