diff --git a/package.json b/package.json
index 53180db1cd..62e2d1d1e2 100644
--- a/package.json
+++ b/package.json
@@ -26,6 +26,7 @@
"@atproto/api": "0.3.8",
"@bam.tech/react-native-image-resizer": "^3.0.4",
"@braintree/sanitize-url": "^6.0.2",
+ "@expo/html-elements": "^0.4.2",
"@expo/webpack-config": "^18.0.1",
"@fortawesome/fontawesome-svg-core": "^6.1.1",
"@fortawesome/free-regular-svg-icons": "^6.1.1",
diff --git a/src/view/com/util/Html.tsx b/src/view/com/util/Html.tsx
index 8d3f29fb02..6179a726e9 100644
--- a/src/view/com/util/Html.tsx
+++ b/src/view/com/util/Html.tsx
@@ -1,9 +1,16 @@
import * as React from 'react'
import {StyleSheet, View} from 'react-native'
import {usePalette} from 'lib/hooks/usePalette'
+import {useTheme} from 'lib/ThemeContext'
import {Text} from './text/Text'
import {TextLink} from './Link'
import {isDesktopWeb} from 'platform/detection'
+import {
+ H1 as ExpoH1,
+ H2 as ExpoH2,
+ H3 as ExpoH3,
+ H4 as ExpoH4,
+} from '@expo/html-elements'
/**
* These utilities are used to define long documents in an html-like
@@ -21,38 +28,26 @@ interface IsChildProps {
export function H1({children}: React.PropsWithChildren<{}>) {
const pal = usePalette('default')
- return (
-
- {children}
-
- )
+ const typography = useTheme().typography['title-xl']
+ return {children}
}
export function H2({children}: React.PropsWithChildren<{}>) {
const pal = usePalette('default')
- return (
-
- {children}
-
- )
+ const typography = useTheme().typography['title-lg']
+ return {children}
}
export function H3({children}: React.PropsWithChildren<{}>) {
const pal = usePalette('default')
- return (
-
- {children}
-
- )
+ const typography = useTheme().typography.title
+ return {children}
}
export function H4({children}: React.PropsWithChildren<{}>) {
const pal = usePalette('default')
- return (
-
- {children}
-
- )
+ const typography = useTheme().typography['title-sm']
+ return {children}
}
export function P({children}: React.PropsWithChildren<{}>) {
@@ -149,9 +144,11 @@ const styles = StyleSheet.create({
letterSpacing: 0.8,
},
h3: {
+ marginTop: 0,
marginBottom: 10,
},
h4: {
+ marginTop: 0,
marginBottom: 10,
fontWeight: 'bold',
},
diff --git a/src/view/screens/CommunityGuidelines.tsx b/src/view/screens/CommunityGuidelines.tsx
index 5d00786da1..f82dfef487 100644
--- a/src/view/screens/CommunityGuidelines.tsx
+++ b/src/view/screens/CommunityGuidelines.tsx
@@ -1,11 +1,11 @@
import React from 'react'
import {View} from 'react-native'
import {useFocusEffect} from '@react-navigation/native'
+import {H1} from '@expo/html-elements'
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'
@@ -29,9 +29,9 @@ export const CommunityGuidelinesScreen = (_props: Props) => {
-
+
Community Guidelines
-
+
diff --git a/src/view/screens/CopyrightPolicy.tsx b/src/view/screens/CopyrightPolicy.tsx
index 756a79c039..8c478cbcb4 100644
--- a/src/view/screens/CopyrightPolicy.tsx
+++ b/src/view/screens/CopyrightPolicy.tsx
@@ -1,11 +1,11 @@
import React from 'react'
import {View} from 'react-native'
import {useFocusEffect} from '@react-navigation/native'
+import {H1} from '@expo/html-elements'
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'
@@ -26,9 +26,9 @@ export const CopyrightPolicyScreen = (_props: Props) => {
-
+
Copyright Policy
-
+
diff --git a/src/view/screens/PrivacyPolicy.tsx b/src/view/screens/PrivacyPolicy.tsx
index ec39ac2d83..7e18425125 100644
--- a/src/view/screens/PrivacyPolicy.tsx
+++ b/src/view/screens/PrivacyPolicy.tsx
@@ -1,11 +1,11 @@
import React from 'react'
import {View} from 'react-native'
import {useFocusEffect} from '@react-navigation/native'
+import {H1} from '@expo/html-elements'
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'
@@ -26,9 +26,9 @@ export const PrivacyPolicyScreen = (_props: Props) => {
-
+
Privacy Policy
-
+
diff --git a/src/view/screens/TermsOfService.tsx b/src/view/screens/TermsOfService.tsx
index 804200e077..e079b03dd9 100644
--- a/src/view/screens/TermsOfService.tsx
+++ b/src/view/screens/TermsOfService.tsx
@@ -5,10 +5,10 @@ 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'
+import {H1} from '@expo/html-elements'
type Props = NativeStackScreenProps
export const TermsOfServiceScreen = (_props: Props) => {
@@ -26,9 +26,9 @@ export const TermsOfServiceScreen = (_props: Props) => {
-
+
Terms of Service
-
+
diff --git a/yarn.lock b/yarn.lock
index 56d5cc37cf..f9a69c25b0 100644
--- a/yarn.lock
+++ b/yarn.lock
@@ -1927,6 +1927,11 @@
tmp "^0.0.33"
tslib "^2.4.0"
+"@expo/html-elements@^0.4.2":
+ version "0.4.2"
+ resolved "https://registry.yarnpkg.com/@expo/html-elements/-/html-elements-0.4.2.tgz#4e9f6b9250af8d0befe3242fd42704cca2421e0e"
+ integrity sha512-lNioCgdtOrCMMqzHY+PCTdyuWBTU4yMBlOzPSkS4YFIWt9bq0zexM2ZJkpybTXmowNdE3zHO93xxAmiA2yDi2w==
+
"@expo/image-utils@0.3.22":
version "0.3.22"
resolved "https://registry.yarnpkg.com/@expo/image-utils/-/image-utils-0.3.22.tgz#3a45fb2e268d20fcc761c87bca3aca7fd8e24260"