Design tweaks to Latest Activity

src/views/HomeView.vue

@@ -13,12 +13,13 @@
       <ul class="grid grid-cols-4 gap-x-3 gap-y-5 text-center mb-5">
         <li @click="openDialog()">
           <div class="mb-1">
-            <fa
-              icon="question-circle"
-              class="fa-fw fa-xl text-slate-400"
-            ></fa>
+            <fa icon="question-circle" class="fa-fw fa-xl text-slate-400"></fa>
           </div>
-          <h3 class="text-xs font-medium italic text-ellipsis whitespace-nowrap overflow-hidden">Anonymous</h3>
+          <h3
+            class="text-xs font-medium italic text-ellipsis whitespace-nowrap overflow-hidden"
+          >
+            Anonymous
+          </h3>
         </li>
         <li
           v-for="contact in allContacts"
@@ -26,12 +27,13 @@
           @click="openDialog(contact)"
         >
           <div class="mb-1">
-            <fa
-              icon="user"
-              class="fa-fw fa-xl text-slate-400"
-            ></fa>
+            <fa icon="user" class="fa-fw fa-xl text-slate-400"></fa>
           </div>
-          <h3 class="text-xs font-medium text-ellipsis whitespace-nowrap overflow-hidden">{{ contact.name || "(no name)" }}</h3>
+          <h3
+            class="text-xs font-medium text-ellipsis whitespace-nowrap overflow-hidden"
+          >
+            {{ contact.name || "(no name)" }}
+          </h3>
         </li>
       </ul>
     </div>
@@ -43,29 +45,27 @@
     >
     </GiftedDialog>
 
-    <div>
-      <h1 class="text-2xl">Latest Activity</h1>
-      <span :class="{ hidden: isHiddenSpinner }">
-        <fa icon="spinner" class="fa-spin-pulse"></fa>
-        Loading&hellip;
-      </span>
-      <ul>
+    <div class="bg-slate-100 rounded-md overflow-hidden px-4 py-3 mb-4">
+      <h2 class="text-xl font-bold mb-4">Latest Activity</h2>
+      <div :class="{ hidden: isHiddenSpinner }">
+        <p class="text-slate-500 text-center italic mt-4 mb-4">
+          <fa icon="spinner" class="fa-spin-pulse"></fa> Loading&hellip;
+        </p>
+      </div>
+      <ul class="border-t border-slate-300">
         <li
           class="border-b border-slate-300 py-2"
           v-for="record in feedData"
           :key="record.jwtId"
         >
           <div
-            class="border-b border-dashed border-slate-400 text-orange-400 py-2 mb-2 font-bold uppercase text-sm"
+            class="border-b border-dashed border-slate-400 text-orange-400 pb-2 mb-2 font-bold uppercase text-sm"
             v-if="record.jwtId == feedLastViewedId"
           >
             You've seen all claims below:
           </div>
           <div class="flex">
-            <fa
-              icon="gift"
-              class="fa-fw flex-none pt-1 pr-2 text-slate-500"
-            ></fa>
+            <fa icon="gift" class="pt-1 pr-2 text-slate-500"></fa>
             <!-- icon values: "coins" = money; "clock" = time; "gift" = others -->
             <span class="">{{ this.giveDescription(record) }}</span>
           </div>