From 31eb9ea640a8d796f39de5cfb72db112fd2172bb Mon Sep 17 00:00:00 2001
From: Jin Yi <jin12cc@gmail.com>
Date: Fri, 17 Oct 2025 08:11:13 +0900
Subject: [PATCH] [fix] Improve cloud waitlist view UX with signed-in user
 display (#6071)
MIME-Version: 1.0
Content-Type: text/plain; charset=UTF-8
Content-Transfer-Encoding: 8bit

## Summary
- Display signed-in user email in waitlist view for better user clarity
- Add switch accounts option for users on waitlist to change their
account
- Simplify claim invite view by removing avatar box and reorganizing
layout

## Changes Made

### CloudWaitlistView.vue
- Added display of signed-in user email
- Added "Switch accounts" option with navigation to cloud-login
- Improved visual hierarchy and styling for better readability

### CloudClaimInviteView.vue
- Removed avatar box component to simplify UI
- Moved "Switch accounts" link below user info section
- Reorganized layout for better flow

## Test Plan
- [ ] Verify waitlist view displays signed-in user email correctly
- [ ] Test "Switch accounts" navigation works in both views
- [ ] Confirm visual changes display properly in both light/dark themes
- [ ] Ensure no regressions in cloud onboarding flow

🤖 Generated with [Claude Code](https://claude.ai/code)

┆Issue is synchronized with this [Notion
page](https://www.notion.so/PR-6071-fix-Improve-cloud-waitlist-view-UX-with-signed-in-user-display-28d6d73d365081618c19cfb56f4a12b6)
by [Unito](https://www.unito.io)

Co-authored-by: Claude <noreply@anthropic.com>
---
 .../onboarding/cloud/CloudClaimInviteView.vue | 32 +++++---------
 .../onboarding/cloud/CloudWaitlistView.vue    | 44 ++++++++++++++++---
 2 files changed, 49 insertions(+), 27 deletions(-)

diff --git a/src/platform/onboarding/cloud/CloudClaimInviteView.vue b/src/platform/onboarding/cloud/CloudClaimInviteView.vue
index 5cd9a6567..f858732ba 100644
--- a/src/platform/onboarding/cloud/CloudClaimInviteView.vue
+++ b/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="
diff --git a/src/platform/onboarding/cloud/CloudWaitlistView.vue b/src/platform/onboarding/cloud/CloudWaitlistView.vue
index 8bc738554..9a4f0d120 100644
--- a/src/platform/onboarding/cloud/CloudWaitlistView.vue
+++ b/src/platform/onboarding/cloud/CloudWaitlistView.vue
@@ -1,15 +1,39 @@
 <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>
@@ -17,10 +41,20 @@
 <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 () => {