replace button with checkbox

src/components/StarterPack/Wizard/WizardFeedCard.tsx

@@ -1,13 +1,15 @@
 import React from 'react'
-import {Keyboard, View} from 'react-native'
+import {Keyboard, Pressable, View} from 'react-native'
 import {GeneratorView} from '@atproto/api/dist/client/types/app/bsky/feed/defs'
-import {msg, Trans} from '@lingui/macro'
+import {msg} from '@lingui/macro'
 import {useLingui} from '@lingui/react'
 
+import {isWeb} from 'platform/detection'
 import {UserAvatar} from 'view/com/util/UserAvatar'
 import {WizardAction, WizardState} from '#/screens/StarterPack/Wizard/State'
 import {atoms as a, useTheme} from '#/alf'
-import {Button, ButtonText} from '#/components/Button'
+import * as Toggle from '#/components/forms/Toggle'
+import {Checkbox} from '#/components/forms/Toggle'
 import {Text} from '#/components/Typography'
 
 export function WizardFeedCard({
@@ -23,7 +25,7 @@ export function WizardFeedCard({
   const t = useTheme()
 
   const includesFeed = state.feeds.some(f => f.uri === generator.uri)
-  const onAdd = () => {
+  const onPressAddRemove = () => {
     Keyboard.dismiss()
     if (includesFeed) {
       dispatch({type: 'RemoveFeed', feedUri: generator.uri})
@@ -33,16 +35,22 @@ export function WizardFeedCard({
   }
 
   return (
-    <View
+    <Pressable
+      accessibilityRole="button"
       style={[
         a.flex_row,
         a.align_center,
         a.px_md,
         a.py_sm,
-        a.border_b,
         a.gap_md,
+        a.border_b,
         t.atoms.border_contrast_low,
-      ]}>
+        // @ts-expect-error web only
+        isWeb && {
+          cursor: 'default',
+        },
+      ]}
+      onPress={onPressAddRemove}>
       <UserAvatar type="algo" size={45} avatar={generator.avatar} />
       <View style={[a.flex_1]}>
         <Text style={[a.flex_1, a.font_bold, a.text_md]} numberOfLines={1}>
@@ -54,18 +62,17 @@ export function WizardFeedCard({
           {_(msg`Feed by @${generator.creator.handle}`)}
         </Text>
       </View>
-      <Button
+      <Toggle.Item
-        label={includesFeed ? _(msg`Remove`) : _(msg`Add`)}
+        name={_(msg`Person toggle`)}
-        variant="solid"
+        label={
-        color={includesFeed ? 'secondary' : 'primary'}
+          includesFeed
-        size="small"
+            ? _(msg`Remove ${generator.displayName} from starter pack`)
-        style={{paddingVertical: 6}}
+            : _(msg`Add ${generator.displayName} to starter pack`)
-        disabled={!includesFeed && state.feeds.length >= 3}
+        }
-        onPress={onAdd}>
+        value={includesFeed}
-        <ButtonText>
+        onChange={onPressAddRemove}>
-          {includesFeed ? <Trans>Remove</Trans> : <Trans>Add</Trans>}
+        <Checkbox />
-        </ButtonText>
+      </Toggle.Item>
-      </Button>
+    </Pressable>
-    </View>
   )
 }

src/components/StarterPack/Wizard/WizardProfileCard.tsx

@@ -1,14 +1,16 @@
 import React from 'react'
-import {Keyboard, View} from 'react-native'
+import {Keyboard, Pressable, View} from 'react-native'
 import {AppBskyActorDefs} from '@atproto/api'
-import {msg, Trans} from '@lingui/macro'
+import {msg} from '@lingui/macro'
 import {useLingui} from '@lingui/react'
 
+import {isWeb} from 'platform/detection'
 import {useSession} from 'state/session'
 import {UserAvatar} from 'view/com/util/UserAvatar'
 import {WizardAction, WizardState} from '#/screens/StarterPack/Wizard/State'
 import {atoms as a, useTheme} from '#/alf'
-import {Button, ButtonText} from '#/components/Button'
+import * as Toggle from '#/components/forms/Toggle'
+import {Checkbox} from '#/components/forms/Toggle'
 import {Text} from '#/components/Typography'
 
 export function WizardProfileCard({
@@ -36,7 +38,8 @@ export function WizardProfileCard({
   }
 
   return (
-    <View
+    <Pressable
+      accessibilityRole="button"
       style={[
         a.flex_row,
         a.align_center,
@@ -45,7 +48,12 @@ export function WizardProfileCard({
         a.gap_md,
         a.border_b,
         t.atoms.border_contrast_low,
-      ]}>
+        // @ts-expect-error web only
+        isWeb && {
+          cursor: 'default',
+        },
+      ]}
+      onPress={onPressAddRemove}>
       <UserAvatar size={45} avatar={profile?.avatar} />
       <View style={[a.flex_1]}>
         <Text style={[a.flex_1, a.font_bold, a.text_md]} numberOfLines={1}>
@@ -58,19 +66,26 @@ export function WizardProfileCard({
         </Text>
       </View>
       {profile.did !== currentAccount?.did && (
-        <Button
+        <Toggle.Item
-          label={includesProfile ? _(msg`Remove`) : _(msg`Add`)}
+          name={_(msg`Person toggle`)}
-          variant="solid"
+          label={
-          color={includesProfile ? 'secondary' : 'primary'}
+            includesProfile
-          size="small"
+              ? _(
-          style={{paddingVertical: 6}}
+                  msg`Remove ${
-          disabled={!includesProfile && state.profiles.length >= 50}
+                    profile.displayName || profile.handle
-          onPress={onPressAddRemove}>
+                  } from starter pack`,
-          <ButtonText>
+                )
-            {includesProfile ? <Trans>Remove</Trans> : <Trans>Add</Trans>}
+              : _(
-          </ButtonText>
+                  msg`Add ${
-        </Button>
+                    profile.displayName || profile.handle
+                  } to starter pack`,
+                )
+          }
+          value={includesProfile}
+          onChange={onPressAddRemove}>
+          <Checkbox />
+        </Toggle.Item>
       )}
-    </View>
+    </Pressable>
   )
 }