From d88a21d24a8ccee8e5b3429e134815ca0f58b4d8 Mon Sep 17 00:00:00 2001
From: Peng Xiao <pengxiao@outlook.com>
Date: Tue, 11 Jul 2023 20:55:28 +0800
Subject: [PATCH] fix: settings style update (#3161)

---
 apps/web/src/atoms/settings.ts                |  3 ++-
 .../general-setting/appearance/index.tsx      |  2 +-
 .../affine/setting-modal/style.css.ts         |  3 +--
 .../blocksuite/workspace-header/styles.css.ts | 11 ++++++++--
 apps/web/src/layouts/workspace-layout.tsx     |  5 ++++-
 packages/component/package.json               |  2 +-
 .../src/components/workspace/index.css.ts     | 11 ++++++----
 .../src/components/workspace/index.tsx        | 22 +++++++++++++------
 yarn.lock                                     | 10 ++++-----
 9 files changed, 45 insertions(+), 24 deletions(-)

diff --git a/apps/web/src/atoms/settings.ts b/apps/web/src/atoms/settings.ts
index de76f23f74..84b4ffacef 100644
--- a/apps/web/src/atoms/settings.ts
+++ b/apps/web/src/atoms/settings.ts
@@ -1,3 +1,4 @@
+import { isDesktop } from '@affine/env/constant';
 import { atom, useAtom } from 'jotai';
 import { atomWithStorage } from 'jotai/utils';
 
@@ -49,7 +50,7 @@ export const fontStyleOptions = [
 }[];
 
 const appSettingBaseAtom = atomWithStorage<AppSetting>('affine-settings', {
-  clientBorder: false,
+  clientBorder: isDesktop,
   fullWidthLayout: false,
   windowFrameStyle: 'frameless',
   fontStyle: 'Sans',
diff --git a/apps/web/src/components/affine/setting-modal/general-setting/appearance/index.tsx b/apps/web/src/components/affine/setting-modal/general-setting/appearance/index.tsx
index 69e89218d1..23185396c3 100644
--- a/apps/web/src/components/affine/setting-modal/general-setting/appearance/index.tsx
+++ b/apps/web/src/components/affine/setting-modal/general-setting/appearance/index.tsx
@@ -120,7 +120,7 @@ export const AppearanceSettings = () => {
             <LanguageMenu triggerProps={{ size: 'small' }} />
           </div>
         </SettingRow>
-        {runtimeConfig.enableNewSettingUnstableApi && environment.isDesktop ? (
+        {environment.isDesktop ? (
           <SettingRow
             name={t['Client Border Style']()}
             desc={t['Customize the appearance of the client.']()}
diff --git a/apps/web/src/components/affine/setting-modal/style.css.ts b/apps/web/src/components/affine/setting-modal/style.css.ts
index 2609c66dae..3b434de3f3 100644
--- a/apps/web/src/components/affine/setting-modal/style.css.ts
+++ b/apps/web/src/components/affine/setting-modal/style.css.ts
@@ -4,7 +4,7 @@ export const settingContent = style({
   flexGrow: '1',
   height: '100%',
   padding: '40px 15px 20px',
-  overflowX: 'auto',
+  overflow: 'auto',
 });
 
 globalStyle(`${settingContent} .wrapper`, {
@@ -13,7 +13,6 @@ globalStyle(`${settingContent} .wrapper`, {
   height: '100%',
   maxWidth: '560px',
   margin: '0 auto',
-  overflowY: 'auto',
 });
 globalStyle(`${settingContent} .content`, {
   minHeight: '100%',
diff --git a/apps/web/src/components/blocksuite/workspace-header/styles.css.ts b/apps/web/src/components/blocksuite/workspace-header/styles.css.ts
index fb394c7497..b03907bd5b 100644
--- a/apps/web/src/components/blocksuite/workspace-header/styles.css.ts
+++ b/apps/web/src/components/blocksuite/workspace-header/styles.css.ts
@@ -210,6 +210,7 @@ export const windowAppControlsWrapper = style({
   display: 'flex',
   gap: '2px',
   transform: 'translateX(8px)',
+  height: '100%',
 });
 
 export const windowAppControl = style({
@@ -217,11 +218,17 @@ export const windowAppControl = style({
   cursor: 'pointer',
   display: 'inline-flex',
   width: '42px',
-  height: '32px',
+  height: 'calc(100% - 10px)',
+  paddingTop: '10px',
   alignItems: 'center',
   justifyContent: 'center',
-  borderRadius: '4px',
+  borderRadius: '0',
   selectors: {
+    '&[data-type="close"]': {
+      width: '56px',
+      paddingRight: '14px',
+      marginRight: '-14px',
+    },
     '&[data-type="close"]:hover': {
       background: 'var(--affine-error-color)',
       color: '#FFFFFF',
diff --git a/apps/web/src/layouts/workspace-layout.tsx b/apps/web/src/layouts/workspace-layout.tsx
index 2df8fda743..3d6b4e96ca 100644
--- a/apps/web/src/layouts/workspace-layout.tsx
+++ b/apps/web/src/layouts/workspace-layout.tsx
@@ -46,6 +46,7 @@ import {
   openWorkspacesModalAtom,
 } from '../atoms';
 import { useTrackRouterHistoryEffect } from '../atoms/history';
+import { useAppSetting } from '../atoms/settings';
 import { AppContainer } from '../components/affine/app-container';
 import type { IslandItemNames } from '../components/pure/help-island';
 import { HelpIsland } from '../components/pure/help-island';
@@ -335,6 +336,8 @@ export const WorkspaceLayoutInner: FC<PropsWithChildren> = ({ children }) => {
     [moveToTrash, t]
   );
 
+  const [appSetting] = useAppSetting();
+
   return (
     <>
       <Head>
@@ -364,7 +367,7 @@ export const WorkspaceLayoutInner: FC<PropsWithChildren> = ({ children }) => {
             currentPath={router.asPath.split('?')[0]}
             paths={isPublicWorkspace ? publicPathGenerator : pathGenerator}
           />
-          <MainContainer>
+          <MainContainer padding={appSetting.clientBorder}>
             {children}
             <ToolContainer>
               <BlockHubWrapper blockHubAtom={rootBlockHubAtom} />
diff --git a/packages/component/package.json b/packages/component/package.json
index 77ab120e70..6e21a257af 100644
--- a/packages/component/package.json
+++ b/packages/component/package.json
@@ -36,7 +36,7 @@
     "@radix-ui/react-toast": "^1.1.4",
     "@toeverything/hooks": "workspace:*",
     "@toeverything/plugin-infra": "workspace:*",
-    "@toeverything/theme": "^0.7.4",
+    "@toeverything/theme": "^0.7.6",
     "@vanilla-extract/dynamic": "^2.0.3",
     "clsx": "^1.2.1",
     "dayjs": "^1.11.9",
diff --git a/packages/component/src/components/workspace/index.css.ts b/packages/component/src/components/workspace/index.css.ts
index d8ce69aabd..0aca57c36f 100644
--- a/packages/component/src/components/workspace/index.css.ts
+++ b/packages/component/src/components/workspace/index.css.ts
@@ -57,9 +57,9 @@ export const mainContainerStyle = style({
   zIndex: 2,
   backgroundColor: 'var(--affine-background-primary-color)',
   selectors: {
-    '&[data-is-desktop="true"]': {
-      margin: '8px 8px 8px 8px',
-      borderRadius: '8px',
+    '&[data-show-padding="true"]': {
+      margin: '8px',
+      borderRadius: '5px',
       overflow: 'hidden',
       boxShadow: 'var(--affine-shadow-1)',
       '@media': {
@@ -70,7 +70,10 @@ export const mainContainerStyle = style({
         },
       },
     },
-    '&[data-is-desktop="true"]:before': {
+    '&[data-show-padding="true"][data-is-macos="true"]': {
+      borderRadius: '6px',
+    },
+    '&[data-show-padding="true"]:before': {
       content: '""',
       position: 'absolute',
       height: '8px',
diff --git a/packages/component/src/components/workspace/index.tsx b/packages/component/src/components/workspace/index.tsx
index 4278048125..6404e0894c 100644
--- a/packages/component/src/components/workspace/index.tsx
+++ b/packages/component/src/components/workspace/index.tsx
@@ -1,4 +1,3 @@
-import { isDesktop } from '@affine/env/constant';
 import { clsx } from 'clsx';
 import type { FC, PropsWithChildren, ReactElement } from 'react';
 
@@ -22,7 +21,7 @@ export const AppContainer: FC<WorkspaceRootProps> = ({
     <div
       className={clsx(appStyle, {
         'noisy-background': noisyBackground,
-        'blur-background': isDesktop && useBlurBackground,
+        'blur-background': environment.isDesktop && useBlurBackground,
       })}
       data-noise-background={noisyBackground}
       data-is-resizing={resizing}
@@ -34,15 +33,24 @@ export const AppContainer: FC<WorkspaceRootProps> = ({
 
 export type MainContainerProps = PropsWithChildren<{
   className?: string;
-}>;
+  padding?: boolean;
+}> &
+  React.HTMLAttributes<HTMLDivElement>;
 
-export const MainContainer = (props: MainContainerProps): ReactElement => {
+export const MainContainer = ({
+  className,
+  padding,
+  children,
+  ...props
+}: MainContainerProps): ReactElement => {
   return (
     <div
-      className={clsx(mainContainerStyle, 'main-container', props.className)}
-      data-is-desktop={isDesktop}
+      {...props}
+      className={clsx(mainContainerStyle, 'main-container', className)}
+      data-is-macos={environment.isBrowser && environment.isMacOs}
+      data-show-padding={padding}
     >
-      {props.children}
+      {children}
     </div>
   );
 };
diff --git a/yarn.lock b/yarn.lock
index ca1ce3ee2d..6b30d1b2a0 100644
--- a/yarn.lock
+++ b/yarn.lock
@@ -115,7 +115,7 @@ __metadata:
     "@radix-ui/react-toast": ^1.1.4
     "@toeverything/hooks": "workspace:*"
     "@toeverything/plugin-infra": "workspace:*"
-    "@toeverything/theme": ^0.7.4
+    "@toeverything/theme": ^0.7.6
     "@types/react": ^18.2.14
     "@types/react-datepicker": ^4.11.2
     "@types/react-dnd": ^3.0.2
@@ -11279,10 +11279,10 @@ __metadata:
   languageName: node
   linkType: hard
 
-"@toeverything/theme@npm:^0.7.4":
-  version: 0.7.4
-  resolution: "@toeverything/theme@npm:0.7.4"
-  checksum: e1f6f8c9648ee3c253cb9726d5b1b2c96870415b4959c82696804e2b3dbf3fdecc94fd07b6536311c92529d48e3c1dbc04209d197de087e41014a6ade0b788cf
+"@toeverything/theme@npm:^0.7.6":
+  version: 0.7.6
+  resolution: "@toeverything/theme@npm:0.7.6"
+  checksum: 6a073ad9ef38de3d668195f0d266e33c5adc088cb584a19d3c3ca6275f3459e150148f70eb9e9696ed6907f4e3996d321795878427561502b44fecfbc4994992
   languageName: node
   linkType: hard