From 3c06522a4a8d4902c06add2d5f2fcc41a6364c4e Mon Sep 17 00:00:00 2001
From: "xan.lol" <xan@xan.lol>
Date: Thu, 30 Apr 2026 00:58:57 -0700
Subject: [PATCH] fix: square avatar on profile placeholder & bottombar avatar
 outline (mobile web)

---
 src/screens/Profile/Header/index.tsx          | 13 ++++++++++++-
 src/view/com/util/UserAvatar.tsx              |  4 +---
 src/view/shell/bottom-bar/BottomBarStyles.tsx |  2 +-
 src/view/shell/bottom-bar/BottomBarWeb.tsx    |  6 +++++-
 4 files changed, 19 insertions(+), 6 deletions(-)

diff --git a/src/screens/Profile/Header/index.tsx b/src/screens/Profile/Header/index.tsx
index b064ea329..0e0657f43 100644
--- a/src/screens/Profile/Header/index.tsx
+++ b/src/screens/Profile/Header/index.tsx
@@ -17,6 +17,7 @@ import {
 import {useIsFocused} from '@react-navigation/native'
 
 import {sanitizeHandle} from '#/lib/strings/handles'
+import {useEnableSquareAvatars} from '#/state/preferences/enable-square-avatars'
 import {useProfileShadow} from '#/state/cache/profile-shadow'
 import {useModerationOpts} from '#/state/preferences/moderation-opts'
 import {useSetLightStatusBar} from '#/state/shell/light-status-bar'
@@ -37,6 +38,7 @@ import {
 
 let ProfileHeaderLoading = (_props: {}): React.ReactNode => {
   const t = useTheme()
+  const enableSquareAvatars = useEnableSquareAvatars()
   return (
     <View style={t.atoms.bg}>
       <LoadingPlaceholder width="100%" height={150} style={{borderRadius: 0}} />
@@ -45,8 +47,13 @@ let ProfileHeaderLoading = (_props: {}): React.ReactNode => {
           t.atoms.bg,
           {borderColor: t.atoms.bg.backgroundColor},
           styles.avi,
+          enableSquareAvatars && styles.aviSquare,
         ]}>
-        <LoadingPlaceholder width={90} height={90} style={styles.br45} />
+        <LoadingPlaceholder
+          width={90}
+          height={90}
+          style={enableSquareAvatars ? styles.br8 : styles.br45}
+        />
       </View>
       <View style={styles.content}>
         <View style={[styles.buttonsLine]}>
@@ -229,6 +236,9 @@ const styles = StyleSheet.create({
     borderRadius: 47,
     borderWidth: 2,
   },
+  aviSquare: {
+    borderRadius: 10,
+  },
   content: {
     paddingTop: 12,
     paddingHorizontal: 16,
@@ -239,5 +249,6 @@ const styles = StyleSheet.create({
     marginLeft: 'auto',
   },
   br45: {borderRadius: 45},
+  br8: {borderRadius: 8},
   br50: {borderRadius: 50},
 })
diff --git a/src/view/com/util/UserAvatar.tsx b/src/view/com/util/UserAvatar.tsx
index 1dc3d0156..619286509 100644
--- a/src/view/com/util/UserAvatar.tsx
+++ b/src/view/com/util/UserAvatar.tsx
@@ -110,8 +110,6 @@ let DefaultAvatar = ({
   const finalShape = overrideShape ?? (type === 'user' ? 'circle' : 'square')
   const t = useTheme()
 
-  const enableSquareAvatars = useEnableSquareAvatars()
-
   const aviStyle = useMemo(() => {
     if (finalShape === 'square') {
       return {borderRadius: size > 32 ? 8 : 3, overflow: 'hidden'} as const
@@ -206,7 +204,7 @@ let DefaultAvatar = ({
       fill="none"
       stroke="none"
       style={aviStyle}>
-      {enableSquareAvatars ? (
+      {finalShape === 'square' ? (
         <Rect
           x="0"
           y="0"
diff --git a/src/view/shell/bottom-bar/BottomBarStyles.tsx b/src/view/shell/bottom-bar/BottomBarStyles.tsx
index d0e045419..ece3e85ac 100644
--- a/src/view/shell/bottom-bar/BottomBarStyles.tsx
+++ b/src/view/shell/bottom-bar/BottomBarStyles.tsx
@@ -74,6 +74,6 @@ export const styles = StyleSheet.create({
   },
   onProfileSquare: {
     borderWidth: 1,
-    borderRadius: 5,
+    borderRadius: 3,
   },
 })
diff --git a/src/view/shell/bottom-bar/BottomBarWeb.tsx b/src/view/shell/bottom-bar/BottomBarWeb.tsx
index 8342d2a28..2b3c2a36b 100644
--- a/src/view/shell/bottom-bar/BottomBarWeb.tsx
+++ b/src/view/shell/bottom-bar/BottomBarWeb.tsx
@@ -29,6 +29,7 @@ import {useSession} from '#/state/session'
 import {useLoggedOutViewControls} from '#/state/shell/logged-out'
 import {useShellLayout} from '#/state/shell/shell-layout'
 import {useCloseAllActiveElements} from '#/state/util'
+import {useEnableSquareAvatars} from '#/state/preferences/enable-square-avatars'
 import {Link} from '#/view/com/util/Link'
 import {UserAvatar} from '#/view/com/util/UserAvatar'
 import {Logo} from '#/view/icons/Logo'
@@ -71,6 +72,7 @@ export function BottomBarWeb() {
   const hideBorder = useHideBottomBarBorder()
   const accountSwitchControl = useDialogControl()
   const {data: profile} = useProfileQuery({did: currentAccount?.did})
+  const enableSquareAvatars = useEnableSquareAvatars()
   const iconWidth = 26
 
   const unreadMessageCount = useUnreadMessageCount()
@@ -199,7 +201,9 @@ export function BottomBarWeb() {
                           styles.ctrlIcon,
                           styles.profileIcon,
                           isActive && [
-                            styles.onProfile,
+                            enableSquareAvatars
+                              ? styles.onProfileSquare
+                              : styles.onProfile,
                             {borderColor: t.atoms.text.color},
                           ],
                         ]}>
-- 
2.51.2