42f19e9d02
fix: on and off should have a fixed width fix: fist screen should be two p fix: autofocus on fields after next fix: spacing fix: button position fix: make the denominations a dropdown fix: fiat should shown input suffix fix: wizard should have splash image fix: add missing warning icon fix: eslint fix: modal fiat should be a suffix fix: increase modal height to match the spec fix: confirmation step has repeated title fix: label should cover both the input and the suffix fix: use code+display to benefit from dropdown improvements
78 lines
1.8 KiB
JavaScript
78 lines
1.8 KiB
JavaScript
import { makeStyles } from '@material-ui/core'
|
|
import React from 'react'
|
|
|
|
import { Button } from 'src/components/buttons'
|
|
import { H1, P, Info2 } from 'src/components/typography'
|
|
import { ReactComponent as TxOutIcon } from 'src/styling/icons/direction/cash-out.svg'
|
|
import { neon, spacer } from 'src/styling/variables'
|
|
|
|
const styles = {
|
|
logo: {
|
|
maxHeight: 80,
|
|
maxWidth: 200
|
|
},
|
|
title: {
|
|
margin: 0,
|
|
marginBottom: 42,
|
|
textAlign: 'center'
|
|
},
|
|
text: {
|
|
margin: 0
|
|
},
|
|
button: {
|
|
margin: [[0, 'auto']]
|
|
},
|
|
modalContent: {
|
|
display: 'flex',
|
|
flexDirection: 'column',
|
|
justifyContent: 'space-between',
|
|
flex: 1,
|
|
padding: [[0, 34, 107, 34]],
|
|
'& > div': {
|
|
paddingBottom: 72,
|
|
'& > h1': {
|
|
color: neon,
|
|
marginBottom: 12,
|
|
marginTop: 30,
|
|
textAlign: 'center',
|
|
'& > svg': {
|
|
verticalAlign: 'bottom',
|
|
marginRight: spacer * 1.5,
|
|
width: spacer * 3,
|
|
height: spacer * 3.25
|
|
}
|
|
}
|
|
}
|
|
}
|
|
}
|
|
|
|
const useStyles = makeStyles(styles)
|
|
|
|
const WizardSplash = ({ name, onContinue }) => {
|
|
const classes = useStyles()
|
|
|
|
return (
|
|
<div className={classes.modalContent}>
|
|
<div>
|
|
<H1>
|
|
<TxOutIcon />
|
|
<span>Enable cash-out</span>
|
|
</H1>
|
|
<Info2 className={classes.title}>{name}</Info2>
|
|
<P>
|
|
You are about to activate cash-out functionality on your {name}{' '}
|
|
machine which will allow your customers to sell crypto to you.
|
|
</P>
|
|
<P>
|
|
In order to activate cash-out for this machine, please enter the
|
|
denominations for the machine.
|
|
</P>
|
|
</div>
|
|
<Button className={classes.button} onClick={onContinue}>
|
|
Start configuration
|
|
</Button>
|
|
</div>
|
|
)
|
|
}
|
|
|
|
export default WizardSplash
|