Newskie dialog tweaks (#4623)

src/components/NewskieDialog.tsx

@@ -6,10 +6,10 @@ import {useLingui} from '@lingui/react'
 import {differenceInSeconds} from 'date-fns'
 
 import {useGetTimeAgo} from '#/lib/hooks/useTimeAgo'
+import {isNative} from '#/platform/detection'
 import {useModerationOpts} from '#/state/preferences/moderation-opts'
 import {HITSLOP_10} from 'lib/constants'
 import {sanitizeDisplayName} from 'lib/strings/display-names'
-import {isWeb} from 'platform/detection'
 import {atoms as a, useTheme} from '#/alf'
 import {Button, ButtonText} from '#/components/Button'
 import * as Dialog from '#/components/Dialog'
@@ -70,19 +70,27 @@ export function NewskieDialog({
         <Dialog.ScrollableInner
           label={_(msg`New user info dialog`)}
           style={[{width: 'auto', maxWidth: 400, minWidth: 200}]}>
-          <View style={[a.gap_sm]}>
+          <View style={[a.gap_md]}>
             <View style={[a.align_center]}>
-              <Newskie
+              <View
-                width={64}
+                style={[
-                height={64}
+                  {
-                fill="#FFC404"
+                    height: 60,
-                style={{marginTop: -10}}
+                    width: 64,
-              />
+                  },
-              <Text style={[a.font_bold, a.text_xl, {marginTop: -10}]}>
+                ]}>
+                <Newskie
+                  width={64}
+                  height={64}
+                  fill="#FFC404"
+                  style={[a.absolute, a.inset_0]}
+                />
+              </View>
+              <Text style={[a.font_bold, a.text_xl]}>
                 <Trans>Say hello!</Trans>
               </Text>
             </View>
-            <Text style={[a.text_md, a.text_center, a.leading_tight]}>
+            <Text style={[a.text_md, a.text_center, a.leading_snug]}>
               {profile.joinedViaStarterPack ? (
                 <Trans>
                   {profileName} joined Bluesky using a starter pack{' '}
@@ -116,18 +124,23 @@ export function NewskieDialog({
                 </View>
               </StarterPackCard.Link>
             ) : null}
-            <Button
+
-              label={_(msg`Close`)}
+            {isNative && (
-              variant="solid"
+              <Button
-              color="secondary"
+                label={_(msg`Close`)}
-              size="small"
+                variant="solid"
-              style={[a.mt_sm, isWeb && [a.self_center, {marginLeft: 'auto'}]]}
+                color="secondary"
-              onPress={() => control.close()}>
+                size="small"
-              <ButtonText>
+                style={[a.mt_sm]}
-                <Trans>Close</Trans>
+                onPress={() => control.close()}>
-              </ButtonText>
+                <ButtonText>
-            </Button>
+                  <Trans>Close</Trans>
+                </ButtonText>
+              </Button>
+            )}
           </View>
+
+          <Dialog.Close />
         </Dialog.ScrollableInner>
       </Dialog.Outer>
     </View>