feat: modify sidebar style (#1508)

apps/web/src/components/affine/sidebar-switch/index.tsx

@@ -36,6 +36,7 @@ export const SidebarSwitch = ({
     >
       <StyledSidebarSwitch
         visible={visible}
+        disabled={!visible}
         data-testid={testid}
         onClick={useCallback(() => {
           setOpen(!open);

apps/web/src/components/affine/sidebar-switch/style.ts

@@ -1,23 +1,10 @@
-import { styled } from '@affine/component';
+import { IconButton, styled } from '@affine/component';
 
-export const StyledSidebarSwitch = styled('button')<{ visible: boolean }>(
+export const StyledSidebarSwitch = styled(IconButton)<{ visible: boolean }>(
-  ({ theme, visible }) => {
+  ({ visible }) => {
     return {
-      display: 'inline-flex',
-      justifyContent: 'center',
-      alignItems: 'center',
-      color: theme.colors.innerHoverBackground,
-      width: '32px',
-      height: '32px',
-      borderRadius: '8px',
       opacity: visible ? 1 : 0,
       transition: 'all 0.2s ease-in-out',
-      ...(visible ? {} : { cursor: 'not-allowed', pointerEvents: 'none' }),
-
-      ':hover': {
-        background: '#F1F1F4',
-        color: theme.colors.iconColor,
-      },
     };
   }
 );

apps/web/src/components/pure/workspace-slider-bar/WorkspaceSelector/styles.ts

@@ -2,7 +2,8 @@ import { MuiAvatar, textEllipsis } from '@affine/component';
 import { styled } from '@affine/component';
 export const SelectorWrapper = styled('div')(({ theme }) => {
   return {
-    height: '64px',
+    marginTop: '4px',
+    height: '56px',
     display: 'flex',
     alignItems: 'center',
     padding: '0 44px 0 12px',