Homeview design adjustments

- Added markup for poster info (needs wiring)
- Repositioned giver and receiver type icons to beside their labels
- Added "Confirm" button to bottom right of item card (timestamp repositioned to poster info as a result)
- Spacing tweaks

src/components/ActivityListItem.vue

@@ -11,7 +11,25 @@
     </div>
 
     <div class="bg-slate-100 rounded-t-md border border-slate-300 p-3 sm:p-4">
-      <div class="relative flex justify-between gap-4 mb-3">
+      <div class="flex items-center gap-2 mb-6">
+        <a href=""
+          ><img
+            src="https://a.fsdn.com/con/app/proj/identicons/screenshots/225506.jpg"
+            class="size-8 object-cover rounded-full"
+        /></a>
+
+        <div>
+          <h3 class="font-semibold"><a href="">[POSTER_NAME]</a></h3>
+          <p class="ms-auto text-xs text-slate-500 italic">[TIMESTAMP]</p>
+          <!-- <p
+            class="ms-auto text-xs text-slate-500 italic"
+            :title="record.timestamp"
+          >
+            {{ formattedTimestamp }}
+          </p> -->
+        </div>
+      </div>
+      <div class="relative flex justify-between gap-4 mb-5">
         <!-- Source -->
         <a
           href=""
@@ -29,6 +47,7 @@
               :profile-image-url="record.giver.profileImageUrl"
               :class="record.giver.known ? 'rounded-full' : 'rounded'"
             />
+            <!--
             <span
               class="absolute -end-3 -bottom-2 bg-slate-400 rounded-full leading-1.25 p-1 sm:px-1.5 -mt-6 border sm:border-2 border-white text-xs sm:text-base"
             >
@@ -37,8 +56,13 @@
                 class="fa-fw text-white"
               />
             </span>
+            -->
           </div>
           <div class="text-xs mt-2 line-clamp-2">
+            <fa
+              :icon="record.giver.known ? 'user' : 'hammer'"
+              class="fa-fw text-slate-400"
+            />
             {{ record.giver.displayName }}
           </div>
         </a>
@@ -64,6 +88,7 @@
               :profile-image-url="record.receiver.profileImageUrl"
               :class="record.receiver.known ? 'rounded-full' : 'rounded'"
             />
+            <!--
             <span
               class="absolute -end-3 -bottom-2 bg-slate-400 rounded-full leading-1.25 p-1 sm:px-1.5 -mt-6 border sm:border-2 border-white text-xs sm:text-base"
             >
@@ -72,8 +97,13 @@
                 class="fa-fw text-white"
               />
             </span>
+            -->
           </div>
           <div class="text-xs mt-2 line-clamp-2">
+            <fa
+              :icon="record.receiver.known ? 'user' : 'hammer'"
+              class="fa-fw text-slate-400"
+            />
             {{ record.receiver.displayName }}
           </div>
         </a>
@@ -85,7 +115,7 @@
           {{ description }}
         </a>
       </p>
-      <p class="text-sm">{{ record.subDescription }}</p>
+      <p class="text-sm">{{ subDescription }}</p>
     </div>
 
     <!-- Record Image -->
@@ -112,12 +142,11 @@
       <a @click="$emit('loadClaim', record.jwtId)" class="cursor-pointer">
         <fa icon="circle-info" class="fa-fw text-slate-500" />
       </a>
-      <span
-        class="ms-auto text-xs text-slate-500 italic"
-        :title="record.timestamp"
+      <button
+        class="text-sm text-white 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 ms-auto rounded-md"
       >
-        {{ formattedTimestamp }}
-      </span>
+        Confirm
+      </button>
     </div>
   </li>
 </template>
@@ -202,9 +231,14 @@ export default class ActivityListItem extends Vue {
     const claim =
       (this.record.fullClaim as unknown).claim || this.record.fullClaim;
     const amount = this.formatAmount(claim);
+
+    return `${amount}`;
+  }
+
+  get subDescription(): string {
     const participants = this.formatParticipantInfo();
 
-    return `${participants}: ${amount}`;
+    return `${participants}`;
   }
 
   private displayAmount(code: string, amt: number) {