Newer
Older
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
34
35
36
37
38
39
40
41
42
43
44
45
46
47
48
import React from 'react'
import MuiButton, { ButtonProps } from '@material-ui/core/Button'
import {
withStyles,
MuiThemeProvider,
createMuiTheme,
} from '@material-ui/core/styles'
const theme = createMuiTheme({
typography: {
useNextVariants: true,
},
shape: {
borderRadius: 2,
},
palette: {
primary: {
main: '#E3B82A',
},
secondary: {
main: '#7B7B7B',
},
},
})
const BaseButton = withStyles({
root: {
height: '2.5rem',
margin: '1.5rem 0 0 0',
padding: '0px 1px',
},
label: {
textTransform: 'none',
fontFamily: 'Lato, sans-serif',
fontStyle: 'normal',
fontSize: '1rem',
lineHeight: '120%',
},
})(MuiButton)
const PrimaryButton = withStyles({
root: {
background: 'var(--multiColorRadialGradient)',
},
label: {
color: '#000000',
fontWeight: 'bold',
},
disabled: {
background: 'var(--multiColorRadialGradient) !important',
opacity: '0.6',
},
53
54
55
56
57
58
59
60
61
62
63
64
65
66
67
68
69
70
71
72
73
74
75
76
77
78
79
80
81
82
83
84
85
86
87
88
89
90
91
92
})(BaseButton)
const SecondaryButton = withStyles({
root: {
border: '1px solid #121212',
},
label: {
color: '#E0E0E0',
fontWeight: 'normal',
},
})(BaseButton)
function MyButton(props: ButtonProps) {
return props.color === 'secondary' ? (
<SecondaryButton
fullWidth
color="secondary"
variant="outlined"
{...props}
/>
) : (
<PrimaryButton fullWidth color="primary" variant="contained" {...props} />
)
}
const StyledButton: React.ComponentType<ButtonProps> = props => {
return (
<>
<MuiThemeProvider theme={theme}>
<MyButton {...props}>{props.children}</MyButton>
</MuiThemeProvider>
</>
)
}
StyledButton.defaultProps = {
color: 'primary',
}
export default StyledButton