fix(core): setting ui regression (#4525)

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

@@ -12,7 +12,7 @@ import {
   useGeneralSettingList,
 } from './general-setting';
 import { SettingSidebar } from './setting-sidebar';
-import { footerIconWrapper, settingContent } from './style.css';
+import * as style from './style.css';
 import { WorkspaceSetting } from './workspace-setting';
 
 type ActiveTab = GeneralSettingKeys | 'workspace' | 'account';
@@ -84,9 +84,8 @@ export const SettingModal = ({
         onAccountSettingClick={onAccountSettingClick}
       />
 
-      <div data-testid="setting-modal-content" className={settingContent}>
+      <div data-testid="setting-modal-content" className={style.wrapper}>
-        <div className="wrapper">
+        <div className={style.content}>
-          <div className="content">
           {activeTab === 'workspace' && workspaceId ? (
             <Suspense fallback={<WorkspaceDetailSkeleton />}>
               <WorkspaceSetting key={workspaceId} workspaceId={workspaceId} />
@@ -100,19 +99,19 @@ export const SettingModal = ({
           ) : null}
         </div>
         <div className="footer">
-            <div className={footerIconWrapper}>
-              <ContactWithUsIcon />
-            </div>
           <a
             href="https://community.affine.pro/home"
             target="_blank"
             rel="noreferrer"
+            className={style.suggestionLink}
           >
+            <span className={style.suggestionLinkIcon}>
+              <ContactWithUsIcon />
+            </span>
             {t['com.affine.settings.suggestion']()}
           </a>
         </div>
       </div>
-      </div>
     </Modal>
   );
 };

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

@@ -1,45 +1,38 @@
-import { globalStyle, style } from '@vanilla-extract/css';
+import { style } from '@vanilla-extract/css';
 
-export const settingContent = style({
+export const wrapper = style({
   flexGrow: '1',
   height: '100%',
-  padding: '40px 15px',
-  overflow: 'hidden',
-});
-
-globalStyle(`${settingContent} .wrapper`, {
-  padding: '0 15px',
-  height: '100%',
   maxWidth: '560px',
   margin: '0 auto',
-  overflowY: 'auto',
+  padding: '40px 15px 20px 15px',
-});
+  overflow: 'hidden auto',
 
-globalStyle(`${settingContent} .wrapper::-webkit-scrollbar`, {
+  // children
-  display: 'none',
-});
-globalStyle(`${settingContent} .content`, {
-  minHeight: '100%',
-  paddingBottom: '80px',
-});
-globalStyle(`${settingContent} .footer`, {
-  cursor: 'pointer',
-  paddingTop: '40px',
-  marginTop: '-80px',
-  fontSize: 'var(--affine-font-sm)',
   display: 'flex',
-  minHeight: '100px',
+  flexDirection: 'column',
+  justifyContent: 'space-between',
+  alignItems: 'center',
+
+  '::-webkit-scrollbar': {
+    display: 'none',
+  },
 });
 
-globalStyle(`${settingContent} .footer a`, {
+export const content = style({
-  color: 'var(--affine-text-primary-color)',
+  width: '100%',
-  lineHeight: 'normal',
+  marginBottom: '24px',
 });
-export const footerIconWrapper = style({
+
-  fontSize: 'var(--affine-font-base)',
+export const suggestionLink = style({
-  color: 'var(--affine-icon-color)',
+  fontSize: 'var(--affine-font-sm)',
-  marginRight: '12px',
+  color: 'var(--affine-text-primary-color)',
-  height: '19px',
   display: 'flex',
   alignItems: 'center',
 });
+
+export const suggestionLinkIcon = style({
+  color: 'var(--affine-icon-color)',
+  marginRight: '12px',
+  display: 'flex',
+});