From a20368c491852735db56b9c4a86bfd490b8fd210 Mon Sep 17 00:00:00 2001
From: Qi <474021214@qq.com>
Date: Fri, 10 Mar 2023 16:52:25 +0800
Subject: [PATCH] feat: modify sidebar style (#1508)

---
 .../affine/sidebar-switch/index.tsx           |  1 +
 .../components/affine/sidebar-switch/style.ts | 19 +++----------------
 .../WorkspaceSelector/styles.ts               |  3 ++-
 3 files changed, 6 insertions(+), 17 deletions(-)

diff --git a/apps/web/src/components/affine/sidebar-switch/index.tsx b/apps/web/src/components/affine/sidebar-switch/index.tsx
index 2433081cc1..2f1ba99299 100644
--- a/apps/web/src/components/affine/sidebar-switch/index.tsx
+++ b/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);
diff --git a/apps/web/src/components/affine/sidebar-switch/style.ts b/apps/web/src/components/affine/sidebar-switch/style.ts
index b70d32390d..b0f26b2314 100644
--- a/apps/web/src/components/affine/sidebar-switch/style.ts
+++ b/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 }>(
-  ({ theme, visible }) => {
+export const StyledSidebarSwitch = styled(IconButton)<{ visible: boolean }>(
+  ({ 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,
-      },
     };
   }
 );
diff --git a/apps/web/src/components/pure/workspace-slider-bar/WorkspaceSelector/styles.ts b/apps/web/src/components/pure/workspace-slider-bar/WorkspaceSelector/styles.ts
index 8faff4070d..aee11c906a 100644
--- a/apps/web/src/components/pure/workspace-slider-bar/WorkspaceSelector/styles.ts
+++ b/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',