feat: refactor button with new design (#3343)

packages/component/src/components/page-list/components/favorite-tag.tsx

@@ -19,12 +19,7 @@ export const FavoriteTag = forwardRef<
     >
       <IconButton
         ref={ref}
-        iconSize={[20, 20]}
-        style={{
-          color: active
-            ? 'var(--affine-primary-color)'
-            : 'var(--affine-icon-color)',
-        }}
+        active={active}
         onClick={e => {
           e.stopPropagation();
           onClick?.(e);

packages/component/src/components/page-list/operation-cell.tsx

@@ -147,8 +147,6 @@ export const TrashOperationCell: React.FC<TrashOperationCellProps> = ({
           onClick={() => {
             setOpen(true);
           }}
-          hoverBackground="var(--affine-background-error-color)"
-          hoverColor="var(--affine-error-color)"
         >
           <DeletePermanentlyIcon />
         </IconButton>
@@ -157,7 +155,7 @@ export const TrashOperationCell: React.FC<TrashOperationCellProps> = ({
         title={t['Delete permanently?']()}
         content={t['TrashButtonGroupDescription']()}
         confirmText={t['Delete']()}
-        confirmType="danger"
+        confirmType="error"
         open={open}
         onConfirm={() => {
           onPermanentlyDeletePage();

packages/component/src/components/page-list/operation-menu-items/move-to-trash.tsx

@@ -44,7 +44,7 @@ const ConfirmModal = ({
         title: title || 'Untitled',
       })}
       confirmText={t.Delete()}
-      confirmType="danger"
+      confirmType="error"
       {...confirmModalProps}
     />
   );

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

@@ -207,9 +207,7 @@ export const CollectionList = ({
           }
         >
           <Button
-            size="small"
             className={clsx(styles.viewButton)}
-            hoverColor="var(--affine-icon-color)"
             data-testid="collection-select"
           >
             <Tooltip
@@ -235,8 +233,6 @@ export const CollectionList = ({
         <Button
           icon={<FilteredIcon />}
           className={clsx(styles.filterButton)}
-          size="small"
-          hoverColor="var(--affine-icon-color)"
           data-testid="create-first-filter"
         >
           {t['com.affine.filter']()}

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

@@ -56,12 +56,7 @@ export const EditCollectionModel = ({
           background: 'var(--affine-background-primary-color)',
         }}
       >
-        <ModalCloseButton
-          top={12}
-          right={12}
-          onClick={onClose}
-          hoverColor="var(--affine-icon-color)"
-        />
+        <ModalCloseButton top={12} right={12} onClick={onClose} />
         {init ? (
           <EditCollection
             propertiesMeta={propertiesMeta}
@@ -283,7 +278,7 @@ export const SaveCollectionButton = ({
       <Button
         className={styles.saveButton}
         onClick={() => changeShow(true)}
-        size="middle"
+        size="large"
         data-testid="save-as-collection"
       >
         <div className={styles.saveButtonContainer}>