diff options
Diffstat (limited to 'src/view')
| -rw-r--r-- | src/view/com/util/Html.tsx | 69 | ||||
| -rw-r--r-- | src/view/screens/CommunityGuidelines.tsx | 41 | ||||
| -rw-r--r-- | src/view/screens/CopyrightPolicy.tsx | 38 | ||||
| -rw-r--r-- | src/view/screens/TermsOfService.tsx | 38 | ||||
| -rw-r--r-- | src/view/shell/desktop/RightNav.tsx | 9 |
5 files changed, 187 insertions, 8 deletions
diff --git a/src/view/com/util/Html.tsx b/src/view/com/util/Html.tsx index 245952e40..dbf24a83a 100644 --- a/src/view/com/util/Html.tsx +++ b/src/view/com/util/Html.tsx @@ -3,6 +3,7 @@ import {StyleSheet, View} from 'react-native' import {usePalette} from 'lib/hooks/usePalette' import {Text} from './text/Text' import {TextLink} from './Link' +import {isDesktopWeb} from 'platform/detection' /** * These utilities are used to define long documents in an html-like @@ -54,12 +55,26 @@ export function P({children}: React.PropsWithChildren<{}>) { ) } -export function UL({children}: React.PropsWithChildren<{}>) { - return <View style={styles.ul}>{children}</View> +export function UL({ + children, + isChild, +}: React.PropsWithChildren<{isChild: boolean}>) { + return ( + <View style={[styles.ul, isChild && styles.ulChild]}> + {markChildProps(children)} + </View> + ) } -export function OL({children}: React.PropsWithChildren<{}>) { - return <View style={styles.ol}>{children}</View> +export function OL({ + children, + isChild, +}: React.PropsWithChildren<{isChild: boolean}>) { + return ( + <View style={[styles.ol, isChild && styles.olChild]}> + {markChildProps(children)} + </View> + ) } export function LI({ @@ -71,7 +86,7 @@ export function LI({ <View style={styles.li}> <Text style={[pal.text, styles.liBullet]}>{value || <>•</>}</Text> <Text type="md" style={[pal.text, styles.liText]}> - {children} + {markChildProps(children)} </Text> </View> ) @@ -89,6 +104,33 @@ export function A({children, href}: React.PropsWithChildren<{href: string}>) { ) } +export function STRONG({children}: React.PropsWithChildren<{}>) { + const pal = usePalette('default') + return ( + <Text type="md-medium" style={[pal.text]}> + {children} + </Text> + ) +} + +export function EM({children}: React.PropsWithChildren<{}>) { + const pal = usePalette('default') + return ( + <Text type="md" style={[pal.text, styles.em]}> + {children} + </Text> + ) +} + +function markChildProps(children) { + return React.Children.map(children, child => { + if (React.isValidElement(child)) { + return React.cloneElement(child, {isChild: true}) + } + return child + }) +} + const styles = StyleSheet.create({ h1: { marginTop: 20, @@ -112,15 +154,23 @@ const styles = StyleSheet.create({ }, ul: { marginBottom: 10, - paddingLeft: 18, + paddingLeft: isDesktopWeb ? 18 : 4, + }, + ulChild: { + paddingTop: 10, + marginBottom: 0, }, ol: { marginBottom: 10, - paddingLeft: 18, + paddingLeft: isDesktopWeb ? 18 : 4, + }, + olChild: { + paddingTop: 10, + marginBottom: 0, }, li: { flexDirection: 'row', - paddingRight: 10, + paddingRight: 20, marginBottom: 10, }, liBullet: { @@ -130,4 +180,7 @@ const styles = StyleSheet.create({ a: { marginBottom: 10, }, + em: { + fontStyle: 'italic', + }, }) diff --git a/src/view/screens/CommunityGuidelines.tsx b/src/view/screens/CommunityGuidelines.tsx new file mode 100644 index 000000000..5d00786da --- /dev/null +++ b/src/view/screens/CommunityGuidelines.tsx @@ -0,0 +1,41 @@ +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 Html from '../../locale/en/community-guidelines' + +type Props = NativeStackScreenProps< + CommonNavigatorParams, + 'CommunityGuidelines' +> +export const CommunityGuidelinesScreen = (_props: Props) => { + const pal = usePalette('default') + const store = useStores() + + useFocusEffect( + React.useCallback(() => { + store.shell.setMinimalShellMode(false) + }, [store]), + ) + + return ( + <View> + <ViewHeader title="Community Guidelines" /> + <ScrollView style={[s.hContentRegion, pal.view]}> + <View style={[s.p20]}> + <Text type="title-xl" style={[pal.text, s.bold, s.pb20]}> + Community Guidelines + </Text> + <Html /> + </View> + <View style={s.footerSpacer} /> + </ScrollView> + </View> + ) +} diff --git a/src/view/screens/CopyrightPolicy.tsx b/src/view/screens/CopyrightPolicy.tsx new file mode 100644 index 000000000..756a79c03 --- /dev/null +++ b/src/view/screens/CopyrightPolicy.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 Html from '../../locale/en/copyright-policy' + +type Props = NativeStackScreenProps<CommonNavigatorParams, 'CopyrightPolicy'> +export const CopyrightPolicyScreen = (_props: Props) => { + const pal = usePalette('default') + const store = useStores() + + useFocusEffect( + React.useCallback(() => { + store.shell.setMinimalShellMode(false) + }, [store]), + ) + + return ( + <View> + <ViewHeader title="Copyright Policy" /> + <ScrollView style={[s.hContentRegion, pal.view]}> + <View style={[s.p20]}> + <Text type="title-xl" style={[pal.text, s.bold, s.pb20]}> + Copyright Policy + </Text> + <Html /> + </View> + <View style={s.footerSpacer} /> + </ScrollView> + </View> + ) +} diff --git a/src/view/screens/TermsOfService.tsx b/src/view/screens/TermsOfService.tsx new file mode 100644 index 000000000..804200e07 --- /dev/null +++ b/src/view/screens/TermsOfService.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 Html from '../../locale/en/terms-of-service' + +type Props = NativeStackScreenProps<CommonNavigatorParams, 'TermsOfService'> +export const TermsOfServiceScreen = (_props: Props) => { + const pal = usePalette('default') + const store = useStores() + + useFocusEffect( + React.useCallback(() => { + store.shell.setMinimalShellMode(false) + }, [store]), + ) + + return ( + <View> + <ViewHeader title="Terms of Service" /> + <ScrollView style={[s.hContentRegion, pal.view]}> + <View style={[s.p20]}> + <Text type="title-xl" style={[pal.text, s.bold, s.pb20]}> + Terms of Service + </Text> + <Html /> + </View> + <View style={s.footerSpacer} /> + </ScrollView> + </View> + ) +} diff --git a/src/view/shell/desktop/RightNav.tsx b/src/view/shell/desktop/RightNav.tsx index 354257a52..84a7593ca 100644 --- a/src/view/shell/desktop/RightNav.tsx +++ b/src/view/shell/desktop/RightNav.tsx @@ -38,6 +38,15 @@ export const DesktopRightNav = observer(function DesktopRightNav() { href="/support/privacy" text="Privacy Policy" /> + <Text type="md" style={pal.textLight}> + · + </Text> + <TextLink + type="md" + style={pal.link} + href="/support/tos" + text="Terms" + /> </View> </View> <InviteCodes /> |