diff options
Diffstat (limited to 'src/view')
| -rw-r--r-- | src/view/com/util/Html.tsx | 133 | ||||
| -rw-r--r-- | src/view/com/util/Link.tsx | 4 | ||||
| -rw-r--r-- | src/view/com/util/Views.web.tsx | 2 | ||||
| -rw-r--r-- | src/view/screens/PrivacyPolicy.tsx | 38 | ||||
| -rw-r--r-- | src/view/screens/Support.tsx | 44 | ||||
| -rw-r--r-- | src/view/shell/desktop/RightNav.tsx | 24 |
6 files changed, 236 insertions, 9 deletions
diff --git a/src/view/com/util/Html.tsx b/src/view/com/util/Html.tsx new file mode 100644 index 000000000..245952e40 --- /dev/null +++ b/src/view/com/util/Html.tsx @@ -0,0 +1,133 @@ +import React from 'react' +import {StyleSheet, View} from 'react-native' +import {usePalette} from 'lib/hooks/usePalette' +import {Text} from './text/Text' +import {TextLink} from './Link' + +/** + * These utilities are used to define long documents in an html-like + * DSL. See for instance /locale/en/privacy-policy.tsx + */ + +export function H1({children}: React.PropsWithChildren<{}>) { + const pal = usePalette('default') + return ( + <Text type="title-xl" style={[pal.text, styles.h1]}> + {children} + </Text> + ) +} + +export function H2({children}: React.PropsWithChildren<{}>) { + const pal = usePalette('default') + return ( + <Text type="title-lg" style={[pal.text, styles.h2]}> + {children} + </Text> + ) +} + +export function H3({children}: React.PropsWithChildren<{}>) { + const pal = usePalette('default') + return ( + <Text type="title" style={[pal.text, styles.h3]}> + {children} + </Text> + ) +} + +export function H4({children}: React.PropsWithChildren<{}>) { + const pal = usePalette('default') + return ( + <Text type="title-sm" style={[pal.text, styles.h4]}> + {children} + </Text> + ) +} + +export function P({children}: React.PropsWithChildren<{}>) { + const pal = usePalette('default') + return ( + <Text type="md" style={[pal.text, styles.p]}> + {children} + </Text> + ) +} + +export function UL({children}: React.PropsWithChildren<{}>) { + return <View style={styles.ul}>{children}</View> +} + +export function OL({children}: React.PropsWithChildren<{}>) { + return <View style={styles.ol}>{children}</View> +} + +export function LI({ + children, + value, +}: React.PropsWithChildren<{value?: string}>) { + const pal = usePalette('default') + return ( + <View style={styles.li}> + <Text style={[pal.text, styles.liBullet]}>{value || <>•</>}</Text> + <Text type="md" style={[pal.text, styles.liText]}> + {children} + </Text> + </View> + ) +} + +export function A({children, href}: React.PropsWithChildren<{href: string}>) { + const pal = usePalette('default') + return ( + <TextLink + type="md" + style={[pal.link, styles.a]} + text={children} + href={href} + /> + ) +} + +const styles = StyleSheet.create({ + h1: { + marginTop: 20, + marginBottom: 10, + letterSpacing: 0.8, + }, + h2: { + marginTop: 20, + marginBottom: 10, + letterSpacing: 0.8, + }, + h3: { + marginBottom: 10, + }, + h4: { + marginBottom: 10, + fontWeight: 'bold', + }, + p: { + marginBottom: 10, + }, + ul: { + marginBottom: 10, + paddingLeft: 18, + }, + ol: { + marginBottom: 10, + paddingLeft: 18, + }, + li: { + flexDirection: 'row', + paddingRight: 10, + marginBottom: 10, + }, + liBullet: { + paddingRight: 10, + }, + liText: {}, + a: { + marginBottom: 10, + }, +}) diff --git a/src/view/com/util/Link.tsx b/src/view/com/util/Link.tsx index cee4d4136..f356f0b09 100644 --- a/src/view/com/util/Link.tsx +++ b/src/view/com/util/Link.tsx @@ -89,7 +89,7 @@ export const TextLink = observer(function TextLink({ type?: TypographyVariant style?: StyleProp<TextStyle> href: string - text: string | JSX.Element + text: string | JSX.Element | React.ReactNode numberOfLines?: number lineHeight?: number }) { @@ -193,7 +193,7 @@ function onPressInner( if (shouldHandle) { href = convertBskyAppUrlIfNeeded(href) - if (href.startsWith('http')) { + if (href.startsWith('http') || href.startsWith('mailto')) { Linking.openURL(href) } else { store.shell.closeModal() // close any active modals diff --git a/src/view/com/util/Views.web.tsx b/src/view/com/util/Views.web.tsx index 9a43697b5..aa27d7f88 100644 --- a/src/view/com/util/Views.web.tsx +++ b/src/view/com/util/Views.web.tsx @@ -78,7 +78,7 @@ const styles = StyleSheet.create({ }, containerScroll: { width: '100%', - minHeight: '100vh', + maxHeight: '100vh', maxWidth: 600, marginLeft: 'auto', marginRight: 'auto', diff --git a/src/view/screens/PrivacyPolicy.tsx b/src/view/screens/PrivacyPolicy.tsx new file mode 100644 index 000000000..d5476ab52 --- /dev/null +++ b/src/view/screens/PrivacyPolicy.tsx @@ -0,0 +1,38 @@ +import React from 'react' +import {View} from 'react-native' +import {useFocusEffect} from '@react-navigation/native' +import {NativeStackScreenProps, CommonNavigatorParams} from 'lib/routes/types' +import {ViewHeader} from '../com/util/ViewHeader' +import {useStores} from 'state/index' +import {ScrollView} from 'view/com/util/Views' +import {Text} from 'view/com/util/text/Text' +import {usePalette} from 'lib/hooks/usePalette' +import {s} from 'lib/styles' +import PrivacyPolicyHtml from '../../locale/en/privacy-policy' + +type Props = NativeStackScreenProps<CommonNavigatorParams, 'PrivacyPolicy'> +export const PrivacyPolicyScreen = (_props: Props) => { + const pal = usePalette('default') + const store = useStores() + + useFocusEffect( + React.useCallback(() => { + store.shell.setMinimalShellMode(false) + }, [store]), + ) + + return ( + <View> + <ViewHeader title="Privacy Policy" /> + <ScrollView style={[s.hContentRegion, pal.view]}> + <View style={[s.p20]}> + <Text type="title-xl" style={[pal.text, s.pb20]}> + Privacy Policy + </Text> + <PrivacyPolicyHtml /> + </View> + <View style={s.footerSpacer} /> + </ScrollView> + </View> + ) +} diff --git a/src/view/screens/Support.tsx b/src/view/screens/Support.tsx new file mode 100644 index 000000000..de1b38b84 --- /dev/null +++ b/src/view/screens/Support.tsx @@ -0,0 +1,44 @@ +import React from 'react' +import {View} from 'react-native' +import {useFocusEffect} from '@react-navigation/native' +import {NativeStackScreenProps, CommonNavigatorParams} from 'lib/routes/types' +import {ViewHeader} from '../com/util/ViewHeader' +import {useStores} from 'state/index' +import {Text} from 'view/com/util/text/Text' +import {TextLink} from 'view/com/util/Link' +import {CenteredView} from 'view/com/util/Views' +import {usePalette} from 'lib/hooks/usePalette' +import {s} from 'lib/styles' + +type Props = NativeStackScreenProps<CommonNavigatorParams, 'Support'> +export const SupportScreen = (_props: Props) => { + const store = useStores() + const pal = usePalette('default') + + useFocusEffect( + React.useCallback(() => { + store.shell.setMinimalShellMode(false) + }, [store]), + ) + + return ( + <View> + <ViewHeader title="Support" /> + <CenteredView> + <Text type="title-xl" style={[pal.text, s.p20, s.pb5]}> + Support + </Text> + <Text style={[pal.text, s.p20]}> + If you need help, email us at{' '} + <TextLink + href="mailto:support@bsky.app" + text="support@bsky.app" + style={pal.link} + />{' '} + with a description of your issue and information about how we can help + you. + </Text> + </CenteredView> + </View> + ) +} diff --git a/src/view/shell/desktop/RightNav.tsx b/src/view/shell/desktop/RightNav.tsx index a196951af..58fb31392 100644 --- a/src/view/shell/desktop/RightNav.tsx +++ b/src/view/shell/desktop/RightNav.tsx @@ -6,6 +6,7 @@ import {DesktopSearch} from './Search' import {Text} from 'view/com/util/text/Text' import {TextLink} from 'view/com/util/Link' import {FEEDBACK_FORM_URL} from 'lib/constants' +import {s} from 'lib/styles' export const DesktopRightNav = observer(function DesktopRightNav() { const pal = usePalette('default') @@ -17,12 +18,23 @@ export const DesktopRightNav = observer(function DesktopRightNav() { Welcome to Bluesky! This is a beta application that's still in development. </Text> - <TextLink - type="md" - style={pal.link} - href={FEEDBACK_FORM_URL} - text="Send feedback" - /> + <View style={[s.flexRow]}> + <TextLink + type="md" + style={pal.link} + href={FEEDBACK_FORM_URL} + text="Send feedback" + /> + <Text type="md" style={pal.textLight}> + · + </Text> + <TextLink + type="md" + style={pal.link} + href="/support/privacy" + text="Privacy Policy" + /> + </View> </View> </View> ) |