Clean up dialogs (#8934)

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>