style: adjust page list header style (#3599)

apps/core/src/components/blocksuite/workspace-header/header.tsx

@@ -124,6 +124,7 @@ const PluginHeader = () => {
       disposes = Object.entries(headerItems).map(([id, headerItem]) => {
         const div = document.createElement('div');
         div.setAttribute('plugin-id', id);
+        div.style.display = 'flex';
         const cleanup = headerItem(div);
         root.appendChild(div);
         return () => {
@@ -192,7 +193,12 @@ export const Header = forwardRef<
         data-is-edgeless={mode === 'edgeless'}
         data-is-page-list={props.currentPage === null}
       >
-        <div className={styles.headerLeftSide}>
+        <div
+          className={clsx(styles.headerLeftSide, {
+            [styles.headerLeftSideColumn]:
+              isWindowsDesktop || props.currentPage === null,
+          })}
+        >
           <div>{!open && <SidebarSwitch />}</div>
           <div
             className={clsx(styles.headerLeftSideItem, {
@@ -207,6 +213,8 @@ export const Header = forwardRef<
         <div
           className={clsx(styles.headerRightSide, {
             [styles.headerRightSideWindow]: isWindowsDesktop,
+            [styles.headerRightSideColumn]:
+              isWindowsDesktop || props.currentPage === null,
           })}
         >
           <PluginHeader />

apps/core/src/components/blocksuite/workspace-header/styles.css.ts

@@ -116,6 +116,8 @@ export const headerLeftSide = style({
   display: 'flex',
   alignItems: 'center',
   transition: 'all .15s',
+});
+export const headerLeftSideColumn = style({
   '@container': {
     [`${headerVanillaContainer} (max-width: 900px)`]: {
       flexDirection: 'column',
@@ -149,6 +151,9 @@ export const headerRightSide = style({
   marginLeft: '20px',
   justifyContent: 'flex-end',
   transition: 'all .15s',
+});
+
+export const headerRightSideColumn = style({
   '@container': {
     [`${headerVanillaContainer} (max-width: 900px)`]: {
       position: 'absolute',
@@ -162,7 +167,6 @@ export const headerRightSide = style({
 export const headerRightSideWindow = style({
   marginRight: '140px',
 });
-
 export const browserWarning = style({
   backgroundColor: 'var(--affine-background-warning-color)',
   color: 'var(--affine-warning-color)',

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

@@ -67,7 +67,7 @@ const AllPagesHead = ({
         content: t['Created'](),
         proportion: 0.1,
         tableCellStyle: {
-          width: '80px',
+          width: '110px',
         } satisfies CSSProperties,
       },
       {
@@ -75,7 +75,7 @@ const AllPagesHead = ({
         content: t['Updated'](),
         proportion: 0.1,
         tableCellStyle: {
-          width: '80px',
+          width: '110px',
         } satisfies CSSProperties,
       },
       {
@@ -90,7 +90,7 @@ const AllPagesHead = ({
         showWhen: () => !isPublicWorkspace,
         sortable: false,
         tableCellStyle: {
-          width: '130px',
+          width: '140px',
         } satisfies CSSProperties,
         styles: {
           justifyContent: 'flex-end',

packages/component/src/ui/button/styles.css.ts

@@ -20,7 +20,7 @@ export const dropdownBtn = style({
   cursor: 'pointer',
   selectors: {
     '&:hover': {
-      background: 'var(--affine-hover-color)',
+      background: 'var(--affine-hover-color-filled)',
     },
   },
 });
@@ -94,7 +94,7 @@ export const radioButtonGroup = style({
   display: 'inline-flex',
   justifyContent: 'space-between',
   alignItems: 'center',
-  background: 'var(--affine-hover-color)',
+  background: 'var(--affine-hover-color-filled)',
   borderRadius: '10px',
   padding: '2px',
   // @ts-expect-error - fix electron drag

plugins/copilot/src/UI/header-item.tsx

@@ -1,5 +1,6 @@
 import { IconButton, Tooltip } from '@affine/component';
 import { contentLayoutAtom } from '@affine/sdk/entry';
+import { AiIcon } from '@blocksuite/icons';
 import { useSetAtom } from 'jotai';
 import type { ReactElement } from 'react';
 import { useCallback } from 'react';
@@ -27,22 +28,7 @@ export const HeaderItem = (): ReactElement => {
           [setLayout]
         )}
       >
-        <svg
+        <AiIcon />
-          xmlns="http://www.w3.org/2000/svg"
-          className="icon icon-tabler icon-tabler-brand-hipchat"
-          width="24"
-          height="24"
-          viewBox="0 0 24 24"
-          strokeWidth="2"
-          stroke="currentColor"
-          fill="none"
-          strokeLinecap="round"
-          strokeLinejoin="round"
-        >
-          <path stroke="none" d="M0 0h24v24H0z" fill="none"></path>
-          <path d="M17.802 17.292s.077 -.055 .2 -.149c1.843 -1.425 3 -3.49 3 -5.789c0 -4.286 -4.03 -7.764 -9 -7.764c-4.97 0 -9 3.478 -9 7.764c0 4.288 4.03 7.646 9 7.646c.424 0 1.12 -.028 2.088 -.084c1.262 .82 3.104 1.493 4.716 1.493c.499 0 .734 -.41 .414 -.828c-.486 -.596 -1.156 -1.551 -1.416 -2.29z"></path>
-          <path d="M7.5 13.5c2.5 2.5 6.5 2.5 9 0"></path>
-        </svg>
       </IconButton>
     </Tooltip>
   );