style: fix and tuning.

RabbyHub · Aug 6, 2024 · 32e6d69 · 32e6d69
1 parent 78be662
commit 32e6d69
Show file tree

Hide file tree

Showing 13 changed files with 176 additions and 103 deletions.
diff --git a/apps/mobile/src/assets/icons/settings/add-custom-network-cc.svg b/apps/mobile/src/assets/icons/settings/add-custom-network-cc.svg
diff --git a/apps/mobile/src/assets/icons/settings/index.ts b/apps/mobile/src/assets/icons/settings/index.ts
@@ -86,3 +86,9 @@ export const RcScreenRecord = makeThemeIconFromCC(
   RcScreenRecordCC,
   'neutral-body',
 );
+
+import { default as RcAddCustomNetworkCC } from './add-custom-network-cc.svg';
+export const RcAddCustomNetwork = makeThemeIconFromCC(
+  RcAddCustomNetworkCC,
+  'neutral-body',
+);
diff --git a/apps/mobile/src/components/SelectAddress/components/AccountCard.tsx b/apps/mobile/src/components/SelectAddress/components/AccountCard.tsx
@@ -30,7 +30,7 @@ export default function AccountCard({
   // disabled?: boolean;
   onPress?: (account: IDisplayedAccountWithBalance) => void;
 }) {
-  const { styles, colors } = useThemeStyles(getStyles);
+  const { styles, colors, isLight } = useThemeStyles(getStyles);
 
   const handleCopyAddress = useCallback<
     React.ComponentProps<typeof TouchableOpacity>['onPress'] & object
@@ -60,7 +60,10 @@ export default function AccountCard({
         onPress?.(account);
       }}>
       {isEditing && (
-        <Checkbox color={colors['blue-default']} style={styles.checkbox} />
+        <Checkbox
+          color={isLight ? colors['blue-default'] : colors['neutral-foot']}
+          style={styles.checkbox}
+        />
       )}
       <View style={[styles.inner]}>
         <View style={[styles.leftCol]}>

diff --git a/apps/mobile/src/components/Signal.tsx b/apps/mobile/src/components/Signal.tsx
@@ -1,3 +1,4 @@
+import { ThemeColors } from '@/constant/theme';
 import { useThemeColors } from '@/hooks/theme';
 import { createGetStyles } from '@/utils/styles';
 import React, { useMemo } from 'react';
@@ -42,7 +43,7 @@ const getStyle = createGetStyles(colors => ({
     backgroundColor: colors['orange-default'],
   },
   gray: {
-    backgroundColor: colors['neutral-line'],
+    backgroundColor: ThemeColors.light['neutral-line'],
   },
   green: {
     backgroundColor: colors['green-default'],

diff --git a/apps/mobile/src/hooks/theme.ts b/apps/mobile/src/hooks/theme.ts
@@ -17,10 +17,8 @@ import { atomByMMKV } from '@/core/storage/mmkv';
 import { createGetStyles } from '@/utils/styles';
 import { stringUtils } from '@rabby-wallet/base-utils';
 import { devLog } from '@/utils/logger';
-import { BUILD_CHANNEL } from '@/constant/env';
 
-export const SHOULD_SUPPORT_DARK_MODE =
-  __DEV__ || BUILD_CHANNEL === 'selfhost-reg';
+export const SHOULD_SUPPORT_DARK_MODE = true;
 
 const FORCE_THEME = 'light' as const;
 function coerceBinaryTheme(

diff --git a/apps/mobile/src/screens/Dapps/components/DappCardInWebViewNav.tsx b/apps/mobile/src/screens/Dapps/components/DappCardInWebViewNav.tsx
@@ -109,14 +109,14 @@ export const DappCardInWebViewNav = ({
   );
 };
 
-const getStyles = createGetStyles((colors, opts) => {
-  const descWrapperBgColor = opts?.isLight
+const getStyles = createGetStyles((colors, ctx) => {
+  const descWrapperBgColor = ctx?.isLight
     ? colors['neutral-card-3']
     : '#484d5d';
 
   return {
     dappCard: {
-      backgroundColor: opts?.isLight ? colors['neutral-card-1'] : 'transparent',
+      backgroundColor: ctx?.isLight ? colors['neutral-card-1'] : 'transparent',
       // backgroundColor: 'blue',
       borderWidth: 1,
       borderColor: 'transparent',

diff --git a/apps/mobile/src/screens/Dapps/components/DappIcon.tsx b/apps/mobile/src/screens/Dapps/components/DappIcon.tsx
@@ -66,7 +66,7 @@ export const DappIcon = ({
   return Placeholder;
 };
 
-const getStyles = createGetStyles((colors, opts) => ({
+const getStyles = createGetStyles((colors, ctx) => ({
   dappIcon: {
     flexDirection: 'row',
     alignItems: 'center',
@@ -75,6 +75,6 @@ const getStyles = createGetStyles((colors, opts) => ({
   dappIconText: {
     fontSize: 15,
     fontWeight: '500',
-    color: opts?.isLight ? colors['neutral-card-1'] : colors['neutral-title2'],
+    color: ctx?.isLight ? colors['neutral-card-1'] : colors['neutral-title2'],
   },
 }));
diff --git a/apps/mobile/src/screens/Send/Section.tsx b/apps/mobile/src/screens/Send/Section.tsx
@@ -224,7 +224,9 @@ export function BalanceSection({ style }: RNViewProps) {
   );
 }
 
-const getBalanceStyles = createGetStyles(colors => {
+const getBalanceStyles = createGetStyles((colors, ctx) => {
+  const tipWrapperBg = ctx?.isLight ? colors['neutral-card-3'] : '#484d5d';
+
   return {
     balanceText: {
       color: colors['neutral-body'],
@@ -276,7 +278,7 @@ const getBalanceStyles = createGetStyles(colors => {
 
     tokenDetailBlock: {
       width: '100%',
-      backgroundColor: colors['neutral-card2'],
+      backgroundColor: tipWrapperBg,
       padding: 12,
       borderRadius: 4,
       position: 'relative',
@@ -289,7 +291,7 @@ const getBalanceStyles = createGetStyles(colors => {
       ...makeTriangleStyle({
         dir: 'up',
         size: 12,
-        color: colors['neutral-card2'],
+        color: tipWrapperBg,
       }),
       borderTopWidth: 8,
       borderLeftWidth: 10,

diff --git a/apps/mobile/src/screens/Settings/Settings.tsx b/apps/mobile/src/screens/Settings/Settings.tsx
@@ -18,6 +18,7 @@ import {
   RcScreenRecord,
   RcThemeMode,
   RcWhitelist,
+  RcAddCustomNetwork,
 } from '@/assets/icons/settings';
 import RcFooterLogo from '@/assets/icons/settings/footer-logo.svg';
 
@@ -139,6 +140,9 @@ function SettingsBlocks() {
     switchBiometricsRef.current?.toggle();
   }, [shouldRedirectToSetPasswordBefore]);
 
+  const { setThemeSelectorModalVisible } = useThemeSelectorModalVisible();
+  const { appThemeText } = useAppTheme();
+
   const navParams = useNavigationState(
     s => s.routes.find(r => r.name === RootNames.Settings)?.params,
   ) as SettingNavigatorParamList['Settings'];
@@ -240,7 +244,7 @@ function SettingsBlocks() {
           },
           {
             label: 'Add Custom Network',
-            icon: RcWhitelist,
+            icon: RcAddCustomNetwork,
             onPress: () => {
               navigation.dispatch(
                 StackActions.push(RootNames.StackSettings, {
@@ -252,6 +256,27 @@ function SettingsBlocks() {
               );
             },
           },
+          {
+            visible: SHOULD_SUPPORT_DARK_MODE,
+            label: 'Theme Mode',
+            icon: RcThemeMode,
+            onPress: () => {
+              setThemeSelectorModalVisible(true);
+            },
+            rightTextNode: ctx => {
+              return (
+                <Text
+                  style={{
+                    fontWeight: '400',
+                    fontSize: 14,
+                    color: colors['neutral-title-1'],
+                    marginRight: 6,
+                  }}>
+                  {appThemeText}
+                </Text>
+              );
+            },
+          },
           {
             label: 'Clear Pending',
             icon: RcClearPending,
@@ -396,9 +421,6 @@ function DevSettingsBlocks() {
   const { hasSetupCustomPassword, openManagePasswordSheetModal } =
     useManagePasswordOnSettings();
 
-  const { setThemeSelectorModalVisible } = useThemeSelectorModalVisible();
-  const { appThemeText } = useAppTheme();
-
   const {
     computed: { couldSetupBiometrics, isBiometricsEnabled, isFaceID },
     fetchBiometrics,
@@ -443,27 +465,6 @@ function DevSettingsBlocks() {
               // TODO: only show in non-production mode
               visible: !!__DEV__ || BUILD_CHANNEL === 'selfhost-reg',
             },
-            {
-              visible: SHOULD_SUPPORT_DARK_MODE,
-              label: 'Switch Theme',
-              icon: RcThemeMode,
-              onPress: () => {
-                setThemeSelectorModalVisible(true);
-              },
-              rightTextNode: ctx => {
-                return (
-                  <Text
-                    style={{
-                      fontWeight: '400',
-                      fontSize: 14,
-                      color: colors['neutral-title-1'],
-                      marginRight: 6,
-                    }}>
-                    {appThemeText} Mode
-                  </Text>
-                );
-              },
-            },
             {
               label: allowScreenshot
                 ? `Allow ${isIOS ? 'ScreenRecord' : 'Screenshot'}`

diff --git a/apps/mobile/src/screens/Settings/components/LockAbout.tsx b/apps/mobile/src/screens/Settings/components/LockAbout.tsx
@@ -39,12 +39,12 @@ export function useAutoLockCountDown() {
   const { autoLockTime } = useAutoLockTime();
   const colors = useThemeColors();
   const [spinner, setSpinner] = React.useState(false);
-  // useInterval(() => {
-  //   if (NEED_DEVSETTINGBLOCKS) {
-  //     // trigger countDown re-calculated
-  //     setSpinner(prev => !prev);
-  //   }
-  // }, 500);
+  useInterval(() => {
+    if (NEED_DEVSETTINGBLOCKS) {
+      // trigger countDown re-calculated
+      setSpinner(prev => !prev);
+    }
+  }, 500);
 
   const { text: countDownText, secs: countDownSecs } = React.useMemo(() => {
     spinner;

diff --git a/apps/mobile/src/screens/Settings/components/SelectAutolockTimeBottomSheetModal.tsx b/apps/mobile/src/screens/Settings/components/SelectAutolockTimeBottomSheetModal.tsx
@@ -126,7 +126,7 @@ export const SelectAutolockTimeBottomSheetModal = forwardRef<
   );
 });
 
-const getStyles = createGetStyles((colors, options) => ({
+const getStyles = createGetStyles((colors, ctx) => ({
   sheet: {
     // backgroundColor: colors['neutral-bg-1'],
     backgroundColor: colors['neutral-bg-2'],
@@ -172,7 +172,7 @@ const getStyles = createGetStyles((colors, options) => ({
     paddingTop: 18,
     paddingBottom: 18,
     paddingHorizontal: 20,
-    backgroundColor: !options?.isLight
+    backgroundColor: !ctx?.isLight
       ? colors['neutral-card1']
       : colors['neutral-bg1'],
     borderRadius: 8,