Implemented design of Contact Gifting List view

src/views/ContactGiftingView.vue

@@ -2,38 +2,66 @@
   <QuickNav selected="Home"></QuickNav>
   <!-- CONTENT -->
   <section id="Content" class="p-6 pb-24">
-    <div class="mb-8">
+    <!-- Breadcrumb -->
-      <h2 class="text-xl font-bold">Quick Action</h2>
+    <div id="ViewBreadcrumb" class="mb-8">
-      <p class="mb-4">Show appreciation to a contact:</p>
+      <h1 class="text-lg text-center font-light relative px-7">
+        <!-- Back -->
+        <router-link
+          :to="{ name: 'home' }"
+          class="text-lg text-center px-2 py-1 absolute -left-2 -top-1"
+          ><fa icon="chevron-left" class="fa-fw"></fa
+        ></router-link>
 
-      <ul class="grid grid-cols-4 gap-x-3 gap-y-5 text-center mb-5">
+        Give to Contacts
-        <li @click="openDialog()">
+      </h1>
-          <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)"
-        >
-          <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>
 
+    <!-- Quick Search -->
+
+    <!-- Initial Loading Animation -->
+
+    <!-- Results List -->
+    <ul class="border-t border-slate-300">
+      <li class="border-b border-slate-300 py-3">
+        <h2 class="text-base flex gap-4 items-center">
+          <span class="grow italic"
+            ><fa icon="question-circle" class="fa-fw fa-xl text-slate-400"></fa>
+            Anonymous
+          </span>
+          <span class="text-right">
+            <button
+              type="button"
+              @click="openDialog()"
+              class="block w-full text-center text-sm uppercase bg-blue-600 text-white px-3 py-1.5 rounded-md"
+            >
+              <fa icon="gift" class="fa-fw"></fa>
+            </button>
+          </span>
+        </h2>
+      </li>
+      <li
+        v-for="contact in allContacts"
+        :key="contact.did"
+        class="border-b border-slate-300 py-3"
+      >
+        <h2 class="text-base flex gap-4 items-center">
+          <span class="grow font-semibold"
+            ><fa icon="user" class="fa-fw fa-xl text-slate-400"></fa>
+            {{ contact.name || "(no name)" }}
+          </span>
+          <span class="text-right">
+            <button
+              type="button"
+              @click="openDialog(contact)"
+              class="block w-full text-center text-sm uppercase bg-blue-600 text-white px-3 py-1.5 rounded-md"
+            >
+              <fa icon="gift" class="fa-fw"></fa>
+            </button>
+          </span>
+        </h2>
+      </li>
+    </ul>
+
     <GiftedDialog
       ref="customDialog"
       @dialog-result="handleDialogResult"

src/views/HomeView.vue

@@ -36,6 +36,14 @@
           </h3>
         </li>
       </ul>
+
+      <!-- Ideally, this button should only be visible when the active account has more than 7 or 11 contacts in their list (we want to limit the grid count above to 8 or 12 accounts to keep it compact) -->
+      <router-link
+        :to="{ name: 'contact-gives' }"
+        class="block text-center text-md font-bold uppercase bg-slate-500 text-white px-2 py-3 rounded-md"
+      >
+        Show More Contacts&hellip;
+      </router-link>
     </div>
 
     <GiftedDialog