Fix onboarding darkmode (#2338)

* Make the wallet icon dark mode friendly * Fix dark mode on onboarding screen
gallery-so · Feb 29, 2024 · 461ea15 · 461ea15
1 parent 731df57
commit 461ea15
Show file tree

Hide file tree

Showing 4 changed files with 17 additions and 12 deletions.
diff --git a/apps/mobile/src/components/WelcomeNewUserOnboarding.tsx b/apps/mobile/src/components/WelcomeNewUserOnboarding.tsx
@@ -1,5 +1,6 @@
 import clsx from 'clsx';
 import { BlurView } from 'expo-blur';
+import { useColorScheme } from 'nativewind';
 import { useCallback, useEffect, useRef, useState } from 'react';
 import { Animated, View } from 'react-native';
 import { useSafeAreaInsets } from 'react-native-safe-area-context';
@@ -21,6 +22,8 @@ type Props = {
 };
 
 export function WelcomeNewUserOnboarding({ username }: Props) {
+  const { colorScheme } = useColorScheme();
+
   // Step 1: Welcome message
   // Step 2: Post message
   // Step 3: Profile message
@@ -83,7 +86,7 @@ export function WelcomeNewUserOnboarding({ username }: Props) {
             <SearchIcon />
           </TabItem>
           <TabItem active={step === 2} onPress={nextStep}>
-            <PostIcon color={colors.black['800']} />
+            <PostIcon color={colorScheme === 'dark' ? colors.white : colors.black['800']} />
           </TabItem>
           <TabItem onPress={nextStep}>
             <NotificationsIcon />
@@ -117,7 +120,7 @@ function Toast({ message, step }: { message: string; step: number }) {
         'items-end pr-2': step === 3,
       })}
     >
-      <View className="bg-white py-1 px-2 rounded-[1px]">
+      <View className="bg-white dark:bg-black-900 py-1 px-2 rounded-[1px]">
         <Typography className="text-xs" font={{ family: 'ABCDiatype', weight: 'Bold' }}>
           {message}
         </Typography>
@@ -147,7 +150,7 @@ function TabItem({ children, active = false, onPress, isFocused }: TabItemProps)
       <View
         className={clsx('px-0 flex h-8 w-8 items-center justify-center rounded-full', {
           'opacity-25': !active,
-          'bg-activeBlue/10': active,
+          'bg-activeBlue/10 dark:bg-darkModeBlue/10': active,
           'border border-black dark:border-white ': isFocused,
         })}
       >

diff --git a/apps/mobile/src/icons/WalletIcon.tsx b/apps/mobile/src/icons/WalletIcon.tsx
@@ -1,24 +1,26 @@
+import { useColorScheme } from 'nativewind';
 import Svg, { Path, SvgProps } from 'react-native-svg';
 
 export function WalletIcon(props: SvgProps) {
+  const { colorScheme } = useColorScheme();
+
   return (
     <Svg width={24} height={24} fill="none" {...props}>
-      <Path fill="#FEFEFE" d="M0 0h24v24H0z" />
       <Path
-        stroke="#000"
+        stroke={colorScheme === 'dark' ? '#fff' : '#000'}
         strokeMiterlimit={10}
         strokeWidth={1.053}
         d="M22 4.63H2v14.738h20V4.63Z"
       />
       <Path
-        stroke="#000"
+        stroke={colorScheme === 'dark' ? '#fff' : '#000'}
         strokeMiterlimit={10}
         strokeWidth={1.053}
         d="M22 8.44h-6.754c-2.105 0-3.771 1.591-3.771 3.603 0 2.01 1.666 3.603 3.771 3.603h6.755V8.439Z"
       />
       <Path
-        fill="#141414"
-        stroke="#141414"
+        fill={colorScheme === 'dark' ? '#fff' : '#000'}
+        stroke={colorScheme === 'dark' ? '#fff' : '#000'}
         strokeLinecap="round"
         strokeLinejoin="round"
         strokeMiterlimit={3.429}

diff --git a/apps/mobile/src/screens/Onboarding/OnboardingPersonaScreen.tsx b/apps/mobile/src/screens/Onboarding/OnboardingPersonaScreen.tsx
@@ -52,8 +52,8 @@ export function OnboardingPersonaScreen() {
   );
 
   return (
-    <View style={{ paddingTop: top }} className="bg-white flex-1">
-      <View className="flex flex-col flex-grow space-y-3 px-4 bg-white">
+    <View style={{ paddingTop: top }} className="bg-white dark:bg-black-900 flex-1">
+      <View className="flex flex-col flex-grow space-y-3 px-4 bg-white dark:bg-black-900">
         <View className="relative flex-row items-center justify-between pb-4">
           <BackButton onPress={handleBack} />
           <GalleryTouchableOpacity

diff --git a/apps/mobile/src/screens/Onboarding/OnboardingRecommendedUsers.tsx b/apps/mobile/src/screens/Onboarding/OnboardingRecommendedUsers.tsx
@@ -140,8 +140,8 @@ function OnboardingRecommendedUsersInner({ queryRef }: OnboardingRecommendedUser
   const [hasFollowedSomeone, setHasFollowedSomeone] = useState(false);
 
   return (
-    <View style={{ paddingTop: top }} className="bg-white">
-      <View className="flex flex-col flex-grow space-y-3 px-4 bg-white">
+    <View style={{ paddingTop: top }} className="bg-white dark:bg-black-900">
+      <View className="flex flex-col flex-grow space-y-3 px-4 bg-white dark:bg-black-900">
         <View className="relative flex-row items-center justify-between pb-4">
           <BackButton onPress={handleBack} />
           <GalleryTouchableOpacity