Disable avi

assets/icons/download_stroke2_corner0_rounded.svg

@@ -0,0 +1 @@
+<svg xmlns="http://www.w3.org/2000/svg" fill="none" viewBox="0 0 24 24"><path fill="#000" fill-rule="evenodd" d="M12 3a1 1 0 0 1 1 1v8.086l1.793-1.793a1 1 0 1 1 1.414 1.414l-3.5 3.5a1 1 0 0 1-1.414 0l-3.5-3.5a1 1 0 1 1 1.414-1.414L11 12.086V4a1 1 0 0 1 1-1ZM4 14a1 1 0 0 1 1 1v4h14v-4a1 1 0 1 1 2 0v5a1 1 0 0 1-1 1H4a1 1 0 0 1-1-1v-5a1 1 0 0 1 1-1Z" clip-rule="evenodd"/></svg>

src/components/Dialog/index.tsx

@@ -256,7 +256,7 @@ export const ScrollableInner = React.forwardRef<
           borderTopLeftRadius: 40,
           borderTopRightRadius: 40,
         },
-        flatten(style),
+        style,
       ]}
       contentContainerStyle={a.pb_4xl}
       ref={ref}>

src/components/dialogs/nudges/TenMillion.tsx

@@ -7,15 +7,16 @@ import {msg, Trans} from '@lingui/macro'
 import {useLingui} from '@lingui/react'
 
 import {getCanvas} from '#/lib/canvas'
+import {shareUrl} from '#/lib/sharing'
 import {sanitizeDisplayName} from '#/lib/strings/display-names'
 import {sanitizeHandle} from '#/lib/strings/handles'
-import {isNative} from '#/platform/detection'
+import {isAndroid, isNative, isWeb} from '#/platform/detection'
 import {useModerationOpts} from '#/state/preferences/moderation-opts'
 import {useProfileQuery} from '#/state/queries/profile'
 import {useSession} from '#/state/session'
 import {useComposerControls} from 'state/shell'
 import {formatCount} from '#/view/com/util/numeric/format'
-import {UserAvatar} from '#/view/com/util/UserAvatar'
+// import {UserAvatar} from '#/view/com/util/UserAvatar'
 import {Logomark} from '#/view/icons/Logomark'
 import {
   atoms as a,
@@ -30,6 +31,7 @@ import {useContext} from '#/components/dialogs/nudges'
 import {Divider} from '#/components/Divider'
 import {GradientFill} from '#/components/GradientFill'
 import {ArrowOutOfBox_Stroke2_Corner0_Rounded as Share} from '#/components/icons/ArrowOutOfBox'
+import {Download_Stroke2_Corner0_Rounded as Download} from '#/components/icons/Download'
 import {Image_Stroke2_Corner0_Rounded as ImageIcon} from '#/components/icons/Image'
 import {Loader} from '#/components/Loader'
 import {Text} from '#/components/Typography'
@@ -88,12 +90,9 @@ export function TenMillion() {
   const isLoadingData = isProfileLoading || !moderation || !profile
   const isLoadingImage = !uri
 
-  const userNumber = 56738 // TODO
+  const userNumber = 10_000_000 // TODO
 
-  const captureInProgress = React.useRef(false)
+  const sharePost = () => {
-  const imageRef = React.useRef<ViewShot>(null)
-
-  const share = () => {
     if (uri) {
       controls.tenMillion.close(() => {
         setTimeout(() => {
@@ -112,15 +111,11 @@ export function TenMillion() {
     }
   }
 
-  const onCanvasReady = async () => {
+  const onNativeShare = () => {
-    if (
+    if (uri) {
-      imageRef.current &&
+      controls.tenMillion.close(() => {
-      imageRef.current.capture &&
+        shareUrl(uri)
-      !captureInProgress.current
+      })
-    ) {
-      captureInProgress.current = true
-      const uri = await imageRef.current.capture()
-      setUri(uri)
     }
   }
 
@@ -137,6 +132,31 @@ export function TenMillion() {
     }
   }
 
+  const imageRef = React.useRef<ViewShot>(null)
+  // const captureInProgress = React.useRef(false)
+  // const [cavasRelayout, setCanvasRelayout] = React.useState('key')
+  // const onCanvasReady = async () => {
+  //   if (
+  //     imageRef.current &&
+  //     imageRef.current.capture &&
+  //     !captureInProgress.current
+  //   ) {
+  //     captureInProgress.current = true
+  //     setCanvasRelayout('updated')
+  //   }
+  // }
+  const onCanvasLayout = async () => {
+    if (
+      imageRef.current &&
+      imageRef.current.capture // &&
+      // cavasRelayout === 'updated'
+    ) {
+      console.log('LAYOUT')
+      const uri = await imageRef.current.capture()
+      setUri(uri)
+    }
+  }
+
   const canvas = isLoadingData ? null : (
     <View
       style={[
@@ -160,6 +180,8 @@ export function TenMillion() {
               options={{width: WIDTH, height: HEIGHT}}
               style={[a.absolute, a.inset_0]}>
               <View
+                // key={cavasRelayout}
+                onLayout={onCanvasLayout}
                 style={[
                   a.absolute,
                   a.inset_0,
@@ -170,7 +192,7 @@ export function TenMillion() {
                     bottom: -1,
                     left: -1,
                     right: -1,
-                    paddingVertical: 32,
+                    paddingVertical: 48,
                     paddingHorizontal: 48,
                   },
                 ]}>
@@ -208,7 +230,7 @@ export function TenMillion() {
                   <View
                     style={[
                       {
-                        paddingBottom: 48,
+                        paddingBottom: 32,
                       },
                     ]}>
                     <Text
@@ -216,7 +238,7 @@ export function TenMillion() {
                         a.text_md,
                         a.font_bold,
                         a.text_center,
-                        a.pb_xs,
+                        a.pb_md,
                         lightTheme.atoms.text_contrast_medium,
                       ]}>
                       <Trans>
@@ -224,6 +246,20 @@ export function TenMillion() {
                       </Trans>{' '}
                       🎉
                     </Text>
+                    <View>
+                      <Text
+                        style={[
+                          a.absolute,
+                          {
+                            color: t.palette.primary_500,
+                            fontSize: 32,
+                            left: -18,
+                            top: isAndroid ? -8 : isWeb ? 5 : -5,
+                            fontWeight: '900',
+                          },
+                        ]}>
+                        #
+                      </Text>
                       <Text
                         style={[
                           a.relative,
@@ -231,25 +267,15 @@ export function TenMillion() {
                           {
                             fontStyle: 'italic',
                             fontSize: getFontSize(userNumber),
+                            lineHeight: getFontSize(userNumber),
                             fontWeight: '900',
                             letterSpacing: -2,
                           },
                         ]}>
-                      <Text
-                        style={[
-                          a.absolute,
-                          {
-                            color: t.palette.primary_500,
-                            fontSize: 32,
-                            left: -18,
-                            top: 8,
-                          },
-                        ]}>
-                        #
-                      </Text>
                         {i18n.number(userNumber)}
                       </Text>
                     </View>
+                  </View>
                   {/* End centered content */}
 
                   <View
@@ -264,14 +290,16 @@ export function TenMillion() {
                       },
                     ]}>
                     <View style={[a.flex_row, a.align_center, a.gap_sm]}>
+                      {/*
                       <UserAvatar
                         size={36}
                         avatar={profile.avatar}
                         moderation={moderation.ui('avatar')}
                         onLoad={onCanvasReady}
                       />
+                        */}
                       <View style={[a.gap_2xs, a.flex_1]}>
-                        <Text style={[a.text_sm, a.font_bold]}>
+                        <Text style={[a.text_sm, a.font_bold, a.leading_tight]}>
                           {sanitizeDisplayName(
                             profile.displayName ||
                               sanitizeHandle(profile.handle),
@@ -283,6 +311,8 @@ export function TenMillion() {
                             style={[
                               a.text_sm,
                               a.font_semibold,
+                              ,
+                              a.leading_tight,
                               lightTheme.atoms.text_contrast_medium,
                             ]}>
                             {sanitizeHandle(profile.handle, '@')}
@@ -293,11 +323,16 @@ export function TenMillion() {
                               style={[
                                 a.text_sm,
                                 a.font_semibold,
+                                ,
+                                a.leading_tight,
                                 lightTheme.atoms.text_contrast_low,
                               ]}>
+                              <Trans>
+                                Joined{' '}
                                 {i18n.date(profile.createdAt, {
                                   dateStyle: 'long',
                                 })}
+                              </Trans>
                             </Text>
                           )}
                         </View>
@@ -315,13 +350,12 @@ export function TenMillion() {
 
   return (
     <Dialog.Outer control={controls.tenMillion}>
-      <Dialog.Handle />
-
       <Dialog.ScrollableInner
         label={_(msg`Ten Million`)}
         style={[
           {
             padding: 0,
+            paddingTop: 0,
           },
         ]}>
         <View
@@ -355,6 +389,7 @@ export function TenMillion() {
             <Text
               style={[
                 a.text_5xl,
+                a.leading_tight,
                 a.pb_lg,
                 {
                   fontWeight: '900',
@@ -387,20 +422,26 @@ export function TenMillion() {
               </Text>
 
               <Button
-                label={_(msg`Share image externally`)}
+                disabled={isLoadingImage}
+                label={
+                  isNative
+                    ? _(msg`Share image externally`)
+                    : _(msg`Download image`)
+                }
                 size="large"
                 variant="solid"
                 color="secondary"
                 shape="square"
-                onPress={download}>
+                onPress={isNative ? onNativeShare : download}>
-                <ButtonIcon icon={Share} />
+                <ButtonIcon icon={isNative ? Share : Download} />
               </Button>
               <Button
+                disabled={isLoadingImage}
                 label={_(msg`Share image in post`)}
                 size="large"
                 variant="solid"
                 color="primary"
-                onPress={share}>
+                onPress={sharePost}>
                 <ButtonText>{_(msg`Share post`)}</ButtonText>
                 <ButtonIcon position="right" icon={ImageIcon} />
               </Button>

src/components/icons/Download.tsx

@@ -0,0 +1,5 @@
+import {createSinglePathSVG} from './TEMPLATE'
+
+export const Download_Stroke2_Corner0_Rounded = createSinglePathSVG({
+  path: 'M12 3a1 1 0 0 1 1 1v8.086l1.793-1.793a1 1 0 1 1 1.414 1.414l-3.5 3.5a1 1 0 0 1-1.414 0l-3.5-3.5a1 1 0 1 1 1.414-1.414L11 12.086V4a1 1 0 0 1 1-1ZM4 14a1 1 0 0 1 1 1v4h14v-4a1 1 0 1 1 2 0v5a1 1 0 0 1-1 1H4a1 1 0 0 1-1-1v-5a1 1 0 0 1 1-1Z',
+})