1
+ import { Flex , Heading , Icon , Text } from "@chakra-ui/react"
2
+ import { FaGithub } from "react-icons/fa"
1
3
import React from "react"
2
- import styled from "@emotion/styled"
3
4
import Link from "./Link"
4
5
import ButtonLink from "./ButtonLink"
5
- import Icon from "./Icon"
6
6
7
7
import Translation from "./Translation"
8
8
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
-
73
9
export interface IProps {
74
10
editPath : string
75
11
}
76
12
77
13
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
+ >
80
33
░░░░░░░░░▄░░░░░░░░░░░░░░▄░░░░ ░░░░░░░░▌▒█░░░░░░░░░░░▄▀▒▌░░░
81
34
░░░░░░░░▌▒▒█░░░░░░░░▄▀▒▒▒▐░░░ ░░░░░░░▐▄▀▒▒▀▀▀▀▄▄▄▀▒▒▒▒▒▐░░░
82
35
░░░░░▄▄▀▒░▒▒▒▒▒▒▒▒▒█▒▒▄█▒▐░░░ ░░░▄▀▒▒▒░░░▒▒▒░░░▒▒▒▀██▀▒▌░░░
@@ -87,37 +40,55 @@ const CallToContribute: React.FC<IProps> = ({ editPath }) => (
87
40
░▐▒▒▒▒▒▒▒▒▒▒▒▒▒▒░▒░▒░▒▒▄▒▒▐░░ ░░▀▄▒▒▒▒▒▒▒▒▒▒▒░▒░▒░▒▄▒▒▒▒▌░░
88
41
░░░░▀▄▒▒▒▒▒▒▒▒▒▒▄▄▄▀▒▒▒▒▄▀░░░ ░░░░░░▀▄▄▄▄▄▄▀▀▀▒▒▒▒▒▄▄▀░░░░░
89
42
░░░░░░░░░▒▒▒▒▒▒▒▒▒▒▀▀░░░░░░░░
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
+ >
93
62
< Translation id = "page-calltocontribute-title" />
94
- </ Title >
95
- < Description >
63
+ </ Heading >
64
+ < Text lineHeight = "140%" color = "text" fontFamily = "monospace" >
96
65
< Translation id = "page-calltocontribute-desc-1" />
97
- </ Description >
98
- < Description >
66
+ </ Text >
67
+ < Text lineHeight = "140%" color = "text" fontFamily = "monospace" >
99
68
< Translation id = "page-calltocontribute-desc-2" />
100
- </ Description >
101
- < Description >
69
+ </ Text >
70
+ < Text lineHeight = "140%" color = "text" fontFamily = "monospace" >
102
71
< Translation id = "page-calltocontribute-desc-3" /> { " " }
103
72
< Link to = "https://www.notion.so/efdn/Writer-template-4b40d196cde7422ca6a2091de33550bd" >
104
73
< Translation id = "page-calltocontribute-link" />
105
74
</ Link >
106
- </ Description >
107
- < Description >
75
+ </ Text >
76
+ < Text lineHeight = "140%" color = "text" fontFamily = "monospace" >
108
77
< Translation id = "page-calltocontribute-desc-4" /> { " " }
109
78
< Link to = "https://discord.gg/CetY6Y4" >
110
79
< Translation id = "page-calltocontribute-link-2" />
111
80
</ 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 >
121
92
)
122
93
123
94
export default CallToContribute
0 commit comments