Homeview activity card design tweaks

src/components/ActivityListItem.vue

@@ -10,24 +10,26 @@
       </span>
     </div>
 
-    <div class="bg-slate-100 rounded-t-md border border-slate-300 p-3 sm:p-4">
-      <div class="flex items-center gap-2 mb-6">
-
+    <div
+      class="flex items-center justify-between gap-2 text-lg bg-slate-200 border border-slate-300 border-b-0 rounded-t-md px-3 sm:px-4 py-1 sm:py-2"
+    >
+      <div class="flex items-center gap-2">
         <div v-if="record.issuerDid">
           <EntityIcon
             :entity-id="record.issuerDid"
-            class="rounded size-[3rem] sm:size-[4rem] object-cover"
+            class="rounded-full bg-white overflow-hidden !size-[2rem] object-cover"
           />
         </div>
         <div v-else>
-          <font-awesome icon="person-circle-question" class="text-slate-300 text-[3rem] sm:text-[4rem]" />
+          <font-awesome
+            icon="person-circle-question"
+            class="text-slate-300 text-[2rem]"
+          />
         </div>
 
         <div>
           <h3 class="font-semibold">
-            {{
-              record.issuer.known ? record.issuer.displayName : ""
-            }}
+            {{ record.issuer.known ? record.issuer.displayName : "" }}
           </h3>
           <p class="ms-auto text-xs text-slate-500 italic">
             {{ friendlyDate }}
@@ -35,10 +37,16 @@
         </div>
       </div>
 
+      <a class="cursor-pointer" @click="$emit('loadClaim', record.jwtId)">
+        <font-awesome icon="circle-info" class="fa-fw text-slate-500" />
+      </a>
+    </div>
+
+    <div class="bg-slate-100 rounded-b-md border border-slate-300 p-3 sm:p-4">
       <!-- Record Image -->
       <div
         v-if="record.image"
-        class="bg-cover mb-6 -mx-3 sm:-mx-4"
+        class="bg-cover mb-6 -mt-3 sm:-mt-4 -mx-3 sm:-mx-4"
         :style="`background-image: url(${record.image});`"
       >
         <a
@@ -74,7 +82,7 @@
                 <EntityIcon
                   :entity-id="record.agentDid"
                   :profile-image-url="record.issuer.profileImageUrl"
-                  class="rounded size-[3rem] sm:size-[4rem]"
+                  class="rounded-full bg-slate-100 overflow-hidden !size-[3rem] sm:!size-[4rem]"
                 />
               </div>
               <!-- Unknown Person -->
@@ -86,14 +94,15 @@
               </div>
             </div>
           </div>
-          <div class="text-xs mt-2 line-clamp-3 sm:line-clamp-2">
-            <div v-if="record.providerPlanName || record.giver.known">
-              <font-awesome
-                :icon="record.providerPlanName ? 'users' : 'user'"
-                class="fa-fw text-slate-400"
-              />
-              {{ record.providerPlanName || record.giver.displayName }}
-            </div>
+          <div
+            v-if="record.providerPlanName || record.giver.known"
+            class="text-xs mt-2 line-clamp-3 sm:line-clamp-2"
+          >
+            <font-awesome
+              :icon="record.providerPlanName ? 'users' : 'user'"
+              class="fa-fw text-slate-400"
+            />
+            {{ record.providerPlanName || record.giver.displayName }}
           </div>
         </div>
 
@@ -135,7 +144,7 @@
                 <EntityIcon
                   :entity-id="record.recipientDid"
                   :profile-image-url="record.receiver.profileImageUrl"
-                  class="rounded size-[3rem] sm:size-[4rem]"
+                  class="rounded-full bg-slate-100 overflow-hidden !size-[3rem] sm:!size-[4rem]"
                 />
               </div>
               <!-- Unknown Person -->
@@ -147,14 +156,15 @@
               </div>
             </div>
           </div>
-          <div class="text-xs mt-2 line-clamp-3 sm:line-clamp-2">
-            <div v-if="record.recipientProjectName || record.receiver.known">
-              <font-awesome
-                :icon="record.recipientProjectName ? 'users' : 'user'"
-                class="fa-fw text-slate-400"
-              />
-              {{ record.recipientProjectName || record.receiver.displayName }}
-            </div>
+          <div
+            v-if="record.recipientProjectName || record.receiver.known"
+            class="text-xs mt-2 line-clamp-3 sm:line-clamp-2"
+          >
+            <font-awesome
+              :icon="record.recipientProjectName ? 'users' : 'user'"
+              class="fa-fw text-slate-400"
+            />
+            {{ record.recipientProjectName || record.receiver.displayName }}
           </div>
         </div>
       </div>
@@ -166,14 +176,6 @@
         </a>
       </p>
     </div>
-
-    <div
-      class="flex items-center gap-2 text-lg bg-slate-300 rounded-b-md px-3 sm:px-4 py-1 sm:py-2"
-    >
-      <a class="cursor-pointer" @click="$emit('loadClaim', record.jwtId)">
-        <font-awesome icon="circle-info" class="fa-fw text-slate-500" />
-      </a>
-    </div>
   </li>
 </template>
 

src/views/HomeView.vue

@@ -344,7 +344,6 @@ import * as serverUtil from "../libs/endorserServer";
 import { logger } from "../utils/logger";
 import { GiveRecordWithContactInfo } from "types";
 
-
 /**
  * HomeView - Main view component for the application's home page
  *