feat: enhance root div styles (#2295)

apps/web/src/pages/_debug/broadcast.dev.tsx

@@ -1,4 +1,5 @@
 import { Button } from '@affine/component';
+import { AppContainer, MainContainer } from '@affine/component/workspace';
 import { DebugLogger } from '@affine/debug';
 import { createBroadCastChannelProvider } from '@affine/workspace/providers';
 import type { BroadCastChannelProvider } from '@affine/workspace/type';
@@ -10,7 +11,6 @@ import type React from 'react';
 import { useEffect, useMemo, useState } from 'react';
 
 import { BlockSuitePageList } from '../../components/blocksuite/block-suite-page-list';
-import { StyledPage, StyledWrapper } from '../../layouts/styles';
 import { toast } from '../../utils';
 
 const logger = new DebugLogger('broadcast');
@@ -44,8 +44,8 @@ const BroadcastPage: React.FC = () => {
     return null;
   }
   return (
-    <StyledPage>
-      <StyledWrapper>
+    <AppContainer>
+      <MainContainer>
         <Typography variant="h5">Broadcast Provider Test</Typography>
         <Button
           type="primary"
@@ -64,8 +64,8 @@ const BroadcastPage: React.FC = () => {
             toast('do nothing');
           }}
         />
-      </StyledWrapper>
-    </StyledPage>
+      </MainContainer>
+    </AppContainer>
   );
 };
 

apps/web/src/pages/_debug/init-page.dev.tsx

@@ -1,8 +1,8 @@
+import { AppContainer, MainContainer } from '@affine/component/workspace';
 import { initPage } from '@affine/env/blocksuite';
 import { useRouter } from 'next/router';
 import { lazy, Suspense } from 'react';
 
-import { StyledPage, StyledWrapper } from '../../layouts/styles';
 import type { NextPageWithLayout } from '../../shared';
 
 const Editor = lazy(() =>
@@ -23,14 +23,14 @@ const InitPagePage: NextPageWithLayout = () => {
     testType = 'empty';
   }
   return (
-    <StyledPage>
-      <StyledWrapper>
+    <AppContainer>
+      <MainContainer>
         <Suspense>
           <Editor onInit={initPage} testType={testType} />
         </Suspense>
         <div id="toolWrapper" />
-      </StyledWrapper>
-    </StyledPage>
+      </MainContainer>
+    </AppContainer>
   );
 };
 

apps/web/src/pages/_debug/login.dev.tsx

@@ -1,4 +1,5 @@
 import { Button } from '@affine/component';
+import { AppContainer, MainContainer } from '@affine/component/workspace';
 import { currentAffineUserAtom } from '@affine/workspace/affine/atom';
 import {
   clearLoginStorage,
@@ -21,14 +22,12 @@ const Viewer = lazy(() =>
 
 import { useTheme } from 'next-themes';
 
-import { StyledPage, StyledWrapper } from '../../layouts/styles';
-
 const LoginDevPage: NextPage = () => {
   const [user, setUser] = useAtom(currentAffineUserAtom);
   const auth = useMemo(() => createAffineAuth(), []);
   return (
-    <StyledPage>
-      <StyledWrapper>
+    <AppContainer>
+      <MainContainer>
         <h1>LoginDevPage</h1>
         <Button
           onClick={async () => {
@@ -97,8 +96,8 @@ const LoginDevPage: NextPage = () => {
             value={user}
           />
         </Suspense>
-      </StyledWrapper>
-    </StyledPage>
+      </MainContainer>
+    </AppContainer>
   );
 };