diff --git a/packages/component/src/components/page-list/filter/condition.tsx b/packages/component/src/components/page-list/filter/condition.tsx
index 039aa761b..476dc1871 100644
--- a/packages/component/src/components/page-list/filter/condition.tsx
+++ b/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={}
>
-
{ast.left.name}
+
+ {ast.left.name}
+
}
>
-
+
{ast.funcName}
diff --git a/packages/component/src/components/page-list/filter/filter-list.tsx b/packages/component/src/components/page-list/filter/filter-list.tsx
index 8a06944d3..e8d75f71b 100644
--- a/packages/component/src/components/page-list/filter/filter-list.tsx
+++ b/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 = ({
}}
/>
{
onChange(value.filter((_, index) => i !== index));
}}
>
- x
+
);
@@ -47,7 +49,7 @@ export const FilterList = ({
alignItems: 'center',
}}
>
- +
+
diff --git a/packages/component/src/components/page-list/filter/index.css.ts b/packages/component/src/components/page-list/filter/index.css.ts
index 2e01df862..8593ea77f 100644
--- a/packages/component/src/components/page-list/filter/index.css.ts
+++ b/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)',
});
diff --git a/packages/component/src/components/page-list/filter/literal-matcher.tsx b/packages/component/src/components/page-list/filter/literal-matcher.tsx
index 8a60b142a..0093a0e1d 100644
--- a/packages/component/src/components/page-list/filter/literal-matcher.tsx
+++ b/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 }) => (
{
onChange({ type: 'literal', value: !value.value });
@@ -32,6 +34,7 @@ literalMatcher.register(tBoolean.create(), {
literalMatcher.register(tDate.create(), {
render: ({ value, onChange }) => (
{
diff --git a/packages/component/src/components/page-list/view/create-view.tsx b/packages/component/src/components/page-list/view/create-view.tsx
index 043452efb..a14a2fc82 100644
--- a/packages/component/src/components/page-list/view/create-view.tsx
+++ b/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 (
<>
-
+
changeShow(false)}>