forked from
jollywhoppers.com/witchsky.app
Bluesky app fork with some witchin' additions 💫
Fix double border on web hashtag list (#3091)
* add `topBorder` to Views.tsx
* fix double border
+23
-12
+8
-5
src/components/Lists.tsx
+8
-5
src/components/Lists.tsx
···
1
1
import React from 'react'
2
2
import {atoms as a, useBreakpoints, useTheme} from '#/alf'
3
3
import {View} from 'react-native'
4
+
import {CenteredView} from 'view/com/util/Views'
4
5
import {Loader} from '#/components/Loader'
5
6
import {Trans} from '@lingui/macro'
6
7
import {cleanError} from 'lib/strings/errors'
···
143
144
}) {
144
145
const navigation = useNavigation<NavigationProp>()
145
146
const t = useTheme()
146
-
const {gtMobile} = useBreakpoints()
147
+
const {gtMobile, gtTablet} = useBreakpoints()
147
148
148
149
const canGoBack = navigation.canGoBack()
149
150
const onGoBack = React.useCallback(() => {
···
165
166
if (!isEmpty) return null
166
167
167
168
return (
168
-
<View
169
+
<CenteredView
169
170
style={[
170
171
a.flex_1,
171
172
a.align_center,
172
-
!gtMobile ? [a.justify_between, a.border_t] : a.gap_5xl,
173
+
!gtMobile ? a.justify_between : a.gap_5xl,
173
174
t.atoms.border_contrast_low,
174
175
{paddingTop: 175, paddingBottom: 110},
175
-
]}>
176
+
]}
177
+
sideBorders={gtMobile}
178
+
topBorder={!gtTablet}>
176
179
{isLoading ? (
177
180
<View style={[a.w_full, a.align_center, {top: 100}]}>
178
181
<Loader size="xl" />
···
241
244
</View>
242
245
</>
243
246
)}
244
-
</View>
247
+
</CenteredView>
245
248
)
246
249
}
+2
-5
src/screens/Hashtag.tsx
+2
-5
src/screens/Hashtag.tsx
···
1
1
import React from 'react'
2
2
import {ListRenderItemInfo, Pressable} from 'react-native'
3
-
import {atoms as a, useBreakpoints} from '#/alf'
4
3
import {useFocusEffect} from '@react-navigation/native'
5
4
import {useSetMinimalShellMode} from 'state/shell'
6
5
import {ViewHeader} from 'view/com/util/ViewHeader'
···
19
18
import {msg} from '@lingui/macro'
20
19
import {useLingui} from '@lingui/react'
21
20
import {sanitizeHandle} from 'lib/strings/handles'
22
-
import {CenteredView} from 'view/com/util/Views'
23
21
import {ArrowOutOfBox_Stroke2_Corner0_Rounded} from '#/components/icons/ArrowOutOfBox'
24
22
import {shareUrl} from 'lib/sharing'
25
23
import {HITSLOP_10} from 'lib/constants'
···
38
36
}: NativeStackScreenProps<CommonNavigatorParams, 'Hashtag'>) {
39
37
const {tag, author} = route.params
40
38
const setMinimalShellMode = useSetMinimalShellMode()
41
-
const {gtMobile} = useBreakpoints()
42
39
const {_} = useLingui()
43
40
const [isPTR, setIsPTR] = React.useState(false)
44
41
···
103
100
}, [isFetching, hasNextPage, error, fetchNextPage])
104
101
105
102
return (
106
-
<CenteredView style={a.flex_1} sideBorders={gtMobile}>
103
+
<>
107
104
<ViewHeader
108
105
title={headerTitle}
109
106
subtitle={author ? _(msg`From @${sanitizedAuthor}`) : undefined}
···
159
156
}
160
157
/>
161
158
)}
162
-
</CenteredView>
159
+
</>
163
160
)
164
161
}
+3
-1
src/view/com/util/Views.d.ts
+3
-1
src/view/com/util/Views.d.ts
+10
-1
src/view/com/util/Views.web.tsx
+10
-1
src/view/com/util/Views.web.tsx
···
32
32
export function CenteredView({
33
33
style,
34
34
sideBorders,
35
+
topBorder,
35
36
...props
36
-
}: React.PropsWithChildren<ViewProps & {sideBorders?: boolean}>) {
37
+
}: React.PropsWithChildren<
38
+
ViewProps & {sideBorders?: boolean; topBorder?: boolean}
39
+
>) {
37
40
const pal = usePalette('default')
38
41
const {isMobile} = useWebMediaQueries()
39
42
if (!isMobile) {
···
43
46
style = addStyle(style, {
44
47
borderLeftWidth: 1,
45
48
borderRightWidth: 1,
49
+
})
50
+
style = addStyle(style, pal.border)
51
+
}
52
+
if (topBorder) {
53
+
style = addStyle(style, {
54
+
borderTopWidth: 1,
46
55
})
47
56
style = addStyle(style, pal.border)
48
57
}