zio/bsky-app
2
0
Fork 0
Code Pull requests Releases Packages Activity

fix onboarding on web

Browse source
This commit is contained in:
Ansh Nanda 2023-08-29 12:16:26 -07:00
parent 742440c22d
commit bf37913701
11 changed files with 235 additions and 113 deletions
Download patch file Download diff file Expand all files Collapse all files

74
src/view/com/util/ViewHeader.tsx
View file

@ -17,6 +17,7 @@ const BACK_HITSLOP = {left: 20, top: 20, right: 50, bottom: 20}
export const ViewHeader = observer(function ({
title,
canGoBack,
showBackButton = true,
hideOnScroll,
showOnDesktop,
showBorder,
@ -24,6 +25,7 @@ export const ViewHeader = observer(function ({
}: {
title: string
canGoBack?: boolean
showBackButton?: boolean
hideOnScroll?: boolean
showOnDesktop?: boolean
showBorder?: boolean
@ -49,7 +51,13 @@ export const ViewHeader = observer(function ({
if (isDesktopWeb) {
if (showOnDesktop) {
return <DesktopWebHeader title={title} renderButton={renderButton} />
return (
<DesktopWebHeader
title={title}
renderButton={renderButton}
showBorder={showBorder}
/>
)
}
return null
} else {
@ -59,30 +67,32 @@ export const ViewHeader = observer(function ({
return (
<Container hideOnScroll={hideOnScroll || false} showBorder={showBorder}>
<TouchableOpacity
testID="viewHeaderDrawerBtn"
onPress={canGoBack ? onPressBack : onPressMenu}
hitSlop={BACK_HITSLOP}
style={canGoBack ? styles.backBtn : styles.backBtnWide}
accessibilityRole="button"
accessibilityLabel={canGoBack ? 'Back' : 'Menu'}
accessibilityHint={
canGoBack ? '' : 'Access navigation links and settings'
}>
{canGoBack ? (
<FontAwesomeIcon
size={18}
icon="angle-left"
style={[styles.backIcon, pal.text]}
/>
) : (
<FontAwesomeIcon
size={18}
icon="bars"
style={[styles.backIcon, pal.textLight]}
/>
)}
</TouchableOpacity>
{showBackButton ? (
<TouchableOpacity
testID="viewHeaderDrawerBtn"
onPress={canGoBack ? onPressBack : onPressMenu}
hitSlop={BACK_HITSLOP}
style={canGoBack ? styles.backBtn : styles.backBtnWide}
accessibilityRole="button"
accessibilityLabel={canGoBack ? 'Back' : 'Menu'}
accessibilityHint={
canGoBack ? '' : 'Access navigation links and settings'
}>
{canGoBack ? (
<FontAwesomeIcon
size={18}
icon="angle-left"
style={[styles.backIcon, pal.text]}
/>
) : (
<FontAwesomeIcon
size={18}
icon="bars"
style={[styles.backIcon, pal.textLight]}
/>
)}
</TouchableOpacity>
) : null}
<View style={styles.titleContainer} pointerEvents="none">
<Text type="title" style={[pal.text, styles.title]}>
{title}
@ -101,13 +111,23 @@ export const ViewHeader = observer(function ({
function DesktopWebHeader({
title,
renderButton,
showBorder = true,
}: {
title: string
renderButton?: () => JSX.Element
showBorder?: boolean
}) {
const pal = usePalette('default')
return (
<CenteredView style={[styles.header, styles.desktopHeader, pal.border]}>
<CenteredView
style={[
styles.header,
styles.desktopHeader,
pal.border,
{
borderBottomWidth: showBorder ? 1 : 0,
},
]}>
<View style={styles.titleContainer} pointerEvents="none">
<Text type="title-lg" style={[pal.text, styles.title]}>
{title}
@ -195,13 +215,11 @@ const styles = StyleSheet.create({
width: '100%',
},
desktopHeader: {
borderBottomWidth: 1,
paddingVertical: 12,
},
border: {
borderBottomWidth: 1,
},
titleContainer: {
marginLeft: 'auto',
marginRight: 'auto',