Merge branch 'loganrosen-loganrosen/heading-elements' into main

2023-06-12 17:26:17 -05:00 · 2023-06-12 17:26:17 -05:00 · 6efbe820d9
parent abdb4aace6 bc2bf20e08
commit 6efbe820d9
7 changed files with 35 additions and 32 deletions
--- 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",
--- 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',
  },
--- 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} />
--- 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} />
--- 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} />
--- 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} />
--- 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"