fix: button style error (#3396)

packages/component/src/components/app-sidebar/index.css.ts

@@ -83,12 +83,6 @@ export const navBodyStyle = style({
   flexDirection: 'column',
 });
 
-export const sidebarButtonStyle = style({
-  height: '32px',
-  color: 'var(--affine-icon-color)',
-  zIndex: 1,
-});
-
 export const sidebarFloatMaskStyle = style({
   transition: 'opacity .15s',
   opacity: 0,

packages/component/src/components/app-sidebar/sidebar-header/sidebar-switch.tsx

@@ -3,7 +3,6 @@ import { SidebarIcon } from '@blocksuite/icons';
 import { useAtom } from 'jotai';
 
 import { IconButton, Tooltip } from '../../../';
-import { sidebarButtonStyle } from '../index.css';
 import { appSidebarOpenAtom } from '../index.jotai';
 
 export const SidebarSwitch = () => {
@@ -20,11 +19,14 @@ export const SidebarSwitch = () => {
       zIndex={1000}
     >
       <IconButton
+        size="large"
         data-testid={`app-sidebar-arrow-button-${open ? 'collapse' : 'expand'}`}
-        className={sidebarButtonStyle}
+        style={{
+          zIndex: 1,
+        }}
         onClick={() => setOpen(open => !open)}
       >
-        <SidebarIcon width={24} height={24} />
+        <SidebarIcon />
       </IconButton>
     </Tooltip>
   );