diff --git a/assets/icons/custom_logo_japan.svg b/assets/icons/custom_logo_japan.svg new file mode 100644 index 0000000000..a55861faee --- /dev/null +++ b/assets/icons/custom_logo_japan.svg @@ -0,0 +1 @@ + diff --git a/src/analytics/features/types.ts b/src/analytics/features/types.ts index 2e754d8f2e..a781137747 100644 --- a/src/analytics/features/types.ts +++ b/src/analytics/features/types.ts @@ -18,6 +18,7 @@ export enum Features { PostGalleryEmbedEnable = 'post_gallery_embed:enable', PostThreadKnownLikersEnable = 'post_thread:known_likers:enable', PostThreadKnownLikersFetchEnable = 'post_thread:known_likers:fetch:enable', + CustomLogoJapanEnable = 'custom_logo:japan:enable', AATest = 'aa-test', } diff --git a/src/components/PolicyUpdateOverlay/Badge.tsx b/src/components/PolicyUpdateOverlay/Badge.tsx index dbbecd6bcc..b095c8d430 100644 --- a/src/components/PolicyUpdateOverlay/Badge.tsx +++ b/src/components/PolicyUpdateOverlay/Badge.tsx @@ -22,7 +22,7 @@ export function Badge() { backgroundColor: t.palette.primary_25, }, ]}> - + on - + @@ -129,7 +129,11 @@ export function QrCodeInner({link}: {link: string}) { zIndex: 1, padding: 4, }}> - + )} - + - + diff --git a/src/features/inviteFriends/components/ThemedQrCard.tsx b/src/features/inviteFriends/components/ThemedQrCard.tsx index 394d6ecca5..82a0ce687c 100644 --- a/src/features/inviteFriends/components/ThemedQrCard.tsx +++ b/src/features/inviteFriends/components/ThemedQrCard.tsx @@ -177,7 +177,11 @@ export function ThemedQrCard({ /> ) : ( - + )} diff --git a/src/screens/Deactivated.tsx b/src/screens/Deactivated.tsx index 24d6cd90ab..2782c5ef0d 100644 --- a/src/screens/Deactivated.tsx +++ b/src/screens/Deactivated.tsx @@ -109,7 +109,7 @@ export function Deactivated() { - + diff --git a/src/screens/SignupQueued.tsx b/src/screens/SignupQueued.tsx index 406b785d2e..b83e627404 100644 --- a/src/screens/SignupQueued.tsx +++ b/src/screens/SignupQueued.tsx @@ -123,7 +123,7 @@ export function SignupQueued() { - + diff --git a/src/screens/StarterPack/StarterPackLandingScreen.tsx b/src/screens/StarterPack/StarterPackLandingScreen.tsx index f15d259e1f..6184514412 100644 --- a/src/screens/StarterPack/StarterPackLandingScreen.tsx +++ b/src/screens/StarterPack/StarterPackLandingScreen.tsx @@ -179,7 +179,7 @@ function LandingScreenLoaded({ }, ]}> - + - + diff --git a/src/view/com/auth/SplashScreen.web.tsx b/src/view/com/auth/SplashScreen.web.tsx index 8623a2f347..ff406a559c 100644 --- a/src/view/com/auth/SplashScreen.web.tsx +++ b/src/view/com/auth/SplashScreen.web.tsx @@ -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 = ({ ]}> - + {!kawaii && ( diff --git a/src/view/com/home/HomeHeaderLayout.web.tsx b/src/view/com/home/HomeHeaderLayout.web.tsx index 2a44d913ba..ffd09523f5 100644 --- a/src/view/com/home/HomeHeaderLayout.web.tsx +++ b/src/view/com/home/HomeHeaderLayout.web.tsx @@ -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]}> - + () + const logoVariant = useLogoVariant() return ( - + diff --git a/src/view/icons/Logo.tsx b/src/view/icons/Logo.tsx index 0822eff9e6..4735295649 100644 --- a/src/view/icons/Logo.tsx +++ b/src/view/icons/Logo.tsx @@ -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 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 ( 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}]} /> ) } diff --git a/src/view/icons/useLogoVariant.ts b/src/view/icons/useLogoVariant.ts new file mode 100644 index 0000000000..c05d047ac2 --- /dev/null +++ b/src/view/icons/useLogoVariant.ts @@ -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' +} diff --git a/src/view/shell/Drawer.tsx b/src/view/shell/Drawer.tsx index 2e151fa832..358759f379 100644 --- a/src/view/shell/Drawer.tsx +++ b/src/view/shell/Drawer.tsx @@ -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 ( @@ -763,7 +763,7 @@ function ExtraLinks() { label={_(msg`Privacy Policy`)}> Privacy Policy - {kawaii && ( + {logoVariant === 'kawaii' && ( Logo by{' '} diff --git a/src/view/shell/NavSignupCard.tsx b/src/view/shell/NavSignupCard.tsx index 55a6ab02d4..27f4738034 100644 --- a/src/view/shell/NavSignupCard.tsx +++ b/src/view/shell/NavSignupCard.tsx @@ -32,7 +32,7 @@ let NavSignupCard = ({}: {}): React.ReactNode => { return ( - + diff --git a/src/view/shell/bottom-bar/BottomBar.tsx b/src/view/shell/bottom-bar/BottomBar.tsx index 717921a092..c33d2b7b8e 100644 --- a/src/view/shell/bottom-bar/BottomBar.tsx +++ b/src/view/shell/bottom-bar/BottomBar.tsx @@ -339,7 +339,7 @@ export function BottomBar({navigation}: BottomTabBarProps) { }}> - + diff --git a/src/view/shell/bottom-bar/BottomBarWeb.tsx b/src/view/shell/bottom-bar/BottomBarWeb.tsx index f029dc5f20..3cb1984fca 100644 --- a/src/view/shell/bottom-bar/BottomBarWeb.tsx +++ b/src/view/shell/bottom-bar/BottomBarWeb.tsx @@ -228,7 +228,7 @@ export function BottomBarWeb() { }, ]}> - + diff --git a/src/view/shell/desktop/RightNav.tsx b/src/view/shell/desktop/RightNav.tsx index 405386ae10..558e3a081b 100644 --- a/src/view/shell/desktop/RightNav.tsx +++ b/src/view/shell/desktop/RightNav.tsx @@ -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}) { - {kawaii && ( + {logoVariant === 'kawaii' && ( Logo by{' '}