chore: fix header background color (#886)

Author: revan-zhang

packages/components/src/DesktopDragZoneBox/index.tsx

@@ -1,13 +1,13 @@
 import React, { ComponentPropsWithoutRef, FC } from 'react';
 
-import { View } from 'react-native';
+import { Pressable } from 'react-native';
 
 import platformEnv from '@onekeyhq/shared/src/platformEnv';
 
 let lastTime: Date | undefined;
 let num = 0;
 
-const DesktopDragZoneBox: FC<ComponentPropsWithoutRef<typeof View>> = ({
+const DesktopDragZoneBox: FC<ComponentPropsWithoutRef<typeof Pressable>> = ({
   children,
   ...rest
 }) => {
@@ -25,13 +25,15 @@ const DesktopDragZoneBox: FC<ComponentPropsWithoutRef<typeof View>> = ({
     }
     if (num === 1) {
       // eslint-disable-next-line @typescript-eslint/no-unsafe-call
-      if (platformEnv.isDesktop) window?.desktopApi?.toggleMaximizeWindow();
+      if (platformEnv.isDesktop) {
+        window?.desktopApi?.toggleMaximizeWindow();
+      }
     }
   };
 
   const { style = {} } = rest;
   return (
-    <View
+    <Pressable
       {...rest}
       onPress={toggleMaxWindow}
       style={{
@@ -43,7 +45,7 @@ const DesktopDragZoneBox: FC<ComponentPropsWithoutRef<typeof View>> = ({
       }}
     >
       {children}
-    </View>
+    </Pressable>
   );
 };
 

packages/desktop/App.tsx

@@ -9,11 +9,12 @@ const App: FC = function () {
     <>
       <DesktopDragZoneBox
         style={{
-          height: '32px',
+          height: '16px',
           position: 'absolute',
           top: 0,
           left: 0,
           right: 0,
+          zIndex: 9999,
         }}
       />
       <Provider />

packages/kit/src/provider/NavigationProvider.tsx

@@ -40,10 +40,10 @@ if (platformEnv.isExtensionUiPopup && platformEnv.isRuntimeFirefox) {
 }
 
 const NavigationApp = () => {
-  const [bgColor, textColor] = useThemeValue([
+  const [bgColor, textColor, dividerColor] = useThemeValue([
     'surface-subdued',
     'text-default',
-    'background-default',
+    'divider',
   ]);
 
   const navigationTheme = useMemo(
@@ -54,9 +54,10 @@ const NavigationApp = () => {
         background: platformEnv.isNativeAndroid ? bgColor : 'transparent',
         card: bgColor,
         text: textColor,
+        border: dividerColor,
       },
     }),
-    [bgColor, textColor],
+    [bgColor, textColor, dividerColor],
   );
 
   const { instanceId } = useSettings();

packages/kit/src/routes/Stack/index.tsx

@@ -74,12 +74,25 @@ const Dashboard = () => {
 
     return stackScreenList.map((stack) => (
       <StackNavigator.Screen
+        options={{
+          headerBackTitle: '',
+          headerTitleAlign: 'center',
+          headerStyle: {
+            backgroundColor: bgColor,
+            // @ts-expect-error
+            borderBottomWidth: 0,
+            shadowColor: borderBottomColor,
+          },
+          header:
+            Platform.OS === 'ios' ? renderCustomSubStackHeader : undefined,
+          headerTintColor: textColor,
+        }}
         key={stack.name}
         name={stack.name}
         component={stack.component}
       />
     ));
-  }, [isVerticalLayout]);
+  }, [isVerticalLayout, bgColor, borderBottomColor, textColor]);
 
   return (
     <StackNavigator.Navigator>