feat: update design of square avatar (#808)

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>

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"