From c4acfaa609e597650489c054742399a2e6a5a244 Mon Sep 17 00:00:00 2001
From: Mauricio Navarro Miranda <mauricio@navarromiranda.mx>
Date: Sun, 26 Jul 2020 17:00:10 -0500
Subject: [PATCH] fix: no need for child selectors

fix: eslint
---
 .../src/pages/Cashout/WizardSplash.js         | 42 +++++++++----------
 .../src/pages/Cashout/WizardStep.js           |  7 ++--
 .../src/pages/Cashout/WizardStep.styles.js    | 30 +++++++------
 3 files changed, 39 insertions(+), 40 deletions(-)

diff --git a/new-lamassu-admin/src/pages/Cashout/WizardSplash.js b/new-lamassu-admin/src/pages/Cashout/WizardSplash.js
index 47b01e18..f81adf7f 100644
--- a/new-lamassu-admin/src/pages/Cashout/WizardSplash.js
+++ b/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.
diff --git a/new-lamassu-admin/src/pages/Cashout/WizardStep.js b/new-lamassu-admin/src/pages/Cashout/WizardStep.js
index bf78e2c1..887f889a 100644
--- a/new-lamassu-admin/src/pages/Cashout/WizardStep.js
+++ b/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
diff --git a/new-lamassu-admin/src/pages/Cashout/WizardStep.styles.js b/new-lamassu-admin/src/pages/Cashout/WizardStep.styles.js
index 98ad5a03..a1eb0b3d 100644
--- a/new-lamassu-admin/src/pages/Cashout/WizardStep.styles.js
+++ b/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]]
   }
 }