modify & explain icons next to feed

src/views/HomeView.vue

@@ -207,14 +207,22 @@
             </div>
 
             <div class="grid grid-cols-12">
-              <span class="col-span-1 justify-self-start">
+              <span class="pt-1 col-span-1 justify-self-start">
                 <span>
                   <fa
-                    v-if="record.giver.known || record.receiver.known"
                     icon="circle-user"
-                    class="pt-1 text-slate-500"
+                    :class="
+                      computeKnownPersonIconStyleClassNames(
+                        record.giver.known || record.receiver.known,
+                      )
+                    "
+                    @click="toastUser('This involves your contacts.')"
+                  />
+                  <fa
+                    icon="gift"
+                    class="pl-3 text-slate-500"
+                    @click="toastUser('This is a gift.')"
                   />
-                  <fa v-else icon="gift" class="pt-1 pl-3 text-slate-500" />
                 </span>
               </span>
               <span class="col-span-10 justify-self-stretch">
@@ -765,5 +773,21 @@ export default class HomeView extends Vue {
   openFeedFilters() {
     (this.$refs.feedFilters as FeedFilters).open(this.reloadFeedOnChange);
   }
+
+  toastUser(message) {
+    this.$notify(
+      {
+        group: "alert",
+        type: "toast",
+        title: "FYI",
+        text: message,
+      },
+      2000,
+    );
+  }
+
+  computeKnownPersonIconStyleClassNames(known: boolean) {
+    return known ? "text-slate-500" : "text-slate-100";
+  }
 }
 </script>