feat: modify setting modal (#3008)

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

@@ -10,8 +10,8 @@ export const AppContainer = (props: WorkspaceRootProps) => {
 
   return (
     <AppContainerWithoutSettings
-      useNoisyBackground={!appSettings.disableNoisyBackground}
-      useBlurBackground={!appSettings.disableBlurBackground}
+      useNoisyBackground={appSettings.enableNoisyBackground}
+      useBlurBackground={!appSettings.enableBlurBackground}
       {...props}
     />
   );

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

@@ -23,7 +23,7 @@ export const AboutAffine = () => {
     <>
       <SettingHeader
         title={t['About AFFiNE']()}
-        subtitle={t['None yet']()}
+        subtitle={t['Information about AFFiNE']()}
         data-testid="about-title"
       />
       {runtimeConfig.enableNewSettingUnstableApi && environment.isDesktop ? (

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

@@ -145,24 +145,24 @@ export const AppearanceSettings = () => {
       {environment.isDesktop ? (
         <SettingWrapper title={t['Sidebar']()}>
           <SettingRow
-            name={t['Disable the noise background on the sidebar']()}
-            desc={t['None yet']()}
+            name={t['Noise background on the sidebar']()}
+            desc={t['Use background noise effect on the sidebar.']()}
           >
             <Switch
-              checked={appSettings.disableNoisyBackground}
+              checked={appSettings.enableNoisyBackground}
               onChange={checked =>
-                changeSwitch('disableNoisyBackground', checked)
+                changeSwitch('enableNoisyBackground', checked)
               }
             />
           </SettingRow>
           <SettingRow
-            name={t['Disable the blur sidebar']()}
-            desc={t['None yet']()}
+            name={t['Translucent UI on the sidebar']()}
+            desc={t['Use transparency effect on the sidebar.']()}
           >
             <Switch
-              checked={!appSettings.disableBlurBackground}
+              checked={appSettings.enableBlurBackground}
               onChange={checked =>
-                changeSwitch('disableBlurBackground', !checked)
+                changeSwitch('enableBlurBackground', checked)
               }
             />
           </SettingRow>

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

@@ -153,7 +153,7 @@ export const RootAppSidebar = ({
     <>
       <AppSidebar
         router={router}
-        hasBackground={!appSettings.disableBlurBackground}
+        hasBackground={!appSettings.enableBlurBackground}
       >
         <SidebarContainer>
           <NoSsr>