robinwobin.dev
forked from
jollywhoppers.com/witchsky.app
Bluesky app fork with some witchin' additions 💫
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
+36
-7
+1
-1
src/screens/Messages/components/MessageInput.tsx
+1
-1
src/screens/Messages/components/MessageInput.tsx
+1
-1
src/screens/Messages/components/MessageInput.web.tsx
+1
-1
src/screens/Messages/components/MessageInput.web.tsx
+14
-2
src/view/com/util/UserAvatar.tsx
+14
-2
src/view/com/util/UserAvatar.tsx
···
106
106
const finalShape = overrideShape ?? (type === 'user' ? 'circle' : 'square')
107
107
const t = useTheme()
108
108
109
+
const enableSquareAvatars = useEnableSquareAvatars()
110
+
109
111
const aviStyle = useMemo(() => {
110
112
if (finalShape === 'square') {
111
113
return {borderRadius: size > 32 ? 8 : 3, overflow: 'hidden'} as const
···
191
193
</Svg>
192
194
)
193
195
}
194
-
// TODO: shape=square
195
196
return (
196
197
<Svg
197
198
testID="userAvatarFallback"
···
201
202
fill="none"
202
203
stroke="none"
203
204
style={aviStyle}>
204
-
<Circle cx="12" cy="12" r="12" fill={t.palette.primary_500} />
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
+
)}
205
217
<Circle cx="12" cy="9.5" r="3.5" fill="#fff" />
206
218
<Path
207
219
strokeLinecap="round"
+11
-1
src/view/com/util/fab/FABInner.tsx
+11
-1
src/view/com/util/fab/FABInner.tsx
···
32
32
33
33
const enableSquareButtons = useEnableSquareButtons()
34
34
35
-
const size = gtMobile ? styles.sizeLarge : styles.sizeRegular
35
+
const size = gtMobile ? enableSquareButtons ? styles.sizeLargeSquare : styles.sizeLarge : enableSquareButtons ? styles.sizeRegularSquare : styles.sizeRegular
36
36
37
37
const tabletSpacing = gtMobile
38
38
? {right: 50, bottom: 50}
···
84
84
width: 70,
85
85
height: 70,
86
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,
87
97
},
88
98
outer: {
89
99
// @ts-ignore web-only
+5
-2
src/view/shell/bottom-bar/BottomBar.tsx
+5
-2
src/view/shell/bottom-bar/BottomBar.tsx
···
21
21
import {useGate} from '#/lib/statsig/statsig'
22
22
import {emitSoftReset} from '#/state/events'
23
23
import {useHomeBadge} from '#/state/home-badge'
24
+
import {useEnableSquareAvatars} from '#/state/preferences/enable-square-avatars'
24
25
import {useEnableSquareButtons} from '#/state/preferences/enable-square-buttons'
25
26
import {useUnreadMessageCount} from '#/state/queries/messages/list-conversations'
26
27
import {useUnreadNotifications} from '#/state/queries/notifications/unread'
···
140
141
141
142
const [demoMode] = useDemoMode()
142
143
const {isActive: live} = useActorStatus(profile)
144
+
145
+
const enableSquareAvatars = useEnableSquareAvatars()
143
146
144
147
return (
145
148
<>
···
272
275
styles.ctrlIcon,
273
276
pal.text,
274
277
styles.profileIcon,
275
-
styles.onProfile,
278
+
enableSquareAvatars ? styles.onProfileSquare : styles.onProfile,
276
279
{
277
280
borderColor: pal.text.color,
278
-
borderWidth: live ? 0 : 1,
281
+
borderWidth: live ? 0 : enableSquareAvatars ? 1.5 : 1,
279
282
},
280
283
]}>
281
284
<UserAvatar