styles: fix most of the style issues on the wizard component

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

@@ -1,11 +1,15 @@
 import React, { useState } from 'react'
 import { makeStyles } from '@material-ui/core'
+import classnames from 'classnames'
 
 import { H2, H4, TL1, P } from 'src/components/typography'
 import { RadioGroup, TextInput } from 'src/components/inputs'
 import { Button } from 'src/components/buttons'
 import Popper from 'src/components/Popper'
 import { ReactComponent as HelpIcon } from 'src/styling/icons/action/help/zodiac.svg'
+import { ReactComponent as CompleteIcon } from 'src/styling/icons/stage/spring/complete.svg'
+import { ReactComponent as CurrentIcon } from 'src/styling/icons/stage/spring/current.svg'
+import { ReactComponent as EmptyIcon } from 'src/styling/icons/stage/spring/empty.svg'
 
 import { mainStyles } from './Triggers.styles'
 
@@ -38,7 +42,7 @@ const SelectTriggerDirection = () => {
   ]
 
   return (
-    <>
+    <div className={classes.columnWrapper}>
       <div className={classes.rowWrapper}>
         <H4>In which type of transactions will it trigger?</H4>
         <div className={classes.transparentButton}>
@@ -65,10 +69,13 @@ const SelectTriggerDirection = () => {
           options={radioButtonOptions}
           value={radioGroupValue}
           onChange={event => handleRadioButtons(event.target.value)}
-          className={classes.radioButtons}
+          className={classnames(
+            classes.radioButtons,
+            classes.stepOneRadioButtons
+          )}
         />
       </div>
-    </>
+    </div>
   )
 }
 
@@ -100,7 +107,7 @@ const SelectTriggerType = () => {
   ]
 
   return (
-    <>
+    <div className={classes.columnWrapper}>
       <div className={classes.rowWrapper}>
         <H4>Choose trigger type</H4>
         <div className={classes.transparentButton}>
@@ -123,22 +130,24 @@ const SelectTriggerType = () => {
         </div>
       </div>
       <div class={classes.radioGroupWrapper}>
-        {/* TODO: fix the radio group alignment */}
         <RadioGroup
           options={radioButtonOptions}
           value={radioGroupValue}
           onChange={event => handleRadioButtons(event.target.value)}
-          className={classes.radioButtons}
+          className={classnames(
+            classes.radioButtons,
+            classes.stepTwoRadioButtons
+          )}
         />
       </div>
       <H4>Threshold</H4>
       <div className={classes.rowWrapper}>
-        {/* TODO: fix styles and allow only monetary values */}
+        {/* TODO: allow only monetary values */}
         <TextInput large className={classes.textInput} />
         {/* TODO: how should we define the fiat code? */}
         <TL1>EUR</TL1>
       </div>
-    </>
+    </div>
   )
 }
 
@@ -200,7 +209,7 @@ const SelectTriggerRequirements = () => {
   ]
 
   return (
-    <>
+    <div className={classes.columnWrapper}>
       <div className={classes.rowWrapper}>
         <H4>Choose a requirement</H4>
         <div className={classes.transparentButton}>
@@ -222,12 +231,14 @@ const SelectTriggerRequirements = () => {
           </button>
         </div>
       </div>
-      {/* TODO: fix the radio group alignment */}
       <RadioGroup
         options={requirementRadioButtonOptions}
         value={requirementRadioGroupValue}
         onChange={event => handleRequirementRadioButtons(event.target.value)}
-        className={classes.radioButtons}
+        className={classnames(
+          classes.radioButtons,
+          classes.stepThreeRadioButtons
+        )}
       />
       <div className={classes.rowWrapper}>
         {/* TODO: why there's a trigger type property two times? Here and on the prior step */}
@@ -251,14 +262,16 @@ const SelectTriggerRequirements = () => {
           </button>
         </div>
       </div>
-      {/* TODO: fix the radio group alignment */}
       <RadioGroup
         options={typeRadioButtonOptions}
         value={typeRadioGroupValue}
         onChange={event => handleTypeRadioButtons(event.target.value)}
-        className={classes.radioButtons}
+        className={classnames(
+          classes.radioButtons,
+          classes.stepThreeRadioButtons
+        )}
       />
-    </>
+    </div>
   )
 }
 
@@ -282,42 +295,31 @@ const Wizard = ({ nextStepText, finalStepText, finish, children }) => {
   const isFinalStep = currentStepIndex === finalStepIndex
 
   return (
-    <>
+    <div className={classes.columnWrapper}>
-      <div className={classes.topLeftAligned}>
+      {/* TODO: wizard steps icons are a little strange... */}
-        <div className={classes.wizardStepsWrapper}>
+      <div className={classes.wizardStepsWrapper}>
-          {children.map((e, i) => {
+        {children.map((e, i) => {
-            const elementToRender = []
+          const elementToRender = []
 
-            if (i < currentStepIndex)
+          if (i < currentStepIndex) elementToRender.push(<CompleteIcon />)
-              elementToRender.push(
+          else if (i === currentStepIndex) elementToRender.push(<CurrentIcon />)
-                <div className={classes.completedStepCircle}>
+          else elementToRender.push(<EmptyIcon />)
-                  <div className={classes.completedStepCheck} />
-                </div>
-              )
-            else if (i === currentStepIndex)
-              elementToRender.push(<div className={classes.currentStep} />)
-            else elementToRender.push(<div className={classes.unreachedStep} />)
 
-            if (i < currentStepIndex)
+          if (i < currentStepIndex)
-              elementToRender.push(<div className={classes.reachedStepLine} />)
+            elementToRender.push(<div className={classes.reachedStepLine} />)
-            else if (i < finalStepIndex)
+          else if (i < finalStepIndex)
-              elementToRender.push(
+            elementToRender.push(<div className={classes.unreachedStepLine} />)
-                <div className={classes.unreachedStepLine} />
-              )
 
-            return elementToRender
+          return elementToRender
-          })}
+        })}
-        </div>
-        {currentStep}
       </div>
+      {currentStep}
       <div className={classes.bottomRightAligned}>
-        <div className={classes.button}>
+        <Button onClick={() => handleMoveToNextStep(currentStepIndex + 1)}>
-          <Button onClick={() => handleMoveToNextStep(currentStepIndex + 1)}>
+          {isFinalStep ? finalStepText : nextStepText}
-            {isFinalStep ? finalStepText : nextStepText}
+        </Button>
-          </Button>
-        </div>
       </div>
-    </>
+    </div>
   )
 }
 
@@ -367,8 +369,8 @@ const NewTriggerWizard = ({ finish }) => {
           finalStepText={'Add Trigger'}
           finish={finish}>
           <SelectTriggerDirection />
-          <SelectTriggerRequirements />
           <SelectTriggerType />
+          <SelectTriggerRequirements />
         </Wizard>
       </div>
     </>

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

@@ -2,31 +2,42 @@ import baseStyles from 'src/pages/Logs.styles'
 import { booleanPropertiesTableStyles } from 'src/components/booleanPropertiesTable/BooleanPropertiesTable.styles'
 import { disabledColor, secondaryColor } from 'src/styling/variables'
 
-const {
+const { titleWrapper, titleAndButtonsContainer, buttonsWrapper } = baseStyles
-  titleWrapper,
-  titleAndButtonsContainer,
-  buttonsWrapper,
-  button
-} = baseStyles
 const { rowWrapper, radioButtons } = booleanPropertiesTableStyles
 
 const mainStyles = {
   titleWrapper,
   titleAndButtonsContainer,
   buttonsWrapper,
-  button,
   rowWrapper,
   radioButtons,
+  stepOneRadioButtons: {
+    '& > *': {
+      marginRight: 48
+    }
+  },
+  stepTwoRadioButtons: {
+    '& > *': {
+      minWidth: 174,
+      marginRight: 72
+    }
+  },
+  stepThreeRadioButtons: {
+    '& > *': {
+      minWidth: 160,
+      marginRight: 12
+    }
+  },
   columnWrapper: {
     display: 'flex',
-    flexDirection: 'column'
+    flexDirection: 'column',
-  },
+    height: '100%',
-  topLeftAligned: {
+    width: '100%'
-    alignSelf: 'flex-start'
   },
   bottomRightAligned: {
     alignSelf: 'flex-end',
-    marginLeft: 'auto'
+    marginLeft: 'auto',
+    marginTop: 'auto'
   },
   modal: {
     display: 'flex',
@@ -67,7 +78,7 @@ const mainStyles = {
   },
   modalBody: {
     display: 'flex',
-    flexGrow: 2
+    height: '100%'
   },
   transparentButton: {
     '& > *': {
@@ -96,39 +107,8 @@ const mainStyles = {
     alignItems: 'center',
     position: 'relative',
     flex: 'wrap',
-    marginTop: 8,
     marginBottom: 10
   },
-  unreachedStep: {
-    width: 24,
-    height: 24,
-    border: `solid 2px ${disabledColor}`,
-    borderRadius: '50%'
-  },
-  currentStep: {
-    display: 'block',
-    width: 24,
-    height: 24,
-    borderRadius: '100%',
-    backgroundColor: secondaryColor,
-    border: `2px solid ${secondaryColor}`,
-    backgroundClip: 'content-box',
-    padding: 4
-  },
-  completedStepCircle: {
-    width: 24,
-    height: 24,
-    border: `solid 2px ${secondaryColor}`,
-    borderRadius: '50%'
-  },
-  completedStepCheck: {
-    width: 6,
-    height: 10,
-    margin: '4px 7px',
-    borderBottom: `3px solid ${secondaryColor}`,
-    borderRight: `3px solid ${secondaryColor}`,
-    transform: 'rotate(45deg)'
-  },
   unreachedStepLine: {
     width: 24,
     height: 2,