refactor: refactor the new trigger wizard styles

new-lamassu-admin/src/components/wizard/Wizard.js

@@ -31,8 +31,8 @@ const Wizard = ({ header, nextStepText, finalStepText, finish, children }) => {
 
   return (
     <>
-      <div className={classes.modalHeader}>{header}</div>
-      <div className={classes.modalBody}>
+      <div className={classes.header}>{header}</div>
+      <div className={classes.body}>
         <div className={classes.columnWrapper}>
           {/* TODO: wizard steps icons are a little strange... */}
           <div className={classes.wizardStepsWrapper}>

new-lamassu-admin/src/components/wizard/Wizard.styles.js

@@ -12,11 +12,11 @@ const mainStyles = {
     marginLeft: 'auto',
     marginTop: 'auto'
   },
-  modalHeader: {
+  header: {
     display: 'flex',
     marginBottom: 14
   },
-  modalBody: {
+  body: {
     display: 'flex',
     height: '100%'
   },

new-lamassu-admin/src/pages/Triggers/SelectTriggerRequirements.js

@@ -105,7 +105,6 @@ const SelectTriggerRequirements = () => {
         )}
       />
       <div className={classes.rowWrapper}>
-        {/* TODO: why there's a trigger type property two times? Here and on the prior step */}
         <H4>Choose trigger type</H4>
         <div className={classes.transparentButton}>
           <button onClick={handleOpenTypeHelpPopper}>

new-lamassu-admin/src/pages/Triggers/Triggers.styles.js

@@ -1,6 +1,5 @@
 import baseStyles from 'src/pages/Logs.styles'
 import { booleanPropertiesTableStyles } from 'src/components/booleanPropertiesTable/BooleanPropertiesTable.styles'
-import { disabledColor, secondaryColor } from 'src/styling/variables'
 
 const { titleWrapper, titleAndButtonsContainer, buttonsWrapper } = baseStyles
 const { rowWrapper, radioButtons } = booleanPropertiesTableStyles
@@ -28,17 +27,6 @@ const mainStyles = {
       marginRight: 12
     }
   },
-  columnWrapper: {
-    display: 'flex',
-    flexDirection: 'column',
-    height: '100%',
-    width: '100%'
-  },
-  bottomRightAligned: {
-    alignSelf: 'flex-end',
-    marginLeft: 'auto',
-    marginTop: 'auto'
-  },
   modal: {
     display: 'flex',
     alignItems: 'center',
@@ -72,14 +60,6 @@ const mainStyles = {
       flexGrow: 2
     }
   },
-  modalHeader: {
-    display: 'flex',
-    marginBottom: 14
-  },
-  modalBody: {
-    display: 'flex',
-    height: '100%'
-  },
   transparentButton: {
     '& > *': {
       margin: 'auto 12px'
@@ -101,23 +81,6 @@ const mainStyles = {
     width: 96,
     height: 40,
     marginRight: 8
-  },
-  wizardStepsWrapper: {
-    display: 'flex',
-    alignItems: 'center',
-    position: 'relative',
-    flex: 'wrap',
-    marginBottom: 10
-  },
-  unreachedStepLine: {
-    width: 24,
-    height: 2,
-    border: `solid 1px ${disabledColor}`
-  },
-  reachedStepLine: {
-    width: 24,
-    height: 2,
-    border: `solid 1px ${secondaryColor}`
   }
 }