e3e91816d1
* update to expo 49 * update expo-camera to fix console erorrs * run doctor again * fix ts errors * patch @sentry/react-native Getting `cannot read property 'ignoreLogs' of undefined` in this file. Ironically, this may be a cyclical imports problem. LogBox isn't enabled in production, so this patch should only affect dev/test. * fix type error * reinstall newer reanimated * pin expo-dev-client to fix reanimated dev-build issue * fix type errors, fix bad conflict res * Fix to notifications badge z-index on desktop --------- Co-authored-by: Paul Frazee <pfrazee@gmail.com>
103 lines
2.3 KiB
TypeScript
103 lines
2.3 KiB
TypeScript
import React from 'react'
|
|
import {StyleSheet, View} from 'react-native'
|
|
import {Text} from '../text/Text'
|
|
import {usePalette} from 'lib/hooks/usePalette'
|
|
import {useWebMediaQueries} from 'lib/hooks/useWebMediaQueries'
|
|
import {useColorSchemeStyle} from 'lib/hooks/useColorSchemeStyle'
|
|
|
|
export const LoggedOutLayout = ({
|
|
leadin,
|
|
title,
|
|
description,
|
|
children,
|
|
}: React.PropsWithChildren<{
|
|
leadin: string
|
|
title: string
|
|
description: string
|
|
}>) => {
|
|
const {isMobile, isTabletOrMobile} = useWebMediaQueries()
|
|
const pal = usePalette('default')
|
|
const sideBg = useColorSchemeStyle(pal.viewLight, pal.view)
|
|
const contentBg = useColorSchemeStyle(pal.view, {
|
|
backgroundColor: pal.colors.background,
|
|
borderColor: pal.colors.border,
|
|
borderLeftWidth: 1,
|
|
})
|
|
|
|
if (isMobile) {
|
|
return <View style={{paddingTop: 10}}>{children}</View>
|
|
}
|
|
return (
|
|
<View style={styles.container}>
|
|
<View style={[styles.side, sideBg]}>
|
|
<Text
|
|
style={[
|
|
pal.textLight,
|
|
styles.leadinText,
|
|
isTabletOrMobile && styles.leadinTextSmall,
|
|
]}>
|
|
{leadin}
|
|
</Text>
|
|
<Text
|
|
style={[
|
|
pal.link,
|
|
styles.titleText,
|
|
isTabletOrMobile && styles.titleTextSmall,
|
|
]}>
|
|
{title}
|
|
</Text>
|
|
<Text type="2xl-medium" style={[pal.textLight, styles.descriptionText]}>
|
|
{description}
|
|
</Text>
|
|
</View>
|
|
<View style={[styles.content, contentBg]}>
|
|
<View style={styles.contentWrapper}>{children}</View>
|
|
</View>
|
|
</View>
|
|
)
|
|
}
|
|
|
|
const styles = StyleSheet.create({
|
|
container: {
|
|
flexDirection: 'row',
|
|
// @ts-ignore web only
|
|
height: '100vh',
|
|
},
|
|
side: {
|
|
flex: 1,
|
|
paddingHorizontal: 40,
|
|
paddingBottom: 80,
|
|
justifyContent: 'center',
|
|
},
|
|
content: {
|
|
flex: 2,
|
|
paddingHorizontal: 40,
|
|
justifyContent: 'center',
|
|
},
|
|
|
|
leadinText: {
|
|
fontSize: 36,
|
|
fontWeight: '800',
|
|
textAlign: 'right',
|
|
},
|
|
leadinTextSmall: {
|
|
fontSize: 24,
|
|
},
|
|
titleText: {
|
|
fontSize: 58,
|
|
fontWeight: '800',
|
|
textAlign: 'right',
|
|
},
|
|
titleTextSmall: {
|
|
fontSize: 36,
|
|
},
|
|
descriptionText: {
|
|
maxWidth: 400,
|
|
marginTop: 10,
|
|
marginLeft: 'auto',
|
|
textAlign: 'right',
|
|
},
|
|
contentWrapper: {
|
|
maxWidth: 600,
|
|
},
|
|
})
|