Bluesky app fork with some witchin' additions 💫
witchsky.app
bluesky
fork
client
fix: square avatar on profile placeholder & bottombar avatar outline (mobile web)
+19
-6
+12
-1
src/screens/Profile/Header/index.tsx
+12
-1
src/screens/Profile/Header/index.tsx
···
17
17
import {useIsFocused} from '@react-navigation/native'
18
18
19
19
import {sanitizeHandle} from '#/lib/strings/handles'
20
+
import {useEnableSquareAvatars} from '#/state/preferences/enable-square-avatars'
20
21
import {useProfileShadow} from '#/state/cache/profile-shadow'
21
22
import {useModerationOpts} from '#/state/preferences/moderation-opts'
22
23
import {useSetLightStatusBar} from '#/state/shell/light-status-bar'
···
37
38
38
39
let ProfileHeaderLoading = (_props: {}): React.ReactNode => {
39
40
const t = useTheme()
41
+
const enableSquareAvatars = useEnableSquareAvatars()
40
42
return (
41
43
<View style={t.atoms.bg}>
42
44
<LoadingPlaceholder width="100%" height={150} style={{borderRadius: 0}} />
···
45
47
t.atoms.bg,
46
48
{borderColor: t.atoms.bg.backgroundColor},
47
49
styles.avi,
50
+
enableSquareAvatars && styles.aviSquare,
48
51
]}>
49
-
<LoadingPlaceholder width={90} height={90} style={styles.br45} />
52
+
<LoadingPlaceholder
53
+
width={90}
54
+
height={90}
55
+
style={enableSquareAvatars ? styles.br8 : styles.br45}
56
+
/>
50
57
</View>
51
58
<View style={styles.content}>
52
59
<View style={[styles.buttonsLine]}>
···
229
236
borderRadius: 47,
230
237
borderWidth: 2,
231
238
},
239
+
aviSquare: {
240
+
borderRadius: 10,
241
+
},
232
242
content: {
233
243
paddingTop: 12,
234
244
paddingHorizontal: 16,
···
239
249
marginLeft: 'auto',
240
250
},
241
251
br45: {borderRadius: 45},
252
+
br8: {borderRadius: 8},
242
253
br50: {borderRadius: 50},
243
254
})
+1
-3
src/view/com/util/UserAvatar.tsx
+1
-3
src/view/com/util/UserAvatar.tsx
···
110
110
const finalShape = overrideShape ?? (type === 'user' ? 'circle' : 'square')
111
111
const t = useTheme()
112
112
113
-
const enableSquareAvatars = useEnableSquareAvatars()
114
-
115
113
const aviStyle = useMemo(() => {
116
114
if (finalShape === 'square') {
117
115
return {borderRadius: size > 32 ? 8 : 3, overflow: 'hidden'} as const
···
206
204
fill="none"
207
205
stroke="none"
208
206
style={aviStyle}>
209
-
{enableSquareAvatars ? (
207
+
{finalShape === 'square' ? (
210
208
<Rect
211
209
x="0"
212
210
y="0"
+1
-1
src/view/shell/bottom-bar/BottomBarStyles.tsx
+1
-1
src/view/shell/bottom-bar/BottomBarStyles.tsx
+5
-1
src/view/shell/bottom-bar/BottomBarWeb.tsx
+5
-1
src/view/shell/bottom-bar/BottomBarWeb.tsx
···
29
29
import {useLoggedOutViewControls} from '#/state/shell/logged-out'
30
30
import {useShellLayout} from '#/state/shell/shell-layout'
31
31
import {useCloseAllActiveElements} from '#/state/util'
32
+
import {useEnableSquareAvatars} from '#/state/preferences/enable-square-avatars'
32
33
import {Link} from '#/view/com/util/Link'
33
34
import {UserAvatar} from '#/view/com/util/UserAvatar'
34
35
import {Logo} from '#/view/icons/Logo'
···
71
72
const hideBorder = useHideBottomBarBorder()
72
73
const accountSwitchControl = useDialogControl()
73
74
const {data: profile} = useProfileQuery({did: currentAccount?.did})
75
+
const enableSquareAvatars = useEnableSquareAvatars()
74
76
const iconWidth = 26
75
77
76
78
const unreadMessageCount = useUnreadMessageCount()
···
199
201
styles.ctrlIcon,
200
202
styles.profileIcon,
201
203
isActive && [
202
-
styles.onProfile,
204
+
enableSquareAvatars
205
+
? styles.onProfileSquare
206
+
: styles.onProfile,
203
207
{borderColor: t.atoms.text.color},
204
208
],
205
209
]}>