3 files changed, 136 insertions, 3 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 || <>&bull;</>}</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',