Various changes

- Loading animation in Projects view
- Per item icon + spacing fixes in Home view

src/main.ts

@@ -17,6 +17,8 @@ import {
   faCircleCheck,
   faCircleQuestion,
   faCircleUser,
+  faClock,
+  faCoins,
   faCopy,
   faEllipsisVertical,
   faEye,
@@ -24,6 +26,7 @@ import {
   faFileLines,
   faFloppyDisk,
   faFolderOpen,
+  faGift,
   faHand,
   faHouseChimney,
   faLongArrowAltLeft,
@@ -53,6 +56,8 @@ library.add(
   faCircleCheck,
   faCircleQuestion,
   faCircleUser,
+  faClock,
+  faCoins,
   faCopy,
   faEllipsisVertical,
   faEye,
@@ -60,6 +65,7 @@ library.add(
   faFileLines,
   faFloppyDisk,
   faFolderOpen,
+  faGift,
   faHand,
   faHouseChimney,
   faLongArrowAltLeft,

src/views/HomeView.vue

@@ -49,20 +49,23 @@
       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>
+      <p class="mb-2">Choose a contact to whom to show appreciation:</p>
-      <div class="px-4">
+      <div>
         <button
           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>
+        <span v-if="allContacts.length > 0">or</span>
-        <button @click="openDialog()" class="text-blue-500">
+        <button
+          @click="openDialog()"
+          class="block w-full text-center text-md uppercase bg-slate-500 text-white px-1.5 py-2 rounded-md"
+        >
           nobody in particular
         </button>
       </div>
@@ -75,25 +78,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>

src/views/ProjectsView.vue

@@ -70,6 +70,14 @@
       <fa icon="plus" class="fa-fw"></fa>
     </button>
 
+    <!-- Loading Animation -->
+    <div
+      class="fixed left-6 bottom-24 text-center text-4xl leading-none bg-slate-400 text-white w-14 py-2.5 rounded-full"
+      v-if="isLoading"
+    >
+      <fa icon="spinner" class="fa-spin-pulse"></fa>
+    </div>
+
     <!-- Results List -->
     <InfiniteScroll @reached-bottom="loadMoreData">
       <ul>