fix: no need for child selectors

fix: eslint

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

@@ -11,7 +11,7 @@ const styles = {
     maxHeight: 80,
     maxWidth: 200
   },
-  title: {
+  subtitle: {
     margin: 0,
     marginBottom: 42,
     textAlign: 'center'
@@ -27,22 +27,22 @@ const styles = {
     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
-        }
-      }
-    }
+    padding: [[0, 34, 107, 34]]
+  },
+  innerContent: {
+    paddingBottom: 72
+  },
+  title: {
+    color: neon,
+    marginBottom: 12,
+    marginTop: 30,
+    textAlign: 'center'
+  },
+  titleDecorator: {
+    verticalAlign: 'bottom',
+    marginRight: spacer * 1.5,
+    width: spacer * 3,
+    height: spacer * 3.25
   }
 }
 
@@ -53,12 +53,12 @@ const WizardSplash = ({ name, onContinue }) => {
 
   return (
     <div className={classes.modalContent}>
-      <div>
-        <H1>
-          <TxOutIcon />
+      <div className={classes.innerContent}>
+        <H1 className={classes.title}>
+          <TxOutIcon className={classes.titleDecorator} />
           <span>Enable cash-out</span>
         </H1>
-        <Info2 className={classes.title}>{name}</Info2>
+        <Info2 className={classes.subtitle}>{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.

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

@@ -53,7 +53,7 @@ const WizardStep = ({
               {steps.map(
                 ({ type, display, component }, idx) =>
                   1 + idx === step && (
-                    <div key={idx}>
+                    <div key={idx} className={classes.step}>
                       <H4 className={classes.edit}>Edit {display}</H4>
 
                       <Label1>Choose bill denomination</Label1>
@@ -78,6 +78,7 @@ const WizardStep = ({
                   )
               )}
               <img
+                className={classes.stepImage}
                 alt="cassette"
                 width="148"
                 height="196"
@@ -95,7 +96,7 @@ const WizardStep = ({
         <div className={classes.disclaimer}>
           <Info2 className={classes.title}>Cashout Bill Count</Info2>
           <P>
-            <WarningIcon />
+            <WarningIcon className={classes.disclaimerIcon} />
             When enabling cash out, your bill count will be automatically set to
             zero. Make sure you physically put cash inside the cashboxes to
             allow the machine to dispense it to your users. If you already did,
@@ -105,7 +106,7 @@ const WizardStep = ({
 
           <Info2 className={classes.title}>Default Commissions</Info2>
           <P>
-            <WarningIcon />
+            <WarningIcon className={classes.disclaimerIcon} />
             When enabling cash out, default commissions will be set. To change
             commissions for this machine, please go to the Commissions tab under
             Settings where you can set exceptions for each of the available

new-lamassu-admin/src/pages/Cashout/WizardStep.styles.js

@@ -38,15 +38,15 @@ export default {
   },
   header: {
     display: 'flex',
-    paddingBottom: 96,
-    '& div': {
-      flex: 1
-    },
-    '& img': {
-      position: 'relative',
-      top: -20,
-      right: 14
-    }
+    paddingBottom: 96
+  },
+  step: {
+    flex: 1
+  },
+  stepImage: {
+    position: 'relative',
+    top: -20,
+    right: 14
   },
   content: {
     display: 'flex',
@@ -59,12 +59,10 @@ export default {
     display: 'flex',
     flex: 1,
     flexDirection: 'column',
-    justifyContent: 'space-between',
-    '& > p': {
-      '& > svg': {
-        float: 'left',
-        margin: [[-4, 16, 48, 0]]
-      }
-    }
+    justifyContent: 'space-between'
+  },
+  disclaimerIcon: {
+    float: 'left',
+    margin: [[-4, 16, 48, 0]]
   }
 }