style: optimization (#885)

Author: franco-chan

packages/components/src/Icon/react/solid/NavSend.tsx

@@ -4,7 +4,7 @@ import Svg, { SvgProps, Path } from 'react-native-svg';
 function SvgNavSend(props: SvgProps) {
   return (
     <Svg viewBox="0 0 24 24" fill="currentColor" {...props}>
-      <Path d="M21.435 2.582a1.933 1.933 0 00-1.93-.503L3.408 6.759a1.92 1.92 0 00-1.384 1.522c-.142.75.355 1.704 1.003 2.102l5.033 3.094a1.304 1.304 0 001.61-.194l5.763-5.799a.734.734 0 011.06 0c.29.292.29.765 0 1.067l-5.773 5.8c-.428.43-.508 1.1-.193 1.62l3.075 5.083c.36.604.98.946 1.66.946.08 0 .17 0 .251-.01.78-.1 1.4-.634 1.63-1.39l4.773-16.075c.21-.685.02-1.43-.48-1.943z" />
+      <Path d="M20.435 3.582a1.933 1.933 0 00-1.93-.503L2.408 7.759a1.92 1.92 0 00-1.384 1.522c-.142.75.355 1.704 1.003 2.102l5.033 3.094a1.304 1.304 0 001.61-.194l5.763-5.799a.734.734 0 011.06 0c.29.292.29.765 0 1.067l-5.773 5.8c-.428.43-.508 1.1-.193 1.62l3.075 5.083c.36.604.98.946 1.66.946.08 0 .17 0 .251-.01.78-.1 1.4-.634 1.63-1.39l4.773-16.075c.21-.685.02-1.43-.48-1.943z" />
     </Svg>
   );
 }

packages/components/src/Layout/BottomBarModal/index.tsx

@@ -44,7 +44,7 @@ const BottomBarModal = forwardRef<BottomSheet, TBottomBarModalProps>(
     );
 
     const ITEM_COUNT = 2;
-    const innerHeight = 60 * ITEM_COUNT + 32 * 2;
+    const innerHeight = 72 * ITEM_COUNT + 32 + 56;
     return (
       <BottomSheet
         ref={ref}
@@ -58,7 +58,7 @@ const BottomBarModal = forwardRef<BottomSheet, TBottomBarModalProps>(
         backdropComponent={renderBackdrop}
         backgroundStyle={{ backgroundColor: sheetBgColor }}
       >
-        <Box px={4} py={8}>
+        <Box px={4} pt={8} pb={12}>
           {props.foldableList.map((foldable, index) => (
             <Pressable
               key={index}
@@ -70,20 +70,23 @@ const BottomBarModal = forwardRef<BottomSheet, TBottomBarModalProps>(
               _pressed={{ bg: 'surface-pressed' }}
               borderRadius="xl"
               mt={index === 0 ? undefined : 2}
-              p="2"
+              px="2"
+              py="3"
             >
               <Box display="flex" flexDirection="column">
-                <Box display="flex" flexDirection="row" alignItems="flex-start">
-                  <Icon
-                    name={foldable?.tabBarIcon?.() as ICON_NAMES}
-                    color="icon-default"
-                    size={24}
-                  />
+                <Box display="flex" flexDirection="row" alignItems="center">
+                  <Box p={3} rounded="full" bgColor="interactive-default">
+                    <Icon
+                      name={foldable?.tabBarIcon?.() as ICON_NAMES}
+                      color="icon-on-primary"
+                      size={20}
+                    />
+                  </Box>
 
                   <Box ml={4}>
-                    <Typography.Body1Strong color={inactiveFontColor}>
+                    <Typography.Heading color={inactiveFontColor}>
                       {foldable.tabBarLabel}
-                    </Typography.Body1Strong>
+                    </Typography.Heading>
                     <Typography.Body2 color="text-subdued">
                       {foldable.description}
                     </Typography.Body2>