feat: migrate workspace setting with new design to setting modal (#2900)

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

apps/web/src/components/affine/setting-modal/general-setting/about/index.tsx

@@ -1,14 +1,13 @@
 import { Switch } from '@affine/component';
 import { relatedLinks } from '@affine/component/contact-modal';
-import { isDesktop } from '@affine/env/constant';
+import { SettingHeader } from '@affine/component/setting-components';
+import { SettingRow } from '@affine/component/setting-components';
+import { SettingWrapper } from '@affine/component/setting-components';
 import { useAFFiNEI18N } from '@affine/i18n/hooks';
 import { ArrowRightSmallIcon, OpenInNewIcon } from '@blocksuite/icons';
 import { useCallback } from 'react';
 
 import { type AppSetting, useAppSetting } from '../../../../../atoms/settings';
-import { SettingHeader } from '../../common/setting-header';
-import { SettingRow } from '../../common/setting-row';
-import { Wrapper } from '../../common/wrapper';
 import { IS_EXHIBITION } from '../../config';
 import { communityItem, communityWrapper, link } from './style.css';
 
@@ -24,8 +23,8 @@ export const AboutAffine = () => {
   return (
     <>
       <SettingHeader title={t['About AFFiNE']()} subtitle={t['None yet']()} />
-      {IS_EXHIBITION && isDesktop ? (
-        <Wrapper title={t['Version']()}>
+      {IS_EXHIBITION && environment.isDesktop ? (
+        <SettingWrapper title={t['Version']()}>
           <SettingRow
             name={t['Check for updates']()}
             desc={t['New version is ready']()}
@@ -65,9 +64,9 @@ export const AboutAffine = () => {
           >
             <ArrowRightSmallIcon />
           </SettingRow>
-        </Wrapper>
+        </SettingWrapper>
       ) : null}
-      <Wrapper title={t['Contact with us']()}>
+      <SettingWrapper title={t['Contact with us']()}>
         <a className={link} href="https://affine.pro" target="_blank">
           {t['Official Website']()}
           <OpenInNewIcon className="icon" />
@@ -76,8 +75,8 @@ export const AboutAffine = () => {
           {t['AFFiNE Community']()}
           <OpenInNewIcon className="icon" />
         </a>
-      </Wrapper>
-      <Wrapper title={t['Communities']()}>
+      </SettingWrapper>
+      <SettingWrapper title={t['Communities']()}>
         <div className={communityWrapper}>
           {relatedLinks.map(({ icon, title, link }) => {
             return (
@@ -94,8 +93,8 @@ export const AboutAffine = () => {
             );
           })}
         </div>
-      </Wrapper>
-      <Wrapper title={t['Info of legal']()}>
+      </SettingWrapper>
+      <SettingWrapper title={t['Info of legal']()}>
         <a className={link} href="https://affine.pro/privacy" target="_blank">
           {t['Privacy']()}
           <OpenInNewIcon className="icon" />
@@ -104,7 +103,7 @@ export const AboutAffine = () => {
           {t['Terms of Use']()}
           <OpenInNewIcon className="icon" />
         </a>
-      </Wrapper>
+      </SettingWrapper>
     </>
   );
 };

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

@@ -1,5 +1,7 @@
 import { RadioButton, RadioButtonGroup, Switch } from '@affine/component';
-import { isDesktop } from '@affine/env/constant';
+import { SettingHeader } from '@affine/component/setting-components';
+import { SettingRow } from '@affine/component/setting-components';
+import { SettingWrapper } from '@affine/component/setting-components';
 import { useAFFiNEI18N } from '@affine/i18n/hooks';
 import { useTheme } from 'next-themes';
 import { useCallback } from 'react';
@@ -10,9 +12,6 @@ import {
   windowFrameStyleOptions,
 } from '../../../../../atoms/settings';
 import { LanguageMenu } from '../../../language-menu';
-import { SettingHeader } from '../../common/setting-header';
-import { SettingRow } from '../../common/setting-row';
-import { Wrapper } from '../../common/wrapper';
 import { IS_EXHIBITION } from '../../config';
 import { DateFormatSetting } from './date-format-setting';
 import { settingWrapper } from './style.css';
@@ -56,7 +55,7 @@ export const AppearanceSettings = () => {
         subtitle={t['Customize your  AFFiNE Appearance']()}
       />
 
-      <Wrapper title={t['Theme']()}>
+      <SettingWrapper title={t['Theme']()}>
         <SettingRow
           name={t['Color Scheme']()}
           desc={t['Choose your color scheme']()}
@@ -71,7 +70,7 @@ export const AppearanceSettings = () => {
             <LanguageMenu />
           </div>
         </SettingRow>
-        {IS_EXHIBITION && isDesktop ? (
+        {IS_EXHIBITION && environment.isDesktop ? (
           <SettingRow
             name={t['Client Border Style']()}
             desc={t['Customize the appearance of the client.']()}
@@ -92,7 +91,7 @@ export const AppearanceSettings = () => {
             onChange={checked => changeSwitch('fullWidthLayout', checked)}
           />
         </SettingRow>
-        {IS_EXHIBITION && isDesktop ? (
+        {IS_EXHIBITION && environment.isDesktop ? (
           <SettingRow
             name={t['Window frame style']()}
             desc={t['Customize appearance of Windows Client.']()}
@@ -114,9 +113,9 @@ export const AppearanceSettings = () => {
             </RadioButtonGroup>
           </SettingRow>
         ) : null}
-      </Wrapper>
+      </SettingWrapper>
       {IS_EXHIBITION ? (
-        <Wrapper title={t['Date']()}>
+        <SettingWrapper title={t['Date']()}>
           <SettingRow
             name={t['Date Format']()}
             desc={t['Customize your date style.']()}
@@ -134,11 +133,11 @@ export const AppearanceSettings = () => {
               onChange={checked => changeSwitch('startWeekOnMonday', checked)}
             />
           </SettingRow>
-        </Wrapper>
+        </SettingWrapper>
       ) : null}
 
-      {isDesktop ? (
-        <Wrapper title={t['Sidebar']()}>
+      {environment.isDesktop ? (
+        <SettingWrapper title={t['Sidebar']()}>
           <SettingRow
             name={t['Disable the noise background on the sidebar']()}
             desc={t['None yet']()}
@@ -161,7 +160,7 @@ export const AppearanceSettings = () => {
               }
             />
           </SettingRow>
-        </Wrapper>
+        </SettingWrapper>
       ) : null}
     </>
   );

apps/web/src/components/affine/setting-modal/general-setting/appearance/style.css.ts

@@ -3,7 +3,7 @@ import { style } from '@vanilla-extract/css';
 export const settingWrapper = style({
   flexGrow: 1,
   display: 'flex',
-  width: '50%',
+  justifyContent: 'flex-end',
   minWidth: '150px',
   maxWidth: '250px',
 });

apps/web/src/components/affine/setting-modal/general-setting/shortcuts/index.tsx

@@ -1,3 +1,5 @@
+import { SettingHeader } from '@affine/component/setting-components';
+import { SettingWrapper } from '@affine/component/setting-components';
 import { useAFFiNEI18N } from '@affine/i18n/hooks';
 
 import {
@@ -6,8 +8,6 @@ import {
   useMarkdownShortcuts,
   usePageShortcuts,
 } from '../../../../../hooks/affine/use-shortcuts';
-import { SettingHeader } from '../../common/setting-header';
-import { Wrapper } from '../../common/wrapper';
 import { shortcutRow } from './style.css';
 
 export const Shortcuts = () => {
@@ -24,7 +24,7 @@ export const Shortcuts = () => {
         title={t['Keyboard Shortcuts']()}
         subtitle={t['Check Keyboard Shortcuts quickly']()}
       />
-      <Wrapper title={t['General']()}>
+      <SettingWrapper title={t['General']()}>
         {Object.entries(generalShortcuts).map(([title, shortcuts]) => {
           return (
             <div key={title} className={shortcutRow}>
@@ -33,8 +33,8 @@ export const Shortcuts = () => {
             </div>
           );
         })}
-      </Wrapper>
-      <Wrapper title={t['Page']()}>
+      </SettingWrapper>
+      <SettingWrapper title={t['Page']()}>
         {Object.entries(pageShortcuts).map(([title, shortcuts]) => {
           return (
             <div key={title} className={shortcutRow}>
@@ -43,8 +43,8 @@ export const Shortcuts = () => {
             </div>
           );
         })}
-      </Wrapper>
-      <Wrapper title={t['Edgeless']()}>
+      </SettingWrapper>
+      <SettingWrapper title={t['Edgeless']()}>
         {Object.entries(edgelessShortcuts).map(([title, shortcuts]) => {
           return (
             <div key={title} className={shortcutRow}>
@@ -53,8 +53,8 @@ export const Shortcuts = () => {
             </div>
           );
         })}
-      </Wrapper>
-      <Wrapper title={t['Markdown Syntax']()}>
+      </SettingWrapper>
+      <SettingWrapper title={t['Markdown Syntax']()}>
         {Object.entries(markdownShortcuts).map(([title, shortcuts]) => {
           return (
             <div key={title} className={shortcutRow}>
@@ -63,7 +63,7 @@ export const Shortcuts = () => {
             </div>
           );
         })}
-      </Wrapper>
+      </SettingWrapper>
     </>
   );
 };