WIP: HomeView notification badge

src/views/HomeView.vue

@@ -142,7 +142,7 @@ Raymer * @version 1.0.0 */
 
     <!-- Results List -->
     <div class="mt-4 mb-4">
-      <div class="flex gap-2 items-center mb-3">
+      <div class="flex gap-2 items-center mb-2">
         <h2 class="text-xl font-bold">Latest Activity</h2>
         <button
           v-if="resultsAreFiltered()"
@@ -166,44 +166,63 @@ Raymer * @version 1.0.0 */
         </button>
       </div>
 
+      <!-- Notification Counts -->
       <div
-        class="border-t p-2 border-slate-300"
+        class="bg-gradient-to-b from-green-400 to-green-700 shadow-[inset_0_-1px_0_0_rgba(0,0,0,0.5)] px-3 py-2 rounded-lg text-white cursor-pointer"
         @click="goToActivityToUserPage()"
       >
-        <div class="flex justify-center">
+        <div class="flex items-center justify-center gap-0.5">
+          <!-- Offers -->
           <div
             v-if="numNewOffersToUser"
-            class="bg-gradient-to-b from-green-400 to-green-700 shadow-[inset_0_-1px_0_0_rgba(0,0,0,0.5)] m-1 px-4 py-4 rounded-md text-white"
+            class="flex items-baseline gap-1 bg-black/20 px-3 py-1 first:rounded-s last:rounded-e"
           >
             <span
-              class="block text-center text-6xl"
+              class="text-2xl sm:text-3xl font-bold leading-none"
               data-testId="newDirectOffersActivityNumber"
             >
-              {{ numNewOffersToUser }}{{ newOffersToUserHitLimit ? "+" : "" }}
+              {{ numNewOffersToUser
+              }}<span class="font-normal text-xl leading-none">{{
+                newOffersToUserHitLimit ? "+" : ""
+              }}</span>
             </span>
-            <p class="text-center">
-              new offer{{ numNewOffersToUser === 1 ? "" : "s" }} to you
-            </p>
+            <font-awesome icon="hand-holding-heart" class="text-xs" />
           </div>
+          <!-- Project Activity -->
           <div
             v-if="numNewOffersToUserProjects"
-            class="bg-gradient-to-b from-green-400 to-green-700 shadow-[inset_0_-1px_0_0_rgba(0,0,0,0.5)] m-1 px-4 py-4 rounded-md text-white"
+            class="flex items-baseline gap-1 bg-black/20 px-3 py-1 first:rounded-s last:rounded-e"
           >
             <span
-              class="block text-center text-6xl"
+              class="text-2xl sm:text-3xl font-bold leading-none"
               data-testId="newOffersToUserProjectsActivityNumber"
             >
               {{ numNewOffersToUserProjects
-              }}{{ newOffersToUserProjectsHitLimit ? "+" : "" }}
+              }}<span class="font-normal text-xl leading-none">{{
+                newOffersToUserProjectsHitLimit ? "+" : ""
+              }}</span>
             </span>
-            <p class="text-center">
-              new offer{{ numNewOffersToUserProjects === 1 ? "" : "s" }} to your
-              projects
-            </p>
+            <font-awesome icon="folder-open" class="text-xs" />
+          </div>
+          <!-- Contact Activity -->
+          <div
+            class="flex items-baseline gap-1 bg-black/20 px-3 py-1 first:rounded-s last:rounded-e"
+          >
+            <span class="text-2xl sm:text-3xl font-bold leading-none"> 4 </span>
+            <font-awesome icon="user" class="text-xs" />
+          </div>
+          <!-- Item Activity -->
+          <div
+            class="flex items-baseline gap-1 bg-black/20 px-3 py-1 first:rounded-s last:rounded-e"
+          >
+            <span class="text-2xl sm:text-3xl font-bold leading-none"> 7 </span>
+            <font-awesome icon="image" class="text-xs" />
           </div>
         </div>
-        <div class="flex justify-end mt-2">
-          <button class="text-blue-500">View All New Activity For You</button>
+        <div
+          class="text-center mt-1.5 leading-none text-xs sm:text-sm uppercase"
+        >
+          View Notifications
         </div>
       </div>
       <InfiniteScroll @reached-bottom="loadMoreGives">