refactor: standardize view headings across all components #207

Merged
jose merged 6 commits from view-headings-refresh into master 2025-10-07 09:17:05 +00:00
3 changed files with 41 additions and 60 deletions
Showing only changes of commit 88778a167c - Show all commits

View File

@@ -1,6 +1,5 @@
<template>
<QuickNav selected="Profile" />
<TopMessage />

Is there a reason this is removed? (You can see what it should show if you go to the Profile page, then Advanced, then turn on either of the "Show warning" toggles.) It's removed from many files.

I don't mind if we have to reconsider how we show that warning, but I think it's still useful. Explain more if you think we should totally get rid of it.

Is there a reason this is removed? (You can see what it should show if you go to the Profile page, then Advanced, then turn on either of the "Show warning" toggles.) It's removed from many files. I don't mind if we have to reconsider how we show that warning, but I think it's still useful. Explain more if you think we should totally get rid of it.
Outdated
Review

Ahh, my bad. I should've only removed the help button from TopMessage. But now that you mention it, I should relocate the message itself to the inside of #Content for proper positioning, andgive it a bit of styling. I'll rectify this shortly.

Ahh, my bad. I should've only removed the help button from `TopMessage`. But now that you mention it, I should relocate the message itself to the inside of `#Content` for proper positioning, andgive it a bit of styling. I'll rectify this shortly.
<!-- CONTENT -->
<main
@@ -9,10 +8,19 @@
role="main"
aria-label="Account Profile"
>
<!-- Heading -->
<h1 id="ViewHeading" class="text-4xl text-center font-light">
Your Identity
</h1>
<!-- Main View Heading -->
<div class="flex gap-4 items-center mb-8">
<h1 id="ViewHeading" class="text-2xl font-bold leading-none">
Your Identity
</h1>
<router-link
:to="{ name: 'help' }"
class="block ms-auto text-sm text-center text-white bg-gradient-to-b from-blue-400 to-blue-700 shadow-[inset_0_-1px_0_0_rgba(0,0,0,0.5)] p-1.5 rounded-full"
>
<font-awesome icon="question" class="block text-center w-[1em]" />
</router-link>
</div>
<!-- ID notice -->
<div

View File

@@ -1,26 +1,24 @@
<template>
<!-- CONTENT -->
<section id="Content" class="p-6 pb-24 max-w-3xl mx-auto">
<div class="mb-2">
<h1 class="text-2xl text-center font-semibold relative px-7">
<!-- Back -->
<a
class="text-lg text-center px-2 py-1 absolute -left-2 -top-1"
@click="handleBack"
>
<font-awesome icon="chevron-left" class="fa-fw" />
</a>
<!-- Quick Help -->
<a
class="text-2xl text-center text-blue-500 px-2 py-1 absolute -right-2 -top-1"
@click="toastQRCodeHelp()"
>
<font-awesome icon="circle-question" class="fa-fw" />
</a>
<!-- Sub View Heading -->
<div class="flex gap-4 items-center mb-8">
<!-- Back -->
<a class="text-lg text-center leading-none p-1" @click="handleBack">
<font-awesome icon="chevron-left" class="w-[1em]" />
</a>
<h1 class="grow text-xl text-center font-semibold leading-none">
Share Contact Info
</h1>
<!-- Quick Help -->
<a
class="block text-sm text-center text-white bg-gradient-to-b from-blue-400 to-blue-700 shadow-[inset_0_-1px_0_0_rgba(0,0,0,0.5)] p-1.5 rounded-full"
@click="toastQRCodeHelp()"
>
<font-awesome icon="question" class="block text-center w-[1em]" />
</a>
</div>
<div v-if="!givenName" :class="nameWarningClasses">

View File

@@ -14,45 +14,20 @@ Raymer * @version 1.0.0 */
:data-active-did="activeDid"
>
<!-- Main View Heading -->
<div class="mb-12">
<div class="absolute top-0 inset-x-0">
<div class="flex gap-4 items-center px-6 py-4 max-w-3xl mx-auto">
<h1 id="ViewHeading" class="text-2xl font-bold leading-none">
{{ AppString.APP_NAME }}
<span class="text-xs font-medium text-slate-500 uppercase">{{
package.version
}}</span>
</h1>
<div class="flex gap-4 items-center mb-8">
<h1 id="ViewHeading" class="text-2xl font-bold leading-none">
{{ AppString.APP_NAME }}
<span class="text-xs font-medium text-slate-500 uppercase">{{
package.version
}}</span>
</h1>
<router-link
:to="{ name: 'help' }"
class="block ms-auto text-sm text-center text-white bg-gradient-to-b from-blue-400 to-blue-700 shadow-[inset_0_-1px_0_0_rgba(0,0,0,0.5)] p-1.5 rounded-full"
>
<font-awesome icon="question" class="block text-center w-[1em]" />
</router-link>
</div>
</div>
</div>
<!-- Main View Heading - Alternate Bar Design -->
<div v-if="false" class="mb-12">
<div class="absolute top-0 inset-x-0 bg-slate-200">
<div class="flex gap-2 items-center px-6 py-3 max-w-3xl mx-auto">
<h1 id="ViewHeading" class="text-2xl font-light leading-none">
{{ AppString.APP_NAME }}
<span class="text-xs font-medium text-slate-500 uppercase">{{
package.version
}}</span>
</h1>
<router-link
:to="{ name: 'help' }"
class="block ms-auto text-sm text-center text-white bg-gradient-to-b from-blue-400 to-blue-700 shadow-[inset_0_-1px_0_0_rgba(0,0,0,0.5)] p-1.5 rounded-full"
>
<font-awesome icon="question" class="block text-center w-[1em]" />
</router-link>
</div>
</div>
<router-link
:to="{ name: 'help' }"
class="block ms-auto text-sm text-center text-white bg-gradient-to-b from-blue-400 to-blue-700 shadow-[inset_0_-1px_0_0_rgba(0,0,0,0.5)] p-1.5 rounded-full"
>
<font-awesome icon="question" class="block text-center w-[1em]" />
</router-link>
</div>
<OnboardingDialog ref="onboardingDialog" />