feat: new setting modal (#2834)

Co-authored-by: Alex Yang <himself65@outlook.com>

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

@@ -0,0 +1,38 @@
+import { globalStyle, style } from '@vanilla-extract/css';
+
+export const settingContent = style({
+  flexGrow: '1',
+  height: '100%',
+  padding: '40px 0',
+});
+
+globalStyle(`${settingContent} .wrapper`, {
+  width: '66%',
+  minWidth: '450px',
+  height: '100%',
+  maxWidth: '560px',
+  margin: '0 auto',
+  overflowY: 'auto',
+});
+globalStyle(`${settingContent} .content`, {
+  minHeight: '100%',
+  paddingBottom: '80px',
+});
+globalStyle(`${settingContent} .footer`, {
+  cursor: 'pointer',
+  paddingTop: '40px',
+  marginTop: '-80px',
+  fontSize: 'var(--affine-font-sm)',
+  display: 'flex',
+});
+
+globalStyle(`${settingContent} .footer a`, {
+  color: 'var(--affine-text-primary-color)',
+});
+
+globalStyle(`${settingContent} .footer > svg`, {
+  fontSize: 'var(--affine-font-base)',
+  color: 'var(--affine-icon-color)',
+  marginRight: '12px',
+  marginTop: '2px',
+});