zio
/
bsky-app
2
0
Fork 0
Code Pull Requests Packages Releases Activity

Add badges, clean up spacing

zio/dev^2
Eric Bailey 2024-09-10 18:45:08 -05:00
parent f7db14f32f
commit 11ecea22d4
5 changed files with 126 additions and 13 deletions
Show Stats Download Patch File Download Diff File Expand all files Collapse all files

15
src/components/dialogs/nudges/TenMillion/icons/OnePercent.tsx 100644
View File

File diff suppressed because one or more lines are too long

15
src/components/dialogs/nudges/TenMillion/icons/PointOnePercent.tsx 100644
View File

File diff suppressed because one or more lines are too long

15
src/components/dialogs/nudges/TenMillion/icons/TenPercent.tsx 100644
View File

File diff suppressed because one or more lines are too long

15
src/components/dialogs/nudges/TenMillion/icons/TwentyFivePercent.tsx 100644
View File

File diff suppressed because one or more lines are too long

79
src/components/dialogs/nudges/TenMillion.tsx → src/components/dialogs/nudges/TenMillion/index.tsx
View File

@ -10,7 +10,7 @@ import {getCanvas} from '#/lib/canvas'
import {shareUrl} from '#/lib/sharing'
import {sanitizeDisplayName} from '#/lib/strings/display-names'
import {sanitizeHandle} from '#/lib/strings/handles'
import {isAndroid, isNative, isWeb} from '#/platform/detection'
import {isNative} from '#/platform/detection'
import {useModerationOpts} from '#/state/preferences/moderation-opts'
import {useProfileQuery} from '#/state/queries/profile'
import {useSession} from '#/state/session'
@ -28,6 +28,9 @@ import {
import {Button, ButtonIcon, ButtonText} from '#/components/Button'
import * as Dialog from '#/components/Dialog'
import {useContext} from '#/components/dialogs/nudges'
import {OnePercent} from '#/components/dialogs/nudges/TenMillion/icons/OnePercent'
import {PointOnePercent} from '#/components/dialogs/nudges/TenMillion/icons/PointOnePercent'
import {TenPercent} from '#/components/dialogs/nudges/TenMillion/icons/TenPercent'
import {Divider} from '#/components/Divider'
import {GradientFill} from '#/components/GradientFill'
import {ArrowOutOfBox_Stroke2_Corner0_Rounded as Share} from '#/components/icons/ArrowOutOfBox'
@ -35,6 +38,7 @@ import {Download_Stroke2_Corner0_Rounded as Download} from '#/components/icons/D
import {Image_Stroke2_Corner0_Rounded as ImageIcon} from '#/components/icons/Image'
import {Loader} from '#/components/Loader'
import {Text} from '#/components/Typography'
// import {TwentyFivePercent} from '#/components/dialogs/nudges/TenMillion/icons/TwentyFivePercent'
const DEBUG = false
const RATIO = 8 / 10
@ -52,6 +56,20 @@ function getFontSize(count: number) {
}
}
function getPercentBadge(percent: number) {
if (percent <= 0.001) {
return PointOnePercent
} else if (percent <= 0.01) {
return OnePercent
} else if (percent <= 0.1) {
return TenPercent
}
// else if (percent <= 0.25) {
// return TwentyFivePercent
// }
return null
}
function Frame({children}: {children: React.ReactNode}) {
return (
<View
@ -90,7 +108,9 @@ export function TenMillion() {
const isLoadingData = isProfileLoading || !moderation || !profile
const isLoadingImage = !uri
const userNumber = 10_000_000 // TODO
const userNumber = 56_738 // TODO
const percent = userNumber / 10_000_000
const Badge = getPercentBadge(percent)
const sharePost = () => {
if (uri) {
@ -151,7 +171,6 @@ export function TenMillion() {
imageRef.current.capture // &&
// cavasRelayout === 'updated'
) {
console.log('LAYOUT')
const uri = await imageRef.current.capture()
setUri(uri)
}
@ -230,7 +249,7 @@ export function TenMillion() {
<View
style={[
{
paddingBottom: 32,
paddingBottom: isNative ? 0 : 24,
},
]}>
<Text
@ -238,7 +257,7 @@ export function TenMillion() {
a.text_md,
a.font_bold,
a.text_center,
a.pb_md,
a.pb_sm,
lightTheme.atoms.text_contrast_medium,
]}>
<Trans>
@ -246,16 +265,22 @@ export function TenMillion() {
</Trans>{' '}
🎉
</Text>
<View>
<View style={[a.flex_row, a.align_start]}>
<Text
style={[
a.absolute,
{
color: t.palette.primary_500,
fontSize: 32,
left: -18,
top: isAndroid ? -8 : isWeb ? 5 : -5,
fontWeight: '900',
width: 32,
top: isNative ? -10 : 0,
left: 0,
transform: [
{
translateX: -16,
},
],
},
]}>
#
@ -275,6 +300,26 @@ export function TenMillion() {
{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 */}
@ -398,15 +443,23 @@ export function TenMillion() {
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.pb_md]}>
<Trans>
Online culture is too important to be controlled by a few
corporations.
</Trans>{' '}
<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.
<Trans>
We’re dedicated to building an open foundation for the social
internet so that we can all shape its future.
</Trans>
</Text>
</Text>
<Text style={[a.leading_snug, a.text_lg, a.font_bold, a.pb_xl]}>
<Trans>Congratulations. We're glad you're here.</Trans>
</Text>
<Divider />
<View