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>
   );

packages/component/src/components/image-preview-modal/index.css.ts

@@ -133,19 +133,7 @@ export const groupStyle = style({
 });
 
 export const buttonStyle = style({
-  minWidth: '24px',
-  height: '24px',
   margin: '10px 6px',
-  padding: '0 0',
-  ':hover': {
-    backgroundColor: 'var(--affine-background-error-color)',
-    backgroundSize: '24px 24px',
-  },
-});
-
-export const buttonIconStyle = style({
-  width: '20px',
-  height: '20px',
 });
 
 export const scaleIndicatorButtonStyle = style({

packages/component/src/components/image-preview-modal/index.tsx

@@ -1,6 +1,5 @@
 import '@blocksuite/blocks';
 
-import { Button, Tooltip } from '@affine/component';
 import type { ImageBlockModel } from '@blocksuite/blocks';
 import { assertExists } from '@blocksuite/global/utils';
 import {
@@ -24,9 +23,10 @@ import type { FallbackProps } from 'react-error-boundary';
 import { ErrorBoundary } from 'react-error-boundary';
 import useSWR from 'swr';
 
+import { Button, IconButton } from '../../ui/button';
+import { Tooltip } from '../../ui/tooltip';
 import { useZoomControls } from './hooks/use-zoom';
 import {
-  buttonIconStyle,
   buttonStyle,
   captionStyle,
   groupStyle,
@@ -339,9 +339,9 @@ const ImagePreviewModalImpl = (
         <div className={imagePreviewActionBarStyle}>
           <div>
             <Tooltip content={'Previous'} disablePortal={false}>
-              <Button
+              <IconButton
                 data-testid="previous-image-button"
-                icon={<ArrowLeftSmallIcon className={buttonIconStyle} />}
+                icon={<ArrowLeftSmallIcon />}
                 type="plain"
                 className={buttonStyle}
                 onClick={() => {
@@ -351,9 +351,9 @@ const ImagePreviewModalImpl = (
               />
             </Tooltip>
             <Tooltip content={'Next'} disablePortal={false}>
-              <Button
+              <IconButton
                 data-testid="next-image-button"
-                icon={<ArrowRightSmallIcon className={buttonIconStyle} />}
+                icon={<ArrowRightSmallIcon />}
                 className={buttonStyle}
                 type="plain"
                 onClick={() => {
@@ -369,18 +369,18 @@ const ImagePreviewModalImpl = (
             disablePortal={true}
             showArrow={false}
           >
-            <Button
+            <IconButton
               data-testid="fit-to-screen-button"
-              icon={<ViewBarIcon className={buttonIconStyle} />}
+              icon={<ViewBarIcon />}
               type="plain"
               className={buttonStyle}
               onClick={() => resetZoom()}
             />
           </Tooltip>
           <Tooltip content={'Zoom out'} disablePortal={false}>
-            <Button
+            <IconButton
               data-testid="zoom-out-button"
-              icon={<MinusIcon className={buttonIconStyle} />}
+              icon={<MinusIcon />}
               className={buttonStyle}
               type="plain"
               onClick={zoomOut}
@@ -398,9 +398,9 @@ const ImagePreviewModalImpl = (
             </Button>
           </Tooltip>
           <Tooltip content={'Zoom in'} disablePortal={false}>
-            <Button
+            <IconButton
               data-testid="zoom-in-button"
-              icon={<PlusIcon className={buttonIconStyle} />}
+              icon={<PlusIcon />}
               className={buttonStyle}
               type="plain"
               onClick={() => zoomIn()}
@@ -408,9 +408,9 @@ const ImagePreviewModalImpl = (
           </Tooltip>
           <div className={groupStyle}></div>
           <Tooltip content={'Download'} disablePortal={false}>
-            <Button
+            <IconButton
               data-testid="download-button"
-              icon={<DownloadIcon className={buttonIconStyle} />}
+              icon={<DownloadIcon />}
               type="plain"
               className={buttonStyle}
               onClick={() => {
@@ -422,9 +422,9 @@ const ImagePreviewModalImpl = (
             />
           </Tooltip>
           <Tooltip content={'Copy to clipboard'} disablePortal={false}>
-            <Button
+            <IconButton
               data-testid="copy-to-clipboard-button"
-              icon={<CopyIcon className={buttonIconStyle} />}
+              icon={<CopyIcon />}
               type="plain"
               className={buttonStyle}
               onClick={() => {
@@ -463,9 +463,9 @@ const ImagePreviewModalImpl = (
           </Tooltip>
           <div className={groupStyle}></div>
           <Tooltip content={'Delete'} disablePortal={false}>
-            <Button
+            <IconButton
               data-testid="delete-button"
-              icon={<DeleteIcon className={buttonIconStyle} />}
+              icon={<DeleteIcon />}
               type="plain"
               className={buttonStyle}
               onClick={() => blockId && deleteHandler(blockId)}