tweak: make all icons have a square aspect ratio

PluralKit · Oct 6, 2024 · 6366198 · 6366198
1 parent e652cd7
commit 6366198
Show file tree

Hide file tree

Showing 2 changed files with 12 additions and 14 deletions.
diff --git a/src/components/dash/groups/GroupTiny.svelte b/src/components/dash/groups/GroupTiny.svelte
@@ -38,11 +38,11 @@
     class="box rounded-lg m-1 flex flex-col gap-2 p-0 transition-all hover:scale-105 h-full"
     style={group.color ? `border: 4px solid #${group.color}` : ""}
   >
-    {#if group.icon}
-      <img class="rounded-t-md" src={group.icon} alt="Default avatar" />
-    {:else}
-      <img class="rounded-t-md" src="/discord_icon.svg" alt="Default avatar" />
-    {/if}
+    <img
+      class="rounded-t-md aspect-square object-cover"
+      src={group.icon ?? "/discord_icon.svg"}
+      alt={group.icon ? `${group.name}'s icon` : "Default icon"}
+    />
     <div class="text-sm relative">
       <div class="absolute -top-4 left-0 right-0 w-full flex">
         <button class="btn btn-neutral btn-sm btn-circle mx-auto">

diff --git a/src/components/dash/members/MemberTiny.svelte b/src/components/dash/members/MemberTiny.svelte
@@ -38,15 +38,13 @@
     class="box rounded-lg m-1 flex flex-col gap-2 p-0 transition-all hover:scale-105 h-full"
     style={member.color ? `border: 4px solid #${member.color}` : ""}
   >
-    {#if member.avatar_url || member.webhook_avatar_url}
-      <img
-        class="rounded-t-md"
-        src={member.webhook_avatar_url ?? member.avatar_url}
-        alt="Default avatar"
-      />
-    {:else}
-      <img class="rounded-t-md" src="/discord_icon.svg" alt="Default avatar" />
-    {/if}
+    <img
+      class="rounded-t-md aspect-square object-cover"
+      src={member.webhook_avatar_url ?? member.avatar_url ?? "/discord_icon.svg"}
+      alt={member.webhook_avatar_url || member.avatar_url
+        ? `${member.name}'s avatar`
+        : "Default avatar"}
+    />
     <div class="text-sm relative">
       <div class="absolute -top-4 left-0 right-0 w-full flex">
         <button class="btn btn-neutral btn-sm btn-circle mx-auto">