diff --git a/web-app/src/containers/Tutorial/components/StepProgress.tsx b/web-app/src/containers/Tutorial/components/StepProgress.tsx index fdc7037d..796c8ed1 100644 --- a/web-app/src/containers/Tutorial/components/StepProgress.tsx +++ b/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 = ( + + {props.current} of {props.max} + + ) if (isWide) { return ( diff --git a/web-app/src/containers/Tutorial/formatLevels.ts b/web-app/src/containers/Tutorial/formatLevels.ts index 46d8aff1..724474b9 100644 --- a/web-app/src/containers/Tutorial/formatLevels.ts +++ b/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' diff --git a/web-app/src/containers/Tutorial/index.tsx b/web-app/src/containers/Tutorial/index.tsx index 5cb12c26..1ffa20d8 100644 --- a/web-app/src/containers/Tutorial/index.tsx +++ b/web-app/src/containers/Tutorial/index.tsx @@ -181,7 +181,7 @@ const TutorialPage = (props: PageProps) => { )} {/* Left */}