Add success icon on previous completed steps

packages/xpub-faraday/app/component-wizard/components/Steps.js

@@ -8,7 +8,8 @@ const Separator = () => <div className={classes.separator} />
 
 const Step = ({ title, index, currentStep }) => (
   <div className={classes.step}>
-    {index <= currentStep && <div className={classes.bullet} />}
+    {index === currentStep && <div className={classes.bullet} />}
+    {index < currentStep && <div className={classes.success}>✓</div>}
     <span className={classes.stepTitle}>{`${index + 1}. ${title}`}</span>
   </div>
 )

packages/xpub-faraday/app/component-wizard/components/Steps.local.scss

@@ -8,7 +8,7 @@
 }
 
 .separator {
-  background-color: #444;
+  background-color: #555;
   flex: 1;
   height: 2px;
 }
@@ -39,3 +39,15 @@
   white-space: normal;
   width: 120px;
 }
+
+.success {
+  align-items: center;
+  background-color: #555;
+  border-radius: 50%;
+  color: #fff;
+  display: flex;
+  font-size: 12px;
+  height: 18px;
+  justify-content: center;
+  width: 18px;
+}

packages/xpub-faraday/app/component-wizard/components/Wizard.js

@@ -29,7 +29,7 @@ const Wizard = ({ journal: { wizard }, getSteps, step, incrementStep }) => (
 
 export default compose(
   withJournal,
-  withState('step', 'changeStep', 0),
+  withState('step', 'changeStep', 1),
   withHandlers({
     getSteps: ({ journal: { wizard } }) => () => wizard.map(w => w.label),
     incrementStep: ({ changeStep }) => () => changeStep(step => step + 1),