Clean up dialogs (#8934)

6 files changed, 221 insertions, 195 deletions

diff --git a/src/components/NewskieDialog.tsx b/src/components/NewskieDialog.tsx
index 0644ba704..30f70f549 100644
--- a/src/components/NewskieDialog.tsx
+++ b/src/components/NewskieDialog.tsx
@@ -1,4 +1,4 @@
-import React from 'react'
+import {useMemo, useState} from 'react'
 import {View} from 'react-native'
 import {type AppBskyActorDefs, moderateProfile} from '@atproto/api'
 import {msg, Trans} from '@lingui/macro'
@@ -27,30 +27,12 @@ export function NewskieDialog({
   disabled?: boolean
 }) {
   const {_} = useLingui()
-  const t = useTheme()
-  const moderationOpts = useModerationOpts()
-  const {currentAccount} = useSession()
-  const timeAgo = useGetTimeAgo()
   const control = useDialogControl()
 
-  const isMe = profile.did === currentAccount?.did
   const createdAt = profile.createdAt as string | undefined
 
-  const profileName = React.useMemo(() => {
-    const name = profile.displayName || profile.handle
-
-    if (isMe) {
-      return _(msg`You`)
-    }
-
-    if (!moderationOpts) return name
-    const moderation = moderateProfile(profile, moderationOpts)
-
-    return sanitizeDisplayName(name, moderation.ui('displayName'))
-  }, [_, isMe, moderationOpts, profile])
-
-  const [now] = React.useState(() => Date.now())
-  const daysOld = React.useMemo(() => {
+  const [now] = useState(() => Date.now())
+  const daysOld = useMemo(() => {
     if (!createdAt) return Infinity
     return differenceInSeconds(now, new Date(createdAt)) / 86400
   }, [createdAt, now])
@@ -77,88 +59,116 @@ export function NewskieDialog({
         )}
       </Button>
 
-      <Dialog.Outer control={control}>
+      <Dialog.Outer control={control} nativeOptions={{preventExpansion: true}}>
         <Dialog.Handle />
-        <Dialog.ScrollableInner
-          label={_(msg`New user info dialog`)}
-          style={web({width: 'auto', maxWidth: 400, minWidth: 200})}>
-          <View style={[a.gap_md]}>
-            <View style={[a.align_center]}>
-              <View
-                style={[
-                  {
-                    height: 60,
-                    width: 64,
-                  },
-                ]}>
-                <Newskie
-                  width={64}
-                  height={64}
-                  fill="#FFC404"
-                  style={[a.absolute, a.inset_0]}
-                />
-              </View>
-              <Text style={[a.font_bold, a.text_xl]}>
-                {isMe ? (
-                  <Trans>Welcome, friend!</Trans>
-                ) : (
-                  <Trans>Say hello!</Trans>
-                )}
-              </Text>
-            </View>
-            <Text style={[a.text_md, a.text_center, a.leading_snug]}>
-              {profile.joinedViaStarterPack ? (
-                <Trans>
-                  {profileName} joined Bluesky using a starter pack{' '}
-                  {timeAgo(createdAt, now, {format: 'long'})} ago
-                </Trans>
-              ) : (
-                <Trans>
-                  {profileName} joined Bluesky{' '}
-                  {timeAgo(createdAt, now, {format: 'long'})} ago
-                </Trans>
-              )}
-            </Text>
-            {profile.joinedViaStarterPack ? (
-              <StarterPackCard.Link
-                starterPack={profile.joinedViaStarterPack}
-                onPress={() => {
-                  control.close()
-                }}>
-                <View
-                  style={[
-                    a.w_full,
-                    a.mt_sm,
-                    a.p_lg,
-                    a.border,
-                    a.rounded_sm,
-                    t.atoms.border_contrast_low,
-                  ]}>
-                  <StarterPackCard.Card
-                    starterPack={profile.joinedViaStarterPack}
-                  />
-                </View>
-              </StarterPackCard.Link>
-            ) : null}
+        <DialogInner profile={profile} createdAt={createdAt} now={now} />
+      </Dialog.Outer>
+    </View>
+  )
+}
 
-            {isNative && (
-              <Button
-                label={_(msg`Close`)}
-                variant="solid"
-                color="secondary"
-                size="small"
-                style={[a.mt_sm]}
-                onPress={() => control.close()}>
-                <ButtonText>
-                  <Trans>Close</Trans>
-                </ButtonText>
-              </Button>
-            )}
+function DialogInner({
+  profile,
+  createdAt,
+  now,
+}: {
+  profile: AppBskyActorDefs.ProfileViewDetailed
+  createdAt: string
+  now: number
+}) {
+  const control = Dialog.useDialogContext()
+  const {_} = useLingui()
+  const t = useTheme()
+  const moderationOpts = useModerationOpts()
+  const {currentAccount} = useSession()
+  const timeAgo = useGetTimeAgo()
+  const isMe = profile.did === currentAccount?.did
+
+  const profileName = useMemo(() => {
+    const name = profile.displayName || profile.handle
+
+    if (isMe) {
+      return _(msg`You`)
+    }
+
+    if (!moderationOpts) return name
+    const moderation = moderateProfile(profile, moderationOpts)
+
+    return sanitizeDisplayName(name, moderation.ui('displayName'))
+  }, [_, isMe, moderationOpts, profile])
+
+  return (
+    <Dialog.ScrollableInner
+      label={_(msg`New user info dialog`)}
+      style={web({maxWidth: 400})}>
+      <View style={[a.gap_md]}>
+        <View style={[a.align_center]}>
+          <View
+            style={[
+              {
+                height: 60,
+                width: 64,
+              },
+            ]}>
+            <Newskie
+              width={64}
+              height={64}
+              fill="#FFC404"
+              style={[a.absolute, a.inset_0]}
+            />
           </View>
+          <Text style={[a.font_bold, a.text_xl]}>
+            {isMe ? <Trans>Welcome, friend!</Trans> : <Trans>Say hello!</Trans>}
+          </Text>
+        </View>
+        <Text style={[a.text_md, a.text_center, a.leading_snug]}>
+          {profile.joinedViaStarterPack ? (
+            <Trans>
+              {profileName} joined Bluesky using a starter pack{' '}
+              {timeAgo(createdAt, now, {format: 'long'})} ago
+            </Trans>
+          ) : (
+            <Trans>
+              {profileName} joined Bluesky{' '}
+              {timeAgo(createdAt, now, {format: 'long'})} ago
+            </Trans>
+          )}
+        </Text>
+        {profile.joinedViaStarterPack ? (
+          <StarterPackCard.Link
+            starterPack={profile.joinedViaStarterPack}
+            onPress={() => control.close()}>
+            <View
+              style={[
+                a.w_full,
+                a.mt_sm,
+                a.p_lg,
+                a.border,
+                a.rounded_sm,
+                t.atoms.border_contrast_low,
+              ]}>
+              <StarterPackCard.Card
+                starterPack={profile.joinedViaStarterPack}
+              />
+            </View>
+          </StarterPackCard.Link>
+        ) : null}
 
-          <Dialog.Close />
-        </Dialog.ScrollableInner>
-      </Dialog.Outer>
-    </View>
+        {isNative && (
+          <Button
+            label={_(msg`Close`)}
+            color="secondary"
+            size="small"
+            style={[a.mt_sm]}
+            onPress={() => control.close()}>
+            <ButtonText>
+              <Trans>Close</Trans>
+            </ButtonText>
+          </Button>
+        )}
+      </View>
+
+      <Dialog.Close />
+    </Dialog.ScrollableInner>
   )
 }
diff --git a/src/components/StarterPack/QrCode.tsx b/src/components/StarterPack/QrCode.tsx
index 86f1aa1e6..4c28a41c5 100644
--- a/src/components/StarterPack/QrCode.tsx
+++ b/src/components/StarterPack/QrCode.tsx
@@ -1,4 +1,4 @@
-import React from 'react'
+import {lazy} from 'react'
 import {View} from 'react-native'
 // @ts-expect-error missing types
 import QRCode from 'react-native-qrcode-styled'
@@ -15,20 +15,20 @@ import {LinearGradientBackground} from '#/components/LinearGradientBackground'
 import {Text} from '#/components/Typography'
 import * as bsky from '#/types/bsky'
 
-const LazyViewShot = React.lazy(
+const LazyViewShot = lazy(
   // @ts-expect-error dynamic import
   () => import('react-native-view-shot/src/index'),
 )
 
-interface Props {
+export function QrCode({
+  starterPack,
+  link,
+  ref,
+}: {
   starterPack: AppBskyGraphDefs.StarterPackView
   link: string
-}
-
-export const QrCode = React.forwardRef<ViewShot, Props>(function QrCode(
-  {starterPack, link},
-  ref,
-) {
+  ref: React.Ref<ViewShot>
+}) {
   const {record} = starterPack
 
   if (
@@ -93,7 +93,7 @@ export const QrCode = React.forwardRef<ViewShot, Props>(function QrCode(
       </LinearGradientBackground>
     </LazyViewShot>
   )
-})
+}
 
 export function QrCodeInner({link}: {link: string}) {
   const t = useTheme()
diff --git a/src/components/StarterPack/QrCodeDialog.tsx b/src/components/StarterPack/QrCodeDialog.tsx
index 6a66e92bd..4c40ccb10 100644
--- a/src/components/StarterPack/QrCodeDialog.tsx
+++ b/src/components/StarterPack/QrCodeDialog.tsx
@@ -1,4 +1,4 @@
-import React from 'react'
+import {Suspense, useRef, useState} from 'react'
 import {View} from 'react-native'
 import type ViewShot from 'react-native-view-shot'
 import {requestMediaLibraryPermissionsAsync} from 'expo-image-picker'
@@ -8,16 +8,18 @@ import {type AppBskyGraphDefs, AppBskyGraphStarterpack} from '@atproto/api'
 import {msg, Trans} from '@lingui/macro'
 import {useLingui} from '@lingui/react'
 
-import {logEvent} from '#/lib/statsig/statsig'
 import {logger} from '#/logger'
 import {isNative, isWeb} from '#/platform/detection'
-import * as Toast from '#/view/com/util/Toast'
-import {atoms as a} from '#/alf'
-import {Button, ButtonText} from '#/components/Button'
+import {atoms as a, useBreakpoints} from '#/alf'
+import {Button, ButtonIcon, ButtonText} from '#/components/Button'
 import * as Dialog from '#/components/Dialog'
 import {type DialogControlProps} from '#/components/Dialog'
+import {ArrowOutOfBoxModified_Stroke2_Corner2_Rounded as ShareIcon} from '#/components/icons/ArrowOutOfBox'
+import {ChainLink_Stroke2_Corner0_Rounded as ChainLinkIcon} from '#/components/icons/ChainLink'
+import {FloppyDisk_Stroke2_Corner0_Rounded as FloppyDiskIcon} from '#/components/icons/FloppyDisk'
 import {Loader} from '#/components/Loader'
 import {QrCode} from '#/components/StarterPack/QrCode'
+import * as Toast from '#/components/Toast'
 import * as bsky from '#/types/bsky'
 
 export function QrCodeDialog({
@@ -30,9 +32,11 @@ export function QrCodeDialog({
   control: DialogControlProps
 }) {
   const {_} = useLingui()
-  const [isProcessing, setIsProcessing] = React.useState(false)
+  const {gtMobile} = useBreakpoints()
+  const [isSaveProcessing, setIsSaveProcessing] = useState(false)
+  const [isCopyProcessing, setIsCopyProcessing] = useState(false)
 
-  const ref = React.useRef<ViewShot>(null)
+  const ref = useRef<ViewShot>(null)
 
   const getCanvas = (base64: string): Promise<HTMLCanvasElement> => {
     return new Promise(resolve => {
@@ -68,15 +72,14 @@ export function QrCodeDialog({
         try {
           await createAssetAsync(`file://${uri}`)
         } catch (e: unknown) {
-          Toast.show(
-            _(msg`An error occurred while saving the QR code!`),
-            'xmark',
-          )
+          Toast.show(_(msg`An error occurred while saving the QR code!`), {
+            type: 'error',
+          })
           logger.error('Failed to save QR code', {error: e})
           return
         }
       } else {
-        setIsProcessing(true)
+        setIsSaveProcessing(true)
 
         if (
           !bsky.validate(
@@ -101,12 +104,12 @@ export function QrCodeDialog({
         link.click()
       }
 
-      logEvent('starterPack:share', {
+      logger.metric('starterPack:share', {
         starterPack: starterPack.uri,
         shareType: 'qrcode',
         qrShareType: 'save',
       })
-      setIsProcessing(false)
+      setIsSaveProcessing(false)
       Toast.show(
         isWeb
           ? _(msg`QR code has been downloaded!`)
@@ -117,7 +120,7 @@ export function QrCodeDialog({
   }
 
   const onCopyPress = async () => {
-    setIsProcessing(true)
+    setIsCopyProcessing(true)
     ref.current?.capture?.().then(async (uri: string) => {
       const canvas = await getCanvas(uri)
       // @ts-expect-error web only
@@ -126,13 +129,13 @@ export function QrCodeDialog({
         navigator.clipboard.write([item])
       })
 
-      logEvent('starterPack:share', {
+      logger.metric('starterPack:share', {
         starterPack: starterPack.uri,
         shareType: 'qrcode',
         qrShareType: 'copy',
       })
       Toast.show(_(msg`QR code copied to your clipboard!`))
-      setIsProcessing(false)
+      setIsCopyProcessing(false)
       control.close()
     })
   }
@@ -142,7 +145,7 @@ export function QrCodeDialog({
       control.close(() => {
         Sharing.shareAsync(uri, {mimeType: 'image/png', UTI: 'image/png'}).then(
           () => {
-            logEvent('starterPack:share', {
+            logger.metric('starterPack:share', {
               starterPack: starterPack.uri,
               shareType: 'qrcode',
               qrShareType: 'share',
@@ -154,49 +157,57 @@ export function QrCodeDialog({
   }
 
   return (
-    <Dialog.Outer control={control}>
+    <Dialog.Outer control={control} nativeOptions={{preventExpansion: true}}>
       <Dialog.Handle />
       <Dialog.ScrollableInner
         label={_(msg`Create a QR code for a starter pack`)}>
         <View style={[a.flex_1, a.align_center, a.gap_5xl]}>
-          <React.Suspense fallback={<Loading />}>
+          <Suspense fallback={<Loading />}>
             {!link ? (
               <Loading />
             ) : (
               <>
                 <QrCode starterPack={starterPack} link={link} ref={ref} />
-                {isProcessing ? (
-                  <View>
-                    <Loader size="xl" />
-                  </View>
-                ) : (
-                  <View
-                    style={[a.w_full, a.gap_md, isWeb && [a.flex_row_reverse]]}>
-                    <Button
-                      label={_(msg`Copy QR code`)}
-                      variant="solid"
-                      color="secondary"
-                      size="small"
-                      onPress={isWeb ? onCopyPress : onSharePress}>
-                      <ButtonText>
-                        {isWeb ? <Trans>Copy</Trans> : <Trans>Share</Trans>}
-                      </ButtonText>
-                    </Button>
-                    <Button
-                      label={_(msg`Save QR code`)}
-                      variant="solid"
-                      color="secondary"
-                      size="small"
-                      onPress={onSavePress}>
-                      <ButtonText>
-                        <Trans>Save</Trans>
-                      </ButtonText>
-                    </Button>
-                  </View>
-                )}
+                <View
+                  style={[
+                    a.w_full,
+                    a.gap_md,
+                    gtMobile && [a.flex_row, a.justify_center, a.flex_wrap],
+                  ]}>
+                  <Button
+                    label={_(msg`Copy QR code`)}
+                    color="primary_subtle"
+                    size="large"
+                    onPress={isWeb ? onCopyPress : onSharePress}>
+                    <ButtonIcon
+                      icon={
+                        isCopyProcessing
+                          ? Loader
+                          : isWeb
+                            ? ChainLinkIcon
+                            : ShareIcon
+                      }
+                    />
+                    <ButtonText>
+                      {isWeb ? <Trans>Copy</Trans> : <Trans>Share</Trans>}
+                    </ButtonText>
+                  </Button>
+                  <Button
+                    label={_(msg`Save QR code`)}
+                    color="secondary"
+                    size="large"
+                    onPress={onSavePress}>
+                    <ButtonIcon
+                      icon={isSaveProcessing ? Loader : FloppyDiskIcon}
+                    />
+                    <ButtonText>
+                      <Trans>Save</Trans>
+                    </ButtonText>
+                  </Button>
+                </View>
               </>
             )}
-          </React.Suspense>
+          </Suspense>
         </View>
         <Dialog.Close />
       </Dialog.ScrollableInner>
@@ -206,7 +217,7 @@ export function QrCodeDialog({
 
 function Loading() {
   return (
-    <View style={[a.align_center, a.p_xl]}>
+    <View style={[a.align_center, a.justify_center, {minHeight: 400}]}>
       <Loader size="xl" />
     </View>
   )
diff --git a/src/components/StarterPack/ShareDialog.tsx b/src/components/StarterPack/ShareDialog.tsx
index c159b42dd..32932fe2d 100644
--- a/src/components/StarterPack/ShareDialog.tsx
+++ b/src/components/StarterPack/ShareDialog.tsx
@@ -4,16 +4,18 @@ import {type AppBskyGraphDefs} from '@atproto/api'
 import {msg, Trans} from '@lingui/macro'
 import {useLingui} from '@lingui/react'
 
-import {useWebMediaQueries} from '#/lib/hooks/useWebMediaQueries'
 import {useSaveImageToMediaLibrary} from '#/lib/media/save-image'
 import {shareUrl} from '#/lib/sharing'
-import {logEvent} from '#/lib/statsig/statsig'
 import {getStarterPackOgCard} from '#/lib/strings/starter-pack'
+import {logger} from '#/logger'
 import {isNative, isWeb} from '#/platform/detection'
-import {atoms as a, useTheme} from '#/alf'
-import {Button, ButtonText} from '#/components/Button'
+import {atoms as a, useBreakpoints, useTheme} from '#/alf'
+import {Button, ButtonIcon, ButtonText} from '#/components/Button'
 import {type DialogControlProps} from '#/components/Dialog'
 import * as Dialog from '#/components/Dialog'
+import {ChainLink_Stroke2_Corner0_Rounded as ChainLinkIcon} from '#/components/icons/ChainLink'
+import {Download_Stroke2_Corner0_Rounded as DownloadIcon} from '#/components/icons/Download'
+import {QrCode_Stroke2_Corner0_Rounded as QrCodeIcon} from '#/components/icons/QrCode'
 import {Loader} from '#/components/Loader'
 import {Text} from '#/components/Typography'
 
@@ -27,7 +29,9 @@ interface Props {
 
 export function ShareDialog(props: Props) {
   return (
-    <Dialog.Outer control={props.control}>
+    <Dialog.Outer
+      control={props.control}
+      nativeOptions={{preventExpansion: true}}>
       <Dialog.Handle />
       <ShareDialogInner {...props} />
     </Dialog.Outer>
@@ -43,14 +47,14 @@ function ShareDialogInner({
 }: Props) {
   const {_} = useLingui()
   const t = useTheme()
-  const {isTabletOrDesktop} = useWebMediaQueries()
+  const {gtMobile} = useBreakpoints()
 
   const imageUrl = getStarterPackOgCard(starterPack)
 
   const onShareLink = async () => {
     if (!link) return
     shareUrl(link)
-    logEvent('starterPack:share', {
+    logger.metric('starterPack:share', {
       starterPack: starterPack.uri,
       shareType: 'link',
     })
@@ -67,12 +71,12 @@ function ShareDialogInner({
     <>
       <Dialog.ScrollableInner label={_(msg`Share link dialog`)}>
         {!imageLoaded || !link ? (
-          <View style={[a.p_xl, a.align_center]}>
+          <View style={[a.align_center, a.justify_center, {minHeight: 350}]}>
             <Loader size="xl" />
           </View>
         ) : (
-          <View style={[!isTabletOrDesktop && a.gap_lg]}>
-            <View style={[a.gap_sm, isTabletOrDesktop && a.pb_lg]}>
+          <View style={[!gtMobile && a.gap_lg]}>
+            <View style={[a.gap_sm, gtMobile && a.pb_lg]}>
               <Text style={[a.font_bold, a.text_2xl]}>
                 <Trans>Invite people to this starter pack!</Trans>
               </Text>
@@ -89,8 +93,8 @@ function ShareDialogInner({
                 a.rounded_sm,
                 {
                   aspectRatio: 1200 / 630,
-                  transform: [{scale: isTabletOrDesktop ? 0.85 : 1}],
-                  marginTop: isTabletOrDesktop ? -20 : 0,
+                  transform: [{scale: gtMobile ? 0.85 : 1}],
+                  marginTop: gtMobile ? -20 : 0,
                 },
               ]}
               accessibilityIgnoresInvertColors={true}
@@ -98,30 +102,33 @@ function ShareDialogInner({
             <View
               style={[
                 a.gap_md,
-                isWeb && [a.gap_sm, a.flex_row_reverse, {marginLeft: 'auto'}],
+                gtMobile && [
+                  a.gap_sm,
+                  a.justify_center,
+                  a.flex_row,
+                  a.flex_wrap,
+                ],
               ]}>
               <Button
                 label={isWeb ? _(msg`Copy link`) : _(msg`Share link`)}
-                variant="solid"
-                color="secondary"
-                size="small"
-                style={[isWeb && a.self_center]}
+                color="primary_subtle"
+                size="large"
                 onPress={onShareLink}>
+                <ButtonIcon icon={ChainLinkIcon} />
                 <ButtonText>
                   {isWeb ? <Trans>Copy Link</Trans> : <Trans>Share link</Trans>}
                 </ButtonText>
               </Button>
               <Button
                 label={_(msg`Share QR code`)}
-                variant="solid"
-                color="secondary"
-                size="small"
-                style={[isWeb && a.self_center]}
+                color="primary_subtle"
+                size="large"
                 onPress={() => {
                   control.close(() => {
                     qrDialogControl.open()
                   })
                 }}>
+                <ButtonIcon icon={QrCodeIcon} />
                 <ButtonText>
                   <Trans>Share QR code</Trans>
                 </ButtonText>
@@ -129,11 +136,10 @@ function ShareDialogInner({
               {isNative && (
                 <Button
                   label={_(msg`Save image`)}
-                  variant="ghost"
                   color="secondary"
-                  size="small"
-                  style={[isWeb && a.self_center]}
+                  size="large"
                   onPress={onSave}>
+                  <ButtonIcon icon={DownloadIcon} />
                   <ButtonText>
                     <Trans>Save image</Trans>
                   </ButtonText>
diff --git a/src/components/dialogs/EmbedConsent.tsx b/src/components/dialogs/EmbedConsent.tsx
index 086d43f95..fe8609544 100644
--- a/src/components/dialogs/EmbedConsent.tsx
+++ b/src/components/dialogs/EmbedConsent.tsx
@@ -10,9 +10,9 @@ import {
 } from '#/lib/strings/embed-player'
 import {useSetExternalEmbedPref} from '#/state/preferences'
 import {atoms as a, useBreakpoints, useTheme} from '#/alf'
+import {Button, ButtonText} from '#/components/Button'
 import * as Dialog from '#/components/Dialog'
-import {Button, ButtonText} from '../Button'
-import {Text} from '../Typography'
+import {Text} from '#/components/Typography'
 
 export function EmbedConsentDialog({
   control,
@@ -48,7 +48,7 @@ export function EmbedConsentDialog({
   }, [control, setExternalEmbedPref, source])
 
   return (
-    <Dialog.Outer control={control}>
+    <Dialog.Outer control={control} nativeOptions={{preventExpansion: true}}>
       <Dialog.Handle />
       <Dialog.ScrollableInner
         label={_(msg`External Media`)}
diff --git a/src/screens/Settings/components/ExportCarDialog.tsx b/src/screens/Settings/components/ExportCarDialog.tsx
index edeccd128..d5131c5c6 100644
--- a/src/screens/Settings/components/ExportCarDialog.tsx
+++ b/src/screens/Settings/components/ExportCarDialog.tsx
@@ -1,4 +1,4 @@
-import React from 'react'
+import {useCallback, useState} from 'react'
 import {View} from 'react-native'
 import {msg, Trans} from '@lingui/macro'
 import {useLingui} from '@lingui/react'
@@ -18,14 +18,14 @@ import {Text} from '#/components/Typography'
 export function ExportCarDialog({
   control,
 }: {
-  control: Dialog.DialogOuterProps['control']
+  control: Dialog.DialogControlProps
 }) {
   const {_} = useLingui()
   const t = useTheme()
   const agent = useAgent()
-  const [loading, setLoading] = React.useState(false)
+  const [loading, setLoading] = useState(false)
 
-  const download = React.useCallback(async () => {
+  const download = useCallback(async () => {
     if (!agent.session) {
       return // shouldnt ever happen
     }
@@ -52,7 +52,7 @@ export function ExportCarDialog({
   }, [_, control, agent])
 
   return (
-    <Dialog.Outer control={control}>
+    <Dialog.Outer control={control} nativeOptions={{preventExpansion: true}}>
       <Dialog.Handle />
       <Dialog.ScrollableInner
         accessibilityDescribedBy="dialog-description"
@@ -63,7 +63,7 @@ export function ExportCarDialog({
           </Text>
           <Text
             nativeID="dialog-description"
-            style={[a.text_sm, a.leading_normal, t.atoms.text_contrast_high]}>
+            style={[a.text_sm, a.leading_snug, t.atoms.text_contrast_high]}>
             <Trans>
               Your account repository, containing all public data records, can
               be downloaded as a "CAR" file. This file does not include media
@@ -73,7 +73,6 @@ export function ExportCarDialog({
           </Text>
 
           <Button
-            variant="solid"
             color="primary"
             size="large"
             label={_(msg`Download CAR file`)}