feat(mobile): dark & light themes (#824)

tonkeeper · May 3, 2024 · 73628d0 · 73628d0
1 parent d05a77a
commit 73628d0
Show file tree

Hide file tree

Showing 114 changed files with 1,148 additions and 822 deletions.
diff --git a/packages/mobile/ios/ton_keeper.xcodeproj/project.pbxproj b/packages/mobile/ios/ton_keeper.xcodeproj/project.pbxproj
@@ -1056,7 +1056,7 @@
 			outputFileListPaths = (
 			);
 			outputPaths = (
-				"$SRCROOT/$PROJECT_NAME/Resources/Generated/R.generated.swift",
+				$SRCROOT/$PROJECT_NAME/Resources/Generated/R.generated.swift,
 			);
 			runOnlyForDeploymentPostprocessing = 0;
 			shellPath = /bin/sh;

diff --git a/packages/mobile/ios/ton_keeper/SupportingFiles/Info.plist b/packages/mobile/ios/ton_keeper/SupportingFiles/Info.plist
@@ -151,8 +151,6 @@
 		<string>UIInterfaceOrientationPortraitUpsideDown</string>
 		<string>UIInterfaceOrientationPortrait</string>
 	</array>
-	<key>UIUserInterfaceStyle</key>
-	<string>Dark</string>
 	<key>UIViewControllerBasedStatusBarAppearance</key>
 	<false/>
 </dict>

diff --git a/packages/mobile/src/components/CardsWidget/components/CardsList.tsx b/packages/mobile/src/components/CardsWidget/components/CardsList.tsx
@@ -5,7 +5,7 @@ import { formatter } from '@tonkeeper/shared/formatter';
 import { MainStackRouteNames } from '$navigation';
 import { useNavigation } from '@tonkeeper/router';
 import { Platform, Text } from 'react-native';
-import { DarkTheme } from '@tonkeeper/uikit/src/styles/themes/dark';
+import { BlueTheme } from '@tonkeeper/uikit/src/styles/themes/blue';
 import { CryptoCurrencies } from '$shared/constants';
 import { useGetTokenPrice } from '$hooks/useTokenPrice';
 import { capitalizeFirstLetter } from '@tonkeeper/shared/utils/date';
@@ -15,11 +15,11 @@ export interface CardsListProps {
 }
 
 const colorsForCardIconBackground = [
-  DarkTheme.accentGreen,
-  DarkTheme.accentOrange,
-  DarkTheme.accentBlue,
-  DarkTheme.accentRed,
-  DarkTheme.accentPurple,
+  BlueTheme.accentGreen,
+  BlueTheme.accentOrange,
+  BlueTheme.accentBlue,
+  BlueTheme.accentRed,
+  BlueTheme.accentPurple,
 ];
 
 function getColorByFourDigits(fourDigits: string | null | undefined) {

diff --git a/packages/mobile/src/core/AccessConfirmation/AccessConfirmation.tsx b/packages/mobile/src/core/AccessConfirmation/AccessConfirmation.tsx
@@ -24,6 +24,7 @@ import { t } from '@tonkeeper/shared/i18n';
 import { tk, vault } from '$wallet';
 import { CanceledActionError } from '$core/Send/steps/ConfirmStep/ActionErrors';
 import { useBiometrySettings, useWallet } from '@tonkeeper/shared/hooks';
+import { Screen } from '@tonkeeper/uikit';
 
 export const AccessConfirmation: FC = () => {
   const route = useRoute();
@@ -215,7 +216,7 @@ export const AccessConfirmation: FC = () => {
   }
 
   return (
-    <S.Wrap>
+    <Screen alternateBackground>
       <NavBar
         hideBackButton={isUnlock}
         isCancelButton={!isUnlock}
@@ -239,6 +240,6 @@ export const AccessConfirmation: FC = () => {
           onBiometryPress={handleBiometry}
         />
       </S.Content>
-    </S.Wrap>
+    </Screen>
   );
 };
diff --git a/packages/mobile/src/core/AddWatchOnly/AddWatchOnly.tsx b/packages/mobile/src/core/AddWatchOnly/AddWatchOnly.tsx
@@ -152,8 +152,8 @@ export const AddWatchOnly: FC = () => {
   const { spacerStyle } = useReanimatedKeyboardHeight();
 
   return (
-    <Screen>
-      <Screen.Header />
+    <Screen alternateBackground>
+      <Screen.Header alternateBackground />
       <Screen.Content>
         <View style={styles.container}>
           <Spacer y={24} />

diff --git a/packages/mobile/src/core/AddressUpdateInfo/AddressUpdateInfo.tsx b/packages/mobile/src/core/AddressUpdateInfo/AddressUpdateInfo.tsx
@@ -3,8 +3,7 @@ import { Spacer } from '$uikit';
 import { Address } from '@tonkeeper/core';
 import { t } from '@tonkeeper/shared/i18n';
 import { tk } from '$wallet';
-import { Pressable, Screen, Steezy, Text, View } from '@tonkeeper/uikit';
-import { DarkTheme } from '@tonkeeper/uikit/src/styles/themes/dark';
+import { Pressable, Screen, Steezy, Text, View, useTheme } from '@tonkeeper/uikit';
 import React, { FC } from 'react';
 import { Platform } from 'react-native';
 import { SafeAreaView } from 'react-native-safe-area-context';
@@ -34,9 +33,11 @@ export const AddressUpdateInfo: FC = () => {
   const oldStyle = splitAddress(oldAddress);
   const newStyle = splitAddress(newAddress);
 
+  const theme = useTheme();
+
   return (
-    <Screen>
-      <Screen.Header title={t('address_update.title')} />
+    <Screen alternateBackground>
+      <Screen.Header title={t('address_update.title')} alternateBackground />
       <Screen.ScrollView>
         <View style={styles.content}>
           <Text type="body2" color="textSecondary">
@@ -51,8 +52,8 @@ export const AddressUpdateInfo: FC = () => {
             <Text type="label1">{t('address_update.your_wallet')}</Text>
           </View>
           <Pressable
-            underlayColor={DarkTheme.backgroundContentTint}
-            backgroundColor={DarkTheme.fieldBackground}
+            underlayColor={theme.backgroundContentTint}
+            backgroundColor={theme.fieldBackground}
             style={styles.addressContainer}
             onPress={() => copyText(oldAddress)}
           >
@@ -71,8 +72,8 @@ export const AddressUpdateInfo: FC = () => {
           </Pressable>
           <Spacer y={16} />
           <Pressable
-            underlayColor={DarkTheme.backgroundContentTint}
-            backgroundColor={DarkTheme.fieldBackground}
+            underlayColor={theme.backgroundContentTint}
+            backgroundColor={theme.fieldBackground}
             style={styles.addressContainer}
             onPress={() => copyText(newAddress)}
           >

diff --git a/packages/mobile/src/core/App.tsx b/packages/mobile/src/core/App.tsx
@@ -1,10 +1,17 @@
 import React from 'react';
 import { SafeAreaProvider } from 'react-native-safe-area-context';
 import { Provider as StoreProvider, useSelector } from 'react-redux';
-import { ThemeProvider } from 'styled-components/native';
+import { ThemeProvider as StyledThemeProvider } from 'styled-components/native';
 
 import { store } from '$store';
-import { AppearanceAccents, DarkTheme, TonTheme } from '$styled';
+import {
+  AccentKey,
+  AppearanceAccents,
+  BlueTheme,
+  DarkTheme,
+  LightTheme,
+  TonTheme,
+} from '$styled';
 import { AppNavigator } from '$navigation/AppNavigator';
 import { ScrollPositionProvider } from '$uikit';
 import { useMemo } from 'react';
@@ -19,24 +26,70 @@ import { HideableAmountProvider } from '$core/HideableAmount/HideableAmountProvi
 
 import { queryClient } from '@tonkeeper/shared/queryClient';
 import { WalletProvider } from '../context';
-import { BlockingLoaderView } from '@tonkeeper/uikit';
+import { BlockingLoaderView, ThemeName, ThemeProvider } from '@tonkeeper/uikit';
+import { getThemeByName } from '@tonkeeper/uikit/src/styles/utils';
+import { useThemeName } from '$hooks/useThemeName';
+
+const getLegacyThemeByName = (name: ThemeName): TonTheme => {
+  const uikitTheme = getThemeByName(name);
+
+  if (name === ThemeName.Dark) {
+    return { ...DarkTheme, colors: { ...DarkTheme.colors, ...uikitTheme } };
+  }
+
+  if (name === ThemeName.Light) {
+    return { ...LightTheme, colors: { ...LightTheme.colors, ...uikitTheme } };
+  }
+
+  return { ...BlueTheme, colors: { ...BlueTheme.colors, ...uikitTheme } };
+};
 
 const TonThemeProvider = ({ children }) => {
   const accent = useSelector(accentSelector);
+  const themeName = useThemeName();
+
+  const accentColors =
+    accent !== AccentKey.default ? AppearanceAccents[accent].colors : undefined;
+
+  const uiThemeAccentColors = useMemo(() => {
+    if (!accentColors) {
+      return {};
+    }
+    return {
+      textAccent: accentColors.accentPrimary,
+      buttonPrimaryBackground: accentColors.accentPrimary,
+      buttonPrimaryBackgroundDisabled: accentColors.accentPrimaryLight,
+      buttonPrimaryBackgroundHighlighted: accentColors.accentPrimaryDark,
+      fieldActiveBorder: accentColors.accentPrimary,
+      accentBlue: accentColors.accentPrimary,
+      tabBarActiveIcon: accentColors.accentPrimary,
+    };
+  }, [accentColors]);
+
+  const uitheme = useMemo(
+    () => ({ ...getThemeByName(themeName), ...uiThemeAccentColors }),
+    [themeName, uiThemeAccentColors],
+  );
 
-  const accentColors = AppearanceAccents[accent].colors;
+  const legacyTheme = useMemo(() => getLegacyThemeByName(themeName), [themeName]);
 
   const theme = useMemo(
     (): TonTheme => ({
-      ...DarkTheme,
-      colors: { ...DarkTheme.colors, ...accentColors },
+      ...legacyTheme,
+      colors: {
+        ...legacyTheme.colors,
+        ...accentColors,
+        ...uiThemeAccentColors,
+      },
     }),
-    [accentColors],
+    [accentColors, legacyTheme, uiThemeAccentColors],
   );
 
   return (
     <View style={{ flex: 1, backgroundColor: theme.colors.backgroundPrimary }}>
-      <ThemeProvider {...{ theme }}>{children}</ThemeProvider>
+      <ThemeProvider theme={uitheme}>
+        <StyledThemeProvider {...{ theme }}>{children}</StyledThemeProvider>
+      </ThemeProvider>
     </View>
   );
 };

diff --git a/packages/mobile/src/core/BuyFiat/BuyFiat.tsx b/packages/mobile/src/core/BuyFiat/BuyFiat.tsx
@@ -16,6 +16,7 @@ import { trackEvent } from '$utils/stats';
 import { useWallet, useWalletCurrency } from '@tonkeeper/shared/hooks';
 import { config } from '$config';
 import { tk } from '$wallet';
+import { useTheme } from '@tonkeeper/uikit';
 
 export const BuyFiat: FC<BuyFiatProps> = ({ route }) => {
   const currency = route.params.currency;
@@ -141,6 +142,8 @@ export const BuyFiat: FC<BuyFiatProps> = ({ route }) => {
     }, 500);
   }, []);
 
+  const theme = useTheme();
+
   return (
     <S.Wrap>
       {renderHeader()}
@@ -163,7 +166,7 @@ export const BuyFiat: FC<BuyFiatProps> = ({ route }) => {
         thirdPartyCookiesEnabled={true}
         onNavigationStateChange={handleNavigationChange}
         allowFileAccess
-        forceDarkOn={methodId !== 'onramp'}
+        forceDarkOn={theme.isDark && methodId !== 'onramp'}
         allowsInlineMediaPlayback
         allowsFullscreenVideo
         keyboardDisplayRequiresUserAction={false}

diff --git a/packages/mobile/src/core/Colectibles/NFTCardItem.tsx b/packages/mobile/src/core/Colectibles/NFTCardItem.tsx
@@ -1,6 +1,6 @@
 import { t } from '@tonkeeper/shared/i18n';
 import { openNFT } from '$navigation';
-import { DarkTheme, Steezy } from '$styles';
+import { Steezy } from '$styles';
 import { Icon, Pressable, View } from '$uikit';
 import { checkIsTonDiamondsNFT } from '$utils';
 import { useFlags } from '$utils/flags';
@@ -12,6 +12,7 @@ import { AnimationDirection, HideableAmount } from '$core/HideableAmount/Hideabl
 import { HideableImage } from '$core/HideableAmount/HideableImage';
 import { Address } from '@tonkeeper/shared/Address';
 import { DNS, KnownTLDs } from '@tonkeeper/core';
+import { useTheme } from '@tonkeeper/uikit';
 
 interface NFTCardItemProps {
   item: any;
@@ -46,10 +47,12 @@ export const NFTCardItem = memo<NFTCardItemProps>((props) => {
 
   const nftRawAddress = useMemo(() => Address.parse(item.address).toRaw(), []);
 
+  const theme = useTheme();
+
   return (
     <Pressable
-      underlayColor={DarkTheme.backgroundContentTint}
-      backgroundColor={DarkTheme.backgroundContent}
+      underlayColor={theme.backgroundContentTint}
+      backgroundColor={theme.backgroundContent}
       style={styles.container}
       onPress={handleOpenNftItem}
     >
@@ -60,7 +63,7 @@ export const NFTCardItem = memo<NFTCardItemProps>((props) => {
         <S.Badges>
           {isTonDiamondsNft && !flags.disable_apperance ? (
             <S.AppearanceBadge>
-              <Icon name="ic-appearance-16" color="constantLight" />
+              <Icon name="ic-appearance-16" color="iconPrimary" />
             </S.AppearanceBadge>
           ) : null}
         </S.Badges>
@@ -122,6 +125,6 @@ const styles = Steezy.create(({ colors, corners }) => ({
     height: '100%',
     borderTopLeftRadius: 16,
     borderTopRightRadius: 16,
-    background: DarkTheme.backgroundTertiary,
+    background: colors.backgroundTertiary,
   },
 }));
diff --git a/packages/mobile/src/core/CreatePin/CreatePin.tsx b/packages/mobile/src/core/CreatePin/CreatePin.tsx
@@ -9,7 +9,7 @@ import { CreatePinForm } from '$shared/components';
 import { tk } from '$wallet';
 import { popToTop } from '$navigation/imperative';
 import { useParams } from '@tonkeeper/router/src/imperative';
-import { BlockingLoader } from '@tonkeeper/uikit';
+import { BlockingLoader, Screen } from '@tonkeeper/uikit';
 
 export const CreatePin: FC = () => {
   const params = useParams<{ isImport?: boolean }>();
@@ -44,9 +44,11 @@ export const CreatePin: FC = () => {
   );
 
   return (
-    <S.Wrap>
-      <NavBar onClosePress={popToTop} />
-      <CreatePinForm onPinCreated={handlePinCreated} />
-    </S.Wrap>
+    <Screen alternateBackground>
+      <S.Wrap>
+        <NavBar onClosePress={popToTop} />
+        <CreatePinForm onPinCreated={handlePinCreated} />
+      </S.Wrap>
+    </Screen>
   );
 };
diff --git a/packages/mobile/src/core/CustomizeWallet/CustomizeWallet.tsx b/packages/mobile/src/core/CustomizeWallet/CustomizeWallet.tsx
@@ -39,6 +39,8 @@ import LinearGradient from 'react-native-linear-gradient';
 import { RouteProp } from '@react-navigation/native';
 import { AppStackParamList } from '$navigation/AppStack';
 import { AppStackRouteNames } from '$navigation';
+import { convertHexToRGBA } from '$utils';
+import { useThemeName } from '$hooks/useThemeName';
 
 const COLORS_LIST = Object.values(WalletColor);
 
@@ -57,6 +59,7 @@ export const CustomizeWallet: FC<Props> = memo((props) => {
   const wallet = useWallet();
   const nav = useNavigation();
   const theme = useTheme();
+  const themeName = useThemeName();
 
   const [name, setName] = useState(
     identifiers.length > 1 ? wallet.config.name.slice(0, -5) : wallet.config.name,
@@ -133,7 +136,7 @@ export const CustomizeWallet: FC<Props> = memo((props) => {
   }, []);
 
   return (
-    <Modal blurOnBackgroundPress>
+    <Modal blurOnBackgroundPress alternateBackground>
       <NavBar isModal isClosedButton isForceBackIcon hideBackButton />
       <View style={styles.container}>
         <View style={styles.topContainer} onLayout={handleLayout}>
@@ -161,10 +164,15 @@ export const CustomizeWallet: FC<Props> = memo((props) => {
               <View
                 style={[
                   styles.emojiContainer,
-                  { backgroundColor: getWalletColorHex(selectedColor) },
+                  { backgroundColor: getWalletColorHex(selectedColor, themeName) },
                 ]}
               >
-                <WalletIcon emojiStyle={styles.emoji.static} size={28} value={emoji} />
+                <WalletIcon
+                  emojiStyle={styles.emoji.static}
+                  size={28}
+                  value={emoji}
+                  color="constantWhite"
+                />
               </View>
             </View>
           </View>
@@ -189,7 +197,7 @@ export const CustomizeWallet: FC<Props> = memo((props) => {
                     <View
                       style={[
                         styles.colorContainer,
-                        { backgroundColor: getWalletColorHex(color) },
+                        { backgroundColor: getWalletColorHex(color, themeName) },
                       ]}
                     >
                       {color === selectedColor ? (
@@ -207,7 +215,10 @@ export const CustomizeWallet: FC<Props> = memo((props) => {
       </View>
       <View style={styles.buttonContainer}>
         <LinearGradient
-          colors={['rgba(21, 28, 41, 0)', theme.backgroundPage]}
+          colors={[
+            convertHexToRGBA(theme.backgroundPageAlternate, 0),
+            theme.backgroundPageAlternate,
+          ]}
           locations={[0, 1]}
           style={styles.buttonGradient.static}
           pointerEvents="none"
@@ -271,7 +282,7 @@ const styles = Steezy.create(({ colors, safeArea, corners }) => ({
     width: 30,
     height: 30,
     borderRadius: 30 / 2,
-    borderColor: colors.backgroundPage,
+    borderColor: colors.backgroundPageAlternate,
     borderWidth: 5,
   },
   buttonContainer: {