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

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

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`, {