refactor: delete page style (#4347)

Co-authored-by: Alex Yang <himself65@outlook.com>

packages/component/src/components/app-sidebar/sidebar-header/sidebar-switch.css.ts

@@ -11,6 +11,7 @@ export const sidebarSwitch = style({
       opacity: 1,
       width: '32px',
       flexShrink: 0,
+      fontSize: '24px',
       pointerEvents: 'auto',
     },
   },

packages/component/src/components/workspace/index.css.ts

@@ -86,6 +86,12 @@ export const mainContainerStyle = style({
     '&[data-show-padding="true"][data-is-macos="true"]': {
       borderRadius: '6px',
     },
+    '&[data-in-trash-page="true"]': {
+      marginBottom: '66px',
+    },
+    '&[data-in-trash-page="true"][data-show-padding="true"]': {
+      marginBottom: '66px',
+    },
     '&[data-show-padding="true"]:before': {
       content: '""',
       position: 'absolute',
@@ -151,4 +157,20 @@ export const toolStyle = style({
       display: 'none',
     },
   },
+  selectors: {
+    '&[data-in-trash-page="true"]': {
+      bottom: '70px',
+      '@media': {
+        [breakpoints.down('md', true)]: {
+          bottom: '80px',
+        },
+        [breakpoints.down('sm', true)]: {
+          bottom: '85px',
+        },
+        print: {
+          display: 'none',
+        },
+      },
+    },
+  },
 });

packages/component/src/components/workspace/index.tsx

@@ -35,13 +35,14 @@ export const AppContainer = ({
 export interface MainContainerProps extends HTMLAttributes<HTMLDivElement> {
   className?: string;
   padding?: boolean;
+  inTrashPage?: boolean;
 }
 
 export const MainContainer = forwardRef<
   HTMLDivElement,
   PropsWithChildren<MainContainerProps>
 >(function MainContainer(
-  { className, padding, children, ...props },
+  { className, padding, inTrashPage, children, ...props },
   ref
 ): ReactElement {
   return (
@@ -50,6 +51,7 @@ export const MainContainer = forwardRef<
       className={clsx(mainContainerStyle, className)}
       data-is-macos={environment.isDesktop && environment.isMacOs}
       data-show-padding={!!padding}
+      data-in-trash-page={!!inTrashPage}
       ref={ref}
     >
       {children}
@@ -59,8 +61,14 @@ export const MainContainer = forwardRef<
 
 MainContainer.displayName = 'MainContainer';
 
-export const ToolContainer = (props: PropsWithChildren): ReactElement => {
-  return <div className={toolStyle}>{props.children}</div>;
+export const ToolContainer = (
+  props: PropsWithChildren & { inTrashPage: boolean }
+): ReactElement => {
+  return (
+    <div className={toolStyle} data-in-trash-page={!!props.inTrashPage}>
+      {props.children}
+    </div>
+  );
 };
 
 export const WorkspaceFallback = (): ReactElement => {