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}

src/view/icons/Logo.tsx

@@ -1,15 +1,17 @@
 import React from 'react'
 import {StyleSheet, TextProps} from 'react-native'
 import Svg, {
-  Path,
   Defs,
   LinearGradient,
+  Path,
+  PathProps,
   Stop,
   SvgProps,
-  PathProps,
 } from 'react-native-svg'
+import {Image} from 'expo-image'
 
 import {colors} from '#/lib/styles'
+import {useKawaiiMode} from '#/state/preferences/kawaii'
 
 const ratio = 57 / 64
 
@@ -25,6 +27,25 @@ export const Logo = React.forwardRef(function LogoImpl(props: Props, ref) {
   const _fill = gradient ? 'url(#sky)' : fill || styles?.color || colors.blue3
   // @ts-ignore it's fiiiiine
   const size = parseInt(rest.width || 32)
+
+  const isKawaii = useKawaiiMode()
+
+  if (isKawaii) {
+    return (
+      <Image
+        source={
+          size > 100
+            ? require('../../../assets/kawaii.png')
+            : require('../../../assets/kawaii_smol.png')
+        }
+        accessibilityLabel="Bluesky"
+        accessibilityHint=""
+        accessibilityIgnoresInvertColors
+        style={[{height: size, aspectRatio: 1.4}]}
+      />
+    )
+  }
+
   return (
     <Svg
       fill="none"

src/view/shell/Drawer.tsx

@@ -18,6 +18,7 @@ import {useLingui} from '@lingui/react'
 import {StackActions, useNavigation} from '@react-navigation/native'
 
 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 {SessionAccount, useSession} from '#/state/session'
@@ -117,6 +118,7 @@ let DrawerContent = ({}: {}): React.ReactNode => {
   const {isAtHome, isAtSearch, isAtFeeds, isAtNotifications, isAtMyProfile} =
     useNavigationTabState()
   const {hasSession, currentAccount} = useSession()
+  const kawaii = useKawaiiMode()
 
   // events
   // =
@@ -262,6 +264,17 @@ let DrawerContent = ({}: {}): React.ReactNode => {
               href="https://bsky.social/about/support/privacy-policy"
               text={_(msg`Privacy Policy`)}
             />
+            {kawaii && (
+              <Text type="md" style={pal.textLight}>
+                Logo by{' '}
+                <TextLink
+                  type="md"
+                  href="/profile/sawaratsuki.bsky.social"
+                  text="@sawaratsuki.bsky.social"
+                  style={pal.link}
+                />
+              </Text>
+            )}
           </View>
 
           <View style={styles.smallSpacer} />

src/view/shell/desktop/RightNav.tsx

@@ -1,22 +1,26 @@
 import React from 'react'
 import {StyleSheet, View} from 'react-native'
-import {usePalette} from 'lib/hooks/usePalette'
-import {DesktopSearch} from './Search'
-import {DesktopFeeds} from './Feeds'
-import {Text} from 'view/com/util/text/Text'
-import {TextLink} from 'view/com/util/Link'
-import {FEEDBACK_FORM_URL, HELP_DESK_URL} from 'lib/constants'
-import {s} from 'lib/styles'
-import {useWebMediaQueries} from 'lib/hooks/useWebMediaQueries'
-import {useLingui} from '@lingui/react'
 import {msg} from '@lingui/macro'
+import {useLingui} from '@lingui/react'
+
+import {useKawaiiMode} from '#/state/preferences/kawaii'
 import {useSession} from '#/state/session'
+import {FEEDBACK_FORM_URL, HELP_DESK_URL} from 'lib/constants'
+import {usePalette} from 'lib/hooks/usePalette'
+import {useWebMediaQueries} from 'lib/hooks/useWebMediaQueries'
+import {s} from 'lib/styles'
+import {TextLink} from 'view/com/util/Link'
+import {Text} from 'view/com/util/text/Text'
+import {DesktopFeeds} from './Feeds'
+import {DesktopSearch} from './Search'
 
 export function DesktopRightNav({routeName}: {routeName: string}) {
   const pal = usePalette('default')
   const {_} = useLingui()
   const {hasSession, currentAccount} = useSession()
 
+  const kawaii = useKawaiiMode()
+
   const {isTablet} = useWebMediaQueries()
   if (isTablet) {
     return null
@@ -90,6 +94,17 @@ export function DesktopRightNav({routeName}: {routeName: string}) {
               text={_(msg`Help`)}
             />
           </View>
+          {kawaii && (
+            <Text type="md" style={[pal.textLight, {marginTop: 12}]}>
+              Logo by{' '}
+              <TextLink
+                type="md"
+                href="/profile/sawaratsuki.bsky.social"
+                text="@sawaratsuki.bsky.social"
+                style={pal.link}
+              />
+            </Text>
+          )}
         </View>
       </View>
     </View>