feat: modify sidebar style (#1703)

packages/component/src/styles/theme.ts

@@ -18,7 +18,7 @@ export const getLightTheme = (
     colors: {
       primaryColor: '#5438FF',
       pageBackground: '#fff',
-      hoverBackground: '#F1F1F4',
+      hoverBackground: 'rgba(0,0,0,.04)',
       innerHoverBackground: '#E9E9EC',
       popoverBackground: '#fff',
       tooltipBackground: '#261499',
@@ -97,7 +97,7 @@ export const getDarkTheme = (
     colors: {
       primaryColor: '#5438FF',
       pageBackground: '#2c2c2c',
-      hoverBackground: '#3C3C42',
+      hoverBackground: 'rgba(0,0,0,.04)',
       innerHoverBackground: '#5A5A5A',
       popoverBackground: '#1F2021',
       tooltipBackground: '#0C0A15',

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 ?? {}),
       },

packages/component/src/ui/tree-view/TreeNode.tsx

@@ -46,7 +46,7 @@ export const TreeNode = <N,>({
   allDrop = true,
   ...otherProps
 }: TreeNodeProps<N>) => {
-  const { onAdd, onDelete, onDrop } = otherProps;
+  const { onAdd, onDelete, onDrop, indent } = otherProps;
   const [collapsed, setCollapsed] = useState(false);
 
   const [{ isDragging }, drag] = useDrag(() => ({
@@ -109,7 +109,7 @@ export const TreeNode = <N,>({
         )}
       </StyledTreeNodeItem>
 
-      <StyledCollapse in={!collapsed}>
+      <StyledCollapse in={!collapsed} indent={indent}>
         {node.children &&
           node.children.map((childNode, index) => (
             <TreeNode

packages/component/src/ui/tree-view/styles.ts

@@ -1,10 +1,13 @@
 import MuiCollapse from '@mui/material/Collapse';
+import type { CSSProperties } from 'react';
 
 import { styled } from '../../styles';
 
-export const StyledCollapse = styled(MuiCollapse)(() => {
+export const StyledCollapse = styled(MuiCollapse)<{
+  indent?: CSSProperties['paddingLeft'];
+}>(({ indent = 12 }) => {
   return {
-    paddingLeft: '12px',
+    paddingLeft: indent,
   };
 });
 export const StyledTreeNodeItem = styled('div')<{

packages/component/src/ui/tree-view/types.ts

@@ -1,4 +1,4 @@
-import type { ReactNode } from 'react';
+import type { CSSProperties, ReactNode } from 'react';
 
 export type Node<N> = {
   id: string;
@@ -16,6 +16,7 @@ export type Node<N> = {
 } & N;
 
 type CommonProps<N> = {
+  indent?: CSSProperties['paddingLeft'];
   onAdd?: (node: Node<N>) => void;
   onDelete?: (node: Node<N>) => void;
   onDrop?: (

packages/i18n/src/resources/en.json

@@ -193,5 +193,6 @@
   "Help and Feedback": "Help and Feedback",
   "Please make sure you are online": "Please make sure you are online",
   "Workspace Owner": "Workspace Owner",
-  "Members": "Members"
+  "Members": "Members",
+  "Pivots": "Pivots"
 }