From 2af1fec42529f6fc46edb106623a041464edf237 Mon Sep 17 00:00:00 2001
From: wheat <jacobrclevenger@gmail.com>
Date: Wed, 11 Jan 2023 03:39:49 -0500
Subject: [PATCH] feat: use square avatar when on own profile (#961)

---
 components/account/AccountHeader.vue | 4 ++--
 styles/global.css                    | 4 ++++
 2 files changed, 6 insertions(+), 2 deletions(-)

diff --git a/components/account/AccountHeader.vue b/components/account/AccountHeader.vue
index 031c2573..9e9f9c7a 100644
--- a/components/account/AccountHeader.vue
+++ b/components/account/AccountHeader.vue
@@ -70,8 +70,8 @@ const isSelf = $computed(() => currentUser.value?.account.id === account.id)
     <div p4 mt--18 flex flex-col gap-4>
       <div relative>
         <div flex="~ col gap-2 1">
-          <button w-30 h-30 rounded-full border-4 border-bg-base z-2 @click="previewAvatar">
-            <AccountAvatar :account="account" hover:opacity-90 transition-opacity />
+          <button :class="{ 'rounded-full': !isSelf, 'squircle': isSelf }" w-30 h-30 p1 bg-base border-bg-base z-2 @click="previewAvatar">
+            <AccountAvatar :square="isSelf" :account="account" hover:opacity-90 transition-opacity />
           </button>
           <div flex="~ col gap1">
             <div flex justify-between>
diff --git a/styles/global.css b/styles/global.css
index caaf0321..41b70f06 100644
--- a/styles/global.css
+++ b/styles/global.css
@@ -232,3 +232,7 @@ footer {
     --at-apply: 'hover:underline';
   }
 }
+
+.squircle {
+  clip-path: url(#avatar-mask);
+}