jsnbuchanan/crowd-funder-for-time-pwa
1
0
Fork 1
forked from trent_larson/crowd-funder-for-time-pwa
Code Issues Pull Requests Projects Releases Wiki Activity

UI: update HomeView onboard alert style

Browse Source 
- Style-wise, make it consistent with similar alerts
- Introduce visual hierarchy to buttons
- Responsive button layout
This commit is contained in:
Jose Olarte III
2025-08-21 17:22:33 +08:00
parent 6afe1c4c13
commit 7f5a64dceb
1 changed files with 21 additions and 22 deletions
Download Patch File Download Diff File Expand all files Collapse all files

43
src/views/HomeView.vue
View File

@@ -86,30 +86,29 @@ Raymer * @version 1.0.0 */
Identity creation is now handled by router navigation guard. Identity creation is now handled by router navigation guard.
--> -->
<div class="mb-4"> <div class="mb-4">
<div <div v-if="!isUserRegistered" class="my-4">
v-if="!isUserRegistered" <div
id="noticeSomeoneMustRegisterYou" id="noticeSomeoneMustRegisterYou"
class="bg-amber-200 rounded-md overflow-hidden text-center px-4 py-3 mb-4" class="bg-amber-200 text-amber-900 border-amber-500 border-dashed border text-center rounded-md overflow-hidden px-4 py-3"
> >
To share, someone must register you. <p class="mb-4">To share, someone must register you.</p>
<div class="block text-center"> <div class="grid grid-cols-1 gap-2 sm:flex sm:justify-center">
<button <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" 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()" @click="showNameThenIdDialog()"
> >
Show them {{ PASSKEYS_ENABLED ? "default" : "your" }} identifier Show them {{ PASSKEYS_ENABLED ? "default" : "your" }} identifier
info info
</button> </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> </div>
<UserNameDialog ref="userNameDialog" /> <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>
<div v-else id="sectionRecordSomethingGiven"> <div v-else id="sectionRecordSomethingGiven">