feat: modify sidebar style (#1703)

packages/component/src/ui/button/IconButton.tsx

@@ -1,5 +1,5 @@
 import type { CSSProperties, HTMLAttributes, ReactElement } from 'react';
-import { Children, cloneElement, forwardRef } from 'react';
+import { forwardRef } from 'react';
 
 import { StyledIconButton } from './styles';
 const SIZE_SMALL = 'small' as const;
@@ -9,7 +9,7 @@ const SIZE_NORMAL = 'normal' as const;
 const SIZE_CONFIG = {
   [SIZE_SMALL]: {
     iconSize: 16,
-    areaSize: 24,
+    areaSize: 20,
   },
   [SIZE_MIDDLE]: {
     iconSize: 20,
@@ -42,19 +42,14 @@ export type IconButtonProps = {
 
 export const IconButton = forwardRef<HTMLButtonElement, IconButtonProps>(
   (
-    {
-      size = 'normal',
-      iconSize = 'normal',
-      disabled = false,
-      children,
-      ...props
-    },
+    { size = 'normal', iconSize, disabled = false, children, ...props },
     ref
   ) => {
+    iconSize = size;
     const [width, height] = Array.isArray(size)
       ? size
       : [SIZE_CONFIG[size]['areaSize'], SIZE_CONFIG[size]['areaSize']];
-    const [iconWidth, iconHeight] = Array.isArray(iconSize)
+    const [iconWidth] = Array.isArray(iconSize)
       ? iconSize
       : [SIZE_CONFIG[iconSize]['iconSize'], SIZE_CONFIG[iconSize]['iconSize']];
 
@@ -65,12 +60,10 @@ export const IconButton = forwardRef<HTMLButtonElement, IconButtonProps>(
         width={width}
         height={height}
         borderRadius={iconWidth / 4}
+        fontSize={iconWidth}
         {...props}
       >
-        {cloneElement(Children.only(children), {
-          width: iconWidth,
-          height: iconHeight,
-        })}
+        {children}
       </StyledIconButton>
     );
   }

packages/component/src/ui/button/styles.ts

@@ -15,7 +15,7 @@ export const StyledIconButton = styled('button', {
       'hoverBackground',
       'hoverColor',
       'hoverStyle',
-      'darker',
+      'fontSize',
     ].includes(prop as string);
   },
 })<{
@@ -27,7 +27,7 @@ export const StyledIconButton = styled('button', {
   hoverColor?: string;
   hoverStyle?: CSSProperties;
   // In some cases, button is in a normal hover status, it should be darkened
-  darker?: boolean;
+  fontSize?: CSSProperties['fontSize'];
 }>(
   ({
     theme,
@@ -38,11 +38,12 @@ export const StyledIconButton = styled('button', {
     hoverBackground,
     hoverColor,
     hoverStyle,
-    darker = false,
+    fontSize,
   }) => {
     return {
       width,
       height,
+      fontSize,
       color: theme.colors.iconColor,
       ...displayInlineFlex('center', 'center'),
       position: 'relative',
@@ -67,11 +68,7 @@ export const StyledIconButton = styled('button', {
       ':hover': {
         color: hoverColor ?? theme.colors.primaryColor,
         '::after': {
-          background:
-            hoverBackground ||
-            (darker
-              ? theme.colors.innerHoverBackground
-              : theme.colors.hoverBackground),
+          background: hoverBackground || theme.colors.hoverBackground,
         },
         ...(hoverStyle ?? {}),
       },