From 8d8bcf2a7ea4725e2b067d321344e39e37c85838 Mon Sep 17 00:00:00 2001
From: Jose Olarte III <jose.anomalist.design@gmail.com>
Date: Tue, 16 Jun 2026 21:48:34 +0800
Subject: [PATCH 1/3] style(home): rework Thank button and sticky scroll action
 bar

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/views/HomeView.vue | 42 ++++++++++++++++++++++++------------------
 1 file changed, 24 insertions(+), 18 deletions(-)

diff --git a/src/views/HomeView.vue b/src/views/HomeView.vue
index 2aa28e7e..6a923b8d 100644
--- a/src/views/HomeView.vue
+++ b/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-[4.75rem] 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;
         }

From 48be234af47aadf84713a44ef9068f65c75947b8 Mon Sep 17 00:00:00 2001
From: Jose Olarte III <jose.anomalist.design@gmail.com>
Date: Wed, 17 Jun 2026 17:57:13 +0800
Subject: [PATCH 2/3] fix(home): offset scrolled Thank button for
 safe-area-inset-bottom

---
 src/views/HomeView.vue | 2 +-
 1 file changed, 1 insertion(+), 1 deletion(-)

diff --git a/src/views/HomeView.vue b/src/views/HomeView.vue
index 6a923b8d..436ee87c 100644
--- a/src/views/HomeView.vue
+++ b/src/views/HomeView.vue
@@ -133,7 +133,7 @@ Raymer * @version 1.0.0 */
               >
                 <div
                   v-if="isScrolled"
-                  class="bg-gradient-to-t from-white to-transparent fixed inset-x-0 bottom-[4.75rem] px-4 pb-3 w-full z-[49]"
+                  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]"
                 >
                   <button
                     type="button"

From 903047f13b1400da9c3c1834e7f2d5d0a76c12c8 Mon Sep 17 00:00:00 2001
From: Jose Olarte III <jose.anomalist.design@gmail.com>
Date: Thu, 18 Jun 2026 21:09:32 +0800
Subject: [PATCH 3/3] style(gift): center entity selection step heading and
 entity type toggle

---
 src/components/EntitySelectionStep.vue | 6 +++---
 1 file changed, 3 insertions(+), 3 deletions(-)

diff --git a/src/components/EntitySelectionStep.vue b/src/components/EntitySelectionStep.vue
index 2a7b146d..84b0870c 100644
--- a/src/components/EntitySelectionStep.vue
+++ b/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 }}