WIP: HomeView heading adjustments

src/views/HomeView.vue

@@ -6,7 +6,6 @@ Raymer * @version 1.0.0 */
 
 <template>
   <QuickNav selected="Home" />
-  <TopMessage />
 
   <!-- CONTENT -->
   <section
@@ -14,10 +13,47 @@ Raymer * @version 1.0.0 */
     class="p-6 pb-24 max-w-3xl mx-auto"
     :data-active-did="activeDid"
   >
-    <h1 id="ViewHeading" class="text-4xl text-center font-light mb-8">
-      {{ AppString.APP_NAME }}
-      <span class="text-xs text-gray-500">{{ package.version }}</span>
-    </h1>
+    <!-- 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>
+
+    <!-- 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" />
 
@@ -97,9 +133,9 @@ Raymer * @version 1.0.0 */
           <!-- Record Quick-Action -->
           <div class="mb-6">
             <div class="flex gap-2 items-center mb-2">
-              <h2 class="text-xl font-bold">Record something given by:</h2>
+              <h2 class="font-bold">Record something given by:</h2>
               <button
-                class="block ms-auto text-center text-white bg-gradient-to-b from-slate-400 to-slate-700 shadow-[inset_0_-1px_0_0_rgba(0,0,0,0.5)] p-2 rounded-full"
+                class="block ms-auto text-sm text-center text-white bg-gradient-to-b from-slate-400 to-slate-700 shadow-[inset_0_-1px_0_0_rgba(0,0,0,0.5)] p-1.5 rounded-full"
                 @click="openGiftedPrompts()"
               >
                 <font-awesome
@@ -143,10 +179,10 @@ Raymer * @version 1.0.0 */
     <!-- Results List -->
     <div class="mt-4 mb-4">
       <div class="flex gap-2 items-center mb-3">
-        <h2 class="text-xl font-bold">Latest Activity</h2>
+        <h2 class="font-bold">Latest Activity</h2>
         <button
           v-if="resultsAreFiltered()"
-          class="block ms-auto 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-2 rounded-full"
+          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"
           @click="openFeedFilters()"
         >
           <font-awesome
@@ -156,7 +192,7 @@ Raymer * @version 1.0.0 */
         </button>
         <button
           v-else
-          class="block ms-auto text-center text-white bg-gradient-to-b from-slate-400 to-slate-700 shadow-[inset_0_-1px_0_0_rgba(0,0,0,0.5)] p-2 rounded-full"
+          class="block ms-auto text-sm text-center text-white bg-gradient-to-b from-slate-400 to-slate-700 shadow-[inset_0_-1px_0_0_rgba(0,0,0,0.5)] p-1.5 rounded-full"
           @click="openFeedFilters()"
         >
           <font-awesome