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

···
             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,

src/screens/Messages/components/MessageInput.web.tsx

···
             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,
           },

src/view/com/util/UserAvatar.tsx

···
   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
···
       </Svg>
     )
   }
-  // TODO: shape=square
   return (
     <Svg
       testID="userAvatarFallback"
···
       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"

src/view/com/util/fab/FABInner.tsx

···
 
   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}
···
     width: 70,
     height: 70,
     borderRadius: 35,
+  },
+  sizeRegularSquare: {
+    width: 56,
+    height: 56,
+    borderRadius: 10,
+  },
+  sizeLargeSquare: {
+    width: 70,
+    height: 70,
+    borderRadius: 15,
   },
   outer: {
     // @ts-ignore web-only

src/view/shell/bottom-bar/BottomBar.tsx

···
 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'
···
 
   const [demoMode] = useDemoMode()
   const {isActive: live} = useActorStatus(profile)
+
+  const enableSquareAvatars = useEnableSquareAvatars()
 
   return (
     <>
···
                         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

src/view/shell/bottom-bar/BottomBarStyles.tsx

···
     borderWidth: 1,
     borderRadius: 100,
   },
+  onProfileSquare: {
+    borderWidth: 1,
+    borderRadius: 5,
+  },
 })