From de33967a73e2207ab877dbdd173667d2c8e21e30 Mon Sep 17 00:00:00 2001
From: Cats Juice <wp1298554944@hotmail.com>
Date: Thu, 2 Nov 2023 23:11:20 +0800
Subject: [PATCH] fix(component): flex setting-modal header & footer (#4818)

---
 .../component/src/components/setting-components/share.css.ts | 2 +-
 .../affine/setting-modal/general-setting/plans/style.css.ts  | 1 +
 .../core/src/components/affine/setting-modal/index.tsx       | 2 +-
 .../core/src/components/affine/setting-modal/style.css.ts    | 5 ++++-
 4 files changed, 7 insertions(+), 3 deletions(-)

diff --git a/packages/frontend/component/src/components/setting-components/share.css.ts b/packages/frontend/component/src/components/setting-components/share.css.ts
index be26abbf75..7f09843466 100644
--- a/packages/frontend/component/src/components/setting-components/share.css.ts
+++ b/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',
 });
 
diff --git a/packages/frontend/core/src/components/affine/setting-modal/general-setting/plans/style.css.ts b/packages/frontend/core/src/components/affine/setting-modal/general-setting/plans/style.css.ts
index bb4cfc78f1..0540ed746a 100644
--- a/packages/frontend/core/src/components/affine/setting-modal/general-setting/plans/style.css.ts
+++ b/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',
diff --git a/packages/frontend/core/src/components/affine/setting-modal/index.tsx b/packages/frontend/core/src/components/affine/setting-modal/index.tsx
index c223e1891e..0a6dca33dd 100644
--- a/packages/frontend/core/src/components/affine/setting-modal/index.tsx
+++ b/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>
diff --git a/packages/frontend/core/src/components/affine/setting-modal/style.css.ts b/packages/frontend/core/src/components/affine/setting-modal/style.css.ts
index 3e49c0abb2..75cae6561a 100644
--- a/packages/frontend/core/src/components/affine/setting-modal/style.css.ts
+++ b/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({