fix(component): flex setting-modal header & footer (#4818)

packages/frontend/component/src/components/setting-components/share.css.ts

@@ -1,8 +1,8 @@
 import { globalStyle, style } from '@vanilla-extract/css';
 
 export const settingHeader = style({
-  height: '68px',
   borderBottom: '1px solid var(--affine-border-color)',
+  paddingBottom: '24px',
   marginBottom: '24px',
 });
 

packages/frontend/core/src/components/affine/setting-modal/general-setting/plans/style.css.ts

@@ -28,6 +28,7 @@ export const planCardsWrapper = style({
 });
 
 export const planCard = style({
+  backgroundColor: 'var(--affine-background-primary-color)',
   minHeight: '426px',
   minWidth: '258px',
   borderRadius: '16px',

packages/frontend/core/src/components/affine/setting-modal/index.tsx

@@ -145,7 +145,7 @@ export const SettingModal = ({
               className={style.suggestionLink}
             >
               <span className={style.suggestionLinkIcon}>
-                <ContactWithUsIcon />
+                <ContactWithUsIcon width="16" height="16" />
               </span>
               {t['com.affine.settings.suggestion']()}
             </a>

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

@@ -32,13 +32,16 @@ export const suggestionLink = style({
   fontSize: 'var(--affine-font-sm)',
   color: 'var(--affine-text-primary-color)',
   display: 'flex',
-  alignItems: 'center',
+  alignItems: 'start',
+  lineHeight: '22px',
+  gap: '12px',
 });
 
 export const suggestionLinkIcon = style({
   color: 'var(--affine-icon-color)',
   marginRight: '12px',
   display: 'flex',
+  margin: '3px 0',
 });
 
 export const footer = style({