feat(core): impl team workspace (#8920)

AF-1738 AF-1735 AF-1731 AF-1721 AF-1717 AF-1736 AF-1727 AF-1719 AF-1877
UI for team workspaces :
- add upgrade to team & successful upgrade page ( `/upgrade-to-team` & `/upgrade-success/team`)
- update team plans on pricing page ( settings —> pricing plans )
- update reaching the usage/member limit modal
- update invite member modal
- update member CRUD options

packages/frontend/component/src/components/auth-components/auth-page-container.tsx

@@ -1,8 +1,14 @@
 import type { FC, PropsWithChildren, ReactNode } from 'react';
 
-import { Empty } from '../../ui/empty';
+import { ThemedImg } from '../../ui/themed-img';
 import { AffineOtherPageLayout } from '../affine-other-page-layout';
-import { authPageContainer, hideInSmallScreen } from './share.css';
+import illustrationDark from '../affine-other-page-layout/assets/other-page.dark.png';
+import illustrationLight from '../affine-other-page-layout/assets/other-page.light.png';
+import {
+  authPageContainer,
+  hideInSmallScreen,
+  illustration,
+} from './share.css';
 
 export const AuthPageContainer: FC<
   PropsWithChildren<{
@@ -20,7 +26,12 @@ export const AuthPageContainer: FC<
             {children}
           </div>
           <div className={hideInSmallScreen}>
-            <Empty />
+            <ThemedImg
+              draggable={false}
+              className={illustration}
+              lightSrc={illustrationLight}
+              darkSrc={illustrationDark}
+            />
           </div>
         </div>
       </div>

packages/frontend/component/src/components/auth-components/share.css.ts

@@ -159,14 +159,33 @@ export const authPageContainer = style({
 globalStyle(`${authPageContainer} .wrapper`, {
   display: 'flex',
   alignItems: 'center',
+  width: '100%',
+  justifyContent: 'center',
+  overflow: 'hidden',
   '@media': {
     'screen and (max-width: 1024px)': {
       flexDirection: 'column',
+      justifyContent: 'flex-start',
     },
   },
 });
 globalStyle(`${authPageContainer} .content`, {
-  maxWidth: '700px',
+  maxWidth: '810px',
+  '@media': {
+    'screen and (min-width: 1024px)': {
+      marginLeft: '200px',
+      minWidth: '500px',
+      marginRight: '60px',
+      flexGrow: 1,
+      flexShrink: 0,
+      flexBasis: 0,
+    },
+    'screen and (max-width: 1024px)': {
+      maxWidth: '600px',
+      width: '100%',
+      margin: 'auto',
+    },
+  },
 });
 globalStyle(`${authPageContainer} .title`, {
   fontSize: cssVar('fontTitle'),
@@ -203,3 +222,8 @@ export const hideInSmallScreen = style({
     },
   },
 });
+
+export const illustration = style({
+  flexShrink: 0,
+  width: '670px',
+});