WIP: adjustments to bring closer to original mockups

src/components/GiftedDialog.vue

@@ -10,10 +10,6 @@
           class="grid grid-cols-4 sm:grid-cols-5 md:grid-cols-6 gap-x-2 gap-y-4 text-center mb-4"
         >
           <li @click="openDialog()">
-            <img
-              src="../assets/blank-square.svg"
-              class="mx-auto border border-blue-500 rounded-md mb-1 cursor-pointer"
-            />
             <font-awesome icon="circle-question" class="text-slate-400 text-5xl mb-1" />
             <h3
               class="text-xs text-slate-500 font-medium italic text-ellipsis whitespace-nowrap overflow-hidden"
@@ -21,11 +17,11 @@
               Unnamed
             </h3>
           </li>
-          <li v-if="allContacts.length === 0" class="text-sm">
+          <li v-if="allContacts.length === 0" class="text-xs text-slate-500 italic">
             (Add friends to see more people worthy of recognition.)
           </li>
           <li
-            v-for="contact in allContacts.slice(0, 6)"
+            v-for="contact in allContacts.slice(0, 10)"
             :key="contact.did"
             @click="openDialog(contact)"
             class="cursor-pointer"
@@ -33,14 +29,13 @@
             <div class="relative w-fit mx-auto">
               <EntityIcon
                 :contact="contact"
-                :icon-size="64"
-                class="max-w-12 mx-auto border border-slate-300 rounded-full mb-1"
+                class="!size-[3rem] mx-auto border border-slate-300 bg-white overflow-hidden rounded-full mb-1"
               />
 
               <div
-                class="rounded-full bg-orange-500 absolute bottom-0 right-0 p-0.5 translate-x-1/3"
+                class="rounded-full bg-slate-400 absolute bottom-0 right-0 p-1 translate-x-1/3"
               >
-                <font-awesome icon="thumbtack" class="block fa-fw text-white text-xs w-4" />
+                <font-awesome icon="clock" class="block text-white text-xs w-[1em]" />
               </div>
             </div>
             <h3
@@ -51,9 +46,8 @@
           </li>
           <li>
             <router-link
-              v-if="allContacts.length >= 6"
               :to="{ name: 'contact-gift' }"
-              class="flex align-bottom text-xs text-blue-500 mt-12 cursor-pointer"
+              class="cursor-pointer"
             >
               <font-awesome icon="circle-right" class="text-blue-500 text-5xl mb-1" />
               <h3
@@ -88,7 +82,7 @@
         <input
           v-model="description"
           type="text"
-          class="block w-full rounded border border-slate-400 px-3 py-2 placeholder:italic"
+          class="block w-full rounded border border-slate-400 px-3 py-2 mb-4 placeholder:italic"
           :placeholder="prompt || 'What was given?'"
         />
         <div class="flex mb-4">
@@ -96,7 +90,7 @@
             class="rounded-s border border-e-0 border-slate-400 bg-slate-200 px-4 py-2"
             @click="amountInput === '0' ? null : decrement()"
           >
-						<i class="fa-solid fa-chevron-left"></i>
+            <font-awesome icon="chevron-left" />
 					</button>
           <input
             id="inputGivenAmount"
@@ -108,7 +102,7 @@
             class="rounded-e border border-slate-400 bg-slate-200 px-4 py-2"
             @click="increment()"
           >
-						<i class="fa-solid fa-chevron-right"></i>
+            <font-awesome icon="chevron-right" />
 					</button>
 
 					<select class="flex-1 rounded border border-slate-400 ms-2 px-3 py-2">
@@ -119,7 +113,6 @@
 						<option value="ETH">ETH</option>
 					</select>
 				</div>
-        <button class="block w-full text-center text-md uppercase bg-gradient-to-b from-slate-400 to-slate-700 shadow-[inset_0_-1px_0_0_rgba(0,0,0,0.5)] text-white px-1.5 py-2 rounded-lg mb-4">Photo &amp; more options&hellip;</button>
         <router-link
           :to="{
             name: 'gifted-details',
@@ -180,8 +173,13 @@ import * as libsUtil from "../libs/util";
 import { db, retrieveSettingsForActiveAccount } from "../db/index";
 import { Contact } from "../db/tables/contacts";
 import { retrieveAccountDids } from "../libs/util";
+import EntityIcon from "../components/EntityIcon.vue";
 
-@Component
+@Component({
+  components: {
+    EntityIcon,
+  },
+})
 export default class GiftedDialog extends Vue {
   $notify!: (notification: NotificationIface, timeout?: number) => void;
 

src/views/HomeView.vue

@@ -125,7 +125,7 @@ Raymer * @version 1.0.0 */
                   @click="openGiftedPrompts()"
                   class="block ms-auto text-center text-white bg-gradient-to-b from-slate-400 to-slate-700 shadow-[inset_0_-1px_0_0_rgba(0,0,0,0.5)] p-2 rounded-full"
                 >
-                  <font-awesome icon="lightbulb" />
+                  <font-awesome icon="lightbulb" class="block text-center w-[1em]" />
                 </button>
               </div>
 
@@ -157,36 +157,26 @@ Raymer * @version 1.0.0 */
     <GiftedPrompts ref="giftedPrompts" />
     <FeedFilters ref="feedFilters" />
 
-    <div class="relative">
-      <button
-        v-if="isRegistered"
-        class="absolute right-6 bottom-0 transform translate-y-1/2 text-center text-4xl leading-none bg-green-600 text-white w-14 py-2.5 rounded-full"
-        @click="openDialog()"
-      >
-        <font-awesome icon="plus" class="fa-fw" />
-      </button>
-    </div>
-
     <!-- Results List -->
     <div class="mt-4 mb-4">
-      <div class="flex items-center mb-4">
-        <h2 class="text-xl font-bold flex items-center gap-4">
+      <div class="flex gap-2 items-center mb-3">
+        <h2 class="text-xl font-bold">
           Latest Activity
-          <button
-            v-if="resultsAreFiltered()"
-            class="bg-gradient-to-b from-blue-400 to-blue-700 shadow-[inset_0_-1px_0_0_rgba(0,0,0,0.5)] px-3 py-1.5 rounded-md text-xs text-white"
-            @click="openFeedFilters()"
-          >
-            <font-awesome icon="filter" class="fa-fw" />
-          </button>
-          <button
-            v-else
-            class="bg-gradient-to-b from-slate-400 to-slate-700 shadow-[inset_0_-1px_0_0_rgba(0,0,0,0.5)] px-3 py-1.5 rounded-md text-xs text-white"
-            @click="openFeedFilters()"
-          >
-            <font-awesome icon="filter" class="fa-fw" />
-          </button>
         </h2>
+        <button
+          v-if="resultsAreFiltered()"
+          class="block ms-auto text-center text-white bg-gradient-to-b from-blue-400 to-blue-700 shadow-[inset_0_-1px_0_0_rgba(0,0,0,0.5)] p-2 rounded-full"
+          @click="openFeedFilters()"
+        >
+          <font-awesome icon="filter" class="block text-center w-[1em] translate-y-[0.05em]" />
+        </button>
+        <button
+          v-else
+          class="block ms-auto text-center text-white bg-gradient-to-b from-slate-400 to-slate-700 shadow-[inset_0_-1px_0_0_rgba(0,0,0,0.5)] p-2 rounded-full"
+          @click="openFeedFilters()"
+        >
+          <font-awesome icon="filter" class="block text-center w-[1em] translate-y-[0.05em]" />
+        </button>
       </div>
 
       <div