Merge branch 'master' into give-to-project

src/views/HomeView.vue

@@ -49,7 +49,7 @@
       Time Safari
     </h1>
 
-    <div>
+    <div class="mb-8">
       <h1 class="text-2xl">Quick Action</h1>
       <p>Choose a contact to whom to show appreciation:</p>
       <!-- similar contact selection code is in multiple places -->
@@ -58,9 +58,9 @@
           v-for="contact in allContacts"
           :key="contact.did"
           @click="openDialog(contact)"
-          class="text-blue-500"
+          class="block w-full text-center text-md uppercase bg-slate-500 text-white px-1.5 py-2 rounded-md mb-2"
         >
-          &nbsp;{{ contact.name }},
+          {{ contact.name }}
         </button>
         <span v-if="allContacts.length > 0">&nbsp;or&nbsp;</span>
         <button @click="openDialog()" class="text-blue-500">
@@ -76,25 +76,32 @@
     >
     </GiftedDialog>
 
-    <div class="py-4">
+    <div>
       <h1 class="text-2xl">Latest Activity</h1>
       <span :class="{ hidden: isHiddenSpinner }">
-        <fa icon="spinner" class="fa-fw"></fa>
+        <fa icon="spinner" class="fa-spin-pulse"></fa>
         Loading&hellip;
       </span>
-      <ul class="">
+      <ul>
         <li
-          class="border-b border-slate-300"
+          class="border-b border-slate-300 py-2"
           v-for="record in feedData"
           :key="record.jwtId"
         >
           <div
-            class="border-b text-orange-400 px-8 py-4"
+            class="border-b border-dashed border-slate-400 text-orange-400 py-2 mb-2 font-bold uppercase text-sm"
             v-if="record.jwtId == feedLastViewedId"
           >
-            You've seen all claims below.
+            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>
+            <!-- icon values: "coins" = money; "clock" = time; "gift" = others -->
+            <span class="">{{ this.giveDescription(record) }}</span>
           </div>
-          {{ this.giveDescription(record) }}
         </li>
       </ul>
     </div>