Walk Create Community through the Figma screens and restore a chosen logo after reload, so a guest can leave without saving until they reach the email step.

app/components/progress/ProportionBar/ProportionBar.types.ts

@@ -7,6 +7,9 @@ export type ProportionBarState =
   | "1-3"
   | "1-4"
   | "1-5"
+  | "1-6"
+  | "1-7"
+  | "1-8"
   | "2-0"
   | "2-1"
   | "2-2"

app/components/progress/ProportionBar/ProportionBar.view.tsx

@@ -27,13 +27,13 @@ export function ProportionBarView({
   // Proportion bar type
   const [fullSegments, partialSegment] = progress.split("-").map(Number);
   // Calculate total progress:
-  // - For 1-X: first section is (X+1)/6 filled
+  // - For 1-X: first section is (X+1)/9 filled (intro 1-0 through review 1-8)
   // - For 2-X: first section full, second section filled per Figma ratios (see `SECOND_SEGMENT_FILL_RATIO`)
   // - For 3-X: first two sections full, third section X/3 filled
   // Max is 3 full segments = 9 units
   let totalProgress = 0;
   if (fullSegments === 1) {
-    totalProgress = (partialSegment + 1) / 6; // 1/6 to 6/6 of first section
+    totalProgress = (partialSegment + 1) / 9; // 1/9 to 9/9 of first section
   } else if (fullSegments === 2) {
     totalProgress = 1 + getSecondSegmentFillRatio(partialSegment);
   } else if (fullSegments === 3) {
@@ -53,7 +53,7 @@ export function ProportionBarView({
         ? `Progress: ${fullSegments} segments, ${partialSegment} of 3 parts filled (${progressPercentage}%)`
         : fullSegments === 2
           ? `Progress: ${fullSegments} segments, ${partialSegment} of 3 parts filled (${progressPercentage}%)`
-          : `Progress: ${fullSegments} segment, ${partialSegment + 1} of 6 parts filled (${progressPercentage}%)`;
+          : `Progress: ${fullSegments} segment, ${partialSegment + 1} of 9 parts filled (${progressPercentage}%)`;
 
   return (
     <div
@@ -78,12 +78,12 @@ export function ProportionBarView({
         background capsule.
       */}
       <div className="absolute inset-0 flex gap-[var(--space-200)] px-[4px] overflow-hidden">
-        {/* First section - for 1-X: (X+1)/6 filled, for 2-X and 3-X: fully filled */}
+        {/* First section - for 1-X: (X+1)/9 filled, for 2-X and 3-X: fully filled */}
         <div className="flex-1 h-full relative">
           {fullSegments === 1 ? (
             <div
               className="absolute inset-y-0 left-0 bg-[var(--color-content-default-brand-primary)] rounded-l-[var(--radius-full)]"
-              style={{ width: `${((partialSegment + 1) / 6) * 100}%` }}
+              style={{ width: `${((partialSegment + 1) / 9) * 100}%` }}
             />
           ) : fullSegments >= 2 ? (
             <div className="absolute inset-0 bg-[var(--color-content-default-brand-primary)] rounded-l-[var(--radius-full)]" />