feat: use Namespaced table and wizard on Cashout

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

@@ -1,60 +1,49 @@
-import React from 'react'
 import { makeStyles } from '@material-ui/core'
+import React from 'react'
 
-import { H1, P } from 'src/components/typography'
 import { Button } from 'src/components/buttons'
-import { neon, spacer } from 'src/styling/variables'
+import { H1, P } from 'src/components/typography'
 
 const styles = {
-  logoWrapper: {
-    display: 'flex',
-    justifyContent: 'center',
-    alignItems: 'center',
-    height: 80,
-    margin: [[40, 0, 24]],
-    '& > svg': {
-      maxHeight: '100%',
-      width: '100%'
-    }
+  logo: {
+    maxHeight: 80,
+    maxWidth: 200
+  },
+  title: {
+    margin: [[24, 0, 32, 0]]
+  },
+  text: {
+    margin: 0
+  },
+  button: {
+    marginTop: 'auto',
+    marginBottom: 58
   },
   modalContent: {
     display: 'flex',
     flexDirection: 'column',
     alignItems: 'center',
-    padding: [[0, 66]],
-    '& > h1': {
-      color: neon,
-      margin: [[spacer * 8, 0, 32]]
-    },
-    '& > p': {
-      margin: 0
-    },
-    '& > button': {
-      margin: [['auto', 0, 56]],
-      '&:active': {
-        margin: [['auto', 0, 56]]
-      }
-    }
+    padding: [[0, 42]],
+    flex: 1
   }
 }
 
 const useStyles = makeStyles(styles)
 
-const WizardSplash = ({ handleModalNavigation, machine }) => {
+const WizardSplash = ({ name, onContinue }) => {
   const classes = useStyles()
 
   return (
     <div className={classes.modalContent}>
-      <H1>Enable cash-out</H1>
-      <P>
-        You are about to activate cash-out functionality on your {machine.name}{' '}
-        machine which will allow your customers to sell crypto to you.
-        <br />
+      <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>
-      <Button onClick={() => handleModalNavigation(1)}>
+      <Button className={classes.button} onClick={onContinue}>
         Start configuration
       </Button>
     </div>