about summary refs log tree commit diff
path: root/src/view/com/util/Html.tsx
diff options
context:
space:
mode:
authorEric Bailey <git@esb.lol>2024-10-03 20:22:54 -0500
committerGitHub <noreply@github.com>2024-10-03 20:22:54 -0500
commitce53b3a2648732ee67abd3cf4333f154031bd7e5 (patch)
treef90cf7326fbba9478f75586cd4851ea78adc135b /src/view/com/util/Html.tsx
parenteb3b01d0adc5d5c053e1d350c087941b56106497 (diff)
downloadvoidsky-ce53b3a2648732ee67abd3cf4333f154031bd7e5.tar.zst
Font tweaks (#5597)
* Increase fontWeight on android

* Use atoms for a couple stray fontWeights

* Rm unused file
Diffstat (limited to 'src/view/com/util/Html.tsx')
-rw-r--r--src/view/com/util/Html.tsx207
1 files changed, 0 insertions, 207 deletions
diff --git a/src/view/com/util/Html.tsx b/src/view/com/util/Html.tsx
deleted file mode 100644
index f77fb1603..000000000
--- a/src/view/com/util/Html.tsx
+++ /dev/null
@@ -1,207 +0,0 @@
-import * as React from 'react'
-import {StyleSheet, View} from 'react-native'
-import {
-  H1 as ExpoH1,
-  H2 as ExpoH2,
-  H3 as ExpoH3,
-  H4 as ExpoH4,
-} from '@expo/html-elements'
-
-import {usePalette} from '#/lib/hooks/usePalette'
-import {useWebMediaQueries} from '#/lib/hooks/useWebMediaQueries'
-import {useTheme} from '#/lib/ThemeContext'
-import {TextLink} from './Link'
-import {Text} from './text/Text'
-
-/**
- * These utilities are used to define long documents in an html-like
- * DSL. See for instance /locale/en/privacy-policy.tsx
- */
-
-interface IsChildProps {
-  isChild?: boolean
-}
-
-// type ReactNodeWithIsChildProp =
-//   | React.ReactElement<IsChildProps>
-//   | React.ReactElement<IsChildProps>[]
-//   | React.ReactNode
-
-export function H1({children}: React.PropsWithChildren<{}>) {
-  const styles = useStyles()
-  const pal = usePalette('default')
-  const typography = useTheme().typography['title-xl']
-  // @ts-ignore Expo's TextStyle definition seems to have gotten away from RN's -prf
-  return <ExpoH1 style={[typography, pal.text, styles.h1]}>{children}</ExpoH1>
-}
-
-export function H2({children}: React.PropsWithChildren<{}>) {
-  const styles = useStyles()
-  const pal = usePalette('default')
-  const typography = useTheme().typography['title-lg']
-  // @ts-ignore Expo's TextStyle definition seems to have gotten away from RN's -prf
-  return <ExpoH2 style={[typography, pal.text, styles.h2]}>{children}</ExpoH2>
-}
-
-export function H3({children}: React.PropsWithChildren<{}>) {
-  const styles = useStyles()
-  const pal = usePalette('default')
-  const typography = useTheme().typography.title
-  // @ts-ignore Expo's TextStyle definition seems to have gotten away from RN's -prf
-  return <ExpoH3 style={[typography, pal.text, styles.h3]}>{children}</ExpoH3>
-}
-
-export function H4({children}: React.PropsWithChildren<{}>) {
-  const styles = useStyles()
-  const pal = usePalette('default')
-  const typography = useTheme().typography['title-sm']
-  // @ts-ignore Expo's TextStyle definition seems to have gotten away from RN's -prf
-  return <ExpoH4 style={[typography, pal.text, styles.h4]}>{children}</ExpoH4>
-}
-
-export function P({children}: React.PropsWithChildren<{}>) {
-  const styles = useStyles()
-  const pal = usePalette('default')
-  return (
-    <Text type="md" style={[pal.text, styles.p]}>
-      {children}
-    </Text>
-  )
-}
-
-export function UL({children, isChild}: React.PropsWithChildren<IsChildProps>) {
-  const styles = useStyles()
-  return (
-    <View style={[styles.ul, isChild && styles.ulChild]}>
-      {markChildProps(children)}
-    </View>
-  )
-}
-
-export function OL({children, isChild}: React.PropsWithChildren<IsChildProps>) {
-  const styles = useStyles()
-  return (
-    <View style={[styles.ol, isChild && styles.olChild]}>
-      {markChildProps(children)}
-    </View>
-  )
-}
-
-export function LI({
-  children,
-  value,
-}: React.PropsWithChildren<{value?: string}>) {
-  const styles = useStyles()
-  const pal = usePalette('default')
-  return (
-    <View style={styles.li}>
-      <Text style={[pal.text, styles.liBullet]}>{value || <>&bull;</>}</Text>
-      <Text type="md" style={[pal.text, styles.liText]}>
-        {markChildProps(children)}
-      </Text>
-    </View>
-  )
-}
-
-export function A({children, href}: React.PropsWithChildren<{href: string}>) {
-  const styles = useStyles()
-  const pal = usePalette('default')
-  return (
-    <TextLink
-      type="md"
-      style={[pal.link, styles.a]}
-      text={children}
-      href={href}
-    />
-  )
-}
-
-export function STRONG({children}: React.PropsWithChildren<{}>) {
-  const pal = usePalette('default')
-  return (
-    <Text type="md-medium" style={[pal.text]}>
-      {children}
-    </Text>
-  )
-}
-
-export function EM({children}: React.PropsWithChildren<{}>) {
-  const styles = useStyles()
-  const pal = usePalette('default')
-  return (
-    <Text type="md" style={[pal.text, styles.em]}>
-      {children}
-    </Text>
-  )
-}
-
-function markChildProps(children: React.ReactNode) {
-  return React.Children.map(children, child => {
-    if (React.isValidElement(child)) {
-      return React.cloneElement<IsChildProps>(
-        child as React.ReactElement<IsChildProps>,
-        {isChild: true},
-      )
-    }
-    return child
-  })
-}
-
-const useStyles = () => {
-  const {isDesktop} = useWebMediaQueries()
-  return StyleSheet.create({
-    h1: {
-      marginTop: 20,
-      marginBottom: 10,
-      letterSpacing: 0.8,
-    },
-    h2: {
-      marginTop: 20,
-      marginBottom: 10,
-      letterSpacing: 0.8,
-    },
-    h3: {
-      marginTop: 0,
-      marginBottom: 10,
-    },
-    h4: {
-      marginTop: 0,
-      marginBottom: 10,
-      fontWeight: '600',
-    },
-    p: {
-      marginBottom: 10,
-    },
-    ul: {
-      marginBottom: 10,
-      paddingLeft: isDesktop ? 18 : 4,
-    },
-    ulChild: {
-      paddingTop: 10,
-      marginBottom: 0,
-    },
-    ol: {
-      marginBottom: 10,
-      paddingLeft: isDesktop ? 18 : 4,
-    },
-    olChild: {
-      paddingTop: 10,
-      marginBottom: 0,
-    },
-    li: {
-      flexDirection: 'row',
-      paddingRight: 20,
-      marginBottom: 10,
-    },
-    liBullet: {
-      paddingRight: 10,
-    },
-    liText: {},
-    a: {
-      marginBottom: 10,
-    },
-    em: {
-      fontStyle: 'italic',
-    },
-  })
-}