style(gift): center entity selection step heading and entity type toggle

Replace the floating circular plus FAB with a full-width bottom bar that
matches the inline Thank button. Wrap the quick-action section in a styled
container and raise the scroll threshold to 120px.

src/components/EntitySelectionStep.vue

@@ -8,14 +8,14 @@ notifications for conflicted entities * - Template streamlined with computed CSS
 properties * * @author Matthew Raymer */
 <template>
   <div id="sectionGiftedGiver">
-    <label class="block font-bold mb-1">
+    <label class="block font-semibold text-lg capitalize text-center">
       {{ stepLabel }}
     </label>
     <!-- Toggle link for entity type selection -->
-    <div class="text-right mb-4">
+    <div class="text-center mb-4">
       <button
         type="button"
-        class="text-sm text-blue-600 hover:text-blue-800 underline font-medium"
+        class="text-xs text-blue-600 hover:underline uppercase"
         @click="handleToggleEntityType"
       >
         {{ toggleLinkText }}

src/views/HomeView.vue

@@ -109,12 +109,14 @@ Raymer * @version 1.0.0 */
 
         <div v-if="isUserRegistered" id="sectionRecordSomethingGiven">
           <!-- Record Quick-Action -->
-          <div class="mb-6">
-            <div class="flex gap-2 items-center mb-2">
+          <div
+            class="bg-slate-100 border border-slate-300 rounded-md px-4 py-2.5 mb-4"
+          >
+            <div class="flex gap-2 justify-between items-center ps-8">
               <!-- Thank button - always visible and unchanged -->
               <button
                 type="button"
-                class="text-center text-base uppercase bg-gradient-to-b from-green-400 to-green-700 shadow-[inset_0_-1px_0_0_rgba(0,0,0,0.5)] text-white flex items-center justify-center gap-2 px-4 py-3 rounded-full"
+                class="text-center text-xl uppercase font-bold bg-gradient-to-b from-green-400 to-green-700 shadow-[inset_0_-1px_0_0_rgba(0,0,0,0.5)] text-white flex items-center justify-center gap-2 mx-auto px-6 py-2 rounded-lg"
                 @click="openPersonDialog()"
               >
                 <font-awesome icon="plus" />
@@ -122,25 +124,29 @@ Raymer * @version 1.0.0 */
               </button>
               <!-- Plus button - appears when scrolled, positioned over house-chimney icon -->
               <transition
-                enter-active-class="transition-all duration-1000 ease-out"
-                leave-active-class="transition-all duration-1000 ease-in"
-                enter-from-class="scale-0"
-                enter-to-class="scale-100"
-                leave-from-class="scale-100"
-                leave-to-class="scale-0"
+                enter-active-class="transition-all duration-500 ease-out"
+                leave-active-class="transition-all duration-500 ease-in"
+                enter-from-class="opacity-0"
+                enter-to-class="opacity-100"
+                leave-from-class="opacity-100"
+                leave-to-class="opacity-0"
               >
-                <button
+                <div
                   v-if="isScrolled"
-                  type="button"
-                  class="fixed bottom-10 p-4 w-14 h-14 z-50 text-center bg-gradient-to-b from-green-400 to-green-700 shadow-[inset_0_-1px_0_0_rgba(0,0,0,0.5)] text-white rounded-full flex items-center justify-center"
-                  :style="getButtonPosition()"
-                  @click="openPersonDialog()"
+                  class="bg-gradient-to-t from-white to-transparent fixed inset-x-0 bottom-[calc(4.75rem+max(env(safe-area-inset-bottom),var(--safe-area-inset-bottom,0px)))] px-4 pb-3 w-full z-[49]"
                 >
-                  <font-awesome icon="plus" />
-                </button>
+                  <button
+                    type="button"
+                    class="text-center text-xl uppercase font-bold bg-gradient-to-b from-green-400 to-green-700 shadow-[inset_0_-1px_0_0_rgba(0,0,0,0.5)] text-white flex items-center justify-center gap-2 mx-auto px-6 py-2 rounded-lg drop-shadow-[0_0_10px_rgba(255,255,255,1)]"
+                    @click="openPersonDialog()"
+                  >
+                    <font-awesome icon="plus" />
+                    <span>Thank</span>
+                  </button>
+                </div>
               </transition>
               <button
-                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"
+                class="block 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
@@ -559,7 +565,7 @@ export default class HomeView extends Vue {
         const scrollTop = appElement
           ? appElement.scrollTop
           : window.pageYOffset || document.documentElement.scrollTop || 0;
-        const shouldBeScrolled = scrollTop > 100;
+        const shouldBeScrolled = scrollTop > 120;
         if (this.isScrolled !== shouldBeScrolled) {
           this.isScrolled = shouldBeScrolled;
         }