acetheking987/bsky-social-app
1
0
Fork 0
Code Issues Actions Packages Projects Releases 1 Wiki Activity

Some design

Browse Source
This commit is contained in:
Eric Bailey
2024-11-21 15:57:56 -06:00
parent 91568cc574
commit 0cf44f7749
8 changed files with 164 additions and 51 deletions
Download Patch File Download Diff File Expand all files Collapse all files
assets/icons/logomark.svg
+1
View File
@@ -0,0 +1 @@
<svg xmlns="http://www.w3.org/2000/svg" fill="none" viewBox="0 0 24 24"><path fill="#1185FE" d="M6.335 4.212c2.293 1.76 4.76 5.327 5.665 7.241.906-1.914 3.372-5.482 5.665-7.241C19.319 2.942 22 1.96 22 5.086c0 .624-.35 5.244-.556 5.994-.713 2.608-3.315 3.273-5.629 2.87 4.045.704 5.074 3.035 2.852 5.366-4.22 4.426-6.066-1.111-6.54-2.53-.086-.26-.126-.382-.127-.278 0-.104-.041.018-.128.278-.473 1.419-2.318 6.956-6.539 2.53-2.222-2.331-1.193-4.662 2.852-5.366-2.314.403-4.916-.262-5.63-2.87C2.35 10.33 2 5.71 2 5.086c0-3.126 2.68-2.144 4.335-.874Z"/></svg>
Side by Side

After

Width:  |  Height:  |  Size: 557 B

src/alf/tokens.ts
+6 -2
View File
@@ -108,8 +108,7 @@ export const gradients = {
nordic: {
values: [
[0, '#083367'],
[0.4, '#1A4972'],
[0.6, '#386D84'],
[0.4, '#386D84'],
[1, '#9EE8C1'],
],
hover_value: '#3A7085',
@@ -124,3 +123,8 @@ export const gradients = {
hover_value: '#755B62',
},
} as const
export const blueskyPlus = {
dark: '#083367',
light: '#9EE8C1',
}
src/components/icons/BlueskyPlus.tsx
+2 -2
View File
@@ -42,13 +42,13 @@ export function Logotype(props: Props) {
const {fill, size: _size, style, gradient, ...rest} = useCommonSVGProps(props)
// @ts-ignore it's fiiiiine
const size = parseInt(rest.width || 100)
const ratio = 78 / 330
const ratio = 88 / 330
const {_} = useLingui()
return (
<Svg
fill="none"
viewBox="0 0 330 78"
viewBox="0 -10 330 88"
accessibilityLabel={_(msg`Bluesky Plus`)}
accessibilityHint=""
{...rest}
src/components/icons/Logo.tsx
+5
View File
@@ -0,0 +1,5 @@
import {createSinglePathSVG} from './TEMPLATE'
export const Mark = createSinglePathSVG({
path: 'M6.335 4.212c2.293 1.76 4.76 5.327 5.665 7.241.906-1.914 3.372-5.482 5.665-7.241C19.319 2.942 22 1.96 22 5.086c0 .624-.35 5.244-.556 5.994-.713 2.608-3.315 3.273-5.629 2.87 4.045.704 5.074 3.035 2.852 5.366-4.22 4.426-6.066-1.111-6.54-2.53-.086-.26-.126-.382-.127-.278 0-.104-.041.018-.128.278-.473 1.419-2.318 6.956-6.539 2.53-2.222-2.331-1.193-4.662 2.852-5.366-2.314.403-4.916-.262-5.63-2.87C2.35 10.33 2 5.71 2 5.086c0-3.126 2.68-2.144 4.335-.874Z',
})
src/screens/Settings/Settings.tsx
+13 -6
View File
@@ -39,6 +39,7 @@ import {CodeBrackets_Stroke2_Corner2_Rounded as CodeBracketsIcon} from '#/compon
import {DotGrid_Stroke2_Corner0_Rounded as DotsHorizontal} from '#/components/icons/DotGrid'
import {Earth_Stroke2_Corner2_Rounded as EarthIcon} from '#/components/icons/Globe'
import {Lock_Stroke2_Corner2_Rounded as LockIcon} from '#/components/icons/Lock'
import {Mark} from '#/components/icons/Logo'
import {PaintRoller_Stroke2_Corner2_Rounded as PaintRollerIcon} from '#/components/icons/PaintRoller'
import {
Person_Stroke2_Corner2_Rounded as PersonIcon,
@@ -142,6 +143,18 @@ export function SettingsScreen({}: Props) {
<AddAccountRow />
)}
<SettingsList.Divider />
<SettingsList.LinkItem
to="/subscriptions"
label={_(msg`Subscriptions`)}>
<SettingsList.ItemIcon
icon={Mark}
iconProps={{gradient: 'nordic'}}
/>
<SettingsList.ItemText>
<Trans>Subscriptions</Trans>
</SettingsList.ItemText>
</SettingsList.LinkItem>
<SettingsList.Divider />
<SettingsList.LinkItem to="/settings/account" label={_(msg`Account`)}>
<SettingsList.ItemIcon icon={PersonIcon} />
<SettingsList.ItemText>
@@ -162,12 +175,6 @@ export function SettingsScreen({}: Props) {
<Trans>Moderation</Trans>
</SettingsList.ItemText>
</SettingsList.LinkItem>
<SettingsList.LinkItem to="/subscriptions" label={_(msg`Subscriptions`)}>
<SettingsList.ItemIcon icon={HandIcon} />
<SettingsList.ItemText>
<Trans>Subscriptions</Trans>
</SettingsList.ItemText>
</SettingsList.LinkItem>
<SettingsList.LinkItem
to="/settings/content-and-media"
label={_(msg`Content and media`)}>
src/screens/Settings/components/SettingsList.tsx
+4 -1
View File
@@ -5,6 +5,7 @@ import {HITSLOP_10} from '#/lib/constants'
import {atoms as a, useTheme, ViewStyleProp} from '#/alf'
import * as Button from '#/components/Button'
import {ChevronRight_Stroke2_Corner0_Rounded as ChevronRightIcon} from '#/components/icons/Chevron'
import {Props as IconProps} from '#/components/icons/common'
import {Link, LinkProps} from '#/components/Link'
import {createPortalGroup} from '#/components/Portal'
import {Text} from '#/components/Typography'
@@ -177,8 +178,10 @@ export function ItemIcon({
icon: Comp,
size = 'xl',
color: colorProp,
iconProps,
}: Omit<React.ComponentProps<typeof Button.ButtonIcon>, 'position'> & {
color?: string
iconProps?: Pick<IconProps, 'gradient'>
}) {
const t = useTheme()
const {destructive, withinGroup} = useContext(ItemContext)
@@ -201,7 +204,7 @@ export function ItemIcon({
const content = (
<View style={[a.z_20, {width: iconSize, height: iconSize}]}>
<Comp width={iconSize} style={[{color}]} />
<Comp width={iconSize} style={[{color}]} {...iconProps} />
</View>
)
src/screens/Subscriptions/index.tsx
+132 -40
View File
@@ -1,12 +1,18 @@
import React from 'react'
import {View} from 'react-native'
import {msg, Trans} from '@lingui/macro'
import {useLingui} from '@lingui/react'
import {NativeStackScreenProps} from '@react-navigation/native-stack'
import {CommonNavigatorParams} from '#/lib/routes/types'
import {isAndroid, isIOS, isWeb} from '#/platform/detection'
import {PurchasesState, usePurchases} from '#/state/purchases'
import {useManageSubscription} from '#/state/purchases/hooks/useManageSubscription'
import {SubscriptionGroupId} from '#/state/purchases/types'
import {
PlatformId,
SubscriptionGroupId,
SubscriptionOfferingId,
} from '#/state/purchases/types'
import {APISubscription} from '#/state/purchases/types'
import {CenteredView} from '#/view/com/util/Views'
import {atoms as a, tokens, useTheme} from '#/alf'
@@ -14,15 +20,18 @@ import {Admonition} from '#/components/Admonition'
import {Button, ButtonIcon, ButtonText} from '#/components/Button'
import {useDialogControl} from '#/components/Dialog'
import {BlueskyPlus} from '#/components/dialogs/BlueskyPlus'
import {Divider} from '#/components/Divider'
import {GradientFill} from '#/components/GradientFill'
import {AndroidLogo} from '#/components/icons/AndroidLogo'
import {AppleLogo} from '#/components/icons/AppleLogo'
import {ArrowRotateCounterClockwise_Stroke2_Corner0_Rounded as Rotate} from '#/components/icons/ArrowRotateCounterClockwise'
import {Full as BlueskyPlusLogo} from '#/components/icons/BlueskyPlus'
import {Full as BlueskyPlusLogo, Logotype} from '#/components/icons/BlueskyPlus'
import {CheckThick_Stroke2_Corner0_Rounded as Check} from '#/components/icons/Check'
import {Clock_Stroke2_Corner0_Rounded as Clock} from '#/components/icons/Clock'
import {Globe_Stroke2_Corner0_Rounded as Globe} from '#/components/icons/Globe'
import {PlusLarge_Stroke2_Corner0_Rounded as Plus} from '#/components/icons/Plus'
import {SettingsGear2_Stroke2_Corner0_Rounded as Gear} from '#/components/icons/SettingsGear2'
import * as Layout from '#/components/Layout'
import {createStaticClick, InlineLinkText, Link} from '#/components/Link'
import {createStaticClick, Link} from '#/components/Link'
import {Loader} from '#/components/Loader'
import {Text} from '#/components/Typography'
@@ -40,7 +49,7 @@ export function Subscriptions(_props: ScreenProps) {
<Layout.Header title={_(msg`Subscriptions`)} />
<Layout.Content>
<CenteredView sideBorders={true} style={[a.util_screen_outer]}>
<CenteredView style={[a.util_screen_outer]}>
<View style={[a.px_xl, a.py_xl]}>
{purchases.status === 'loading' ? (
<Loader />
@@ -113,13 +122,9 @@ function Core({
]
return (
<View style={[a.pt_sm]}>
<BlueskyPlusLogo width={130} gradient="nordic" />
<View style={[]}>
{isSubscribedToCore ? (
<View style={[a.pt_md]}>
<CoreSubscriptions subscriptions={state.subscriptions} />
</View>
<CoreSubscriptions subscriptions={state.subscriptions} />
) : null}
{!isSubscribedToCore && (
@@ -136,6 +141,8 @@ function Core({
</View>
) : (
<>
<BlueskyPlusLogo width={130} gradient="nordic" />
<Text style={[a.text_3xl, a.font_heavy, a.pt_md, a.pb_xs]}>
<Trans>Building a better internet needs your support.</Trans>
</Text>
@@ -221,6 +228,7 @@ function Core({
</>
)}
{/*
<View style={[a.pt_md]}>
<Text style={[a.mb_md, a.text_xs]}>
<InlineLinkText
@@ -245,6 +253,7 @@ function Core({
</InlineLinkText>
</Text>
</View>
*/}
</View>
)
}
@@ -254,51 +263,134 @@ function CoreSubscriptions(props: {subscriptions: APISubscription[]}) {
const {_, i18n} = useLingui()
const {mutateAsync: manageSubscription} = useManageSubscription()
const copy = React.useMemo(() => {
return {
[SubscriptionOfferingId.CoreMonthly]: {
title: _(msg`Monthly`),
},
[SubscriptionOfferingId.CoreAnnual]: {
title: _(msg`Annual`),
},
}
}, [_])
return props.subscriptions.map(sub => {
const endDate = i18n.date(new Date(sub.periodEndsAt), {dateStyle: 'medium'})
const StatusIcon = sub.renews ? Rotate : Clock
const c = copy[sub.offering]
const canManage =
(isWeb && sub.platform === PlatformId.Web) ||
(isIOS && sub.platform === PlatformId.Ios) ||
(isAndroid && sub.platform === PlatformId.Android)
const PlatformIcon = {
[PlatformId.Ios]: AppleLogo,
[PlatformId.Android]: AndroidLogo,
[PlatformId.Web]: Globe,
}[sub.platform]
return (
<View
key={sub.purchasedAt}
style={[
a.p_lg,
a.py_md,
a.p_md,
a.px_lg,
a.rounded_md,
a.border,
a.gap_xs,
a.overflow_hidden,
t.atoms.border_contrast_low,
]}>
<GradientFill
gradient={tokens.gradients.nordic}
style={{opacity: 0.1}}
/>
<View
style={[
a.flex_row,
a.justify_between,
a.align_center,
{paddingBottom: 6},
]}>
<View style={[a.flex_row, a.align_center, a.gap_sm]}>
<Logotype width={75} fill={t.atoms.text.color} />
<View style={[a.flex_row, a.justify_between, a.align_center]}>
<View>
<View style={[a.flex_row, a.align_center, a.gap_xs]}>
<Text
style={[a.text_md, a.font_bold, t.atoms.text_contrast_medium]}>
Active
</Text>
</View>
<Text
style={[
a.text_sm,
a.rounded_full,
a.font_bold,
{
paddingVertical: 3,
paddingHorizontal: 5,
backgroundColor: tokens.blueskyPlus.dark,
color: tokens.blueskyPlus.light,
},
]}>
{c.title}
</Text>
<View style={[a.flex_row, a.align_center, a.gap_xs]}>
<StatusIcon size="sm" fill={t.atoms.text_contrast_low.color} />
<Text style={[a.text_sm]}>{endDate}</Text>
</View>
<Text
style={[
a.text_sm,
a.rounded_full,
a.font_bold,
{
paddingVertical: 3,
paddingHorizontal: 5,
borderWidth: sub.renews ? 0 : a.border.borderWidth,
borderColor: t.palette.negative_500,
backgroundColor: sub.renews
? tokens.blueskyPlus.light
: t.atoms.bg.backgroundColor,
color: sub.renews
? tokens.blueskyPlus.dark
: t.atoms.text.color,
},
]}>
{sub.renews ? <Trans>Active</Trans> : <Trans>Cancelled</Trans>}
</Text>
</View>
<Link
label={_('Manage subscription')}
size="small"
variant="ghost"
shape="round"
{...createStaticClick(() => {
manageSubscription()
})}
style={[a.justify_center]}>
<ButtonIcon icon={Gear} size="lg" />
</Link>
<View style={[a.flex_row, a.align_center, a.gap_xs]}>
<StatusIcon size="sm" fill={t.atoms.text_contrast_low.color} />
<Text style={[a.text_sm, a.font_bold]}>{endDate}</Text>
</View>
</View>
<Divider />
<View
style={[
a.flex_row,
a.justify_between,
a.align_center,
{paddingTop: 6},
]}>
<View
style={[
a.flex_row,
a.justify_between,
a.align_center,
a.gap_xs,
{left: -1},
]}>
<PlatformIcon size="md" fill={t.atoms.text_contrast_low.color} />
<Text
style={[a.text_sm, a.font_bold, t.atoms.text_contrast_medium]}>
<Trans>Managed via web</Trans>
</Text>
</View>
{canManage && (
<Link
label={_('Manage subscription')}
size="tiny"
variant="solid"
color="secondary_inverted"
{...createStaticClick(() => {
manageSubscription()
})}
style={[a.justify_center]}>
<ButtonText>
<Trans>Manage</Trans>
</ButtonText>
</Link>
)}
</View>
</View>
)
src/state/purchases/types.ts
+1
View File
@@ -48,6 +48,7 @@ export type SubscriptionOffering =
export type APISubscription = {
group: SubscriptionGroupId
platform: PlatformId
offering: SubscriptionOfferingId
renews: boolean
periodDtartsAt: string
periodEndsAt: string