Progress on desktoip

src/alf/index.tsx

@@ -18,9 +18,17 @@ export * from '#/alf/util/themeSelector'
 export const Context = React.createContext<{
   themeName: ThemeName
   theme: Theme
+  themes: ReturnType<typeof createThemes>
 }>({
   themeName: 'light',
   theme: defaultTheme,
+  themes: createThemes({
+    hues: {
+      primary: BLUE_HUE,
+      negative: RED_HUE,
+      positive: GREEN_HUE,
+    },
+  }),
 })
 
 export function ThemeProvider({
@@ -42,18 +50,22 @@ export function ThemeProvider({
     <Context.Provider
       value={React.useMemo(
         () => ({
+          themes,
           themeName: themeName,
           theme: theme,
         }),
-        [theme, themeName],
+        [theme, themeName, themes],
       )}>
       {children}
     </Context.Provider>
   )
 }
 
-export function useTheme() {
+export function useTheme(theme?: ThemeName) {
-  return React.useContext(Context).theme
+  const ctx = React.useContext(Context)
+  return React.useMemo(() => {
+    return theme ? ctx.themes[theme] : ctx.theme
+  }, [theme, ctx])
 }
 
 export function useBreakpoints() {

src/components/dialogs/nudges/TenMillion.tsx

@@ -1,25 +1,74 @@
 import React from 'react'
-import {useLingui} from '@lingui/react'
-import {msg} from '@lingui/macro'
 import {View} from 'react-native'
 import ViewShot from 'react-native-view-shot'
+import {moderateProfile} from '@atproto/api'
+import {msg, Trans} from '@lingui/macro'
+import {useLingui} from '@lingui/react'
 
-import {atoms as a, useBreakpoints, tokens} from '#/alf'
+import {sanitizeDisplayName} from '#/lib/strings/display-names'
-import * as Dialog from '#/components/Dialog'
+import {sanitizeHandle} from '#/lib/strings/handles'
-import {Text} from '#/components/Typography'
+import {isNative} from '#/platform/detection'
-import {GradientFill} from '#/components/GradientFill'
+import {useModerationOpts} from '#/state/preferences/moderation-opts'
-import {Button, ButtonText} from '#/components/Button'
+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 {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 {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 {Image_Stroke2_Corner0_Rounded as ImageIcon} from '#/components/icons/Image'
+import {Loader} from '#/components/Loader'
+import {Text} from '#/components/Typography'
+
+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
+  }
+}
 
 export function TenMillion() {
-  const {_} = useLingui()
+  const t = useTheme()
+  const lightTheme = useTheme('light')
+  const {_, i18n} = useLingui()
   const {controls} = useContext()
   const {gtMobile} = useBreakpoints()
   const {openComposer} = useComposerControls()
-
   const imageRef = React.useRef<ViewShot>(null)
+  const {currentAccount} = useSession()
+  const {isLoading: isProfileLoading, data: profile} = useProfileQuery({
+    did: currentAccount!.did,
+  }) // TODO PWI
+  const moderationOpts = useModerationOpts()
+  const moderation = React.useMemo(() => {
+    return profile && moderationOpts
+      ? moderateProfile(profile, moderationOpts)
+      : undefined
+  }, [profile, moderationOpts])
+
+  const isLoading = isProfileLoading || !moderation || !profile
+
+  const userNumber = 56738
 
   const share = () => {
     if (imageRef.current && imageRef.current.capture) {
@@ -31,8 +80,8 @@ export function TenMillion() {
               imageUris: [
                 {
                   uri,
-                  width: 1000,
+                  width: WIDTH,
-                  height: 1000,
+                  height: HEIGHT,
                 },
               ],
             })
@@ -48,52 +97,247 @@ export function TenMillion() {
 
       <Dialog.ScrollableInner
         label={_(msg`Ten Million`)}
-        style={
+        style={[
-          [
+          {
-            // gtMobile ? {width: 'auto', maxWidth: 400, minWidth: 200} : a.w_full,
+            padding: 0,
-          ]
+          },
-        }>
+          // gtMobile ? {width: 'auto', maxWidth: 400, minWidth: 200} : a.w_full,
+        ]}>
         <View
           style={[
-            a.relative,
+            a.rounded_md,
-            a.w_full,
             a.overflow_hidden,
-            {
+            isNative && {
-              paddingTop: '100%',
+              borderTopLeftRadius: 40,
+              borderTopRightRadius: 40,
             },
           ]}>
-          <ViewShot
+          <ThemeProvider theme="light">
-            ref={imageRef}
-            options={{width: 2e3, height: 2e3}}
-            style={[a.absolute, a.inset_0]}>
             <View
               style={[
-                a.absolute,
+                a.relative,
-                a.inset_0,
+                a.w_full,
-                a.align_center,
+                a.overflow_hidden,
-                a.justify_center,
                 {
-                  top: -1,
+                  paddingTop: '80%',
-                  bottom: -1,
-                  left: -1,
-                  right: -1,
                 },
               ]}>
-              <GradientFill gradient={tokens.gradients.midnight} />
+              <ViewShot
+                ref={imageRef}
+                options={{width: WIDTH, height: HEIGHT}}
+                style={[a.absolute, a.inset_0]}>
+                <View
+                  style={[
+                    a.absolute,
+                    a.inset_0,
+                    a.align_center,
+                    a.justify_center,
+                    {
+                      top: -1,
+                      bottom: -1,
+                      left: -1,
+                      right: -1,
+                      paddingVertical: 32,
+                      paddingHorizontal: 48,
+                    },
+                  ]}>
+                  <GradientFill gradient={tokens.gradients.bonfire} />
 
-              <Text>10 milly, babyyy</Text>
+                  {isLoading ? (
+                    <Loader size="xl" fill="white" />
+                  ) : (
+                    <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: 48,
+                          },
+                        ]}>
+                        <Text
+                          style={[
+                            a.text_md,
+                            a.font_bold,
+                            a.text_center,
+                            a.pb_xs,
+                            lightTheme.atoms.text_contrast_medium,
+                          ]}>
+                          <Trans>
+                            Celebrating {formatCount(i18n, 10000000)} users
+                          </Trans>{' '}
+                          🎉
+                        </Text>
+                        <Text
+                          style={[
+                            a.relative,
+                            a.text_center,
+                            {
+                              fontStyle: 'italic',
+                              fontSize: 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>
+                      {/* 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')}
+                          />
+                          <View style={[a.gap_2xs, a.flex_1]}>
+                            <Text style={[a.text_sm, a.font_bold]}>
+                              {sanitizeDisplayName(
+                                profile.displayName ||
+                                  sanitizeHandle(profile.handle),
+                                moderation.ui('displayName'),
+                              )}
+                            </Text>
+                            <View style={[a.flex_row, a.justify_between]}>
+                              <Text
+                                style={[
+                                  a.text_sm,
+                                  a.font_semibold,
+                                  lightTheme.atoms.text_contrast_medium,
+                                ]}>
+                                {sanitizeHandle(profile.handle, '@')}
+                              </Text>
+
+                              {profile.createdAt && (
+                                <Text
+                                  style={[
+                                    a.text_sm,
+                                    a.font_semibold,
+                                    lightTheme.atoms.text_contrast_low,
+                                  ]}>
+                                  {i18n.date(profile.createdAt, {
+                                    dateStyle: 'long',
+                                  })}
+                                </Text>
+                              )}
+                            </View>
+                          </View>
+                        </View>
+                      </View>
+                    </View>
+                  )}
+                </View>
+              </ViewShot>
             </View>
-          </ViewShot>
+          </ThemeProvider>
+
+          <View style={[gtMobile ? a.p_2xl : a.p_xl]}>
+            <Text
+              style={[
+                a.text_5xl,
+                a.pb_lg,
+                {
+                  fontWeight: '900',
+                },
+              ]}>
+              You're part of the next wave of the internet.
+            </Text>
+
+            <Text style={[a.leading_snug, a.text_lg, a.pb_xl]}>
+              Online culture is too important to be controlled by a few
+              corporations.{' '}
+              <Text style={[a.leading_snug, a.text_lg, a.italic]}>
+                We’re dedicated to building an open foundation for the social
+                internet so that we can all shape its future.
+              </Text>
+            </Text>
+
+            <Divider />
+
+            <View
+              style={[
+                a.flex_row,
+                a.align_center,
+                a.justify_end,
+                a.gap_md,
+                a.pt_xl,
+              ]}>
+              <Text style={[a.text_md, a.italic, t.atoms.text_contrast_medium]}>
+                Brag a little ;)
+              </Text>
+
+              <Button
+                label={_(msg`Share image externally`)}
+                size="large"
+                variant="solid"
+                color="secondary"
+                shape="square"
+                onPress={share}>
+                <ButtonIcon icon={Share} />
+              </Button>
+              <Button
+                label={_(msg`Share image in post`)}
+                size="large"
+                variant="solid"
+                color="primary"
+                onPress={share}>
+                <ButtonText>{_(msg`Share post`)}</ButtonText>
+                <ButtonIcon position="right" icon={ImageIcon} />
+              </Button>
+            </View>
+          </View>
         </View>
 
-        <Button
+        <Dialog.Close />
-          label={_(msg`Generate`)}
-          size="medium"
-          variant="solid"
-          color="primary"
-          onPress={share}>
-          <ButtonText>{_(msg`Generate`)}</ButtonText>
-        </Button>
       </Dialog.ScrollableInner>
     </Dialog.Outer>
   )

src/view/icons/Logomark.tsx

@@ -0,0 +1,29 @@
+import React from 'react'
+import Svg, {Path, PathProps, SvgProps} from 'react-native-svg'
+
+import {usePalette} from '#/lib/hooks/usePalette'
+
+const ratio = 54 / 61
+
+export function Logomark({
+  fill,
+  ...rest
+}: {fill?: PathProps['fill']} & SvgProps) {
+  const pal = usePalette('default')
+  // @ts-ignore it's fiiiiine
+  const size = parseInt(rest.width || 32)
+
+  return (
+    <Svg
+      fill="none"
+      viewBox="0 0 61 54"
+      {...rest}
+      width={size}
+      height={Number(size) * ratio}>
+      <Path
+        fill={fill || pal.text.color}
+        d="M13.223 3.602C20.215 8.832 27.738 19.439 30.5 25.13c2.762-5.691 10.284-16.297 17.278-21.528C52.824-.172 61-3.093 61 6.2c0 1.856-1.068 15.59-1.694 17.82-2.178 7.752-10.112 9.73-17.17 8.532 12.337 2.092 15.475 9.021 8.697 15.95-12.872 13.159-18.5-3.302-19.943-7.52-.264-.773-.388-1.135-.39-.827-.002-.308-.126.054-.39.827-1.442 4.218-7.071 20.679-19.943 7.52-6.778-6.929-3.64-13.858 8.697-15.95-7.058 1.197-14.992-.78-17.17-8.532C1.068 21.79 0 8.056 0 6.2 0-3.093 8.176-.172 13.223 3.602Z"
+      />
+    </Svg>
+  )
+}