From e5a9bd7370ba46e3c3e41ac456bb7af61545ba7d Mon Sep 17 00:00:00 2001
From: patak <matias.capeletto@gmail.com>
Date: Thu, 5 Jan 2023 13:10:22 +0100
Subject: [PATCH] feat: use square avatars for logged in user

---
 components/account/AccountAvatar.vue    | 4 ++--
 components/account/AccountBigAvatar.vue | 3 ++-
 components/account/AccountInfo.vue      | 3 ++-
 components/nav/NavUser.vue              | 1 +
 components/user/UserDropdown.vue        | 2 +-
 layouts/default.vue                     | 2 +-
 6 files changed, 9 insertions(+), 6 deletions(-)

diff --git a/components/account/AccountAvatar.vue b/components/account/AccountAvatar.vue
index 44db7eb8..cce85f9b 100644
--- a/components/account/AccountAvatar.vue
+++ b/components/account/AccountAvatar.vue
@@ -3,6 +3,7 @@ import type { Account } from 'masto'
 
 defineProps<{
   account: Account
+  square?: boolean
 }>()
 
 const loaded = $ref(false)
@@ -17,8 +18,7 @@ const error = $ref(false)
     :src="error ? 'data:image/gif;base64,R0lGODlhAQABAIAAAAAAAP///yH5BAEAAAAALAAAAAABAAEAAAIBRAA7' : account.avatar"
     :alt="$t('account.avatar_description', [account.username])"
     loading="lazy"
-    rounded-full
-    :class="loaded ? 'bg-base' : 'bg-gray:10'"
+    :class="(loaded ? 'bg-base' : 'bg-gray:10') + (square ? ' rounded-3' : ' rounded-full')"
     v-bind="$attrs"
     @load="loaded = true"
     @error="error = true"
diff --git a/components/account/AccountBigAvatar.vue b/components/account/AccountBigAvatar.vue
index ecc0b3b0..afe705de 100644
--- a/components/account/AccountBigAvatar.vue
+++ b/components/account/AccountBigAvatar.vue
@@ -6,11 +6,12 @@ import type { Account } from 'masto'
 
 defineProps<{
   account: Account
+  square?: boolean
 }>()
 </script>
 
 <template>
   <div :key="account.avatar" v-bind="$attrs" rounded-full bg-base w-54px h-54px flex items-center justify-center>
-    <AccountAvatar :account="account" w-48px h-48px />
+    <AccountAvatar :account="account" w-48px h-48px :square="square" />
   </div>
 </template>
diff --git a/components/account/AccountInfo.vue b/components/account/AccountInfo.vue
index 526faa64..f47bbb37 100644
--- a/components/account/AccountInfo.vue
+++ b/components/account/AccountInfo.vue
@@ -5,6 +5,7 @@ const { account, as = 'div' } = defineProps<{
   account: Account
   as?: string
   hoverCard?: boolean
+  square?: boolean
 }>()
 
 defineOptions({
@@ -17,7 +18,7 @@ defineOptions({
 <template>
   <component :is="as" flex gap-3 v-bind="$attrs">
     <AccountHoverWrapper :disabled="!hoverCard" :account="account">
-      <AccountBigAvatar :account="account" shrink-0 />
+      <AccountBigAvatar :account="account" shrink-0 :square="square" />
     </AccountHoverWrapper>
     <div flex="~ col" shrink overflow-hidden justify-center leading-none>
       <div flex="~" gap-2>
diff --git a/components/nav/NavUser.vue b/components/nav/NavUser.vue
index 6944978c..70ce813a 100644
--- a/components/nav/NavUser.vue
+++ b/components/nav/NavUser.vue
@@ -7,6 +7,7 @@
         h-8
         w-8
         :draggable="false"
+        square
       />
     </div>
 
diff --git a/components/user/UserDropdown.vue b/components/user/UserDropdown.vue
index 80281b95..95b3e7b6 100644
--- a/components/user/UserDropdown.vue
+++ b/components/user/UserDropdown.vue
@@ -2,7 +2,7 @@
   <VDropdown :distance="0" placement="top-start">
     <button btn-action-icon :aria-label="$t('action.switch_account')">
       <div :class="{ 'hidden xl:block': currentUser }" i-ri:more-2-line />
-      <AccountAvatar v-if="currentUser" xl:hidden :account="currentUser.account" w-9 h-9 />
+      <AccountAvatar v-if="currentUser" xl:hidden :account="currentUser.account" w-9 h-9 square />
     </button>
     <template #popper="{ hide }">
       <UserSwitcher @click="hide" />
diff --git a/layouts/default.vue b/layouts/default.vue
index 2dee1f96..d5737734 100644
--- a/layouts/default.vue
+++ b/layouts/default.vue
@@ -28,7 +28,7 @@ const wideLayout = computed(() => route.meta.wideLayout ?? false)
                         hover:bg-active cursor-pointer transition-100
                         :to="getAccountRoute(currentUser.account)"
                       >
-                        <AccountInfo :account="currentUser.account" md:break-words />
+                        <AccountInfo :account="currentUser.account" md:break-words square />
                       </NuxtLink>
                       <UserDropdown />
                     </div>