From 9daae03cf374ad5dc91b55f4834a4c8771f668df Mon Sep 17 00:00:00 2001
From: wheatjs <jacobrclevenger@gmail.com>
Date: Thu, 5 Jan 2023 17:08:47 -0500
Subject: [PATCH] feat: update design of square avatar

---
 app.vue                              | 9 +++++++++
 components/account/AccountAvatar.vue | 3 ++-
 2 files changed, 11 insertions(+), 1 deletion(-)

diff --git a/app.vue b/app.vue
index 1022586e18..31cc43a170 100644
--- a/app.vue
+++ b/app.vue
@@ -12,4 +12,13 @@ const key = computed(() => `${currentUser.value?.server ?? currentServer.value}:
     <NuxtPage />
   </NuxtLayout>
   <AriaAnnouncer />
+
+  <!-- Avatar Mask -->
+  <svg absolute op0 width="0" height="0">
+    <defs>
+      <clipPath id="avatar-mask" clipPathUnits="objectBoundingBox">
+        <path d="M 0,0.5 C 0,0 0,0 0.5,0 S 1,0 1,0.5 1,1 0.5,1 0,1 0,0.5" />
+      </clipPath>
+    </defs>
+  </svg>
 </template>
diff --git a/components/account/AccountAvatar.vue b/components/account/AccountAvatar.vue
index cce85f9b72..e12e658e6e 100644
--- a/components/account/AccountAvatar.vue
+++ b/components/account/AccountAvatar.vue
@@ -18,7 +18,8 @@ const error = $ref(false)
     :src="error ? 'data:image/gif;base64,R0lGODlhAQABAIAAAAAAAP///yH5BAEAAAAALAAAAAABAAEAAAIBRAA7' : account.avatar"
     :alt="$t('account.avatar_description', [account.username])"
     loading="lazy"
-    :class="(loaded ? 'bg-base' : 'bg-gray:10') + (square ? ' rounded-3' : ' rounded-full')"
+    :class="(loaded ? 'bg-base' : 'bg-gray:10') + (square ? ' ' : ' rounded-full')"
+    :style="{ 'clip-path': square ? `url(#avatar-mask)` : 'none' }"
     v-bind="$attrs"
     @load="loaded = true"
     @error="error = true"