chore: update filter style (#2625)

packages/component/src/components/page-list/filter/condition.tsx

@@ -2,6 +2,7 @@ import type { ReactNode } from 'react';
 import { useMemo } from 'react';
 
 import { Menu, MenuItem } from '../../../ui/menu';
+import * as styles from './index.css';
 import { literalMatcher } from './literal-matcher';
 import type { TFunction, TType } from './logical/typesystem';
 import type { Filter, Literal } from './vars';
@@ -33,16 +34,15 @@ export const Condition = ({
             trigger="click"
             content={<VariableSelect selected={[]} onSelect={onChange} />}
           >
-            <div data-testid="variable-name">{ast.left.name}</div>
+            <div data-testid="variable-name" className={styles.filterTypeStyle}>
+              {ast.left.name}
+            </div>
           </Menu>
           <Menu
             trigger="click"
             content={<FunctionSelect value={value} onChange={onChange} />}
           >
-            <div
-              style={{ marginLeft: 4, color: 'gray' }}
-              data-testid="filter-name"
-            >
+            <div className={styles.switchStyle} data-testid="filter-name">
               {ast.funcName}
             </div>
           </Menu>

packages/component/src/components/page-list/filter/filter-list.tsx

@@ -1,3 +1,5 @@
+import { CloseIcon, PlusIcon } from '@blocksuite/icons';
+
 import { Menu } from '../../..';
 import { Condition } from './condition';
 import * as styles from './index.css';
@@ -24,12 +26,12 @@ export const FilterList = ({
               }}
             />
             <div
-              style={{ marginLeft: 8, cursor: 'pointer' }}
+              className={styles.filterItemCloseStyle}
               onClick={() => {
                 onChange(value.filter((_, index) => i !== index));
               }}
             >
-              x
+              <CloseIcon />
             </div>
           </div>
         );
@@ -47,7 +49,7 @@ export const FilterList = ({
             alignItems: 'center',
           }}
         >
-          +
+          <PlusIcon />
         </div>
       </Menu>
     </div>

packages/component/src/components/page-list/filter/index.css.ts

@@ -27,7 +27,26 @@ export const filterItemStyle = style({
   display: 'flex',
   border: '1px solid var(--affine-border-color)',
   borderRadius: '8px',
-  padding: '2px 6px',
-  margin: 4,
   background: 'var(--affine-white)',
+  margin: '4px',
+  padding: '4px 8px',
+});
+
+export const filterItemCloseStyle = style({
+  display: 'flex',
+  alignItems: 'center',
+  justifyContent: 'center',
+  cursor: 'pointer',
+  marginLeft: '4px',
+});
+export const inputStyle = style({
+  fontSize: 'var(--affine-font-xs)',
+});
+export const switchStyle = style({
+  fontSize: 'var(--affine-font-xs)',
+  color: 'var(--affine-text-secondary-color)',
+  marginLeft: '4px',
+});
+export const filterTypeStyle = style({
+  fontSize: 'var(--affine-font-sm)',
 });

packages/component/src/components/page-list/filter/literal-matcher.tsx

@@ -1,6 +1,7 @@
 import dayjs from 'dayjs';
 import type { ReactNode } from 'react';
 
+import { inputStyle } from './index.css';
 import { tBoolean, tDate } from './logical/custom-type';
 import { Matcher } from './logical/matcher';
 import type { TType } from './logical/typesystem';
@@ -20,6 +21,7 @@ export const literalMatcher = new Matcher<{
 literalMatcher.register(tBoolean.create(), {
   render: ({ value, onChange }) => (
     <div
+      className={inputStyle}
       style={{ cursor: 'pointer' }}
       onClick={() => {
         onChange({ type: 'literal', value: !value.value });
@@ -32,6 +34,7 @@ literalMatcher.register(tBoolean.create(), {
 literalMatcher.register(tDate.create(), {
   render: ({ value, onChange }) => (
     <input
+      className={inputStyle}
       value={dayjs(value.value as number).format('YYYY-MM-DD')}
       type="date"
       onChange={e => {

packages/component/src/components/page-list/view/create-view.tsx

@@ -1,3 +1,4 @@
+import { SaveIcon } from '@blocksuite/icons';
 import { uuidv4 } from '@blocksuite/store';
 import { useState } from 'react';
 
@@ -5,6 +6,7 @@ import { Button, Input, Modal, ModalWrapper } from '../../..';
 import { FilterList } from '../filter';
 import type { Filter } from '../filter/vars';
 import type { View } from '../use-all-page-setting';
+import * as styles from './view-list.css';
 
 type CreateViewProps = {
   init: Filter[];
@@ -68,7 +70,18 @@ export const SaveViewButton = ({ init, onConfirm }: CreateViewProps) => {
   const [show, changeShow] = useState(false);
   return (
     <>
-      <Button onClick={() => changeShow(true)}>Save view</Button>
+      <Button
+        className={styles.saveButton}
+        onClick={() => changeShow(true)}
+        size="middle"
+      >
+        <div className={styles.saveButtonContainer}>
+          <div className={styles.saveIcon}>
+            <SaveIcon />
+          </div>
+          <div className={styles.saveText}>Save View</div>
+        </div>
+      </Button>
       <Modal open={show} onClose={() => changeShow(false)}>
         <ModalWrapper width={560} style={{ padding: '40px' }}>
           <CreateView

packages/component/src/components/page-list/view/view-list.css.ts

@@ -29,3 +29,33 @@ export const viewDivider = style({
     margin: '0 1px',
   },
 });
+export const saveButton = style({
+  marginTop: '4px',
+  borderRadius: '8px',
+  padding: '8px 0',
+  ':hover': {
+    background: 'var(--affine-hover-color)',
+    color: 'var(--affine-text-primary-color)',
+    border: '1px solid var(--affine-border-color)',
+  },
+});
+export const saveButtonContainer = style({
+  display: 'flex',
+  alignItems: 'center',
+  cursor: 'pointer',
+  width: '100%',
+  height: '100%',
+  padding: '8px',
+});
+export const saveIcon = style({
+  display: 'flex',
+  alignItems: 'center',
+  fontSize: 'var(--affine-font-sm)',
+  marginRight: '8px',
+});
+export const saveText = style({
+  display: 'flex',
+  alignItems: 'center',
+  justifyContent: 'center',
+  fontSize: 'var(--affine-font-sm)',
+});