diff options
| -rw-r--r-- | package.json | 1 | ||||
| -rw-r--r-- | src/view/com/util/Html.tsx | 37 | ||||
| -rw-r--r-- | yarn.lock | 5 |
3 files changed, 23 insertions, 20 deletions
diff --git a/package.json b/package.json index 53180db1c..62e2d1d1e 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 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/yarn.lock b/yarn.lock index 56d5cc37c..f9a69c25b 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" |