fix: cash out fixes

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

new-lamassu-admin/src/pages/Cashout/WizardSplash.js

@@ -2,7 +2,9 @@ import { makeStyles } from '@material-ui/core'
 import React from 'react'
 
 import { Button } from 'src/components/buttons'
-import { H1, P } from 'src/components/typography'
+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: {
@@ -10,21 +12,37 @@ const styles = {
     maxWidth: 200
   },
   title: {
-    margin: [[24, 0, 32, 0]]
+    margin: 0,
+    marginBottom: 42,
+    textAlign: 'center'
   },
   text: {
     margin: 0
   },
   button: {
-    marginTop: 'auto',
-    marginBottom: 58
+    margin: [[0, 'auto']]
   },
   modalContent: {
     display: 'flex',
     flexDirection: 'column',
-    alignItems: 'center',
-    padding: [[0, 42]],
-    flex: 1
+    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
+        }
+      }
+    }
   }
 }
 
@@ -35,14 +53,21 @@ const WizardSplash = ({ name, onContinue }) => {
 
   return (
     <div className={classes.modalContent}>
-      <H1 className={classes.title}>Enable cash-out</H1>
-      <P className={classes.text}>
-        You are about to activate cash-out functionality on your {name} machine
-        which will allow your customers to sell crypto to you.
-        <br />
-        In order to activate cash-out for this machine, please enter the
-        denominations for the machine.
-      </P>
+      <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>