Bluesky app fork with some witchin' additions 💫
0
fork

Configure Feed

Select the types of activity you want to include in your feed.

Fix double border on web hashtag list (#3091)

* add `topBorder` to Views.tsx

* fix double border

authored by

Hailey and committed by
GitHub
b8f36a8b 7a592d81

+23 -12
+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
··· 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
··· 5 5 style, 6 6 sideBorders, 7 7 ...props 8 - }: React.PropsWithChildren<ViewProps & {sideBorders?: boolean}>) 8 + }: React.PropsWithChildren< 9 + ViewProps & {sideBorders?: boolean; topBorder?: boolean} 10 + >)
+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 }