Add kawaii mode (#3773)

src/view/com/auth/SplashScreen.web.tsx

@@ -4,6 +4,7 @@ import {FontAwesomeIcon} from '@fortawesome/react-native-fontawesome'
 import {msg, Trans} from '@lingui/macro'
 import {useLingui} from '@lingui/react'
 
+import {useKawaiiMode} from '#/state/preferences/kawaii'
 import {useWebMediaQueries} from 'lib/hooks/useWebMediaQueries'
 import {Logo} from '#/view/icons/Logo'
 import {Logotype} from '#/view/icons/Logotype'
@@ -28,6 +29,8 @@ export const SplashScreen = ({
   const t = useTheme()
   const {isTabletOrMobile: isMobileWeb} = useWebMediaQueries()
 
+  const kawaii = useKawaiiMode()
+
   return (
     <>
       {onDismiss && (
@@ -66,11 +69,13 @@ export const SplashScreen = ({
           ]}>
           <ErrorBoundary>
             <View style={[a.justify_center, a.align_center]}>
-              <Logo width={92} fill="sky" />
+              <Logo width={kawaii ? 300 : 92} fill="sky" />
 
-              <View style={[a.pb_sm, a.pt_5xl]}>
-                <Logotype width={161} fill={t.atoms.text.color} />
-              </View>
+              {!kawaii && (
+                <View style={[a.pb_sm, a.pt_5xl]}>
+                  <Logotype width={161} fill={t.atoms.text.color} />
+                </View>
+              )}
 
               <Text
                 style={[

src/view/com/home/HomeHeaderLayout.web.tsx

@@ -15,6 +15,7 @@ import {useMinimalShellMode} from 'lib/hooks/useMinimalShellMode'
 import {usePalette} from 'lib/hooks/usePalette'
 import {useWebMediaQueries} from 'lib/hooks/useWebMediaQueries'
 import {Logo} from '#/view/icons/Logo'
+import {useKawaiiMode} from '../../../state/preferences/kawaii'
 import {Link} from '../util/Link'
 import {HomeHeaderLayoutMobile} from './HomeHeaderLayoutMobile'
 
@@ -43,10 +44,19 @@ function HomeHeaderLayoutDesktopAndTablet({
   const {hasSession} = useSession()
   const {_} = useLingui()
 
+  const kawaii = useKawaiiMode()
+
   return (
     <>
       {hasSession && (
-        <View style={[pal.view, pal.border, styles.bar, styles.topBar]}>
+        <View
+          style={[
+            pal.view,
+            pal.border,
+            styles.bar,
+            styles.topBar,
+            kawaii && {paddingTop: 4, paddingBottom: 0},
+          ]}>
           <Link
             href="/settings/following-feed"
             hitSlop={10}
@@ -58,7 +68,7 @@ function HomeHeaderLayoutDesktopAndTablet({
               style={pal.textLight as FontAwesomeIconStyle}
             />
           </Link>
-          <Logo width={28} />
+          <Logo width={kawaii ? 60 : 28} />
           <Link
             href="/settings/saved-feeds"
             hitSlop={10}