starter pack dialog tweaks (#8913)

src/components/dialogs/StarterPackDialog.tsx

@@ -1,4 +1,4 @@
-import React from 'react'
+import {useCallback, useState} from 'react'
 import {View} from 'react-native'
 import {
   type AppBskyGraphGetStarterPacksWithMembership,
@@ -22,16 +22,16 @@ import {
 } from '#/state/queries/list-memberships'
 import * as Toast from '#/view/com/util/Toast'
 import {atoms as a, useTheme} from '#/alf'
+import {AvatarStack} from '#/components/AvatarStack'
 import {Button, ButtonIcon, ButtonText} from '#/components/Button'
 import * as Dialog from '#/components/Dialog'
 import {Divider} from '#/components/Divider'
+import {PlusLarge_Stroke2_Corner0_Rounded as PlusIcon} from '#/components/icons/Plus'
+import {StarterPack} from '#/components/icons/StarterPack'
+import {TimesLarge_Stroke2_Corner0_Rounded as XIcon} from '#/components/icons/Times'
 import {Loader} from '#/components/Loader'
 import {Text} from '#/components/Typography'
 import * as bsky from '#/types/bsky'
-import {AvatarStack} from '../AvatarStack'
-import {PlusLarge_Stroke2_Corner0_Rounded} from '../icons/Plus'
-import {StarterPack} from '../icons/StarterPack'
-import {TimesLarge_Stroke2_Corner0_Rounded} from '../icons/Times'
 
 type StarterPackWithMembership =
   AppBskyGraphGetStarterPacksWithMembership.StarterPackWithMembership
@@ -51,7 +51,7 @@ export function StarterPackDialog({
   const navigation = useNavigation<NavigationProp>()
   const requireEmailVerification = useRequireEmailVerification()
 
-  const navToWizard = React.useCallback(() => {
+  const navToWizard = useCallback(() => {
     control.close()
     navigation.navigate('StarterPackWizard', {
       fromDialog: true,
@@ -91,7 +91,6 @@ function Empty({onStartWizard}: {onStartWizard: () => void}) {
   const {_} = useLingui()
   const t = useTheme()
 
-  isWeb
   return (
     <View style={[a.gap_2xl, {paddingTop: isWeb ? 100 : 64}]}>
       <View style={[a.gap_xs, a.align_center]}>
@@ -115,7 +114,7 @@ function Empty({onStartWizard}: {onStartWizard: () => void}) {
               Create
             </Trans>
           </ButtonText>
-          <ButtonIcon icon={PlusLarge_Stroke2_Corner0_Rounded} />
+          <ButtonIcon icon={PlusIcon} />
         </Button>
       </View>
     </View>
@@ -134,7 +133,6 @@ function StarterPackList({
   enabled?: boolean
 }) {
   const {_} = useLingui()
-  const t = useTheme()
 
   const {
     data,
@@ -149,7 +147,7 @@ function StarterPackList({
   const membershipItems =
     data?.pages.flatMap(page => page.starterPacksWithMembership) || []
 
-  const _onRefresh = React.useCallback(async () => {
+  const _onRefresh = useCallback(async () => {
     try {
       await refetch()
     } catch (err) {
@@ -157,7 +155,7 @@ function StarterPackList({
     }
   }, [refetch])
 
-  const _onEndReached = React.useCallback(async () => {
+  const _onEndReached = useCallback(async () => {
     if (isFetchingNextPage || !hasNextPage || isError) return
     try {
       await fetchNextPage()
@@ -166,25 +164,17 @@ function StarterPackList({
     }
   }, [isFetchingNextPage, hasNextPage, isError, fetchNextPage])
 
-  const renderItem = React.useCallback(
+  const renderItem = useCallback(
     ({item}: {item: StarterPackWithMembership}) => (
       <StarterPackItem starterPackWithMembership={item} targetDid={targetDid} />
     ),
     [targetDid],
   )
 
-  const onClose = React.useCallback(() => {
+  const onClose = useCallback(() => {
     control.close()
   }, [control])
 
-  const XIcon = React.useMemo(() => {
-    return (
-      <TimesLarge_Stroke2_Corner0_Rounded
-        fill={t.atoms.text_contrast_medium.color}
-      />
-    )
-  }, [t])
-
   const listHeader = (
     <>
       <View
@@ -196,8 +186,14 @@ function StarterPackList({
         <Text style={[a.text_lg, a.font_bold]}>
           <Trans>Add to starter packs</Trans>
         </Text>
-        <Button label={_(msg`Close`)} onPress={onClose}>
+        <Button
-          <ButtonIcon icon={() => XIcon} />
+          label={_(msg`Close`)}
+          onPress={onClose}
+          variant="ghost"
+          color="secondary"
+          size="small"
+          shape="round">
+          <ButtonIcon icon={XIcon} />
         </Button>
       </View>
       {membershipItems.length > 0 && (
@@ -217,7 +213,7 @@ function StarterPackList({
                   Create
                 </Trans>
               </ButtonText>
-              <ButtonIcon icon={PlusLarge_Stroke2_Corner0_Rounded} />
+              <ButtonIcon icon={PlusIcon} />
             </Button>
           </View>
           <Divider />
@@ -268,7 +264,7 @@ function StarterPackItem({
   const starterPack = starterPackWithMembership.starterPack
   const isInPack = !!starterPackWithMembership.listItem
 
-  const [isPendingRefresh, setIsPendingRefresh] = React.useState(false)
+  const [isPendingRefresh, setIsPendingRefresh] = useState(false)
 
   const {mutate: addMembership} = useListMembershipAddMutation({
     onSuccess: () => {