fix: navigation style (#3733)

2026-01-12 16:53:12 +08:00 · 2023-10-30 10:13:32 +08:00
parent 958b016b35
commit b958327cb9
7 changed files with 55 additions and 32 deletions
--- a/packages/components/src/Navigation/Header/HeaderScreenOptions.tsx
+++ b/packages/components/src/Navigation/Header/HeaderScreenOptions.tsx
@@ -35,7 +35,11 @@ export function makeHeaderScreenOptions({
      headerStyle: {
        backgroundColor: bgColor as string,
      },
-      headerTintColor: titleColor as string,
+      headerTitleStyle: {
+        fontSize: 18,
+        fontWeight: '600',
+        color: titleColor as string,
+      },
      headerTransparent: false,
      headerLeft: (props: HeaderBackButtonProps): ReactNode => (
        <HeaderButtonBack
--- a/packages/components/src/Navigation/Header/HeaderView.tsx
+++ b/packages/components/src/Navigation/Header/HeaderView.tsx
@@ -92,7 +92,7 @@ function HeaderView({
        }}
        borderTopLeftRadius={isModelScreen ? '$2' : 0}
        borderTopRightRadius={isModelScreen ? '$2' : 0}
-        backgroundColor="$bg"
+        backgroundColor="$bgApp"
        overflow="hidden"
        borderBottomWidth={StyleSheet.hairlineWidth}
        borderBottomColor="$borderSubdued"
@@ -132,7 +132,7 @@ function HeaderView({
            headerTransparent={headerTransparent}
            headerShadowVisible={false}
            headerBackground={headerBackground}
-            headerStyle={headerStyle}
+            headerStyle={[{ backgroundColor: 'transparent' }, headerStyle]}
          />
        </Stack>
        {!!headerSearchBarOptions && (
--- a/packages/components/src/Navigation/Tab/TabBar/DesktopLeftSideBar.tsx
+++ b/packages/components/src/Navigation/Tab/TabBar/DesktopLeftSideBar.tsx
@@ -50,8 +50,8 @@ function TabItemView({
        onPress={onPress}
        flexDirection="row"
        alignItems="center"
-        px={touchMode ? '$2.5' : '$1.5'}
-        py={touchMode ? '$3' : '$2'}
+        px={touchMode ? '$3' : '$2'}
+        py={touchMode ? '$2.5' : '$1.5'}
        borderRadius="$2"
        backgroundColor={isActive ? '$bgActive' : undefined}
        hoverStyle={!isActive ? { backgroundColor: '$bgHover' } : undefined}
@@ -61,7 +61,7 @@ function TabItemView({
          <Icon
            // @ts-expect-error
            name={options?.tabBarIcon?.(isActive) as ICON_NAMES}
-            color={isActive ? '$icon' : '$iconSubdued'}
+            color="$iconSubdued"
            size={touchMode ? '$6' : '$5'}
          />
        </Stack>
@@ -70,8 +70,8 @@ function TabItemView({
          <Text
            variant={touchMode ? '$bodyLg' : '$bodyMd'}
            flex={1}
-            marginLeft="$1"
-            color={isActive ? '$text' : '$textSubdued'}
+            marginLeft="$2"
+            color="$text"
            numberOfLines={1}
          >
            {options.tabBarLabel ?? route.name}
@@ -117,7 +117,7 @@ const Sidebar: FC<BottomTabBarProps> = ({ navigation, state, descriptors }) => {
  const paddingTopValue =
    slideBarPadding + top + (disExtraPaddingTop ? 0 : defaultHeight);

-  const [slideBg, slideBorder] = useThemeValue(['bgSubdued', 'borderSubdued']);
+  const [slideBg, slideBorder] = useThemeValue(['bgSidebar', 'borderSubdued']);

  const tabs = useMemo(
    () =>
--- a/packages/components/src/Navigation/Tab/TabBar/MobileBottomTabBar.tsx
+++ b/packages/components/src/Navigation/Tab/TabBar/MobileBottomTabBar.tsx
@@ -153,7 +153,7 @@ export default function MobileBottomTabBar({
              />
              {options?.tabBarLabel?.length ? (
                <Text
-                  variant="$bodySmMedium"
+                  variant="$headingXxs"
                  color={isActive ? '$text' : '$textSubdued'}
                  numberOfLines={1}
                >
@@ -184,7 +184,7 @@ export default function MobileBottomTabBar({
      left="$0"
      right="$0"
      bottom="$0"
-      bg="$bg"
+      bg="$bgApp"
      borderTopColor="$borderSubdued"
      height={tabBarHeight}
      py="$0"
--- a/packages/components/tamagui.config.ts
+++ b/packages/components/tamagui.config.ts
@@ -22,6 +22,7 @@ const font = createFont({
    headingMd: 16,
    headingSm: 14,
    headingXs: 12,
+    headingXxs: 10,
    bodyLg: 16,
    bodyLgMedium: 16,
    bodyMd: 14,
@@ -40,6 +41,7 @@ const font = createFont({
    headingMd: 24,
    headingSm: 20,
    headingXs: 16,
+    headingXxs: 12,
    bodyLg: 24,
    bodyLgMedium: 24,
    bodyMd: 20,
@@ -58,6 +60,7 @@ const font = createFont({
    headingMd: '600',
    headingSm: '600',
    headingXs: '600',
+    headingXxs: '500',
    bodyLg: '400',
    bodyLgMedium: '500',
    bodyMd: '400',
@@ -76,6 +79,7 @@ const font = createFont({
    headingMd: 'none',
    headingSm: 'none',
    headingXs: 'uppercase',
+    headingXxs: 'none',
    bodyLg: 'none',
    bodyLgMedium: 'none',
    bodyMd: 'none',
@@ -94,6 +98,7 @@ const font = createFont({
    headingMd: 0,
    headingSm: 0,
    headingXs: 0.8,
+    headingXxs: 0,
    bodyLg: 0,
    bodyLgMedium: 0,
    bodyMd: 0,
@@ -158,6 +163,7 @@ const lightColors = {
  bgSuccess: '#02ba3c16',
  bgSuccessStrong: '#008f4acf',
  bgSuccessSubdued: '#00c43b0d',
+  bgSidebar: '#F9F9F9',
  border: '#00000022',
  borderActive: '#000000df',
  borderCaution: '#be980091',
@@ -312,6 +318,7 @@ const darkColors: typeof lightColors = {
  bgSuccess: '#00fc7a12',
  bgSuccessStrong: '#3fffa29b',
  bgSuccessSubdued: '#00fb0006',
+  bgSidebar: '#121212',
  border: '#ffffff2b',
  borderActive: '#ffffffec',
  borderCaution: '#fecd1b51',
--- a/packages/kit/src/routes/Gallery/index.tsx
+++ b/packages/kit/src/routes/Gallery/index.tsx
@@ -1,3 +1,5 @@
+import { useTheme } from '@tamagui/core';
+
 import { createStackNavigator } from '@onekeyhq/components';
 import ComponentsScreen from '@onekeyhq/kit/src/views/Components';
 import ActionListGallery from '@onekeyhq/kit/src/views/Components/stories/ActionList';
@@ -102,25 +104,35 @@ export const stackScreenList = [

 const DevStack = createStackNavigator();

-const DevScreen = () => (
-  <DevStack.Navigator
-    screenOptions={{
-      cardStyle: {
-        flex: 1,
-      },
-    }}
-  >
-    <DevStack.Group>
-      {stackScreenList.map((stack) => (
-        <DevStack.Screen
-          key={stack.name}
-          name={stack.name}
-          component={stack.component}
-          options={stack.options}
-        />
-      ))}
-    </DevStack.Group>
-  </DevStack.Navigator>
-);
+const DevScreen = () => {
+  const theme = useTheme();
+  return (
+    <DevStack.Navigator
+      screenOptions={{
+        cardStyle: {
+          flex: 1,
+        },
+      }}
+    >
+      <DevStack.Group>
+        {stackScreenList.map((stack) => (
+          <DevStack.Screen
+            key={stack.name}
+            name={stack.name}
+            component={stack.component}
+            options={({ navigation }: { navigation: any }) => ({
+              headerStyle: {
+                backgroundColor: theme.bgApp.val,
+              },
+              headerTintColor: theme.text.val,
+              headerShadowVisible: false,
+              ...stack.options,
+            })}
+          />
+        ))}
+      </DevStack.Group>
+    </DevStack.Navigator>
+  );
+};

 export default DevScreen;
--- a/packages/kit/src/views/Swap/index.tsx
+++ b/packages/kit/src/views/Swap/index.tsx
@@ -8,7 +8,7 @@ const Swap = () => {
  console.log('swap');
  return (
    <Screen>
-      <YStack space="@4">
+      <YStack space="$4">
        <Text>Swap</Text>
        <LocalAuthenticationButton />
      </YStack>