Compacted Quick Action section

src/views/HomeView.vue

@@ -7,23 +7,33 @@
     </h1>
 
     <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 -->
-      <div class="px-4">
-        <button
+      <h2 class="text-xl font-bold">Quick Action</h2>
+      <p class="mb-4">Show appreciation to a contact:</p>
+
+      <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>
+          </div>
+          <h3 class="text-xs font-medium italic text-ellipsis whitespace-nowrap overflow-hidden">Anonymous</h3>
+        </li>
+        <li
           v-for="contact in allContacts"
           :key="contact.did"
           @click="openDialog(contact)"
-          class="block w-full text-center text-md uppercase bg-slate-500 text-white px-1.5 py-2 rounded-md mb-2"
         >
-          {{ contact.name || "(no name)" }}
-        </button>
-        <span v-if="allContacts.length > 0">&nbsp;or&nbsp;</span>
-        <button @click="openDialog()" class="text-blue-500">
-          someone not specified
-        </button>
-      </div>
+          <div class="mb-1">
+            <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>
+        </li>
+      </ul>
     </div>
 
     <GiftedDialog