WIP: sub view heading adjustments

src/views/AccountViewView.vue

@@ -1,6 +1,5 @@
 <template>
   <QuickNav selected="Profile" />
-  <TopMessage />
 
   <!-- CONTENT -->
   <main
@@ -9,11 +8,20 @@
     role="main"
     aria-label="Account Profile"
   >
-    <!-- Heading -->
+    <!-- Main View Heading -->
-    <h1 id="ViewHeading" class="text-4xl text-center font-light">
+    <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
       v-if="!activeDid"

src/views/ContactQRScanShowView.vue

@@ -1,26 +1,24 @@
 <template>
   <!-- CONTENT -->
   <section id="Content" class="p-6 pb-24 max-w-3xl mx-auto">
-    <div class="mb-2">
+    <!-- Sub View Heading -->
-      <h1 class="text-2xl text-center font-semibold relative px-7">
+    <div class="flex gap-4 items-center mb-8">
       <!-- Back -->
-        <a
+      <a class="text-lg text-center leading-none p-1" @click="handleBack">
-          class="text-lg text-center px-2 py-1 absolute -left-2 -top-1"
+        <font-awesome icon="chevron-left" class="w-[1em]" />
-          @click="handleBack"
-        >
-          <font-awesome icon="chevron-left" class="fa-fw" />
       </a>
 
+      <h1 class="grow text-xl text-center font-semibold leading-none">
+        Share Contact Info
+      </h1>
+
       <!-- Quick Help -->
       <a
-          class="text-2xl text-center text-blue-500 px-2 py-1 absolute -right-2 -top-1"
+        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="circle-question" class="fa-fw" />
+        <font-awesome icon="question" class="block text-center w-[1em]" />
       </a>
-
-        Share Contact Info
-      </h1>
     </div>
 
     <div v-if="!givenName" :class="nameWarningClasses">

src/views/HomeView.vue

@@ -14,9 +14,7 @@ Raymer * @version 1.0.0 */
     :data-active-did="activeDid"
   >
     <!-- Main View Heading -->
-    <div class="mb-12">
+    <div class="flex gap-4 items-center mb-8">
-      <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">{{
@@ -31,29 +29,6 @@ Raymer * @version 1.0.0 */
         <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>
-    </div>
 
     <OnboardingDialog ref="onboardingDialog" />