fix: some style issues to sidebar and switch (#4046)

Co-authored-by: Alex Yang <himself65@outlook.com>

apps/core/src/atoms/settings.ts

@@ -49,7 +49,7 @@ export const fontStyleOptions = [
 }[];
 
 const appSettingBaseAtom = atomWithStorage<AppSetting>('affine-settings', {
-  clientBorder: globalThis.platform !== 'win32',
+  clientBorder: environment.isDesktop ? !environment.isWindows : false,
   fullWidthLayout: false,
   windowFrameStyle: 'frameless',
   fontStyle: 'Sans',

apps/core/src/components/affine/app-container.tsx

@@ -11,7 +11,11 @@ export const AppContainer = (props: WorkspaceRootProps) => {
   return (
     <AppContainerWithoutSettings
       useNoisyBackground={appSettings.enableNoisyBackground}
-      useBlurBackground={!appSettings.enableBlurBackground}
+      useBlurBackground={
+        appSettings.enableBlurBackground &&
+        environment.isDesktop &&
+        environment.isMacOs
+      }
       {...props}
     />
   );

apps/core/src/components/affine/setting-modal/general-setting/appearance/index.tsx

@@ -212,17 +212,19 @@ export const AppearanceSettings = () => {
               }
             />
           </SettingRow>
-          <SettingRow
-            name={t['com.affine.settings.translucent-style']()}
-            desc={t['com.affine.settings.translucent-style-description']()}
-          >
-            <Switch
-              checked={appSettings.enableBlurBackground}
-              onChange={checked =>
-                changeSwitch('enableBlurBackground', checked)
-              }
-            />
-          </SettingRow>
+          {environment.isMacOs && (
+            <SettingRow
+              name={t['com.affine.settings.translucent-style']()}
+              desc={t['com.affine.settings.translucent-style-description']()}
+            >
+              <Switch
+                checked={appSettings.enableBlurBackground}
+                onChange={checked =>
+                  changeSwitch('enableBlurBackground', checked)
+                }
+              />
+            </SettingRow>
+          )}
         </SettingWrapper>
       ) : null}
     </>

apps/core/src/components/affine/setting-modal/setting-sidebar/style.css.ts

@@ -123,8 +123,8 @@ globalStyle(`${accountButton} .avatar.not-sign`, {
   display: 'flex',
   justifyContent: 'center',
   alignItems: 'center',
-  borderColor: 'var(--affine-border-color)',
-  color: 'var(--affine-border-color)',
+  borderColor: 'var(--affine-icon-secondary)',
+  color: 'var(--affine-icon-secondary)',
   background: 'var(--affine-white)',
 });
 globalStyle(`${accountButton} .content`, {

apps/core/src/components/pure/header/index.tsx

@@ -1,4 +1,3 @@
-import { Wrapper } from '@affine/component';
 import {
   appSidebarFloatingAtom,
   appSidebarOpenAtom,
@@ -66,12 +65,8 @@ export const Header = forwardRef<HTMLDivElement, HeaderPros>(function Header(
           })}
         >
           <div className={clsx(style.headerItem, 'top-item')}>
-            <div ref={sidebarSwitchRef}>
-              {!open && (
-                <Wrapper marginRight={20}>
-                  <SidebarSwitch />
-                </Wrapper>
-              )}
+            <div ref={sidebarSwitchRef} style={{ marginRight: open ? 0 : 20 }}>
+              <SidebarSwitch show={!open} />
             </div>
           </div>
           <div className={clsx(style.headerItem, 'left')}>

apps/core/src/components/pure/workspace-slider-bar/collections/styles.css.ts

@@ -77,10 +77,10 @@ export const collapsibleContent = style({
   marginTop: '4px',
   selectors: {
     '&[data-state="open"]': {
-      animation: `${slideDown} 0.2s ease-out`,
+      animation: `${slideDown} 0.2s ease-in-out`,
     },
     '&[data-state="closed"]': {
-      animation: `${slideUp} 0.2s ease-out`,
+      animation: `${slideUp} 0.2s ease-in-out`,
     },
   },
 });

apps/core/src/components/root-app-sidebar/index.tsx

@@ -155,7 +155,13 @@ export const RootAppSidebar = ({
     <>
       <AppSidebar
         router={router}
-        hasBackground={!appSettings.enableBlurBackground}
+        hasBackground={
+          !(
+            appSettings.enableBlurBackground &&
+            environment.isDesktop &&
+            environment.isMacOs
+          )
+        }
       >
         <SidebarContainer>
           <NoSsr>