Add Japan-gated custom logo (#11161)

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"