Remove 10milly dialog, revert header logo changes

src/components/dialogs/nuxs/TenMillion/Trigger.tsx

@@ -1,129 +0,0 @@
-import React from 'react'
-import {View} from 'react-native'
-import Svg, {Circle, Path} from 'react-native-svg'
-import {msg, Trans} from '@lingui/macro'
-import {useLingui} from '@lingui/react'
-
-import {Nux, useUpsertNuxMutation} from '#/state/queries/nuxs'
-import {atoms as a, ViewStyleProp} from '#/alf'
-import {Button, ButtonProps} from '#/components/Button'
-import * as Dialog from '#/components/Dialog'
-import {InlineLinkText} from '#/components/Link'
-import * as Prompt from '#/components/Prompt'
-import {TenMillion} from './'
-
-export function Trigger({children}: {children: ButtonProps['children']}) {
-  const {_} = useLingui()
-  const {mutate: upsertNux} = useUpsertNuxMutation()
-  const [show, setShow] = React.useState(false)
-  const [fallback, setFallback] = React.useState(false)
-  const control = Prompt.usePromptControl()
-
-  const handleOnPress = () => {
-    if (!fallback) {
-      setShow(true)
-      upsertNux({
-        id: Nux.TenMillionDialog,
-        completed: true,
-        data: undefined,
-      })
-    } else {
-      control.open()
-    }
-  }
-
-  const onHandleFallback = () => {
-    setFallback(true)
-    control.open()
-  }
-
-  return (
-    <>
-      <Button
-        label={_(msg`Bluesky is celebrating 10 million users!`)}
-        onPress={handleOnPress}>
-        {children}
-      </Button>
-
-      {show && !fallback && (
-        <TenMillion
-          showTimeout={0}
-          onClose={() => setShow(false)}
-          onFallback={onHandleFallback}
-        />
-      )}
-
-      <Prompt.Outer control={control}>
-        <View style={{maxWidth: 300}}>
-          <Prompt.TitleText>
-            <Trans>Bluesky is celebrating 10 million users!</Trans>
-          </Prompt.TitleText>
-        </View>
-        <Prompt.DescriptionText>
-          <Trans>
-            Together, we're rebuilding the social internet. We're glad you're
-            here.
-          </Trans>
-        </Prompt.DescriptionText>
-        <Prompt.DescriptionText>
-          <Trans>
-            To learn more,{' '}
-            <InlineLinkText
-              label={_(msg`View our post`)}
-              to="/profile/bsky.app/post/3l47prg3wgy23"
-              onPress={() => {
-                control.close()
-              }}
-              style={[a.text_md, a.leading_snug]}>
-              <Trans>check out our post.</Trans>
-            </InlineLinkText>
-          </Trans>
-        </Prompt.DescriptionText>
-        <Dialog.Close />
-      </Prompt.Outer>
-    </>
-  )
-}
-
-export function Icon({width, style}: {width: number} & ViewStyleProp) {
-  return (
-    <Svg width={width} height={width} viewBox="0 0 36 36" style={style}>
-      <Path
-        fill="#dd2e44"
-        d="M11.626 7.488a1.4 1.4 0 0 0-.268.395l-.008-.008L.134 33.141l.011.011c-.208.403.14 1.223.853 1.937c.713.713 1.533 1.061 1.936.853l.01.01L28.21 24.735l-.008-.009c.147-.07.282-.155.395-.269c1.562-1.562-.971-6.627-5.656-11.313c-4.687-4.686-9.752-7.218-11.315-5.656"
-      />
-      <Path
-        fill="#ea596e"
-        d="M13 12L.416 32.506l-.282.635l.011.011c-.208.403.14 1.223.853 1.937c.232.232.473.408.709.557L17 17z"
-      />
-      <Path
-        fill="#a0041e"
-        d="M23.012 13.066c4.67 4.672 7.263 9.652 5.789 11.124c-1.473 1.474-6.453-1.118-11.126-5.788c-4.671-4.672-7.263-9.654-5.79-11.127c1.474-1.473 6.454 1.119 11.127 5.791"
-      />
-      <Path
-        fill="#aa8dd8"
-        d="M18.59 13.609a1 1 0 0 1-.734.215c-.868-.094-1.598-.396-2.109-.873c-.541-.505-.808-1.183-.735-1.862c.128-1.192 1.324-2.286 3.363-2.066c.793.085 1.147-.17 1.159-.292c.014-.121-.277-.446-1.07-.532c-.868-.094-1.598-.396-2.11-.873c-.541-.505-.809-1.183-.735-1.862c.13-1.192 1.325-2.286 3.362-2.065c.578.062.883-.057 1.012-.134c.103-.063.144-.123.148-.158c.012-.121-.275-.446-1.07-.532a1 1 0 0 1-.886-1.102a.997.997 0 0 1 1.101-.886c2.037.219 2.973 1.542 2.844 2.735c-.13 1.194-1.325 2.286-3.364 2.067c-.578-.063-.88.057-1.01.134c-.103.062-.145.123-.149.157c-.013.122.276.446 1.071.532c2.037.22 2.973 1.542 2.844 2.735s-1.324 2.286-3.362 2.065c-.578-.062-.882.058-1.012.134c-.104.064-.144.124-.148.158c-.013.121.276.446 1.07.532a1 1 0 0 1 .52 1.773"
-      />
-      <Path
-        fill="#77b255"
-        d="M30.661 22.857c1.973-.557 3.334.323 3.658 1.478c.324 1.154-.378 2.615-2.35 3.17c-.77.216-1.001.584-.97.701c.034.118.425.312 1.193.095c1.972-.555 3.333.325 3.657 1.479c.326 1.155-.378 2.614-2.351 3.17c-.769.216-1.001.585-.967.702s.423.311 1.192.095a1 1 0 1 1 .54 1.925c-1.971.555-3.333-.323-3.659-1.479c-.324-1.154.379-2.613 2.353-3.169c.77-.217 1.001-.584.967-.702c-.032-.117-.422-.312-1.19-.096c-1.974.556-3.334-.322-3.659-1.479c-.325-1.154.378-2.613 2.351-3.17c.768-.215.999-.585.967-.701c-.034-.118-.423-.312-1.192-.096a1 1 0 1 1-.54-1.923"
-      />
-      <Path
-        fill="#aa8dd8"
-        d="M23.001 20.16a1.001 1.001 0 0 1-.626-1.781c.218-.175 5.418-4.259 12.767-3.208a1 1 0 1 1-.283 1.979c-6.493-.922-11.187 2.754-11.233 2.791a1 1 0 0 1-.625.219"
-      />
-      <Path
-        fill="#77b255"
-        d="M5.754 16a1 1 0 0 1-.958-1.287c1.133-3.773 2.16-9.794.898-11.364c-.141-.178-.354-.353-.842-.316c-.938.072-.849 2.051-.848 2.071a1 1 0 1 1-1.994.149c-.103-1.379.326-4.035 2.692-4.214c1.056-.08 1.933.287 2.552 1.057c2.371 2.951-.036 11.506-.542 13.192a1 1 0 0 1-.958.712"
-      />
-      <Circle cx="25.5" cy="9.5" r="1.5" fill="#5c913b" />
-      <Circle cx="2" cy="18" r="2" fill="#9266cc" />
-      <Circle cx="32.5" cy="19.5" r="1.5" fill="#5c913b" />
-      <Circle cx="23.5" cy="31.5" r="1.5" fill="#5c913b" />
-      <Circle cx="28" cy="4" r="2" fill="#ffcc4d" />
-      <Circle cx="32.5" cy="8.5" r="1.5" fill="#ffcc4d" />
-      <Circle cx="29.5" cy="12.5" r="1.5" fill="#ffcc4d" />
-      <Circle cx="7.5" cy="23.5" r="1.5" fill="#ffcc4d" />
-    </Svg>
-  )
-}

src/components/dialogs/nuxs/TenMillion/index.tsx

@@ -1,712 +0,0 @@
-import React from 'react'
-import {View} from 'react-native'
-import Animated, {FadeIn} from 'react-native-reanimated'
-import ViewShot from 'react-native-view-shot'
-import {Image} from 'expo-image'
-import {requestMediaLibraryPermissionsAsync} from 'expo-image-picker'
-import * as MediaLibrary from 'expo-media-library'
-import {moderateProfile} from '@atproto/api'
-import {msg, Trans} from '@lingui/macro'
-import {useLingui} from '@lingui/react'
-
-import {networkRetry} from '#/lib/async/retry'
-import {getCanvas} from '#/lib/canvas'
-import {shareUrl} from '#/lib/sharing'
-import {logEvent} from '#/lib/statsig/statsig'
-import {sanitizeDisplayName} from '#/lib/strings/display-names'
-import {sanitizeHandle} from '#/lib/strings/handles'
-import {isIOS, isNative} from '#/platform/detection'
-import {useModerationOpts} from '#/state/preferences/moderation-opts'
-import {useProfileQuery} from '#/state/queries/profile'
-import {useAgent, useSession} from '#/state/session'
-import {useComposerControls} from '#/state/shell'
-import {formatCount} from '#/view/com/util/numeric/format'
-import * as Toast from '#/view/com/util/Toast'
-import {Logomark} from '#/view/icons/Logomark'
-import {
-  atoms as a,
-  ThemeProvider,
-  tokens,
-  useBreakpoints,
-  useTheme,
-} from '#/alf'
-import {Button, ButtonIcon, ButtonText} from '#/components/Button'
-import * as Dialog from '#/components/Dialog'
-import {useNuxDialogContext} from '#/components/dialogs/nuxs'
-import {OnePercent} from '#/components/dialogs/nuxs/TenMillion/icons/OnePercent'
-import {PointOnePercent} from '#/components/dialogs/nuxs/TenMillion/icons/PointOnePercent'
-import {TenPercent} from '#/components/dialogs/nuxs/TenMillion/icons/TenPercent'
-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'
-
-const DEBUG = false
-const RATIO = 8 / 10
-const WIDTH = 2000
-const HEIGHT = WIDTH * RATIO
-
-function getFontSize(count: number) {
-  const length = count.toString().length
-  if (length < 7) {
-    return 80
-  } else if (length < 5) {
-    return 100
-  } else {
-    return 70
-  }
-}
-
-function getPercentBadge(percent: number) {
-  if (percent <= 0.001) {
-    return PointOnePercent
-  } else if (percent <= 0.01) {
-    return OnePercent
-  } else if (percent <= 0.1) {
-    return TenPercent
-  }
-  return null
-}
-
-function Frame({children}: {children: React.ReactNode}) {
-  return (
-    <View
-      style={[
-        a.relative,
-        a.w_full,
-        a.overflow_hidden,
-        {
-          paddingTop: '80%',
-        },
-      ]}>
-      {children}
-    </View>
-  )
-}
-
-export function TenMillion({
-  showTimeout,
-  onClose,
-  onFallback,
-}: {
-  showTimeout?: number
-  onClose?: () => void
-  onFallback?: () => void
-}) {
-  const agent = useAgent()
-  const nuxDialogs = useNuxDialogContext()
-  const [userNumber, setUserNumber] = React.useState<number>(0)
-  const fetching = React.useRef(false)
-
-  React.useEffect(() => {
-    async function fetchUserNumber() {
-      const isBlueskyHosted = agent.sessionManager.pdsUrl
-        ?.toString()
-        .includes('bsky.network')
-
-      if (isBlueskyHosted && agent.session?.accessJwt) {
-        const res = await fetch(
-          `https://bsky.social/xrpc/com.atproto.temp.getSignupNumber`,
-          {
-            headers: {
-              Authorization: `Bearer ${agent.session.accessJwt}`,
-            },
-          },
-        )
-
-        if (!res.ok) {
-          throw new Error('Network request failed')
-        }
-
-        const data = await res.json()
-
-        if (data.number && data.number <= 10_000_000) {
-          setUserNumber(data.number)
-        } else {
-          // should be rare
-          nuxDialogs.dismissActiveNux()
-          onFallback?.()
-        }
-      } else {
-        nuxDialogs.dismissActiveNux()
-        onFallback?.()
-      }
-    }
-
-    if (!fetching.current) {
-      fetching.current = true
-      networkRetry(3, fetchUserNumber).catch(() => {
-        nuxDialogs.dismissActiveNux()
-        onFallback?.()
-      })
-    }
-  }, [
-    agent.sessionManager.pdsUrl,
-    agent.session?.accessJwt,
-    setUserNumber,
-    nuxDialogs.dismissActiveNux,
-    nuxDialogs,
-    onFallback,
-  ])
-
-  return userNumber ? (
-    <TenMillionInner
-      userNumber={userNumber}
-      showTimeout={showTimeout ?? 3e3}
-      onClose={onClose}
-    />
-  ) : null
-}
-
-export function TenMillionInner({
-  userNumber,
-  showTimeout,
-  onClose: onCloseOuter,
-}: {
-  userNumber: number
-  showTimeout: number
-  onClose?: () => void
-}) {
-  const t = useTheme()
-  const lightTheme = useTheme('light')
-  const {_, i18n} = useLingui()
-  const control = Dialog.useDialogControl()
-  const {gtMobile} = useBreakpoints()
-  const {openComposer} = useComposerControls()
-  const {currentAccount} = useSession()
-  const {
-    isLoading: isProfileLoading,
-    data: profile,
-    error: profileError,
-  } = useProfileQuery({
-    did: currentAccount!.did,
-  })
-  const moderationOpts = useModerationOpts()
-  const nuxDialogs = useNuxDialogContext()
-  const moderation = React.useMemo(() => {
-    return profile && moderationOpts
-      ? moderateProfile(profile, moderationOpts)
-      : undefined
-  }, [profile, moderationOpts])
-  const [uri, setUri] = React.useState<string | null>(null)
-  const percent = userNumber / 10_000_000
-  const Badge = getPercentBadge(percent)
-  const isLoadingData = isProfileLoading || !moderation || !profile
-  const isLoadingImage = !uri
-
-  const displayName = React.useMemo(() => {
-    if (!profile || !moderation) return ''
-    return sanitizeDisplayName(
-      profile.displayName || sanitizeHandle(profile.handle),
-      moderation.ui('displayName'),
-    )
-  }, [profile, moderation])
-  const handle = React.useMemo(() => {
-    if (!profile) return ''
-    return sanitizeHandle(profile.handle, '@')
-  }, [profile])
-  const joinedDate = React.useMemo(() => {
-    if (!profile || !profile.createdAt) return ''
-    const date = i18n.date(profile.createdAt, {
-      month: 'short',
-      day: 'numeric',
-      year: 'numeric',
-    })
-    return date
-  }, [i18n, profile])
-
-  const error: string = React.useMemo(() => {
-    if (profileError) {
-      return _(
-        msg`Oh no! We weren't able to generate an image for you to share. Rest assured, we're glad you're here 🦋`,
-      )
-    }
-    return ''
-  }, [_, profileError])
-
-  /*
-   * Opening and closing
-   */
-  React.useEffect(() => {
-    const timeout = setTimeout(() => {
-      control.open()
-    }, showTimeout)
-    return () => {
-      clearTimeout(timeout)
-    }
-  }, [control, showTimeout])
-  const onClose = React.useCallback(() => {
-    nuxDialogs.dismissActiveNux()
-    onCloseOuter?.()
-  }, [nuxDialogs, onCloseOuter])
-
-  /*
-   * Actions
-   */
-  const sharePost = React.useCallback(() => {
-    if (uri) {
-      control.close(() => {
-        setTimeout(() => {
-          logEvent('tmd:post', {})
-          openComposer({
-            text: _(
-              msg`Bluesky now has over 10 million users, and I was #${i18n.number(
-                userNumber,
-              )}!`,
-            ),
-            imageUris: [
-              {
-                uri,
-                width: WIDTH,
-                height: HEIGHT,
-                altText: _(
-                  msg`A virtual certificate with text "Celebrating 10M users on Bluesky, #${i18n.number(
-                    userNumber,
-                  )}, ${displayName} ${handle}, joined on ${joinedDate}"`,
-                ),
-              },
-            ],
-          })
-        }, 1e3)
-      })
-    }
-  }, [
-    _,
-    i18n,
-    control,
-    openComposer,
-    uri,
-    userNumber,
-    displayName,
-    handle,
-    joinedDate,
-  ])
-  const onNativeShare = React.useCallback(() => {
-    if (uri) {
-      control.close(() => {
-        logEvent('tmd:share', {})
-        shareUrl(uri)
-      })
-    }
-  }, [uri, control])
-  const onNativeDownload = React.useCallback(async () => {
-    if (uri) {
-      const res = await requestMediaLibraryPermissionsAsync()
-
-      if (!res) {
-        Toast.show(
-          _(
-            msg`You must grant access to your photo library to save the image.`,
-          ),
-          'xmark',
-        )
-        return
-      }
-
-      try {
-        await MediaLibrary.createAssetAsync(uri)
-        logEvent('tmd:download', {})
-        Toast.show(_(msg`Image saved to your camera roll!`))
-      } catch (e: unknown) {
-        console.log(e)
-        Toast.show(_(msg`An error occurred while saving the image!`), 'xmark')
-        return
-      }
-    }
-  }, [_, uri])
-  const onWebDownload = React.useCallback(async () => {
-    if (uri) {
-      const canvas = await getCanvas(uri)
-      const imgHref = canvas
-        .toDataURL('image/png')
-        .replace('image/png', 'image/octet-stream')
-      const link = document.createElement('a')
-      link.setAttribute('download', `Bluesky 10M Users.png`)
-      link.setAttribute('href', imgHref)
-      link.click()
-      logEvent('tmd:download', {})
-    }
-  }, [uri])
-
-  /*
-   * Canvas stuff
-   */
-  const imageRef = React.useRef<ViewShot>(null)
-  const captureInProgress = React.useRef(false)
-  const onCanvasReady = React.useCallback(async () => {
-    if (
-      imageRef.current &&
-      imageRef.current.capture &&
-      !captureInProgress.current
-    ) {
-      captureInProgress.current = true
-      const uri = await imageRef.current.capture()
-      setUri(uri)
-    }
-  }, [setUri])
-  const canvas = isLoadingData ? null : (
-    <View
-      style={[
-        a.absolute,
-        a.overflow_hidden,
-        DEBUG
-          ? {
-              width: 600,
-              height: 600 * RATIO,
-            }
-          : {
-              width: 1,
-              height: 1,
-            },
-      ]}>
-      <View style={{width: 600}}>
-        <ThemeProvider theme="light">
-          <Frame>
-            <ViewShot
-              ref={imageRef}
-              options={{width: WIDTH, height: HEIGHT}}
-              style={[a.absolute, a.inset_0]}>
-              <View
-                onLayout={onCanvasReady}
-                style={[
-                  a.absolute,
-                  a.inset_0,
-                  a.align_center,
-                  a.justify_center,
-                  {
-                    top: -1,
-                    bottom: -1,
-                    left: -1,
-                    right: -1,
-                    paddingVertical: 48,
-                    paddingHorizontal: 48,
-                  },
-                ]}>
-                <GradientFill gradient={tokens.gradients.bonfire} />
-
-                <View
-                  style={[
-                    a.flex_1,
-                    a.w_full,
-                    a.align_center,
-                    a.justify_center,
-                    a.rounded_md,
-                    {
-                      backgroundColor: 'white',
-                      shadowRadius: 32,
-                      shadowOpacity: 0.1,
-                      elevation: 24,
-                      shadowColor: tokens.gradients.bonfire.values[0][1],
-                    },
-                  ]}>
-                  <View
-                    style={[
-                      a.absolute,
-                      a.px_xl,
-                      a.py_xl,
-                      {
-                        top: 0,
-                        left: 0,
-                      },
-                    ]}>
-                    <Logomark fill={t.palette.primary_500} width={36} />
-                  </View>
-
-                  {/* Centered content */}
-                  <View
-                    style={[
-                      {
-                        paddingBottom: isNative ? 0 : 24,
-                      },
-                    ]}>
-                    <Text
-                      allowFontScaling={false}
-                      style={[
-                        a.text_md,
-                        a.font_bold,
-                        a.text_center,
-                        a.pb_sm,
-                        lightTheme.atoms.text_contrast_medium,
-                      ]}>
-                      <Trans>
-                        Celebrating {formatCount(i18n, 10000000)} users
-                      </Trans>{' '}
-                      🎉
-                    </Text>
-                    <View style={[a.flex_row, a.align_start]}>
-                      <Text
-                        allowFontScaling={false}
-                        style={[
-                          a.absolute,
-                          a.font_heavy,
-                          {
-                            color: t.palette.primary_500,
-                            fontSize: 32,
-                            width: 32,
-                            top: isNative ? -10 : 0,
-                            left: 0,
-                            transform: [
-                              {
-                                translateX: -16,
-                              },
-                            ],
-                          },
-                        ]}>
-                        #
-                      </Text>
-                      <Text
-                        allowFontScaling={false}
-                        style={[
-                          a.relative,
-                          a.text_center,
-                          a.font_heavy,
-                          {
-                            fontStyle: 'italic',
-                            fontSize: getFontSize(userNumber),
-                            lineHeight: getFontSize(userNumber),
-                            letterSpacing: -2,
-                          },
-                        ]}>
-                        {i18n.number(userNumber)}
-                      </Text>
-                    </View>
-
-                    {Badge && (
-                      <View
-                        style={[
-                          a.absolute,
-                          {
-                            width: 64,
-                            height: 64,
-                            top: isNative ? 75 : 85,
-                            right: '5%',
-                            transform: [
-                              {
-                                rotate: '8deg',
-                              },
-                            ],
-                          },
-                        ]}>
-                        <Badge fill={t.palette.primary_500} />
-                      </View>
-                    )}
-                  </View>
-                  {/* End centered content */}
-
-                  <View
-                    style={[
-                      a.absolute,
-                      a.px_xl,
-                      a.py_xl,
-                      {
-                        bottom: 0,
-                        left: 0,
-                        right: 0,
-                      },
-                    ]}>
-                    <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
-                          allowFontScaling={false}
-                          style={[
-                            a.flex_1,
-                            a.text_sm,
-                            a.font_bold,
-                            a.leading_tight,
-                            {maxWidth: '60%'},
-                          ]}>
-                          {displayName}
-                        </Text>
-                        <View
-                          style={[a.flex_row, a.justify_between, a.gap_4xl]}>
-                          <Text
-                            allowFontScaling={false}
-                            numberOfLines={1}
-                            style={[
-                              a.flex_1,
-                              a.text_sm,
-                              a.font_bold,
-                              a.leading_snug,
-                              lightTheme.atoms.text_contrast_medium,
-                            ]}>
-                            {handle}
-                          </Text>
-
-                          {profile.createdAt && (
-                            <Text
-                              allowFontScaling={false}
-                              numberOfLines={1}
-                              ellipsizeMode="head"
-                              style={[
-                                a.flex_1,
-                                a.text_sm,
-                                a.font_bold,
-                                a.leading_snug,
-                                a.text_right,
-                                lightTheme.atoms.text_contrast_low,
-                              ]}>
-                              <Trans>Joined on {joinedDate}</Trans>
-                            </Text>
-                          )}
-                        </View>
-                      </View>
-                    </View>
-                  </View>
-                </View>
-              </View>
-            </ViewShot>
-          </Frame>
-        </ThemeProvider>
-      </View>
-    </View>
-  )
-
-  return (
-    <Dialog.Outer control={control} onClose={onClose}>
-      <Dialog.ScrollableInner
-        label={_(msg`Ten Million`)}
-        style={[
-          {
-            padding: 0,
-            paddingTop: 0,
-          },
-        ]}>
-        <View
-          style={[
-            a.rounded_md,
-            a.overflow_hidden,
-            isNative && {
-              borderTopLeftRadius: 40,
-              borderTopRightRadius: 40,
-            },
-          ]}>
-          <Frame>
-            <View
-              style={[a.absolute, a.inset_0, a.align_center, a.justify_center]}>
-              <GradientFill gradient={tokens.gradients.bonfire} />
-              {error ? (
-                <View>
-                  <Text
-                    style={[
-                      a.text_md,
-                      a.leading_snug,
-                      a.text_center,
-                      a.pb_md,
-                      {
-                        maxWidth: 300,
-                      },
-                    ]}>
-                    (╯°□°)╯︵ ┻━┻
-                  </Text>
-                  <Text
-                    style={[
-                      a.text_xl,
-                      a.font_bold,
-                      a.leading_snug,
-                      a.text_center,
-                      {
-                        maxWidth: 300,
-                      },
-                    ]}>
-                    {error}
-                  </Text>
-                </View>
-              ) : isLoadingData || isLoadingImage ? (
-                <Loader size="xl" fill="white" />
-              ) : (
-                <Animated.View
-                  entering={FadeIn.duration(150)}
-                  style={[a.w_full, a.h_full]}>
-                  <Image
-                    accessibilityIgnoresInvertColors
-                    source={{uri}}
-                    style={[a.w_full, a.h_full]}
-                  />
-                </Animated.View>
-              )}
-            </View>
-          </Frame>
-
-          {canvas}
-
-          <View style={[gtMobile ? a.p_2xl : a.p_xl]}>
-            <Text
-              allowFontScaling={false}
-              style={[a.text_5xl, a.leading_tight, a.pb_lg, a.font_heavy]}>
-              <Trans>Thanks for being one of our first 10 million users.</Trans>
-            </Text>
-
-            <Text style={[a.leading_snug, a.text_lg, a.pb_xl]}>
-              <Trans>
-                Together, we're rebuilding the social internet. We're glad
-                you're here.
-              </Trans>
-            </Text>
-
-            <Divider />
-
-            <View
-              style={[
-                a.flex_row,
-                a.align_center,
-                a.justify_end,
-                a.gap_md,
-                a.pt_xl,
-              ]}>
-              {gtMobile && (
-                <Text
-                  style={[a.text_md, a.italic, t.atoms.text_contrast_medium]}>
-                  <Trans>Brag a little!</Trans>
-                </Text>
-              )}
-
-              <Button
-                disabled={isLoadingImage}
-                label={
-                  isNative && isIOS
-                    ? _(msg`Share image externally`)
-                    : _(msg`Download image`)
-                }
-                size="large"
-                variant="solid"
-                color="secondary"
-                shape="square"
-                onPress={
-                  isNative
-                    ? isIOS
-                      ? onNativeShare
-                      : onNativeDownload
-                    : onWebDownload
-                }>
-                <ButtonIcon icon={isNative && isIOS ? Share : Download} />
-              </Button>
-              <Button
-                disabled={isLoadingImage}
-                label={_(msg`Share image in post`)}
-                size="large"
-                variant="solid"
-                color="primary"
-                onPress={sharePost}>
-                <ButtonText>{_(msg`Share`)}</ButtonText>
-                <ButtonIcon position="right" icon={ImageIcon} />
-              </Button>
-            </View>
-          </View>
-        </View>
-
-        <Dialog.Close />
-      </Dialog.ScrollableInner>
-    </Dialog.Outer>
-  )
-}

src/components/dialogs/nuxs/index.tsx

@@ -16,10 +16,11 @@ import {
 import {useProfileQuery} from '#/state/queries/profile'
 import {SessionAccount, useSession} from '#/state/session'
 import {useOnboardingState} from '#/state/shell'
+/*
+ * NUXs
+ */
 import {NeueTypography} from '#/components/dialogs/nuxs/NeueTypography'
 import {isSnoozed, snooze, unsnooze} from '#/components/dialogs/nuxs/snoozing'
-// NUXs
-import {TenMillion} from '#/components/dialogs/nuxs/TenMillion'
 import {IS_DEV} from '#/env'
 
 type Context = {
@@ -36,9 +37,6 @@ const queuedNuxs: {
     preferences: UsePreferencesQueryResponse
   }) => boolean
 }[] = [
-  {
-    id: Nux.TenMillionDialog,
-  },
   {
     id: Nux.NeueTypography,
     enabled(props) {
@@ -176,7 +174,6 @@ function Inner({
 
   return (
     <Context.Provider value={ctx}>
-      {activeNux === Nux.TenMillionDialog && <TenMillion />}
       {activeNux === Nux.NeueTypography && <NeueTypography />}
     </Context.Provider>
   )

src/state/queries/nuxs/definitions.ts

@@ -3,23 +3,16 @@ import zod from 'zod'
 import {BaseNux} from '#/state/queries/nuxs/types'
 
 export enum Nux {
-  TenMillionDialog = 'TenMillionDialog',
   NeueTypography = 'NeueTypography',
 }
 
 export const nuxNames = new Set(Object.values(Nux))
 
-export type AppNux =
-  | BaseNux<{
-      id: Nux.TenMillionDialog
-      data: undefined
-    }>
-  | BaseNux<{
+export type AppNux = BaseNux<{
   id: Nux.NeueTypography
   data: undefined
 }>
 
 export const NuxSchemas: Record<Nux, zod.ZodObject<any> | undefined> = {
-  [Nux.TenMillionDialog]: undefined,
   [Nux.NeueTypography]: undefined,
 }

src/view/com/home/HomeHeaderLayout.web.tsx

@@ -1,25 +1,16 @@
 import React from 'react'
 import {StyleSheet, View} from 'react-native'
-import Animated, {
-  useAnimatedStyle,
-  useReducedMotion,
-  useSharedValue,
-  withDelay,
-  withRepeat,
-  withSequence,
-  withSpring,
-  withTiming,
-} from 'react-native-reanimated'
+import Animated from 'react-native-reanimated'
 import {msg} from '@lingui/macro'
 import {useLingui} from '@lingui/react'
 
+import {useMinimalShellHeaderTransform} from '#/lib/hooks/useMinimalShellTransform'
+import {useWebMediaQueries} from '#/lib/hooks/useWebMediaQueries'
+import {useKawaiiMode} from '#/state/preferences/kawaii'
 import {useSession} from '#/state/session'
 import {useShellLayout} from '#/state/shell/shell-layout'
-import {useMinimalShellHeaderTransform} from 'lib/hooks/useMinimalShellTransform'
-import {useWebMediaQueries} from 'lib/hooks/useWebMediaQueries'
-// import {Logo} from '#/view/icons/Logo'
+import {Logo} from '#/view/icons/Logo'
 import {atoms as a, useTheme} from '#/alf'
-import {Icon, Trigger} from '#/components/dialogs/nuxs/TenMillion/Trigger'
 import {Hashtag_Stroke2_Corner0_Rounded as FeedsIcon} from '#/components/icons/Hashtag'
 import {Link} from '#/components/Link'
 import {HomeHeaderLayoutMobile} from './HomeHeaderLayoutMobile'
@@ -48,43 +39,7 @@ function HomeHeaderLayoutDesktopAndTablet({
   const {headerHeight} = useShellLayout()
   const {hasSession} = useSession()
   const {_} = useLingui()
-
-  // TEMPORARY - REMOVE AFTER MILLY
-  // This will just cause the icon to shake a bit when the user first opens the app, drawing attention to the celebration
-  // 🎉
-  const rotate = useSharedValue(0)
-  const reducedMotion = useReducedMotion()
-
-  // Run this a single time on app mount.
-  React.useEffect(() => {
-    if (reducedMotion) return
-
-    // Waits 1500ms, then rotates 10 degrees with a spring animation. Repeats once.
-    rotate.value = withDelay(
-      1000,
-      withRepeat(
-        withSequence(
-          withTiming(10, {duration: 100}),
-          withSpring(0, {
-            mass: 1,
-            damping: 1,
-            stiffness: 200,
-            overshootClamping: false,
-          }),
-        ),
-        2,
-        false,
-      ),
-    )
-  }, [rotate, reducedMotion])
-
-  const animatedStyle = useAnimatedStyle(() => ({
-    transform: [
-      {
-        rotateZ: `${rotate.value}deg`,
-      },
-    ],
-  }))
+  const kawaii = useKawaiiMode()
 
   return (
     <>
@@ -101,30 +56,21 @@ function HomeHeaderLayoutDesktopAndTablet({
             t.atoms.bg,
             t.atoms.border_contrast_low,
             styles.bar,
+            kawaii && {paddingTop: 22, paddingBottom: 16},
           ]}>
-          <Animated.View
+          <View
             style={[
               a.absolute,
               a.inset_0,
               a.pt_lg,
               a.m_auto,
+              kawaii && {paddingTop: 4, paddingBottom: 0},
               {
-                width: 28,
+                width: kawaii ? 84 : 28,
               },
-              animatedStyle,
             ]}>
-            <Trigger>
-              {ctx => (
-                <Icon
-                  width={28}
-                  style={{
-                    opacity: ctx.hovered || ctx.pressed ? 0.8 : 1,
-                  }}
-                />
-              )}
-            </Trigger>
-            {/* <Logo width={28} /> */}
-          </Animated.View>
+            <Logo width={kawaii ? 60 : 28} />
+          </View>
 
           <Link
             to="/feeds"

src/view/com/home/HomeHeaderLayoutMobile.tsx

@@ -1,30 +1,20 @@
 import React from 'react'
 import {StyleSheet, TouchableOpacity, View} from 'react-native'
-import Animated, {
-  useAnimatedStyle,
-  useReducedMotion,
-  useSharedValue,
-  withDelay,
-  withRepeat,
-  withSequence,
-  withSpring,
-  withTiming,
-} from 'react-native-reanimated'
+import Animated from 'react-native-reanimated'
 import {msg} from '@lingui/macro'
 import {useLingui} from '@lingui/react'
 
+import {HITSLOP_10} from '#/lib/constants'
+import {useMinimalShellHeaderTransform} from '#/lib/hooks/useMinimalShellTransform'
+import {usePalette} from '#/lib/hooks/usePalette'
+import {isWeb} from '#/platform/detection'
 import {useSession} from '#/state/session'
 import {useSetDrawerOpen} from '#/state/shell/drawer-open'
 import {useShellLayout} from '#/state/shell/shell-layout'
-import {HITSLOP_10} from 'lib/constants'
-import {useMinimalShellHeaderTransform} from 'lib/hooks/useMinimalShellTransform'
-import {usePalette} from 'lib/hooks/usePalette'
-import {isWeb} from 'platform/detection'
-// import {Logo} from '#/view/icons/Logo'
+import {Logo} from '#/view/icons/Logo'
 import {atoms} from '#/alf'
 import {useTheme} from '#/alf'
 import {atoms as a} from '#/alf'
-import {Icon, Trigger} from '#/components/dialogs/nuxs/TenMillion/Trigger'
 import {ColorPalette_Stroke2_Corner0_Rounded as ColorPalette} from '#/components/icons/ColorPalette'
 import {Hashtag_Stroke2_Corner0_Rounded as FeedsIcon} from '#/components/icons/Hashtag'
 import {Menu_Stroke2_Corner0_Rounded as Menu} from '#/components/icons/Menu'
@@ -49,43 +39,6 @@ export function HomeHeaderLayoutMobile({
     setDrawerOpen(true)
   }, [setDrawerOpen])
 
-  // TEMPORARY - REMOVE AFTER MILLY
-  // This will just cause the icon to shake a bit when the user first opens the app, drawing attention to the celebration
-  // 🎉
-  const rotate = useSharedValue(0)
-  const reducedMotion = useReducedMotion()
-
-  // Run this a single time on app mount.
-  React.useEffect(() => {
-    if (reducedMotion) return
-
-    // Waits 1500ms, then rotates 10 degrees with a spring animation. Repeats once.
-    rotate.value = withDelay(
-      1000,
-      withRepeat(
-        withSequence(
-          withTiming(10, {duration: 100}),
-          withSpring(0, {
-            mass: 1,
-            damping: 1,
-            stiffness: 200,
-            overshootClamping: false,
-          }),
-        ),
-        2,
-        false,
-      ),
-    )
-  }, [rotate, reducedMotion])
-
-  const animatedStyle = useAnimatedStyle(() => ({
-    transform: [
-      {
-        rotateZ: `${rotate.value}deg`,
-      },
-    ],
-  }))
-
   return (
     <Animated.View
       style={[pal.view, pal.border, styles.tabBar, headerMinimalShellTransform]}
@@ -106,19 +59,9 @@ export function HomeHeaderLayoutMobile({
             <Menu size="lg" fill={t.atoms.text_contrast_medium.color} />
           </TouchableOpacity>
         </View>
-        <Animated.View style={animatedStyle}>
-          <Trigger>
-            {ctx => (
-              <Icon
-                width={28}
-                style={{
-                  opacity: ctx.pressed ? 0.8 : 1,
-                }}
-              />
-            )}
-          </Trigger>
-          {/* <Logo width={30} /> */}
-        </Animated.View>
+        <View>
+          <Logo width={30} />
+        </View>
         <View
           style={[
             atoms.flex_row,