Add tos, community guidelines, and copyright policy (#410)

* Add tos, community guidelines, and copyright policy

* Fix lint

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 || <>&bull;</>}</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}>
+            &nbsp;&middot;&nbsp;
+          </Text>
+          <TextLink
+            type="md"
+            style={pal.link}
+            href="/support/tos"
+            text="Terms"
+          />
         </View>
       </View>
       <InviteCodes />