refactor toggle button

src/view/com/util/forms/ToggleButton.tsx

@@ -1,12 +1,55 @@
 import React from 'react'
-import {StyleProp, StyleSheet, TextStyle, View, ViewStyle} from 'react-native'
-import {Text} from '../text/Text'
+import {
+  StyleProp,
+  StyleSheet,
+  TextStyle,
+  View,
+  ViewStyle,
+  Pressable,
+} from 'react-native'
+import {Text as RNText} from '../text/Text'
 import {Button, ButtonType} from './Button'
 import {useTheme} from 'lib/ThemeContext'
 import {choose} from 'lib/functions'
 import {colors} from 'lib/styles'
 import {TypographyVariant} from 'lib/ThemeContext'
 
+import {ComponentProps, Box, Text} from 'lib/design-system'
+
+export function Toggle({
+  children,
+  selected,
+  ...props
+}: React.PropsWithChildren<
+  ComponentProps & {
+    selected: boolean
+  }
+>) {
+  return (
+    <Pressable {...props}>
+      <Box inline aic gap="s" py="s" radius={24}>
+        <Box rel w={42} h={26} radius={15} borderWidth={2} borderColor="border">
+          <Box
+            abs
+            w={16}
+            h={16}
+            radius={10}
+            bg={selected ? 'textLink' : 'border'}
+            top={3}
+            left={selected ? undefined : 3}
+            right={selected ? 3 : undefined}
+          />
+        </Box>
+
+        <Box>
+          {/* @ts-ignore userSelect is a web property */}
+          <Text style={{userSelect: 'none'}}>{children}</Text>
+        </Box>
+      </Box>
+    </Pressable>
+  )
+}
+
 export function ToggleButton({
   type = 'default-light',
   label,
@@ -146,9 +189,11 @@ export function ToggleButton({
           />
         </View>
         {label === '' ? null : (
-          <Text type={labelType || 'button'} style={[labelStyle, styles.label]}>
+          <RNText
+            type={labelType || 'button'}
+            style={[labelStyle, styles.label]}>
             {label}
-          </Text>
+          </RNText>
         )}
       </View>
     </Button>

src/view/screens/DesignSystem.tsx

@@ -4,28 +4,44 @@ import {NativeStackScreenProps, CommonNavigatorParams} from 'lib/routes/types'
 import {withAuthRequired} from 'view/com/auth/withAuthRequired'
 
 import {ThemeProvider, Box, Text, H1, H2, H3, P} from 'lib/design-system'
+import {Toggle} from 'view/com/util/forms/ToggleButton'
 
 type Props = NativeStackScreenProps<CommonNavigatorParams, 'DesignSystem'>
 
+function ToggleButtons() {
+  const [selected, setSelected] = React.useState(false)
+  return (
+    <>
+      <Toggle selected={selected} onPress={() => setSelected(!selected)}>
+        Toggle button
+      </Toggle>
+    </>
+  )
+}
+
 export const DesignSystemScreen = withAuthRequired(
   observer(function DesignSystem({}: Props) {
     return (
       <ThemeProvider theme="dark">
         <Box pa="m" gtPhone={{padding: 'l'}} debug>
-          <H2 as="h1" c="theme" gtPhone={{mb: 'm', marginTop: 'l'}}>
+          <H2 as="h1" c="text" gtPhone={{mb: 'm', marginTop: 'l'}}>
             Heading 1
           </H2>
-          <H1 as="h2" c="theme" style={{color: 'tomato'}}>
+          <H1 as="h2" c="text" style={{color: 'tomato'}}>
             Heading 2
           </H1>
           <H3 lh="xl">Heading 3</H3>
           <P caps>Paragraph</P>
 
           <Box inline aic gap="m" my="l">
-            <Box w={100} h={100} bg="theme" />
+            <Box w={100} h={100} bg="textLink" />
             <Box w={50} h={50} bg="text" />
             <Text font="mono">Monospace</Text>
           </Box>
+
+          <Box py="l">
+            <ToggleButtons />
+          </Box>
         </Box>
       </ThemeProvider>
     )