From e009a703c226cca639c324176df60adb3ea44440 Mon Sep 17 00:00:00 2001
From: Tangled <noreply@tangled.sh>
Date: Mon, 1 Dec 2025 19:38:02 +0000
Subject: [PATCH] some square ui fixes

fixes default fallback avatar not being square, dm message bar not being square and the create new post button on mobile and smaller web sizes
---
 src/screens/Messages/components/MessageInput.tsx |  2 +-
 .../Messages/components/MessageInput.web.tsx     |  2 +-
 src/view/com/util/UserAvatar.tsx                 | 16 ++++++++++++++--
 src/view/com/util/fab/FABInner.tsx               | 12 +++++++++++-
 src/view/shell/bottom-bar/BottomBar.tsx          |  7 +++++--
 src/view/shell/bottom-bar/BottomBarStyles.tsx    |  4 ++++
 6 files changed, 36 insertions(+), 7 deletions(-)

diff --git a/src/screens/Messages/components/MessageInput.tsx b/src/screens/Messages/components/MessageInput.tsx
index 407a1ca2c..fd4f1eef6 100644
--- a/src/screens/Messages/components/MessageInput.tsx
+++ b/src/screens/Messages/components/MessageInput.tsx
@@ -146,7 +146,7 @@ export function MessageInput({
             padding: a.p_sm.padding - 2,
             paddingLeft: a.p_md.padding - 2,
             borderWidth: 1,
-            borderRadius: 23,
+            borderRadius: enableSquareButtons ? 11 : 23,
             borderColor: 'transparent',
           },
           isFocused && inputStyles.chromeFocus,
diff --git a/src/screens/Messages/components/MessageInput.web.tsx b/src/screens/Messages/components/MessageInput.web.tsx
index d2cd35195..54f9874ce 100644
--- a/src/screens/Messages/components/MessageInput.web.tsx
+++ b/src/screens/Messages/components/MessageInput.web.tsx
@@ -147,7 +147,7 @@ export function MessageInput({
             paddingRight: a.p_sm.padding - 2,
             paddingLeft: a.p_sm.padding - 2,
             borderWidth: 1,
-            borderRadius: 23,
+            borderRadius: enableSquareButtons ? 11 : 23,
             borderColor: 'transparent',
             height: textAreaHeight + 23,
           },
diff --git a/src/view/com/util/UserAvatar.tsx b/src/view/com/util/UserAvatar.tsx
index 4332cd319..94a0cde97 100644
--- a/src/view/com/util/UserAvatar.tsx
+++ b/src/view/com/util/UserAvatar.tsx
@@ -106,6 +106,8 @@ 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
@@ -191,7 +193,6 @@ let DefaultAvatar = ({
       </Svg>
     )
   }
-  // TODO: shape=square
   return (
     <Svg
       testID="userAvatarFallback"
@@ -201,7 +202,18 @@ let DefaultAvatar = ({
       fill="none"
       stroke="none"
       style={aviStyle}>
-      <Circle cx="12" cy="12" r="12" fill={t.palette.primary_500} />
+      {enableSquareAvatars ? (
+        <Rect
+          x="0"
+          y="0"
+          width="24"
+          height="24"
+          rx="3"
+          fill={t.palette.primary_500}
+        />
+      ) : (
+        <Circle cx="12" cy="12" r="12" fill={t.palette.primary_500} />
+      )}
       <Circle cx="12" cy="9.5" r="3.5" fill="#fff" />
       <Path
         strokeLinecap="round"
diff --git a/src/view/com/util/fab/FABInner.tsx b/src/view/com/util/fab/FABInner.tsx
index 8371b22ea..59ce56df4 100644
--- a/src/view/com/util/fab/FABInner.tsx
+++ b/src/view/com/util/fab/FABInner.tsx
@@ -32,7 +32,7 @@ export function FABInner({testID, icon, onPress, style, ...props}: FABProps) {
 
   const enableSquareButtons = useEnableSquareButtons()
 
-  const size = gtMobile ? styles.sizeLarge : styles.sizeRegular
+  const size = gtMobile ? enableSquareButtons ? styles.sizeLargeSquare : styles.sizeLarge : enableSquareButtons ? styles.sizeRegularSquare : styles.sizeRegular
 
   const tabletSpacing = gtMobile
     ? {right: 50, bottom: 50}
@@ -85,6 +85,16 @@ const styles = StyleSheet.create({
     height: 70,
     borderRadius: 35,
   },
+  sizeRegularSquare: {
+    width: 56,
+    height: 56,
+    borderRadius: 10,
+  },
+  sizeLargeSquare: {
+    width: 70,
+    height: 70,
+    borderRadius: 15,
+  },
   outer: {
     // @ts-ignore web-only
     position: isWeb ? 'fixed' : 'absolute',
diff --git a/src/view/shell/bottom-bar/BottomBar.tsx b/src/view/shell/bottom-bar/BottomBar.tsx
index a0df512f8..2faec5573 100644
--- a/src/view/shell/bottom-bar/BottomBar.tsx
+++ b/src/view/shell/bottom-bar/BottomBar.tsx
@@ -21,6 +21,7 @@ import {getTabState, TabState} from '#/lib/routes/helpers'
 import {useGate} from '#/lib/statsig/statsig'
 import {emitSoftReset} from '#/state/events'
 import {useHomeBadge} from '#/state/home-badge'
+import {useEnableSquareAvatars} from '#/state/preferences/enable-square-avatars'
 import {useEnableSquareButtons} from '#/state/preferences/enable-square-buttons'
 import {useUnreadMessageCount} from '#/state/queries/messages/list-conversations'
 import {useUnreadNotifications} from '#/state/queries/notifications/unread'
@@ -141,6 +142,8 @@ export function BottomBar({navigation}: BottomTabBarProps) {
   const [demoMode] = useDemoMode()
   const {isActive: live} = useActorStatus(profile)
 
+  const enableSquareAvatars = useEnableSquareAvatars()
+
   return (
     <>
       <SwitchAccountDialog control={accountSwitchControl} />
@@ -272,10 +275,10 @@ export function BottomBar({navigation}: BottomTabBarProps) {
                         styles.ctrlIcon,
                         pal.text,
                         styles.profileIcon,
-                        styles.onProfile,
+                        enableSquareAvatars ? styles.onProfileSquare : styles.onProfile,
                         {
                           borderColor: pal.text.color,
-                          borderWidth: live ? 0 : 1,
+                          borderWidth: live ? 0 : enableSquareAvatars ? 1.5 : 1,
                         },
                       ]}>
                       <UserAvatar
diff --git a/src/view/shell/bottom-bar/BottomBarStyles.tsx b/src/view/shell/bottom-bar/BottomBarStyles.tsx
index 3c99eaf6f..cad141525 100644
--- a/src/view/shell/bottom-bar/BottomBarStyles.tsx
+++ b/src/view/shell/bottom-bar/BottomBarStyles.tsx
@@ -72,4 +72,8 @@ export const styles = StyleSheet.create({
     borderWidth: 1,
     borderRadius: 100,
   },
+  onProfileSquare: {
+    borderWidth: 1,
+    borderRadius: 5,
+  },
 })
-- 
2.51.2