some square ui fixes #13

+1 -1

src/screens/Messages/components/MessageInput.tsx

··· 146 padding: a.p_sm.padding - 2, 147 paddingLeft: a.p_md.padding - 2, 148 borderWidth: 1, 149 - borderRadius: 23, 150 borderColor: 'transparent', 151 }, 152 isFocused && inputStyles.chromeFocus,

··· 146 padding: a.p_sm.padding - 2, 147 paddingLeft: a.p_md.padding - 2, 148 borderWidth: 1, 149 + borderRadius: enableSquareButtons ? 11 : 23, 150 borderColor: 'transparent', 151 }, 152 isFocused && inputStyles.chromeFocus,

+1 -1

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

··· 147 paddingRight: a.p_sm.padding - 2, 148 paddingLeft: a.p_sm.padding - 2, 149 borderWidth: 1, 150 - borderRadius: 23, 151 borderColor: 'transparent', 152 height: textAreaHeight + 23, 153 },

··· 147 paddingRight: a.p_sm.padding - 2, 148 paddingLeft: a.p_sm.padding - 2, 149 borderWidth: 1, 150 + borderRadius: enableSquareButtons ? 11 : 23, 151 borderColor: 'transparent', 152 height: textAreaHeight + 23, 153 },

+14 -2

src/view/com/util/UserAvatar.tsx

··· 106 const finalShape = overrideShape ?? (type === 'user' ? 'circle' : 'square') 107 const t = useTheme() 108 0 0 109 const aviStyle = useMemo(() => { 110 if (finalShape === 'square') { 111 return {borderRadius: size > 32 ? 8 : 3, overflow: 'hidden'} as const ··· 191 </Svg> 192 ) 193 } 194 - // TODO: shape=square 195 return ( 196 <Svg 197 testID="userAvatarFallback" ··· 201 fill="none" 202 stroke="none" 203 style={aviStyle}> 204 - <Circle cx="12" cy="12" r="12" fill={t.palette.primary_500} /> 0 0 0 0 0 0 0 0 0 0 0 205 <Circle cx="12" cy="9.5" r="3.5" fill="#fff" /> 206 <Path 207 strokeLinecap="round"

··· 106 const finalShape = overrideShape ?? (type === 'user' ? 'circle' : 'square') 107 const t = useTheme() 108 109 + const enableSquareAvatars = useEnableSquareAvatars() 110 + 111 const aviStyle = useMemo(() => { 112 if (finalShape === 'square') { 113 return {borderRadius: size > 32 ? 8 : 3, overflow: 'hidden'} as const ··· 193 </Svg> 194 ) 195 } 0 196 return ( 197 <Svg 198 testID="userAvatarFallback" ··· 202 fill="none" 203 stroke="none" 204 style={aviStyle}> 205 + {enableSquareAvatars ? ( 206 + <Rect 207 + x="0" 208 + y="0" 209 + width="24" 210 + height="24" 211 + rx="3" 212 + fill={t.palette.primary_500} 213 + /> 214 + ) : ( 215 + <Circle cx="12" cy="12" r="12" fill={t.palette.primary_500} /> 216 + )} 217 <Circle cx="12" cy="9.5" r="3.5" fill="#fff" /> 218 <Path 219 strokeLinecap="round"

+11 -1

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

··· 32 33 const enableSquareButtons = useEnableSquareButtons() 34 35 - const size = gtMobile ? styles.sizeLarge : styles.sizeRegular 36 37 const tabletSpacing = gtMobile 38 ? {right: 50, bottom: 50} ··· 85 height: 70, 86 borderRadius: 35, 87 }, 0 0 0 0 0 0 0 0 0 0 88 outer: { 89 // @ts-ignore web-only 90 position: isWeb ? 'fixed' : 'absolute',

··· 32 33 const enableSquareButtons = useEnableSquareButtons() 34 35 + const size = gtMobile ? enableSquareButtons ? styles.sizeLargeSquare : styles.sizeLarge : enableSquareButtons ? styles.sizeRegularSquare : styles.sizeRegular 36 37 const tabletSpacing = gtMobile 38 ? {right: 50, bottom: 50} ··· 85 height: 70, 86 borderRadius: 35, 87 }, 88 + sizeRegularSquare: { 89 + width: 56, 90 + height: 56, 91 + borderRadius: 10, 92 + }, 93 + sizeLargeSquare: { 94 + width: 70, 95 + height: 70, 96 + borderRadius: 15, 97 + }, 98 outer: { 99 // @ts-ignore web-only 100 position: isWeb ? 'fixed' : 'absolute',

+5 -2

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

··· 21 import {useGate} from '#/lib/statsig/statsig' 22 import {emitSoftReset} from '#/state/events' 23 import {useHomeBadge} from '#/state/home-badge' 0 24 import {useEnableSquareButtons} from '#/state/preferences/enable-square-buttons' 25 import {useUnreadMessageCount} from '#/state/queries/messages/list-conversations' 26 import {useUnreadNotifications} from '#/state/queries/notifications/unread' ··· 141 const [demoMode] = useDemoMode() 142 const {isActive: live} = useActorStatus(profile) 143 0 0 144 return ( 145 <> 146 <SwitchAccountDialog control={accountSwitchControl} /> ··· 272 styles.ctrlIcon, 273 pal.text, 274 styles.profileIcon, 275 - styles.onProfile, 276 { 277 borderColor: pal.text.color, 278 - borderWidth: live ? 0 : 1, 279 }, 280 ]}> 281 <UserAvatar

··· 21 import {useGate} from '#/lib/statsig/statsig' 22 import {emitSoftReset} from '#/state/events' 23 import {useHomeBadge} from '#/state/home-badge' 24 + import {useEnableSquareAvatars} from '#/state/preferences/enable-square-avatars' 25 import {useEnableSquareButtons} from '#/state/preferences/enable-square-buttons' 26 import {useUnreadMessageCount} from '#/state/queries/messages/list-conversations' 27 import {useUnreadNotifications} from '#/state/queries/notifications/unread' ··· 142 const [demoMode] = useDemoMode() 143 const {isActive: live} = useActorStatus(profile) 144 145 + const enableSquareAvatars = useEnableSquareAvatars() 146 + 147 return ( 148 <> 149 <SwitchAccountDialog control={accountSwitchControl} /> ··· 275 styles.ctrlIcon, 276 pal.text, 277 styles.profileIcon, 278 + enableSquareAvatars ? styles.onProfileSquare : styles.onProfile, 279 { 280 borderColor: pal.text.color, 281 + borderWidth: live ? 0 : enableSquareAvatars ? 1.5 : 1, 282 }, 283 ]}> 284 <UserAvatar

+4

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

··· 72 borderWidth: 1, 73 borderRadius: 100, 74 }, 0 0 0 0 75 })

··· 72 borderWidth: 1, 73 borderRadius: 100, 74 }, 75 + onProfileSquare: { 76 + borderWidth: 1, 77 + borderRadius: 5, 78 + }, 79 })