CP-9042: light/dark mode (#2014)

ava-labs · Oct 25, 2024 · b2d8f35 · b2d8f35
1 parent acc870f
commit b2d8f35
Show file tree

Hide file tree

Showing 30 changed files with 211 additions and 169 deletions.
diff --git a/packages/core-mobile/app/ContextApp.tsx b/packages/core-mobile/app/ContextApp.tsx
@@ -38,7 +38,7 @@ const ContextProviders: FC<PropsWithChildren> = ({ children }) => (
   <EncryptedStoreProvider>
     <ReactQueryProvider>
       <PosthogContextProvider>
-        <K2AlpineThemeProvider>
+        <K2AlpineThemeProvider colorScheme={'dark'}>
           <K2ThemeProvider>
             <ApplicationContextProvider>
               <DeeplinkContextProvider>{children}</DeeplinkContextProvider>

diff --git a/packages/core-mobile/app/new/components/BlurBackgroundView.tsx b/packages/core-mobile/app/new/components/BlurBackgroundView.tsx
@@ -0,0 +1,19 @@
+import { BlurView } from '@react-native-community/blur'
+import React from 'react'
+import { View, Sx } from '@avalabs/k2-alpine'
+import { useColorScheme } from 'react-native'
+
+const BlurBackgroundView = ({ sx }: { sx: Sx }): JSX.Element => {
+  const colorScheme = useColorScheme()
+
+  return (
+    <View sx={{ ...sx, overflow: 'hidden', backgroundColor: 'transparent' }}>
+      <BlurView
+        style={{ flex: 1 }}
+        blurType={colorScheme === 'dark' ? 'dark' : 'xlight'}
+      />
+    </View>
+  )
+}
+
+export default BlurBackgroundView
diff --git a/packages/core-mobile/app/new/components/navigation/BackBarButton.tsx b/packages/core-mobile/app/new/components/navigation/BackBarButton.tsx
@@ -1,10 +1,10 @@
 import React from 'react'
-import { View, Text } from 'react-native'
+import { View, Text } from '@avalabs/k2-alpine'
 
 const BackBarButton = (): JSX.Element => {
   return (
     // todo: use k2-alpine icon
-    <View style={{ paddingLeft: 18 }}>
+    <View style={{ paddingLeft: 18, backgroundColor: 'transparent' }}>
       <Text>{'<<'}</Text>
     </View>
   )

diff --git a/packages/core-mobile/app/new/components/navigation/HeaderBackground.tsx b/packages/core-mobile/app/new/components/navigation/HeaderBackground.tsx
@@ -1,16 +1,17 @@
 import React from 'react'
 import { useSafeAreaInsets } from 'react-native-safe-area-context'
-import { BlurView } from '@react-native-community/blur'
-import { View } from '@avalabs/k2-alpine'
 import { Platform } from 'react-native'
+import BlurBackgroundView from '../BlurBackgroundView'
 
 const HeaderBackground = (): JSX.Element => {
   const { top } = useSafeAreaInsets()
 
   return (
-    <View sx={{ overflow: 'hidden' }}>
-      <BlurView blurType="xlight" style={{ height: top + HEADER_HEIGHT }} />
-    </View>
+    <BlurBackgroundView
+      sx={{
+        height: top + HEADER_HEIGHT
+      }}
+    />
   )
 }
 

diff --git a/packages/core-mobile/app/new/components/navigation/NotificationBarButton.tsx b/packages/core-mobile/app/new/components/navigation/NotificationBarButton.tsx
diff --git a/packages/core-mobile/app/new/components/navigation/ReceiveBarButton.tsx b/packages/core-mobile/app/new/components/navigation/ReceiveBarButton.tsx
diff --git a/packages/core-mobile/app/new/components/navigation/SettingsBarButton.tsx b/packages/core-mobile/app/new/components/navigation/SettingsBarButton.tsx
diff --git a/packages/core-mobile/app/new/components/navigation/TabBarBackground.tsx b/packages/core-mobile/app/new/components/navigation/TabBarBackground.tsx
@@ -1,19 +1,17 @@
 import React from 'react'
-import { BlurView } from '@react-native-community/blur'
-import { View } from '@avalabs/k2-alpine'
 import { useSafeAreaInsets } from 'react-native-safe-area-context'
 import { Platform } from 'react-native'
+import BlurBackgroundView from '../BlurBackgroundView'
 
 const TabBarBackground = (): JSX.Element => {
   const { bottom } = useSafeAreaInsets()
 
   return (
-    <View sx={{ overflow: 'hidden' }}>
-      <BlurView
-        blurType="xlight"
-        style={{ height: bottom + BOTTOM_TAB_BAR_HEIGHT }}
-      />
-    </View>
+    <BlurBackgroundView
+      sx={{
+        height: bottom + BOTTOM_TAB_BAR_HEIGHT
+      }}
+    />
   )
 }
 

diff --git a/packages/core-mobile/app/new/routes/(signedIn)/(modals)/notifications/index.tsx b/packages/core-mobile/app/new/routes/(signedIn)/(modals)/notifications/index.tsx
@@ -10,9 +10,7 @@ const NotificationsScreen = (): JSX.Element => {
         justifyContent: 'center',
         gap: 16
       }}>
-      <Text variant="heading3" sx={{ color: 'black' }}>
-        Notifications
-      </Text>
+      <Text variant="heading3">Notifications</Text>
     </View>
   )
 }

diff --git a/packages/core-mobile/app/new/routes/(signedIn)/(modals)/receive/index.tsx b/packages/core-mobile/app/new/routes/(signedIn)/(modals)/receive/index.tsx
@@ -10,9 +10,7 @@ const ReceiveScreen = (): JSX.Element => {
         justifyContent: 'center',
         gap: 16
       }}>
-      <Text variant="heading3" sx={{ color: 'black' }}>
-        Receive
-      </Text>
+      <Text variant="heading3">Receive</Text>
     </View>
   )
 }

diff --git a/packages/core-mobile/app/new/routes/(signedIn)/(modals)/settings/account.tsx b/packages/core-mobile/app/new/routes/(signedIn)/(modals)/settings/account.tsx
@@ -6,10 +6,10 @@ const AccountScreen = (): JSX.Element => {
   return (
     <View
       sx={{ flex: 1, alignItems: 'center', justifyContent: 'center', gap: 16 }}>
-      <Text variant="heading3" sx={{ color: 'black' }}>
-        Account Settings
-      </Text>
-      <Link href="">Delete Wallet</Link>
+      <Text variant="heading3">Account Settings</Text>
+      <Link href="">
+        <Text>Delete Wallet</Text>
+      </Link>
     </View>
   )
 }

diff --git a/packages/core-mobile/app/new/routes/(signedIn)/(modals)/settings/index.tsx b/packages/core-mobile/app/new/routes/(signedIn)/(modals)/settings/index.tsx
@@ -11,11 +11,9 @@ const SettingsScreen = (): JSX.Element => {
         justifyContent: 'center',
         gap: 16
       }}>
-      <Text variant="heading3" sx={{ color: 'black' }}>
-        Settings
-      </Text>
+      <Text variant="heading3">Settings</Text>
       <Link href="/settings/account">
-        <Text sx={{ color: 'black' }}>Go to Account Setting</Text>
+        <Text>Go to Account Setting</Text>
       </Link>
     </View>
   )

diff --git a/packages/core-mobile/app/new/routes/(signedIn)/(tabs)/browser/index.tsx b/packages/core-mobile/app/new/routes/(signedIn)/(tabs)/browser/index.tsx
@@ -12,9 +12,7 @@ const BrowserHomeScreen = (): JSX.Element => {
           justifyContent: 'center',
           gap: 16
         }}>
-        <Text variant="heading3" sx={{ color: 'black' }}>
-          Browser
-        </Text>
+        <Text variant="heading3">Browser</Text>
       </View>
     </BlurredBarsContentLayout>
   )

diff --git a/packages/core-mobile/app/new/routes/(signedIn)/(tabs)/contacts/index.tsx b/packages/core-mobile/app/new/routes/(signedIn)/(tabs)/contacts/index.tsx
@@ -12,9 +12,7 @@ const ContactsHomeScreen = (): JSX.Element => {
           justifyContent: 'center',
           gap: 16
         }}>
-        <Text variant="heading3" sx={{ color: 'black' }}>
-          Contacts
-        </Text>
+        <Text variant="heading3">Contacts</Text>
       </View>
     </BlurredBarsContentLayout>
   )

diff --git a/packages/core-mobile/app/new/routes/(signedIn)/(tabs)/portfolio/assets.tsx b/packages/core-mobile/app/new/routes/(signedIn)/(tabs)/portfolio/assets.tsx
@@ -17,9 +17,7 @@ const PortfolioAssetsScreen = (): JSX.Element => {
           gap: 16
         }}>
         <View>
-          <Text variant="heading3" sx={{ color: 'black' }}>
-            Assets
-          </Text>
+          <Text variant="heading3">Assets</Text>
         </View>
       </ScrollView>
     </BlurredBarsContentLayout>

diff --git a/packages/core-mobile/app/new/routes/(signedIn)/(tabs)/portfolio/index.tsx b/packages/core-mobile/app/new/routes/(signedIn)/(tabs)/portfolio/index.tsx
@@ -14,10 +14,10 @@ const PortfolioHomeScreen = (): JSX.Element => {
           gap: 16
         }}>
         <View sx={{ height: 100, width: 200, backgroundColor: 'orange' }} />
-        <Text variant="heading3" sx={{ color: 'black' }}>
-          Portfolio
-        </Text>
-        <Link href="/portfolio/assets">Go to Portfolio Assets</Link>
+        <Text variant="heading3">Portfolio</Text>
+        <Link href="/portfolio/assets">
+          <Text>Go to Portfolio Assets</Text>
+        </Link>
         <View sx={{ height: 800, width: 200, backgroundColor: 'blue' }} />
         <View />
       </ScrollView>

diff --git a/packages/core-mobile/app/new/routes/(signedIn)/(tabs)/stake/index.tsx b/packages/core-mobile/app/new/routes/(signedIn)/(tabs)/stake/index.tsx
@@ -12,9 +12,7 @@ const StakeHomeScreen = (): JSX.Element => {
           justifyContent: 'center',
           gap: 16
         }}>
-        <Text variant="heading3" sx={{ color: 'black' }}>
-          Stake
-        </Text>
+        <Text variant="heading3">Stake</Text>
       </View>
     </BlurredBarsContentLayout>
   )

diff --git a/packages/core-mobile/app/new/routes/(signedIn)/(tabs)/track/index.tsx b/packages/core-mobile/app/new/routes/(signedIn)/(tabs)/track/index.tsx
@@ -12,9 +12,7 @@ const TrackHomeScreen = (): JSX.Element => {
           alignItems: 'center',
           gap: 16
         }}>
-        <Text variant="heading3" sx={{ color: 'black' }}>
-          Track
-        </Text>
+        <Text variant="heading3">Track</Text>
       </ScrollView>
     </BlurredBarsContentLayout>
   )

diff --git a/packages/core-mobile/app/new/routes/_layout.tsx b/packages/core-mobile/app/new/routes/_layout.tsx
@@ -5,6 +5,7 @@ import Bootsplash from 'react-native-bootsplash'
 import React from 'react'
 import { K2AlpineThemeProvider } from '@avalabs/k2-alpine'
 import { Stack } from 'new/components/navigation/Stack'
+import NavigationThemeProvider from 'new/utils/navigation/NavigationThemeProvider'
 
 export default function RootLayout(): JSX.Element | null {
   useEffect(() => {
@@ -13,11 +14,13 @@ export default function RootLayout(): JSX.Element | null {
 
   return (
     <K2AlpineThemeProvider>
-      <Stack screenOptions={{ headerShown: false, animationEnabled: false }}>
-        <Stack.Screen name="(signedIn)" />
-        <Stack.Screen name="signup" />
-        <Stack.Screen name="+not-found" />
-      </Stack>
+      <NavigationThemeProvider>
+        <Stack screenOptions={{ headerShown: false, animationEnabled: false }}>
+          <Stack.Screen name="(signedIn)" />
+          <Stack.Screen name="signup" />
+          <Stack.Screen name="+not-found" />
+        </Stack>
+      </NavigationThemeProvider>
     </K2AlpineThemeProvider>
   )
 }
diff --git a/packages/core-mobile/app/new/routes/index.tsx b/packages/core-mobile/app/new/routes/index.tsx
@@ -1,5 +1,5 @@
 import { Link } from 'expo-router'
-import { View } from 'react-native'
+import { View, Text } from '@avalabs/k2-alpine'
 import React from 'react'
 
 export default function Index(): JSX.Element {
@@ -11,8 +11,12 @@ export default function Index(): JSX.Element {
         justifyContent: 'center',
         gap: 16
       }}>
-      <Link href="/portfolio/">Sign in</Link>
-      <Link href="/signup/">Sign up</Link>
+      <Link href="/portfolio/">
+        <Text>Sign in</Text>
+      </Link>
+      <Link href="/signup/">
+        <Text>Sign up</Text>
+      </Link>
     </View>
   )
 }
diff --git a/packages/core-mobile/app/new/utils/navigation/NavigationThemeProvider.tsx b/packages/core-mobile/app/new/utils/navigation/NavigationThemeProvider.tsx
@@ -0,0 +1,43 @@
+import { useTheme } from '@avalabs/k2-alpine'
+import { ThemeProvider } from '@react-navigation/native'
+import React, { useMemo } from 'react'
+import { useColorScheme } from 'react-native'
+
+const NavigationThemeProvider = ({
+  children
+}: {
+  children: React.ReactNode
+}): JSX.Element => {
+  const colorScheme = useColorScheme()
+  const {
+    theme: { colors }
+  } = useTheme()
+
+  const navContainerTheme = useMemo(() => {
+    const isDark = colorScheme === 'dark'
+
+    return {
+      dark: isDark,
+      colors: {
+        // todo: please remove the ts-expect-error comments after we address this issue
+        // https://ava-labs.atlassian.net/browse/CP-9297
+        // @ts-expect-error
+        primary: colors.$textPrimary,
+        // @ts-expect-error
+        background: colors.$surfacePrimary,
+        // @ts-expect-error
+        card: colors.$surfaceSecondary,
+        // @ts-expect-error
+        text: colors.$textPrimary,
+        // @ts-expect-error
+        border: colors.$borderPrimary,
+        // @ts-expect-error
+        notification: colors.$textSuccess
+      }
+    }
+  }, [colorScheme, colors])
+
+  return <ThemeProvider value={navContainerTheme}>{children}</ThemeProvider>
+}
+
+export default NavigationThemeProvider
diff --git a/packages/core-mobile/app/new/utils/navigation/screenOptions.tsx b/packages/core-mobile/app/new/utils/navigation/screenOptions.tsx
@@ -9,7 +9,7 @@ import { Animated } from 'react-native'
 import Grabber from 'new/components/navigation/Grabber'
 import BackBarButton from 'new/components/navigation/BackBarButton'
 import HeaderBackground from 'new/components/navigation/HeaderBackground'
-import { View } from '@avalabs/k2-alpine'
+import { Text, View } from '@avalabs/k2-alpine'
 import { Link } from 'expo-router'
 
 const commonNavigatorScreenOptions: StackNavigationOptions = {
@@ -103,14 +103,26 @@ export const modalFirstScreenOptions: StackNavigationOptions = {
 
 export const homeScreenOptions: StackNavigationOptions = {
   headerLeft: () => (
-    <View sx={{ marginLeft: 12 }}>
-      <Link href="/settings/">Account</Link>
+    <View sx={{ marginLeft: 12, backgroundColor: 'transparent' }}>
+      <Link href="/settings/">
+        <Text>Account</Text>
+      </Link>
     </View>
   ),
   headerRight: () => (
-    <View sx={{ flexDirection: 'row', gap: 12, marginRight: 12 }}>
-      <Link href="/receive/">Receive</Link>
-      <Link href="/notifications/">Notifications</Link>
+    <View
+      sx={{
+        flexDirection: 'row',
+        gap: 12,
+        marginRight: 12,
+        backgroundColor: 'transparent'
+      }}>
+      <Link href="/receive/">
+        <Text>Receive</Text>
+      </Link>
+      <Link href="/notifications/">
+        <Text>Notifications</Text>
+      </Link>
     </View>
   )
 }