53 lines
1.1 KiB
JavaScript
53 lines
1.1 KiB
JavaScript
import { makeStyles } from '@mui/material/styles'
|
|
import classnames from 'classnames'
|
|
import React, { memo } from 'react'
|
|
import AddIcon from 'src/styling/icons/button/add/zodiac.svg?react'
|
|
|
|
import typographyStyles from 'src/components/typography/styles'
|
|
import { zircon, zircon2, comet, fontColor, white } from 'src/styling/variables'
|
|
|
|
const { p } = typographyStyles
|
|
|
|
const styles = {
|
|
button: {
|
|
extend: p,
|
|
border: 'none',
|
|
backgroundColor: zircon,
|
|
cursor: 'pointer',
|
|
outline: 0,
|
|
display: 'flex',
|
|
justifyContent: 'center',
|
|
alignItems: 'center',
|
|
width: 167,
|
|
height: 48,
|
|
color: fontColor,
|
|
'&:hover': {
|
|
backgroundColor: zircon2
|
|
},
|
|
'&:active': {
|
|
backgroundColor: comet,
|
|
color: white,
|
|
'& svg g *': {
|
|
stroke: white
|
|
}
|
|
},
|
|
'& svg': {
|
|
marginRight: 8
|
|
}
|
|
}
|
|
}
|
|
|
|
const useStyles = makeStyles(styles)
|
|
|
|
const SimpleButton = memo(({ className, children, ...props }) => {
|
|
const classes = useStyles()
|
|
|
|
return (
|
|
<button className={classnames(classes.button, className)} {...props}>
|
|
<AddIcon />
|
|
{children}
|
|
</button>
|
|
)
|
|
})
|
|
|
|
export default SimpleButton
|