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

Add Japan-gated custom logo (#11161)

Browse Source
This commit is contained in:
Samuel Newman
2026-07-16 14:26:05 +03:00
committed by GitHub
parent 4037392105
commit 406fb5425c
21 changed files with 80 additions and 34 deletions
Download Patch File Download Diff File Expand all files Collapse all files
src/view/com/auth/SplashScreen.web.tsx
+5 -3
View File
@@ -5,10 +5,10 @@ import {useLingui} from '@lingui/react'
import {Trans} from '@lingui/react/macro'
import {useWebMediaQueries} from '#/lib/hooks/useWebMediaQueries'
import {useKawaiiMode} from '#/state/preferences/kawaii'
import {ErrorBoundary} from '#/view/com/util/ErrorBoundary'
import {Logo} from '#/view/icons/Logo'
import {Logotype} from '#/view/icons/Logotype'
import {useLogoVariant} from '#/view/icons/useLogoVariant'
import {
AppClipOverlay,
postAppClipMessage,
@@ -46,7 +46,9 @@ export const SplashScreen = ({
}
}, [])
const kawaii = useKawaiiMode()
const logoVariant = useLogoVariant()
const kawaii = logoVariant === 'kawaii'
const japanLogo = logoVariant === 'japan'
return (
<>
@@ -81,7 +83,7 @@ export const SplashScreen = ({
]}>
<ErrorBoundary>
<View style={[a.justify_center, a.align_center]}>
<Logo width={kawaii ? 300 : 92} fill="sky" />
<Logo width={kawaii ? 300 : japanLogo ? 120 : 92} fill="sky" />
{!kawaii && (
<View style={[a.pb_sm, a.pt_5xl]}>
src/view/com/home/HomeHeaderLayout.web.tsx
+11 -3
View File
@@ -4,11 +4,11 @@ import {msg} from '@lingui/core/macro'
import {useLingui} from '@lingui/react'
import {HITSLOP_10} from '#/lib/constants'
import {useKawaiiMode} from '#/state/preferences/kawaii'
import {useSession} from '#/state/session'
import {useShellLayout} from '#/state/shell/shell-layout'
import {HomeHeaderLayoutMobile} from '#/view/com/home/HomeHeaderLayoutMobile'
import {Logo} from '#/view/icons/Logo'
import {useLogoVariant} from '#/view/icons/useLogoVariant'
import {atoms as a, useBreakpoints, useGutters, useTheme} from '#/alf'
import {ButtonIcon} from '#/components/Button'
import {Hashtag_Stroke2_Corner0_Rounded as FeedsIcon} from '#/components/icons/Hashtag'
@@ -40,7 +40,7 @@ function HomeHeaderLayoutDesktopAndTablet({
const {hasSession} = useSession()
const {_} = useLingui()
const ax = useAnalytics()
const kawaii = useKawaiiMode()
const logoVariant = useLogoVariant()
const gutters = useGutters([0, 'base'])
return (
@@ -51,7 +51,15 @@ function HomeHeaderLayoutDesktopAndTablet({
style={[a.flex_row, a.align_center, gutters, a.pt_md, t.atoms.bg]}>
<View style={{width: 34}} />
<View style={[a.flex_1, a.align_center, a.justify_center]}>
<Logo width={kawaii ? 60 : 28} />
<Logo
width={
logoVariant === 'kawaii'
? 60
: logoVariant === 'japan'
? 34
: 28
}
/>
</View>
<Link
to="/feeds"
src/view/com/home/HomeHeaderLayoutMobile.tsx
+3 -1
View File
@@ -14,6 +14,7 @@ import {useSession} from '#/state/session'
import {useShellLayout} from '#/state/shell/shell-layout'
import {useHomeHeaderTransform} from '#/view/com/util/MainScrollProvider'
import {Logo} from '#/view/icons/Logo'
import {useLogoVariant} from '#/view/icons/useLogoVariant'
import {atoms as a, useTheme} from '#/alf'
import {ButtonIcon} from '#/components/Button'
import {Hashtag_Stroke2_Corner0_Rounded as FeedsIcon} from '#/components/icons/Hashtag'
@@ -37,6 +38,7 @@ export function HomeHeaderLayoutMobile({
const {hasSession} = useSession()
const playHaptic = useHaptics()
const {navigate} = useNavigation<NavigationProp>()
const logoVariant = useLogoVariant()
return (
<Animated.View
@@ -71,7 +73,7 @@ export function HomeHeaderLayoutMobile({
emitSoftReset()
}
}}>
<Logo width={30} />
<Logo width={logoVariant === 'japan' ? 34 : 30} />
</PressableScale>
</View>
src/view/icons/Logo.tsx
+12 -8
View File
@@ -10,19 +10,20 @@ import Svg, {
} from 'react-native-svg'
import {Image} from 'expo-image'
import {useKawaiiMode} from '#/state/preferences/kawaii'
import {useLogoVariant} from '#/view/icons/useLogoVariant'
import {flatten, useTheme} from '#/alf'
const ratio = 57 / 64
type Props = {
allowVariants?: boolean
fill?: PathProps['fill']
style?: TextProps['style']
} & Omit<SvgProps, 'style'>
export const Logo = forwardRef(function LogoImpl(props: Props, ref) {
const t = useTheme()
const {fill, ...rest} = props
const {allowVariants = true, fill, ...rest} = props
const gradient = fill === 'sky'
const styles = flatten(props.style)
const _fill = gradient
@@ -31,20 +32,23 @@ export const Logo = forwardRef(function LogoImpl(props: Props, ref) {
// @ts-ignore it's fiiiiine
const size = parseInt(rest.width || 32, 10)
const isKawaii = useKawaiiMode()
const logoVariant = useLogoVariant(allowVariants)
if (isKawaii) {
if (logoVariant !== 'default') {
const isJapanLogo = logoVariant === 'japan'
return (
<Image
source={
size > 100
? require('../../../assets/kawaii.png')
: require('../../../assets/kawaii_smol.png')
isJapanLogo
? require('../../../assets/icons/custom_logo_japan.svg')
: size > 100
? require('../../../assets/kawaii.png')
: require('../../../assets/kawaii_smol.png')
}
accessibilityLabel="Bluesky"
accessibilityHint=""
accessibilityIgnoresInvertColors
style={[{height: size, aspectRatio: 1.4}]}
style={[{height: size, aspectRatio: isJapanLogo ? 2 : 1.4}]}
/>
)
}
src/view/icons/useLogoVariant.ts
+20
View File
@@ -0,0 +1,20 @@
import {useKawaiiMode} from '#/state/preferences/kawaii'
import {useAnalytics} from '#/analytics'
import {useGeolocation} from '#/geolocation'
export type LogoVariant = 'default' | 'japan' | 'kawaii'
export function useLogoVariant(allowVariants = true): LogoVariant {
const ax = useAnalytics()
const geolocation = useGeolocation()
const kawaii = useKawaiiMode()
const japanLogoEnabled =
allowVariants &&
geolocation.countryCode === 'JP' &&
ax.features.enabled(ax.features.CustomLogoJapanEnable)
if (!allowVariants) return 'default'
if (japanLogoEnabled) return 'japan'
if (kawaii) return 'kawaii'
return 'default'
}
src/view/shell/Drawer.tsx
+3 -3
View File
@@ -21,13 +21,13 @@ import {type NavigationProp} from '#/lib/routes/types'
import {sanitizeHandle} from '#/lib/strings/handles'
import {colors} from '#/lib/styles'
import {emitSoftReset} from '#/state/events'
import {useKawaiiMode} from '#/state/preferences/kawaii'
import {useUnreadNotifications} from '#/state/queries/notifications/unread'
import {useProfileQuery} from '#/state/queries/profile'
import {type SessionAccount, useSession} from '#/state/session'
import {useSetDrawerOpen} from '#/state/shell'
import {formatCount} from '#/view/com/util/numeric/format'
import {UserAvatar} from '#/view/com/util/UserAvatar'
import {useLogoVariant} from '#/view/icons/useLogoVariant'
import {NavSignupCard} from '#/view/shell/NavSignupCard'
import {atoms as a, tokens, useTheme, web} from '#/alf'
import {Button, ButtonIcon, ButtonText} from '#/components/Button'
@@ -747,7 +747,7 @@ function MenuItem({icon, label, count, bold, onPress}: MenuItemProps) {
function ExtraLinks() {
const {_} = useLingui()
const t = useTheme()
const kawaii = useKawaiiMode()
const logoVariant = useLogoVariant()
return (
<View style={[a.flex_col, a.gap_md, a.flex_wrap]}>
@@ -763,7 +763,7 @@ function ExtraLinks() {
label={_(msg`Privacy Policy`)}>
<Trans>Privacy Policy</Trans>
</InlineLinkText>
{kawaii && (
{logoVariant === 'kawaii' && (
<Text style={t.atoms.text_contrast_medium}>
<Trans>
Logo by{' '}
src/view/shell/NavSignupCard.tsx
+1 -1
View File
@@ -32,7 +32,7 @@ let NavSignupCard = ({}: {}): React.ReactNode => {
return (
<View style={[{maxWidth: 245}]}>
<Link to="/" label="Bluesky - Home">
<Logo width={32} />
<Logo allowVariants={false} width={32} />
</Link>
<View style={[a.pt_lg]}>
src/view/shell/bottom-bar/BottomBar.tsx
+1 -1
View File
@@ -339,7 +339,7 @@ export function BottomBar({navigation}: BottomTabBarProps) {
}}>
<View
style={{flexDirection: 'row', alignItems: 'center', gap: 8}}>
<Logo width={28} />
<Logo allowVariants={false} width={28} />
<View style={{paddingTop: 4}}>
<Logotype width={80} fill={t.atoms.text.color} />
</View>
src/view/shell/bottom-bar/BottomBarWeb.tsx
+1 -1
View File
@@ -228,7 +228,7 @@ export function BottomBarWeb() {
},
]}>
<View style={[a.flex_row, a.align_center, a.gap_md]}>
<Logo width={32} />
<Logo allowVariants={false} width={32} />
<View style={{paddingTop: 4}}>
<Logotype width={80} fill={t.atoms.text.color} />
</View>
src/view/shell/desktop/RightNav.tsx
+3 -3
View File
@@ -6,8 +6,8 @@ import {Trans} from '@lingui/react/macro'
import {useNavigation} from '@react-navigation/native'
import {FEEDBACK_FORM_URL, HELP_DESK_URL} from '#/lib/constants'
import {useKawaiiMode} from '#/state/preferences/kawaii'
import {useSession} from '#/state/session'
import {useLogoVariant} from '#/view/icons/useLogoVariant'
import {DesktopFeeds} from '#/view/shell/desktop/Feeds'
import {DesktopSearch} from '#/view/shell/desktop/Search'
import {SidebarTrendingTopics} from '#/view/shell/desktop/SidebarTrendingTopics'
@@ -46,7 +46,7 @@ export function DesktopRightNav({routeName}: {routeName: string}) {
const t = useTheme()
const {_} = useLingui()
const {hasSession, currentAccount} = useSession()
const kawaii = useKawaiiMode()
const logoVariant = useLogoVariant()
const gutters = useGutters(['base', 0, 'base', 'wide'])
const isSearchScreen = routeName === 'Search'
const isMessagesRelatedScreen = routeName.startsWith('Messages')
@@ -134,7 +134,7 @@ export function DesktopRightNav({routeName}: {routeName: string}) {
</InlineLinkText>
</Text>
{kawaii && (
{logoVariant === 'kawaii' && (
<Text style={[t.atoms.text_contrast_medium, {marginTop: 12}]}>
<Trans>
Logo by{' '}