From dfe7a63ad3a493a20e0ee027d64735d10c64982b Mon Sep 17 00:00:00 2001
From: "bert.hausmans" <bert@hausmans.nl>
Date: Fri, 10 Apr 2026 21:45:26 +0200
Subject: [PATCH] fix(portal): match registration wizard sidebar to Vuexy
 vertical wizard pattern

- Replace bg-primary block on active step with Vuexy number-square pattern:
  40x40 rounded-lg squares with primary/tonal/grey backgrounds per state
- Remove outer VCard wrapper so sidebar sits on page background
- Wrap right content column in its own VCard for clear visual separation
- Use text-overline for "AANMELDEN" label, 28px gap between steps
- Active step: primary square + primary text + subtitle visible
- Completed steps: tonal primary square with checkmark + muted text
- Future steps: grey square + muted text, no subtitle
- Mobile chips wrapped in their own card for consistency

Co-Authored-By: Claude Opus 4.6 (1M context) <noreply@anthropic.com>
---
 .../portal/src/pages/register/[eventSlug].vue | 162 ++++++++++--------
 1 file changed, 92 insertions(+), 70 deletions(-)

diff --git a/apps/portal/src/pages/register/[eventSlug].vue b/apps/portal/src/pages/register/[eventSlug].vue
index 2cb3cb96..1f3dd79b 100644
--- a/apps/portal/src/pages/register/[eventSlug].vue
+++ b/apps/portal/src/pages/register/[eventSlug].vue
@@ -481,78 +481,95 @@ async function onSubmit() {
         {{ submitError }}
       </VAlert>
 
-      <!-- Wizard card -->
-      <VCard variant="flat">
-        <VRow no-gutters>
-          <!-- Desktop: vertical step navigation -->
-          <VCol
-            v-if="mdAndUp"
-            cols="3"
-            class="border-e"
-          >
-            <div class="pa-4">
-              <h4 class="text-subtitle-1 font-weight-bold text-uppercase text-medium-emphasis mb-4">
-                Aanmelden
-              </h4>
+      <!-- Wizard -->
+      <VRow no-gutters>
+        <!-- Desktop: vertical step navigation -->
+        <VCol
+          v-if="mdAndUp"
+          cols="12"
+          md="3"
+        >
+          <div class="pa-6">
+            <div class="text-overline text-medium-emphasis mb-6">
+              AANMELDEN
+            </div>
 
-              <div class="d-flex flex-column ga-1">
+            <div
+              class="d-flex flex-column"
+              style="gap: 28px;"
+            >
+              <div
+                v-for="(step, index) in steps"
+                :key="index"
+                class="d-flex align-center ga-4"
+                :class="{ 'cursor-pointer': index < currentStep }"
+                @click="goToStep(index)"
+              >
+                <!-- Number square -->
                 <div
-                  v-for="(step, index) in steps"
-                  :key="index"
-                  class="d-flex align-center ga-3 pa-3 rounded-lg"
-                  :class="{
-                    'bg-primary': index === currentStep,
-                    'cursor-pointer': index < currentStep,
+                  class="d-flex align-center justify-center rounded-lg flex-shrink-0"
+                  :style="{
+                    width: '40px',
+                    height: '40px',
+                    backgroundColor: index === currentStep
+                      ? 'rgb(var(--v-theme-primary))'
+                      : index < currentStep
+                        ? 'rgba(var(--v-theme-primary), 0.16)'
+                        : 'rgba(var(--v-theme-on-surface), 0.08)',
+                    color: index === currentStep
+                      ? 'white'
+                      : index < currentStep
+                        ? 'rgb(var(--v-theme-primary))'
+                        : 'rgba(var(--v-theme-on-surface), 0.4)',
+                    transition: 'all 0.2s ease',
                   }"
-                  @click="goToStep(index)"
                 >
-                  <VAvatar
-                    size="28"
-                    :color="index < currentStep ? 'success' : index === currentStep ? 'white' : 'grey-lighten-2'"
-                    :variant="index === currentStep ? 'flat' : 'tonal'"
+                  <VIcon
+                    v-if="index < currentStep"
+                    size="18"
                   >
-                    <VIcon
-                      v-if="index < currentStep"
-                      size="16"
-                      color="white"
-                    >
-                      tabler-check
-                    </VIcon>
-                    <span
-                      v-else
-                      class="text-caption font-weight-bold"
-                      :style="index === currentStep ? `color: rgb(var(--v-theme-primary))` : ''"
-                    >
-                      {{ index + 1 }}
-                    </span>
-                  </VAvatar>
+                    tabler-check
+                  </VIcon>
+                  <span
+                    v-else
+                    class="text-body-1 font-weight-bold"
+                  >{{ index + 1 }}</span>
+                </div>
 
-                  <div>
-                    <div
-                      class="text-body-2 font-weight-medium"
-                      :style="index === currentStep ? 'color: white' : ''"
-                    >
-                      {{ step.title }}
-                    </div>
-                    <div
-                      v-if="index === currentStep"
-                      class="text-caption"
-                      style="color: rgba(255,255,255,0.7);"
-                    >
-                      {{ step.subtitle }}
-                    </div>
+                <!-- Step text -->
+                <div>
+                  <div
+                    class="text-body-1 font-weight-medium"
+                    :class="{
+                      'text-primary': index === currentStep,
+                      'text-medium-emphasis': index !== currentStep,
+                    }"
+                  >
+                    {{ step.title }}
+                  </div>
+                  <div
+                    v-if="index === currentStep"
+                    class="text-caption text-medium-emphasis"
+                  >
+                    {{ step.subtitle }}
                   </div>
                 </div>
               </div>
             </div>
-          </VCol>
+          </div>
+        </VCol>
 
-          <!-- Mobile: horizontal chips -->
-          <VCol
-            v-if="!mdAndUp"
-            cols="12"
+        <!-- Mobile: horizontal chips -->
+        <VCol
+          v-if="!mdAndUp"
+          cols="12"
+        >
+          <VCard
+            variant="flat"
+            rounded="lg"
+            class="mb-4"
           >
-            <div class="d-flex justify-center flex-wrap ga-2 pa-4 border-b">
+            <div class="d-flex justify-center flex-wrap ga-2 pa-4">
               <VChip
                 v-for="(step, index) in steps"
                 :key="index"
@@ -570,14 +587,19 @@ async function onSubmit() {
                 <span>{{ index + 1 }}. {{ step.title }}</span>
               </VChip>
             </div>
-          </VCol>
+          </VCard>
+        </VCol>
 
-          <!-- Step content -->
-          <VCol
-            cols="12"
-            :md="mdAndUp ? 9 : 12"
+        <!-- Step content -->
+        <VCol
+          cols="12"
+          :md="mdAndUp ? 9 : 12"
+        >
+          <VCard
+            variant="flat"
+            rounded="lg"
           >
-            <div class="pa-6">
+            <VCardText class="pa-6">
               <!-- Step header -->
               <div class="mb-6">
                 <h5 class="text-h5 mb-1">
@@ -937,10 +959,10 @@ async function onSubmit() {
                   Aanmelding versturen
                 </VBtn>
               </div>
-            </div>
-          </VCol>
-        </VRow>
-      </VCard>
+            </VCardText>
+          </VCard>
+        </VCol>
+      </VRow>
 
       <!-- Footer -->
       <div class="text-center pa-4 text-caption text-medium-emphasis">