From 7f5a64dceb6ccf5e5c8f42a66332202ea1500f18 Mon Sep 17 00:00:00 2001
From: Jose Olarte III <brownspank@anomalistdesign.com>
Date: Thu, 21 Aug 2025 17:22:33 +0800
Subject: [PATCH] UI: update HomeView onboard alert style

- Style-wise, make it consistent with similar alerts
- Introduce visual hierarchy to buttons
- Responsive button layout
---
 src/views/HomeView.vue | 43 +++++++++++++++++++++---------------------
 1 file changed, 21 insertions(+), 22 deletions(-)

diff --git a/src/views/HomeView.vue b/src/views/HomeView.vue
index 4aa3523d..935a47ff 100644
--- a/src/views/HomeView.vue
+++ b/src/views/HomeView.vue
@@ -86,30 +86,29 @@ Raymer * @version 1.0.0 */
       Identity creation is now handled by router navigation guard.
       -->
       <div class="mb-4">
-        <div
-          v-if="!isUserRegistered"
-          id="noticeSomeoneMustRegisterYou"
-          class="bg-amber-200 rounded-md overflow-hidden text-center px-4 py-3 mb-4"
-        >
-          To share, someone must register you.
-          <div class="block text-center">
-            <button
-              class="text-md font-bold bg-gradient-to-b from-blue-400 to-blue-700 shadow-[inset_0_-1px_0_0_rgba(0,0,0,0.5)] text-white mt-2 px-2 py-3 rounded-md"
-              @click="showNameThenIdDialog()"
-            >
-              Show them {{ PASSKEYS_ENABLED ? "default" : "your" }} identifier
-              info
-            </button>
+        <div v-if="!isUserRegistered" class="my-4">
+          <div
+            id="noticeSomeoneMustRegisterYou"
+            class="bg-amber-200 text-amber-900 border-amber-500 border-dashed border text-center rounded-md overflow-hidden px-4 py-3"
+          >
+            <p class="mb-4">To share, someone must register you.</p>
+            <div class="grid grid-cols-1 gap-2 sm:flex sm:justify-center">
+              <button
+                class="inline-block text-md font-bold bg-gradient-to-b from-blue-400 to-blue-700 shadow-[inset_0_-1px_0_0_rgba(0,0,0,0.5)] text-white px-4 py-2 rounded-md"
+                @click="showNameThenIdDialog()"
+              >
+                Show them {{ PASSKEYS_ENABLED ? "default" : "your" }} identifier
+                info
+              </button>
+              <router-link
+                :to="{ name: 'start' }"
+                class="inline-block text-md bg-gradient-to-b from-slate-400 to-slate-700 shadow-[inset_0_-1px_0_0_rgba(0,0,0,0.5)] text-white px-4 py-2 rounded-md"
+              >
+                See advanced options
+              </router-link>
+            </div>
           </div>
           <UserNameDialog ref="userNameDialog" />
-          <div class="flex justify-end w-full">
-            <router-link
-              :to="{ name: 'start' }"
-              class="block text-right text-md font-bold bg-gradient-to-b from-blue-400 to-blue-700 shadow-[inset_0_-1px_0_0_rgba(0,0,0,0.5)] text-white mt-2 px-2 py-3 rounded-md"
-            >
-              See advanced options
-            </router-link>
-          </div>
         </div>
 
         <div v-else id="sectionRecordSomethingGiven">