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,33 +84,32 @@ export const SettingModal = ({
         onAccountSettingClick={onAccountSettingClick}
       />
 
-      <div data-testid="setting-modal-content" className={settingContent}>
-        <div className="wrapper">
-          <div className="content">
-            {activeTab === 'workspace' && workspaceId ? (
-              <Suspense fallback={<WorkspaceDetailSkeleton />}>
-                <WorkspaceSetting key={workspaceId} workspaceId={workspaceId} />
-              </Suspense>
-            ) : null}
-            {generalSettingList.find(v => v.key === activeTab) ? (
-              <GeneralSetting generalKey={activeTab as GeneralSettingKeys} />
-            ) : null}
-            {activeTab === 'account' && loginStatus === 'authenticated' ? (
-              <AccountSetting />
-            ) : null}
-          </div>
-          <div className="footer">
-            <div className={footerIconWrapper}>
+      <div data-testid="setting-modal-content" className={style.wrapper}>
+        <div className={style.content}>
+          {activeTab === 'workspace' && workspaceId ? (
+            <Suspense fallback={<WorkspaceDetailSkeleton />}>
+              <WorkspaceSetting key={workspaceId} workspaceId={workspaceId} />
+            </Suspense>
+          ) : null}
+          {generalSettingList.find(v => v.key === activeTab) ? (
+            <GeneralSetting generalKey={activeTab as GeneralSettingKeys} />
+          ) : null}
+          {activeTab === 'account' && loginStatus === 'authenticated' ? (
+            <AccountSetting />
+          ) : null}
+        </div>
+        <div className="footer">
+          <a
+            href="https://community.affine.pro/home"
+            target="_blank"
+            rel="noreferrer"
+            className={style.suggestionLink}
+          >
+            <span className={style.suggestionLinkIcon}>
               <ContactWithUsIcon />
-            </div>
-            <a
-              href="https://community.affine.pro/home"
-              target="_blank"
-              rel="noreferrer"
-            >
-              {t['com.affine.settings.suggestion']()}
-            </a>
-          </div>
+            </span>
+            {t['com.affine.settings.suggestion']()}
+          </a>
         </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`, {
-  display: 'none',
-});
-globalStyle(`${settingContent} .content`, {
-  minHeight: '100%',
-  paddingBottom: '80px',
-});
-globalStyle(`${settingContent} .footer`, {
-  cursor: 'pointer',
-  paddingTop: '40px',
-  marginTop: '-80px',
-  fontSize: 'var(--affine-font-sm)',
+  // children
   display: 'flex',
-  minHeight: '100px',
+  flexDirection: 'column',
+  justifyContent: 'space-between',
+  alignItems: 'center',
+
+  '::-webkit-scrollbar': {
+    display: 'none',
+  },
 });
 
-globalStyle(`${settingContent} .footer a`, {
-  color: 'var(--affine-text-primary-color)',
-  lineHeight: 'normal',
+export const content = style({
+  width: '100%',
+  marginBottom: '24px',
 });
-export const footerIconWrapper = style({
-  fontSize: 'var(--affine-font-base)',
-  color: 'var(--affine-icon-color)',
-  marginRight: '12px',
-  height: '19px',
+
+export const suggestionLink = style({
+  fontSize: 'var(--affine-font-sm)',
+  color: 'var(--affine-text-primary-color)',
   display: 'flex',
   alignItems: 'center',
 });
+
+export const suggestionLinkIcon = style({
+  color: 'var(--affine-icon-color)',
+  marginRight: '12px',
+  display: 'flex',
+});