about summary refs log tree commit diff
path: root/src
diff options
context:
space:
mode:
Diffstat (limited to 'src')
-rw-r--r--src/view/com/util/Html.tsx37
-rw-r--r--src/view/screens/CommunityGuidelines.tsx6
-rw-r--r--src/view/screens/CopyrightPolicy.tsx6
-rw-r--r--src/view/screens/PrivacyPolicy.tsx6
-rw-r--r--src/view/screens/TermsOfService.tsx6
5 files changed, 29 insertions, 32 deletions
diff --git a/src/view/com/util/Html.tsx b/src/view/com/util/Html.tsx
index 8d3f29fb0..6179a726e 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 (
-    <Text type="title-xl" style={[pal.text, styles.h1]}>
-      {children}
-    </Text>
-  )
+  const typography = useTheme().typography['title-xl']
+  return <ExpoH1 style={[typography, pal.text, styles.h1]}>{children}</ExpoH1>
 }
 
 export function H2({children}: React.PropsWithChildren<{}>) {
   const pal = usePalette('default')
-  return (
-    <Text type="title-lg" style={[pal.text, styles.h2]}>
-      {children}
-    </Text>
-  )
+  const typography = useTheme().typography['title-lg']
+  return <ExpoH2 style={[typography, pal.text, styles.h2]}>{children}</ExpoH2>
 }
 
 export function H3({children}: React.PropsWithChildren<{}>) {
   const pal = usePalette('default')
-  return (
-    <Text type="title" style={[pal.text, styles.h3]}>
-      {children}
-    </Text>
-  )
+  const typography = useTheme().typography.title
+  return <ExpoH3 style={[typography, pal.text, styles.h3]}>{children}</ExpoH3>
 }
 
 export function H4({children}: React.PropsWithChildren<{}>) {
   const pal = usePalette('default')
-  return (
-    <Text type="title-sm" style={[pal.text, styles.h4]}>
-      {children}
-    </Text>
-  )
+  const typography = useTheme().typography['title-sm']
+  return <ExpoH4 style={[typography, pal.text, styles.h4]}>{children}</ExpoH4>
 }
 
 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 5d00786da..f82dfef48 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) => {
       <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]}>
+          <H1 style={[pal.text, s.bold, s.pb20, {marginVertical: 0}]}>
             Community Guidelines
-          </Text>
+          </H1>
           <Html />
         </View>
         <View style={s.footerSpacer} />
diff --git a/src/view/screens/CopyrightPolicy.tsx b/src/view/screens/CopyrightPolicy.tsx
index 756a79c03..8c478cbcb 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) => {
       <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]}>
+          <H1 style={[pal.text, s.bold, s.pb20, {marginVertical: 0}]}>
             Copyright Policy
-          </Text>
+          </H1>
           <Html />
         </View>
         <View style={s.footerSpacer} />
diff --git a/src/view/screens/PrivacyPolicy.tsx b/src/view/screens/PrivacyPolicy.tsx
index ec39ac2d8..7e1842512 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) => {
       <ViewHeader title="Privacy Policy" />
       <ScrollView style={[s.hContentRegion, pal.view]}>
         <View style={[s.p20]}>
-          <Text type="title-xl" style={[pal.text, s.bold, s.pb20]}>
+          <H1 style={[pal.text, s.bold, s.pb20, {marginVertical: 0}]}>
             Privacy Policy
-          </Text>
+          </H1>
           <PrivacyPolicyHtml />
         </View>
         <View style={s.footerSpacer} />
diff --git a/src/view/screens/TermsOfService.tsx b/src/view/screens/TermsOfService.tsx
index 804200e07..e079b03dd 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<CommonNavigatorParams, 'TermsOfService'>
 export const TermsOfServiceScreen = (_props: Props) => {
@@ -26,9 +26,9 @@ export const TermsOfServiceScreen = (_props: Props) => {
       <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]}>
+          <H1 style={[pal.text, s.bold, s.pb20, {marginVertical: 0}]}>
             Terms of Service
-          </Text>
+          </H1>
           <Html />
         </View>
         <View style={s.footerSpacer} />
generated by cgit-pink 1.4.1 (git 2.36.1) at 2025-10-12 06:06:38 +0000