Identicon responsive size fix + lint-fix

src/components/ActivityListItem.vue

@@ -21,7 +21,11 @@
         <div>
           <h3 class="font-semibold">
             <a href="" class="hover:underline">
-              {{ record.giver.known ? record.giver.displayName : 'Anonymous Giver' }}
+              {{
+                record.giver.known
+                  ? record.giver.displayName
+                  : "Anonymous Giver"
+              }}
             </a>
           </h3>
           <p class="ms-auto text-xs text-slate-500 italic">
@@ -62,7 +66,7 @@
                 :class="[
                   !record.providerPlanName
                     ? 'rounded-full size-12 sm:size-24 object-cover'
-                    : 'rounded size-12 sm:size-24 object-cover'
+                    : 'rounded size-12 sm:size-24 object-cover',
                 ]"
               />
             </template>
@@ -71,8 +75,8 @@
               <template v-if="record.providerPlanName">
                 <ProjectIcon
                   :entityId="record.providerPlanName"
-                  :iconSize="96"
+                  :iconSize="48"
-                  class="rounded size-12 sm:size-24"
+                  class="rounded size-12 sm:size-24 *:w-full *:h-full"
                 />
               </template>
               <!-- Identicon for DIDs -->
@@ -123,7 +127,7 @@
                 :class="[
                   !record.recipientProjectName
                     ? 'rounded-full size-12 sm:size-24 object-cover'
-                    : 'rounded size-12 sm:size-24 object-cover'
+                    : 'rounded size-12 sm:size-24 object-cover',
                 ]"
               />
             </template>
@@ -132,8 +136,8 @@
               <template v-if="record.recipientProjectName">
                 <ProjectIcon
                   :entityId="record.recipientProjectName"
-                  :iconSize="96"
+                  :iconSize="48"
-                  class="rounded size-12 sm:size-24"
+                  class="rounded size-12 sm:size-24 *:w-full *:h-full"
                 />
               </template>
               <!-- Identicon for DIDs -->
@@ -183,9 +187,9 @@
         :disabled="!canConfirm"
         class="text-sm text-white px-3 py-1.5 ms-auto rounded-md"
         :class="[
-          canConfirm 
+          canConfirm
             ? 'bg-gradient-to-b from-blue-400 to-blue-700 shadow-[inset_0_-1px_0_0_rgba(0,0,0,0.5)]'
-            : 'bg-gradient-to-b from-slate-400 to-slate-700 shadow-[inset_0_-1px_0_0_rgba(0,0,0,0.5)] opacity-50'
+            : 'bg-gradient-to-b from-slate-400 to-slate-700 shadow-[inset_0_-1px_0_0_rgba(0,0,0,0.5)] opacity-50',
         ]"
       >
         Confirm
@@ -321,20 +325,20 @@ export default class ActivityListItem extends Vue {
         this.record.fullClaim?.["@type"],
         this.record,
         this.activeDid,
-        this.confirmerIdList
+        this.confirmerIdList,
       );
       return;
     }
 
-    this.$emit('confirmClaim', this.record);
+    this.$emit("confirmClaim", this.record);
   }
 
   get friendlyDate(): string {
     const date = new Date(this.record.issuedAt);
     return date.toLocaleDateString(undefined, {
-      year: 'numeric',
+      year: "numeric",
-      month: 'short',
+      month: "short",
-      day: 'numeric'
+      day: "numeric",
     });
   }
 }

src/views/HomeView.vue

@@ -466,7 +466,7 @@ export default class HomeView extends Vue {
           if (resp.status === 200) {
             await updateAccountSettings(this.activeDid, {
               isRegistered: true,
-              ...await retrieveSettingsForActiveAccount()
+              ...(await retrieveSettingsForActiveAccount()),
             });
             this.isRegistered = true;
           }
@@ -915,7 +915,7 @@ export default class HomeView extends Vue {
     this.$notify(
       {
         group: "modal",
-        type: "confirm", 
+        type: "confirm",
         title: "Confirm",
         text: "Do you personally confirm that this is true?",
         onYes: async () => {
@@ -924,46 +924,52 @@ export default class HomeView extends Vue {
               serverUtil.addLastClaimOrHandleAsIdIfMissing(
                 record.fullClaim,
                 record.jwtId,
-                record.handleId
+                record.handleId,
-              )
+              ),
-            )
+            ),
           );
-          
+
           const confirmationClaim = {
             "@context": "https://schema.org",
-            "@type": "AgreeAction", 
+            "@type": "AgreeAction",
-            object: goodClaim
+            object: goodClaim,
           };
 
           const result = await serverUtil.createAndSubmitClaim(
             confirmationClaim,
             this.activeDid,
             this.apiServer,
-            this.axios
+            this.axios,
           );
 
           if (result.type === "success") {
-            this.$notify({
+            this.$notify(
-              group: "alert",
+              {
-              type: "success",
+                group: "alert",
-              title: "Success",
+                type: "success",
-              text: "Confirmation submitted."
+                title: "Success",
-            }, 3000);
+                text: "Confirmation submitted.",
-            
+              },
+              3000,
+            );
+
             // Refresh the feed to show updated confirmation status
             await this.updateAllFeed();
           } else {
             console.error("Error submitting confirmation:", result);
-            this.$notify({
+            this.$notify(
-              group: "alert", 
+              {
-              type: "danger",
+                group: "alert",
-              title: "Error",
+                type: "danger",
-              text: "There was a problem submitting the confirmation."
+                title: "Error",
-            }, 5000);
+                text: "There was a problem submitting the confirmation.",
+              },
+              5000,
+            );
           }
-        }
+        },
       },
-      -1
+      -1,
     );
   }
 }