diff --git a/new-lamassu-admin/src/pages/Triggers/NewTriggerWizard.js b/new-lamassu-admin/src/pages/Triggers/NewTriggerWizard.js
index 244c1420..8d46e6bf 100644
--- a/new-lamassu-admin/src/pages/Triggers/NewTriggerWizard.js
+++ b/new-lamassu-admin/src/pages/Triggers/NewTriggerWizard.js
@@ -262,7 +262,7 @@ const SelectTriggerRequirements = () => {
)
}
-const Wizard = ({ finish, children }) => {
+const Wizard = ({ nextStepText, finalStepText, finish, children }) => {
const [currentStepIndex, setCurrentStepIndex] = useState(0)
const classes = useStyles()
@@ -278,14 +278,42 @@ const Wizard = ({ finish, children }) => {
}
const currentStep = children[currentStepIndex]
+ const finalStepIndex = children.length - 1
+ const isFinalStep = currentStepIndex === finalStepIndex
return (
<>
-
{currentStep}
+
+
+ {children.map((e, i) => {
+ const elementToRender = []
+
+ if (i < currentStepIndex)
+ elementToRender.push(
+
+ )
+ else if (i === currentStepIndex)
+ elementToRender.push(
)
+ else elementToRender.push(
)
+
+ if (i < currentStepIndex)
+ elementToRender.push(
)
+ else if (i < finalStepIndex)
+ elementToRender.push(
+
+ )
+
+ return elementToRender
+ })}
+
+ {currentStep}
+
@@ -334,7 +362,10 @@ const NewTriggerWizard = ({ finish }) => {
-
+
diff --git a/new-lamassu-admin/src/pages/Triggers/Triggers.styles.js b/new-lamassu-admin/src/pages/Triggers/Triggers.styles.js
index 3115111d..ec2bdaa5 100644
--- a/new-lamassu-admin/src/pages/Triggers/Triggers.styles.js
+++ b/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}`
}
}