zio/bsky-app
2
0
Fork 0
Code Pull requests Releases Packages Activity

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

Browse source
This commit is contained in:
Paul Frazee 2023-06-12 17:26:17 -05:00
commit 6efbe820d9
7 changed files with 35 additions and 32 deletions
Download patch file Download diff file Expand all files Collapse all files

1
package.json
View file

@ -26,6 +26,7 @@
"@atproto/api": "0.3.8", "@atproto/api": "0.3.8",
"@bam.tech/react-native-image-resizer": "^3.0.4", "@bam.tech/react-native-image-resizer": "^3.0.4",
"@braintree/sanitize-url": "^6.0.2", "@braintree/sanitize-url": "^6.0.2",
"@expo/html-elements": "^0.4.2",
"@expo/webpack-config": "^18.0.1", "@expo/webpack-config": "^18.0.1",
"@fortawesome/fontawesome-svg-core": "^6.1.1", "@fortawesome/fontawesome-svg-core": "^6.1.1",
"@fortawesome/free-regular-svg-icons": "^6.1.1", "@fortawesome/free-regular-svg-icons": "^6.1.1",

37
src/view/com/util/Html.tsx
View file

@ -1,9 +1,16 @@
import * as React from 'react' import * as React from 'react'
import {StyleSheet, View} from 'react-native' import {StyleSheet, View} from 'react-native'
import {usePalette} from 'lib/hooks/usePalette' import {usePalette} from 'lib/hooks/usePalette'
import {useTheme} from 'lib/ThemeContext'
import {Text} from './text/Text' import {Text} from './text/Text'
import {TextLink} from './Link' import {TextLink} from './Link'
import {isDesktopWeb} from 'platform/detection' 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 * These utilities are used to define long documents in an html-like
@ -21,38 +28,26 @@ interface IsChildProps {
export function H1({children}: React.PropsWithChildren<{}>) { export function H1({children}: React.PropsWithChildren<{}>) {
const pal = usePalette('default') const pal = usePalette('default')
return ( const typography = useTheme().typography['title-xl']
<Text type="title-xl" style={[pal.text, styles.h1]}> return <ExpoH1 style={[typography, pal.text, styles.h1]}>{children}</ExpoH1>
{children}
</Text>
)
} }
export function H2({children}: React.PropsWithChildren<{}>) { export function H2({children}: React.PropsWithChildren<{}>) {
const pal = usePalette('default') const pal = usePalette('default')
return ( const typography = useTheme().typography['title-lg']
<Text type="title-lg" style={[pal.text, styles.h2]}> return <ExpoH2 style={[typography, pal.text, styles.h2]}>{children}</ExpoH2>
{children}
</Text>
)
} }
export function H3({children}: React.PropsWithChildren<{}>) { export function H3({children}: React.PropsWithChildren<{}>) {
const pal = usePalette('default') const pal = usePalette('default')
return ( const typography = useTheme().typography.title
<Text type="title" style={[pal.text, styles.h3]}> return <ExpoH3 style={[typography, pal.text, styles.h3]}>{children}</ExpoH3>
{children}
</Text>
)
} }
export function H4({children}: React.PropsWithChildren<{}>) { export function H4({children}: React.PropsWithChildren<{}>) {
const pal = usePalette('default') const pal = usePalette('default')
return ( const typography = useTheme().typography['title-sm']
<Text type="title-sm" style={[pal.text, styles.h4]}> return <ExpoH4 style={[typography, pal.text, styles.h4]}>{children}</ExpoH4>
{children}
</Text>
)
} }
export function P({children}: React.PropsWithChildren<{}>) { export function P({children}: React.PropsWithChildren<{}>) {
@ -149,9 +144,11 @@ const styles = StyleSheet.create({
letterSpacing: 0.8, letterSpacing: 0.8,
}, },
h3: { h3: {
marginTop: 0,
marginBottom: 10, marginBottom: 10,
}, },
h4: { h4: {
marginTop: 0,
marginBottom: 10, marginBottom: 10,
fontWeight: 'bold', fontWeight: 'bold',
}, },

6
src/view/screens/CommunityGuidelines.tsx
View file

@ -1,11 +1,11 @@
import React from 'react' import React from 'react'
import {View} from 'react-native' import {View} from 'react-native'
import {useFocusEffect} from '@react-navigation/native' import {useFocusEffect} from '@react-navigation/native'
import {H1} from '@expo/html-elements'
import {NativeStackScreenProps, CommonNavigatorParams} from 'lib/routes/types' import {NativeStackScreenProps, CommonNavigatorParams} from 'lib/routes/types'
import {ViewHeader} from '../com/util/ViewHeader' import {ViewHeader} from '../com/util/ViewHeader'
import {useStores} from 'state/index' import {useStores} from 'state/index'
import {ScrollView} from 'view/com/util/Views' import {ScrollView} from 'view/com/util/Views'
import {Text} from 'view/com/util/text/Text'
import {usePalette} from 'lib/hooks/usePalette' import {usePalette} from 'lib/hooks/usePalette'
import {s} from 'lib/styles' import {s} from 'lib/styles'
import Html from '../../locale/en/community-guidelines' import Html from '../../locale/en/community-guidelines'
@ -29,9 +29,9 @@ export const CommunityGuidelinesScreen = (_props: Props) => {
<ViewHeader title="Community Guidelines" /> <ViewHeader title="Community Guidelines" />
<ScrollView style={[s.hContentRegion, pal.view]}> <ScrollView style={[s.hContentRegion, pal.view]}>
<View style={[s.p20]}> <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 Community Guidelines
</Text> </H1>
<Html /> <Html />
</View> </View>
<View style={s.footerSpacer} /> <View style={s.footerSpacer} />

6
src/view/screens/CopyrightPolicy.tsx
View file

@ -1,11 +1,11 @@
import React from 'react' import React from 'react'
import {View} from 'react-native' import {View} from 'react-native'
import {useFocusEffect} from '@react-navigation/native' import {useFocusEffect} from '@react-navigation/native'
import {H1} from '@expo/html-elements'
import {NativeStackScreenProps, CommonNavigatorParams} from 'lib/routes/types' import {NativeStackScreenProps, CommonNavigatorParams} from 'lib/routes/types'
import {ViewHeader} from '../com/util/ViewHeader' import {ViewHeader} from '../com/util/ViewHeader'
import {useStores} from 'state/index' import {useStores} from 'state/index'
import {ScrollView} from 'view/com/util/Views' import {ScrollView} from 'view/com/util/Views'
import {Text} from 'view/com/util/text/Text'
import {usePalette} from 'lib/hooks/usePalette' import {usePalette} from 'lib/hooks/usePalette'
import {s} from 'lib/styles' import {s} from 'lib/styles'
import Html from '../../locale/en/copyright-policy' import Html from '../../locale/en/copyright-policy'
@ -26,9 +26,9 @@ export const CopyrightPolicyScreen = (_props: Props) => {
<ViewHeader title="Copyright Policy" /> <ViewHeader title="Copyright Policy" />
<ScrollView style={[s.hContentRegion, pal.view]}> <ScrollView style={[s.hContentRegion, pal.view]}>
<View style={[s.p20]}> <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 Copyright Policy
</Text> </H1>
<Html /> <Html />
</View> </View>
<View style={s.footerSpacer} /> <View style={s.footerSpacer} />

6
src/view/screens/PrivacyPolicy.tsx
View file

@ -1,11 +1,11 @@
import React from 'react' import React from 'react'
import {View} from 'react-native' import {View} from 'react-native'
import {useFocusEffect} from '@react-navigation/native' import {useFocusEffect} from '@react-navigation/native'
import {H1} from '@expo/html-elements'
import {NativeStackScreenProps, CommonNavigatorParams} from 'lib/routes/types' import {NativeStackScreenProps, CommonNavigatorParams} from 'lib/routes/types'
import {ViewHeader} from '../com/util/ViewHeader' import {ViewHeader} from '../com/util/ViewHeader'
import {useStores} from 'state/index' import {useStores} from 'state/index'
import {ScrollView} from 'view/com/util/Views' import {ScrollView} from 'view/com/util/Views'
import {Text} from 'view/com/util/text/Text'
import {usePalette} from 'lib/hooks/usePalette' import {usePalette} from 'lib/hooks/usePalette'
import {s} from 'lib/styles' import {s} from 'lib/styles'
import PrivacyPolicyHtml from '../../locale/en/privacy-policy' import PrivacyPolicyHtml from '../../locale/en/privacy-policy'
@ -26,9 +26,9 @@ export const PrivacyPolicyScreen = (_props: Props) => {
<ViewHeader title="Privacy Policy" /> <ViewHeader title="Privacy Policy" />
<ScrollView style={[s.hContentRegion, pal.view]}> <ScrollView style={[s.hContentRegion, pal.view]}>
<View style={[s.p20]}> <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 Privacy Policy
</Text> </H1>
<PrivacyPolicyHtml /> <PrivacyPolicyHtml />
</View> </View>
<View style={s.footerSpacer} /> <View style={s.footerSpacer} />

6
src/view/screens/TermsOfService.tsx
View file

@ -5,10 +5,10 @@ import {NativeStackScreenProps, CommonNavigatorParams} from 'lib/routes/types'
import {ViewHeader} from '../com/util/ViewHeader' import {ViewHeader} from '../com/util/ViewHeader'
import {useStores} from 'state/index' import {useStores} from 'state/index'
import {ScrollView} from 'view/com/util/Views' import {ScrollView} from 'view/com/util/Views'
import {Text} from 'view/com/util/text/Text'
import {usePalette} from 'lib/hooks/usePalette' import {usePalette} from 'lib/hooks/usePalette'
import {s} from 'lib/styles' import {s} from 'lib/styles'
import Html from '../../locale/en/terms-of-service' import Html from '../../locale/en/terms-of-service'
import {H1} from '@expo/html-elements'
type Props = NativeStackScreenProps<CommonNavigatorParams, 'TermsOfService'> type Props = NativeStackScreenProps<CommonNavigatorParams, 'TermsOfService'>
export const TermsOfServiceScreen = (_props: Props) => { export const TermsOfServiceScreen = (_props: Props) => {
@ -26,9 +26,9 @@ export const TermsOfServiceScreen = (_props: Props) => {
<ViewHeader title="Terms of Service" /> <ViewHeader title="Terms of Service" />
<ScrollView style={[s.hContentRegion, pal.view]}> <ScrollView style={[s.hContentRegion, pal.view]}>
<View style={[s.p20]}> <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 Terms of Service
</Text> </H1>
<Html /> <Html />
</View> </View>
<View style={s.footerSpacer} /> <View style={s.footerSpacer} />

5
yarn.lock
View file

@ -1927,6 +1927,11 @@
tmp "^0.0.33" tmp "^0.0.33"
tslib "^2.4.0" 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": "@expo/image-utils@0.3.22":
version "0.3.22" version "0.3.22"
resolved "https://registry.yarnpkg.com/@expo/image-utils/-/image-utils-0.3.22.tgz#3a45fb2e268d20fcc761c87bca3aca7fd8e24260" resolved "https://registry.yarnpkg.com/@expo/image-utils/-/image-utils-0.3.22.tgz#3a45fb2e268d20fcc761c87bca3aca7fd8e24260"