Add Japan-gated custom logo (#11161)

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 = ({
           ]}>
           <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

@@ -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

@@ -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>