CAR dialog - add close button (#9470)

* car dialog add close button

* update toast import

src/screens/Settings/components/ExportCarDialog.tsx

@@ -6,13 +6,13 @@ import {useLingui} from '@lingui/react'
 import {saveBytesToDisk} from '#/lib/media/manip'
 import {logger} from '#/logger'
 import {useAgent} from '#/state/session'
-import * as Toast from '#/view/com/util/Toast'
-import {atoms as a, useTheme} from '#/alf'
+import {atoms as a, useTheme, web} from '#/alf'
 import {Button, ButtonIcon, ButtonText} from '#/components/Button'
 import * as Dialog from '#/components/Dialog'
 import {Download_Stroke2_Corner0_Rounded as DownloadIcon} from '#/components/icons/Download'
 import {InlineLinkText} from '#/components/Link'
 import {Loader} from '#/components/Loader'
+import * as Toast from '#/components/Toast'
 import {Text} from '#/components/Typography'
 
 export function ExportCarDialog({
@@ -44,7 +44,7 @@ export function ExportCarDialog({
       }
     } catch (e) {
       logger.error('Error occurred while downloading CAR file', {message: e})
-      Toast.show(_(msg`Error occurred while saving file`), 'xmark')
+      Toast.show(_(msg`Error occurred while saving file`), {type: 'error'})
     } finally {
       setLoading(false)
       control.close()
@@ -56,7 +56,8 @@ export function ExportCarDialog({
       <Dialog.Handle />
       <Dialog.ScrollableInner
         accessibilityDescribedBy="dialog-description"
-        accessibilityLabelledBy="dialog-title">
+        accessibilityLabelledBy="dialog-title"
+        style={web({maxWidth: 500})}>
         <View style={[a.relative, a.gap_lg, a.w_full]}>
           <Text nativeID="dialog-title" style={[a.text_2xl, a.font_bold]}>
             <Trans>Export My Data</Trans>
@@ -105,6 +106,7 @@ export function ExportCarDialog({
             </Trans>
           </Text>
         </View>
+        <Dialog.Close />
       </Dialog.ScrollableInner>
     </Dialog.Outer>
   )