feat: new setting modal (#2834)

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

apps/web/src/components/affine/setting-modal/common/setting-header.tsx

@@ -0,0 +1,14 @@
+import type { FC } from 'react';
+
+import { settingHeader } from './share.css';
+export const SettingHeader: FC<{ title: string; subtitle?: string }> = ({
+  title,
+  subtitle,
+}) => {
+  return (
+    <div className={settingHeader}>
+      <div className="title">{title}</div>
+      <div className="subtitle">{subtitle}</div>
+    </div>
+  );
+};

apps/web/src/components/affine/setting-modal/common/setting-row.tsx

@@ -0,0 +1,22 @@
+import type { CSSProperties, FC, PropsWithChildren, ReactElement } from 'react';
+
+import { settingRow } from './share.css';
+
+export const SettingRow: FC<
+  PropsWithChildren<{
+    name: string;
+    desc: string | ReactElement;
+    style?: CSSProperties;
+    onClick?: () => void;
+  }>
+> = ({ name, desc, children, onClick, style }) => {
+  return (
+    <div className={settingRow} style={style} onClick={onClick}>
+      <div className="left-col">
+        <div className="name">{name}</div>
+        <div className="desc">{desc}</div>
+      </div>
+      <div className="right-col">{children}</div>
+    </div>
+  );
+};

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

@@ -0,0 +1,69 @@
+import { globalStyle, style } from '@vanilla-extract/css';
+
+export const settingHeader = style({
+  height: '68px',
+  borderBottom: '1px solid var(--affine-border-color)',
+  marginBottom: '24px',
+});
+
+globalStyle(`${settingHeader} .title`, {
+  fontSize: 'var(--affine-font-base)',
+  fontWeight: 600,
+  lineHeight: '24px',
+  marginBottom: '4px',
+});
+
+globalStyle(`${settingHeader} .subtitle`, {
+  fontSize: 'var(--affine-font-xs)',
+  lineHeight: '16px',
+  color: 'var(--affine-text-secondary-color)',
+});
+
+export const wrapper = style({
+  borderBottom: '1px solid var(--affine-border-color)',
+  paddingBottom: '24px',
+  marginBottom: '24px',
+  selectors: {
+    '&:last-of-type': {
+      borderBottom: 'none',
+      paddingBottom: '0',
+      marginBottom: '0',
+    },
+  },
+});
+
+globalStyle(`${wrapper} .title`, {
+  fontSize: 'var(--affine-font-sm)',
+  fontWeight: 600,
+  lineHeight: '18px',
+  color: 'var(--affine-text-secondary-color)',
+  marginBottom: '16px',
+});
+
+export const settingRow = style({
+  display: 'flex',
+  justifyContent: 'space-between',
+  alignItems: 'center',
+  marginBottom: '25px',
+  color: 'var(--affine-text-primary-color)',
+});
+
+globalStyle(`${settingRow} .left-col`, {
+  flexShrink: 0,
+  maxWidth: '80%',
+});
+globalStyle(`${settingRow} .name`, {
+  marginBottom: '2px',
+  fontSize: 'var(--affine-font-sm)',
+  fontWeight: 600,
+});
+globalStyle(`${settingRow} .desc`, {
+  fontSize: 'var(--affine-font-xs)',
+  color: 'var(--affine-text-secondary-color)',
+});
+globalStyle(`${settingRow} .right-col`, {
+  flexGrow: 1,
+  display: 'flex',
+  justifyContent: 'flex-end',
+  paddingLeft: '15px',
+});

apps/web/src/components/affine/setting-modal/common/wrapper.tsx

@@ -0,0 +1,14 @@
+import type { FC, PropsWithChildren } from 'react';
+
+import { wrapper } from './share.css';
+export const Wrapper: FC<PropsWithChildren<{ title?: string }>> = ({
+  title,
+  children,
+}) => {
+  return (
+    <div className={wrapper}>
+      {title ? <div className="title">{title}</div> : null}
+      {children}
+    </div>
+  );
+};