feat: modify sidebar style (#1703)

apps/web/src/components/blocksuite/block-suite-page-list/page-list/OperationCell.tsx

@@ -79,7 +79,7 @@ export const OperationCell: React.FC<OperationCellProps> = ({
           disablePortal={true}
           trigger="click"
         >
-          <IconButton darker={true}>
+          <IconButton>
             <MoreVerticalIcon />
           </IconButton>
         </Menu>
@@ -127,7 +127,6 @@ export const TrashOperationCell: React.FC<TrashOperationCellProps> = ({
     <FlexWrapper>
       <Tooltip content={t('Restore it')} placement="top-start">
         <IconButton
-          darker={true}
           style={{ marginRight: '12px' }}
           onClick={() => {
             onRestorePage(id);
@@ -139,7 +138,6 @@ export const TrashOperationCell: React.FC<TrashOperationCellProps> = ({
       </Tooltip>
       <Tooltip content={t('Delete permanently')} placement="top-start">
         <IconButton
-          darker={true}
           onClick={() => {
             setOpen(true);
           }}

apps/web/src/components/blocksuite/block-suite-page-list/page-list/index.tsx

@@ -56,7 +56,6 @@ const FavoriteTag: React.FC<FavoriteTagProps> = ({
       placement="top-start"
     >
       <IconButton
-        darker={true}
         iconSize={[20, 20]}
         onClick={e => {
           e.stopPropagation();
@@ -88,13 +87,12 @@ type PageListProps = {
 };
 
 const filter = {
-  all: (pageMeta: PageMeta, allMetas: PageMeta[]) => !pageMeta.trash,
+  all: (pageMeta: PageMeta) => !pageMeta.trash,
   trash: (pageMeta: PageMeta, allMetas: PageMeta[]) => {
     const parentMeta = allMetas.find(m => m.subpageIds?.includes(pageMeta.id));
     return !parentMeta?.trash && pageMeta.trash;
   },
-  favorite: (pageMeta: PageMeta, allMetas: PageMeta[]) =>
-    pageMeta.favorite && !pageMeta.trash,
+  favorite: (pageMeta: PageMeta) => pageMeta.favorite && !pageMeta.trash,
 };
 
 export const PageList: React.FC<PageListProps> = ({

apps/web/src/components/blocksuite/header/styles.ts

@@ -8,16 +8,16 @@ import {
 export const StyledHeaderContainer = styled('div')<{ hasWarning: boolean }>(
   ({ hasWarning }) => {
     return {
-      height: hasWarning ? '96px' : '60px',
+      height: hasWarning ? '96px' : '48px',
     };
   }
 );
 export const StyledHeader = styled('div')<{ hasWarning: boolean }>(
   ({ theme }) => {
     return {
-      height: '64px',
+      height: '48px',
       width: '100%',
-      padding: '0 28px',
+      padding: '0 20px',
       ...displayFlex('space-between', 'center'),
       background: theme.colors.pageBackground,
       transition: 'background-color 0.5s',