Fixes/minor

web-app/src/containers/Tutorial/components/StepProgress.tsx

@@ -9,13 +9,14 @@ const styles = {
     display: 'flex' as 'flex',
     justifyContent: 'flex-end' as 'flex-end',
     alignItems: 'center' as 'center',
-    width: '10rem',
+    width: '150px',
     color: theme['$color-white'],
+    marginRight: '-16px',
   }),
   text: (theme: Theme) => ({
     color: theme['$color-white'],
-    marginRight: '0.5rem',
-    fontSize: '80%',
+    marginRight: '5px',
+    fontSize: '10px',
   }),
 }
 
@@ -28,7 +29,11 @@ const StepProgress = (props: Props) => {
   const theme: Theme = useTheme()
   const isWide = useMedia({ minWidth: '340px' })
 
-  const Text = `${props.current} of ${props.max}`
+  const Text = (
+    <span style={styles.text(theme)}>
+      {props.current} of {props.max}
+    </span>
+  )
 
   if (isWide) {
     return (

web-app/src/containers/Tutorial/formatLevels.ts

@@ -36,6 +36,10 @@ const formatLevels = ({ position, levels, testStatus }: Input): Output => {
     stepIndex = levels[levelIndex].steps.length
   }
 
+  if (position.complete) {
+    stepIndex += 1
+  }
+
   // current level
   const levelUI: T.LevelUI = {
     ...currentLevel,
@@ -44,7 +48,7 @@ const formatLevels = ({ position, levels, testStatus }: Input): Output => {
       // label step status for step component
       let status: T.ProgressStatus = 'INCOMPLETE'
       let subtasks
-      if (index < stepIndex || (index === stepIndex && position.complete)) {
+      if (index < stepIndex) {
         status = 'COMPLETE'
       } else if (index === stepIndex) {
         status = 'ACTIVE'

web-app/src/containers/Tutorial/index.tsx

@@ -181,7 +181,7 @@ const TutorialPage = (props: PageProps) => {
           )}
           {/* Left */}
           <div css={{ flex: 1 }}>
-            {DISPLAY_RUN_TEST_BUTTON && level.status !== 'COMPLETE' ? (
+            {DISPLAY_RUN_TEST_BUTTON && level.steps.length && level.status !== 'COMPLETE' ? (
               <Button
                 style={{ marginLeft: '1rem', width: '57px' }}
                 type="primary"
@@ -221,7 +221,7 @@ const TutorialPage = (props: PageProps) => {
                 />
               </div>
             ) : level.steps.length > 1 ? (
-              <StepProgress current={stepIndex + 1} max={level.steps.length} />
+              <StepProgress current={stepIndex} max={level.steps.length} />
             ) : null}
           </div>
         </footer>