[fix] Improve cloud waitlist view UX with signed-in user display

src/platform/onboarding/cloud/CloudClaimInviteView.vue

@@ -34,14 +34,6 @@
           {{ t('cloudInvite_contactLink_suffix') }}</span
         >
       </div>
-      <div>
-        <span
-          class="cursor-pointer text-blue-400 no-underline"
-          @click="onSwitchAccounts"
-        >
-          {{ t('cloudInvite_switchAccounts') }}</span
-        >
-      </div>
 
       <!-- Signed in as -->
       <section class="mt-10">
@@ -50,27 +42,23 @@
         </p>
 
         <div class="mt-4 flex flex-col items-center justify-center gap-4">
-          <!-- Avatar box -->
-          <div
-            class="relative grid h-28 w-28 place-items-center rounded-2xl border border-neutral-700 bg-neutral-800 shadow-inner"
-          >
-            <span class="text-5xl font-semibold select-none">{{
-              userInitial
-            }}</span>
-            <!-- subtle ring to mimic screenshot gradient border -->
-            <span
-              class="pointer-events-none absolute inset-0 rounded-2xl ring-1 ring-neutral-600/40 ring-inset"
-            ></span>
-          </div>
-
           <div class="text-left">
-            <div class="text-sm break-all">
+            <div class="font-bold break-all">
               {{ userEmail }}
             </div>
           </div>
         </div>
       </section>
 
+      <div class="mt-4">
+        <span
+          class="cursor-pointer text-blue-400 no-underline"
+          @click="onSwitchAccounts"
+        >
+          {{ t('cloudInvite_switchAccounts') }}</span
+        >
+      </div>
+
       <Button
         type="button"
         :label="
@@ -106,7 +94,7 @@
 const { userEmail } = useFirebaseAuthStore()
 
 const inviteCode = computed(() => route.query.inviteCode as string)
 const userInitial = computed(() => (userEmail?.[0] || 'U').toUpperCase())
 
 const onSwitchAccounts = () => {
   void router.push({

src/platform/onboarding/cloud/CloudWaitlistView.vue

@@ -1,26 +1,60 @@
 <template>
   <div class="flex flex-col items-center justify-center p-8">
     <div class="w-full max-w-md text-center">
-      <h1 class="font-abcrom hero-title font-black uppercase italic">
+      <h1
+        class="font-abcrom my-0 text-3xl font-black text-white uppercase italic"
+      >
         {{ t('cloudWaitlist_titleLine1') }}<br />
         {{ t('cloudWaitlist_titleLine2') }}
       </h1>
-      <div class="m-auto max-w-[320px] text-lg font-light">
-        <p class="text-white">
-          {{ t('cloudWaitlist_message') }}
-        </p>
+      <p class="mt-6 leading-relaxed text-neutral-300">
+        {{ t('cloudWaitlist_message') }}
+      </p>
+    </div>
+
+    <!-- Signed in as -->
+    <section class="mt-10">
+      <p class="text-center text-sm">
+        {{ t('cloudInvite_signedInAs') }}
+      </p>
+
+      <div class="mt-4 flex flex-col items-center justify-center gap-4">
+        <div class="text-left">
+          <div class="font-bold break-all">
+            {{ userEmail }}
+          </div>
+        </div>
       </div>
+    </section>
+
+    <div class="mt-4">
+      <span
+        class="cursor-pointer text-blue-400 no-underline"
+        @click="onSwitchAccounts"
+      >
+        {{ t('cloudInvite_switchAccounts') }}</span
+      >
     </div>
   </div>
 </template>
 
 <script setup lang="ts">
 import { onMounted } from 'vue'
 import { useI18n } from 'vue-i18n'
+import { useRouter } from 'vue-router'
 
 import { getUserCloudStatus } from '@/api/auth'
+import { useFirebaseAuthStore } from '@/stores/firebaseAuthStore'
 
 const { t } = useI18n()
+const { userEmail } = useFirebaseAuthStore()
+const router = useRouter()
+
+const onSwitchAccounts = () => {
+  void router.push({
+    name: 'cloud-login'
+  })
+}
 
 // Check if user is whitelisted on mount
 onMounted(async () => {