WIP: sub view heading adjustments

src/views/AccountViewView.vue

@@ -1,6 +1,5 @@
 <template>
   <QuickNav selected="Profile" />
-  <TopMessage />
 
   <!-- 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

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">
-      <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">

src/views/HomeView.vue

@@ -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>
-
-          <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>
+    <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>
 
-    <!-- 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" />