feat: added a steps indicator in the wizard component

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

@@ -1,5 +1,6 @@
 import baseStyles from 'src/pages/Logs.styles'
 import { booleanPropertiesTableStyles } from 'src/components/booleanPropertiesTable/BooleanPropertiesTable.styles'
+import { disabledColor, secondaryColor } from 'src/styling/variables'
 
 const {
   titleWrapper,
@@ -89,6 +90,54 @@ const mainStyles = {
     width: 96,
     height: 40,
     marginRight: 8
+  },
+  wizardStepsWrapper: {
+    display: 'flex',
+    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,
+    border: `solid 1px ${disabledColor}`
+  },
+  reachedStepLine: {
+    width: 24,
+    height: 2,
+    border: `solid 1px ${secondaryColor}`
   }
 }