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

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({