fix: lint style

packages/app/src/components/contact-modal/index.tsx

@@ -91,8 +91,6 @@ export const ContactModal = ({
             <span>Alpha</span>
           </StyledModalHeaderLeft>
           <ModalCloseButton
-            top={6}
-            right={6}
             onClick={() => {
               onClose();
             }}

packages/app/src/components/delete-workspace/index.tsx

@@ -29,8 +29,6 @@ export const DeleteModal = ({
         <ModalWrapper width={620} height={334}>
           <Header>
             <ModalCloseButton
-              top={6}
-              right={6}
               onClick={() => {
                 onClose();
               }}

packages/app/src/components/edgeless-toolbar/index.tsx

@@ -14,8 +14,8 @@ import {
   UndoIcon,
   RedoIcon,
 } from './Icons';
+import { MuiSlide } from '@/ui/mui';
 import { Tooltip } from '@/ui/tooltip';
-import Slide from '@mui/material/Slide';
 import useCurrentPageMeta from '@/hooks/use-current-page-meta';
 import { useAppState } from '@/providers/app-state-provider';
 import useHistoryUpdated from '@/hooks/use-history-update';
@@ -127,7 +127,7 @@ export const EdgelessToolbar = () => {
   const { mode } = useCurrentPageMeta() || {};
 
   return (
-    <Slide
+    <MuiSlide
       direction="right"
       in={mode === 'edgeless'}
       mountOnEnter
@@ -155,7 +155,7 @@ export const EdgelessToolbar = () => {
         </StyledToolbarWrapper>
         <UndoRedo />
       </StyledEdgelessToolbar>
-    </Slide>
+    </MuiSlide>
   );
 };
 

packages/app/src/components/header/Header.tsx

@@ -6,7 +6,7 @@ import {
   StyledBrowserWarning,
   StyledCloseButton,
 } from './styles';
-import CloseIcon from '@mui/icons-material/Close';
+import { CloseIcon } from '@blocksuite/icons';
 import { useWarningMessage, shouldShowWarning } from './utils';
 import EditorOptionMenu from './header-right-items/EditorOptionMenu';
 import TrashButtonGroup from './header-right-items/TrashButtonGroup';

packages/app/src/components/help-island/index.tsx

@@ -6,7 +6,7 @@ import {
   StyledTransformIcon,
 } from './style';
 import { CloseIcon, ContactIcon, HelpIcon, KeyboardIcon } from './Icons';
-import Grow from '@mui/material/Grow';
+import { MuiGrow } from '@/ui/mui';
 import { Tooltip } from '@/ui/tooltip';
 import { useTranslation } from '@affine/i18n';
 import { useModal } from '@/providers/GlobalModalProvider';
@@ -35,7 +35,7 @@ export const HelpIsland = ({
           setShowContent(false);
         }}
       >
-        <Grow in={showContent}>
+        <MuiGrow in={showContent}>
           <StyledIslandWrapper>
             {showList.includes('contact') && (
               <Tooltip content={t('Contact Us')} placement="left-end">
@@ -66,7 +66,7 @@ export const HelpIsland = ({
               </Tooltip>
             )}
           </StyledIslandWrapper>
-        </Grow>
+        </MuiGrow>
 
         <div style={{ position: 'relative' }}>
           <StyledIconWrapper

packages/app/src/components/login-modal/index.tsx

@@ -14,8 +14,6 @@ export const LoginModal = ({ open, onClose }: LoginModalProps) => {
       <ModalWrapper width={560} height={292}>
         <Header>
           <ModalCloseButton
-            top={6}
-            right={6}
             onClick={() => {
               onClose();
             }}

packages/app/src/components/logout-modal/index.tsx

@@ -15,8 +15,6 @@ export const LogoutModal = ({ open, onClose }: LoginModalProps) => {
       <ModalWrapper width={560} height={292}>
         <Header>
           <ModalCloseButton
-            top={6}
-            right={6}
             onClick={() => {
               onClose(true);
             }}

packages/app/src/components/shortcuts-modal/index.tsx

@@ -13,7 +13,7 @@ import {
   useWindowsKeyboardShortcuts,
   useWinMarkdownShortcuts,
 } from '@/components/shortcuts-modal/config';
-import Slide from '@mui/material/Slide';
+import { MuiSlide } from '@/ui/mui';
 import { ModalCloseButton } from '@/ui/modal';
 import { getUaHelper } from '@/utils';
 import { useTranslation } from '@affine/i18n';
@@ -40,7 +40,7 @@ export const ShortcutsModal = ({ open, onClose }: ModalProps) => {
     : windowsKeyboardShortcuts;
 
   return createPortal(
-    <Slide direction="left" in={open} mountOnEnter unmountOnExit>
+    <MuiSlide direction="left" in={open} mountOnEnter unmountOnExit>
       <StyledShortcutsModal data-testid="shortcuts-modal">
         <>
           <StyledModalHeader>
@@ -81,7 +81,7 @@ export const ShortcutsModal = ({ open, onClose }: ModalProps) => {
           })}
         </>
       </StyledShortcutsModal>
-    </Slide>,
+    </MuiSlide>,
     document.body
   );
 };

packages/app/src/components/workspace-modal/Footer.tsx

@@ -0,0 +1,56 @@
+import { CloudInsyncIcon, LogOutIcon } from '@blocksuite/icons';
+import { Wrapper } from '@/ui/layout';
+import { WorkspaceAvatar } from '@/components/workspace-avatar';
+import { IconButton } from '@/ui/button';
+import { useAppState } from '@/providers/app-state-provider';
+import { StyledFooter, StyleUserInfo, StyleSignIn } from './styles';
+
+export const Footer = ({
+  onLogin,
+  onLogout,
+}: {
+  onLogin: () => void;
+  onLogout: () => void;
+}) => {
+  const { user } = useAppState();
+
+  return (
+    <StyledFooter>
+      {user && (
+        <>
+          <Wrapper>
+            <WorkspaceAvatar
+              size={40}
+              name={user.name}
+              avatar={user.avatar}
+            ></WorkspaceAvatar>
+            <StyleUserInfo>
+              <p>{user.name}</p>
+              <p>{user.email}</p>
+            </StyleUserInfo>
+          </Wrapper>
+          <IconButton
+            onClick={() => {
+              onLogout();
+            }}
+          >
+            <LogOutIcon />
+          </IconButton>
+        </>
+      )}
+
+      {!user && (
+        <StyleSignIn
+          onClick={async () => {
+            onLogin();
+          }}
+        >
+          <span>
+            <CloudInsyncIcon fontSize={16} />
+          </span>
+          Sign in to sync with AFFINE Cloud
+        </StyleSignIn>
+      )}
+    </StyledFooter>
+  );
+};

packages/app/src/components/workspace-modal/SelectLanguageMenu.tsx

@@ -0,0 +1,61 @@
+import { LOCALES } from '@affine/i18n';
+import { styled } from '@/styles';
+import { useTranslation } from '@affine/i18n';
+import { ArrowDownIcon } from '@blocksuite/icons';
+import { Button } from '@/ui/button';
+import { Menu, MenuItem } from '@/ui/menu';
+
+const LanguageMenuContent = () => {
+  const { i18n } = useTranslation();
+  const changeLanguage = (event: string) => {
+    i18n.changeLanguage(event);
+  };
+  return (
+    <>
+      {LOCALES.map(option => {
+        return (
+          <ListItem
+            key={option.name}
+            title={option.name}
+            onClick={() => {
+              changeLanguage(option.tag);
+            }}
+          >
+            {option.originalName}
+          </ListItem>
+        );
+      })}
+    </>
+  );
+};
+export const LanguageMenu = () => {
+  const { i18n } = useTranslation();
+
+  const currentLanguage = LOCALES.find(item => item.tag === i18n.language);
+
+  return (
+    <Menu
+      content={<LanguageMenuContent />}
+      placement="bottom"
+      trigger="click"
+      disablePortal={true}
+    >
+      <Button
+        icon={<ArrowDownIcon />}
+        iconPosition="end"
+        noBorder={true}
+        style={{ textTransform: 'capitalize' }}
+      >
+        {currentLanguage?.originalName}
+      </Button>
+    </Menu>
+  );
+};
+
+const ListItem = styled(MenuItem)(({ theme }) => ({
+  height: '38px',
+  color: theme.colors.popoverColor,
+  fontSize: theme.font.sm,
+  textTransform: 'capitalize',
+  padding: '0 24px',
+}));

packages/app/src/components/workspace-modal/WorkspaceCard.tsx

@@ -0,0 +1,69 @@
+import { WorkspaceUnitAvatar } from '@/components/workspace-avatar';
+import {
+  CloudIcon,
+  LocalIcon,
+  OfflineIcon,
+} from '@/components/workspace-modal/icons';
+import { PublishIcon, UsersIcon } from '@blocksuite/icons';
+import { WorkspaceUnit } from '@affine/datacenter';
+import { useAppState } from '@/providers/app-state-provider';
+import { StyleWorkspaceInfo, StyleWorkspaceTitle, StyledCard } from './styles';
+import { Wrapper } from '@/ui/layout';
+
+export const WorkspaceCard = ({
+  workspaceData,
+  onClick,
+}: {
+  workspaceData: WorkspaceUnit;
+  onClick: (data: WorkspaceUnit) => void;
+}) => {
+  const { currentWorkspace, isOwner } = useAppState();
+
+  return (
+    <StyledCard
+      onClick={() => {
+        onClick(workspaceData);
+      }}
+      active={workspaceData.id === currentWorkspace?.id}
+    >
+      <Wrapper>
+        <WorkspaceUnitAvatar size={58} workspaceUnit={workspaceData} />
+      </Wrapper>
+
+      <StyleWorkspaceInfo>
+        <StyleWorkspaceTitle>
+          {workspaceData.name || 'AFFiNE'}
+        </StyleWorkspaceTitle>
+        {isOwner ? (
+          workspaceData.provider === 'local' ? (
+            <p>
+              <LocalIcon />
+              Local Workspace
+            </p>
+          ) : (
+            <p>
+              <CloudIcon />
+              Cloud Workspace
+            </p>
+          )
+        ) : (
+          <p>
+            <UsersIcon fontSize={20} color={'#FF646B'} />
+            Joined Workspace
+          </p>
+        )}
+        {workspaceData.provider === 'local' && (
+          <p>
+            <OfflineIcon />
+            All data can be accessed offline
+          </p>
+        )}
+        {workspaceData.published && (
+          <p>
+            <PublishIcon fontSize={16} /> Published to Web
+          </p>
+        )}
+      </StyleWorkspaceInfo>
+    </StyledCard>
+  );
+};

packages/app/src/components/workspace-modal/index.tsx

@@ -1,33 +1,34 @@
-import { styled } from '@/styles';
-import { Modal, ModalWrapper } from '@/ui/modal';
-import { Button, IconButton } from '@/ui/button';
+import { Modal, ModalWrapper, ModalCloseButton } from '@/ui/modal';
+import { Wrapper } from '@/ui/layout';
 import { useState } from 'react';
 import { CreateWorkspaceModal } from '../create-workspace';
-import {
-  UsersIcon,
-  AddIcon,
-  LogOutIcon,
-  CloudInsyncIcon,
-  CloseIcon,
-} from '@blocksuite/icons';
-import {
-  WorkspaceAvatar,
-  WorkspaceUnitAvatar,
-} from '@/components/workspace-avatar';
+
+import { Tooltip } from '@/ui/tooltip';
+
+import { AddIcon, HelpCenterIcon } from '@blocksuite/icons';
+
 import { useAppState } from '@/providers/app-state-provider';
 import { useRouter } from 'next/router';
 import { useTranslation } from '@affine/i18n';
-import { LanguageMenu } from './languageMenu';
+import { LanguageMenu } from './SelectLanguageMenu';
 
-import {
-  CloudIcon,
-  LineIcon,
-  LocalIcon,
-  OfflineIcon,
-  PublishedIcon,
-} from './icons';
 import { LoginModal } from '../login-modal';
 import { LogoutModal } from '../logout-modal';
+import {
+  StyledCard,
+  StyledSplitLine,
+  StyleWorkspaceInfo,
+  StyleWorkspaceTitle,
+  StyledModalHeaderLeft,
+  StyledModalTitle,
+  StyledHelperContainer,
+  StyledModalContent,
+  StyledOperationWrapper,
+  StyleWorkspaceAdd,
+  StyledModalHeader,
+} from './styles';
+import { WorkspaceCard } from './WorkspaceCard';
+import { Footer } from './Footer';
 interface WorkspaceModalProps {
   open: boolean;
   onClose: () => void;
@@ -35,337 +36,115 @@ interface WorkspaceModalProps {
 
 export const WorkspaceModal = ({ open, onClose }: WorkspaceModalProps) => {
   const [createWorkspaceOpen, setCreateWorkspaceOpen] = useState(false);
-  const { workspaceList, currentWorkspace, user, logout, isOwner } =
-    useAppState();
+  const { workspaceList, logout } = useAppState();
   const router = useRouter();
   const { t } = useTranslation();
   const [loginOpen, setLoginOpen] = useState(false);
   const [logoutOpen, setLogoutOpen] = useState(false);
+
   return (
-    <div>
+    <>
       <Modal open={open} onClose={onClose}>
         <ModalWrapper
           width={720}
+          height={690}
           style={{
-            padding: '24px 40px',
             display: 'flex',
             flexDirection: 'column',
           }}
         >
-          <Header>
-            <ContentTitle>{t('My Workspaces')}</ContentTitle>
-            <HeaderOption>
-              <LanguageMenu />
-              <div
-                style={{
-                  display: 'inline-block',
-                  border: 'none',
-                  margin: '2px 16px',
-                  height: '24px',
-                  position: 'relative',
-                  top: '4px',
-                }}
+          <StyledModalHeader>
+            <StyledModalHeaderLeft>
+              <StyledModalTitle>{t('My Workspaces')}</StyledModalTitle>
+              <Tooltip
+                content={t(
+                  'A workspace is your virtual space to capture, create and plan as just one person or together as a team.'
+                )}
+                placement="top-start"
+                disablePortal={true}
               >
-                <LineIcon></LineIcon>
-              </div>
+                <StyledHelperContainer>
+                  <HelpCenterIcon />
+                </StyledHelperContainer>
+              </Tooltip>
+            </StyledModalHeaderLeft>
 
-              <Button
-                style={{ border: 'none', padding: 0 }}
+            <StyledOperationWrapper>
+              <LanguageMenu />
+              <StyledSplitLine />
+              <ModalCloseButton
                 onClick={() => {
                   onClose();
                 }}
-              >
-                <CloseIcon></CloseIcon>
-              </Button>
-            </HeaderOption>
-          </Header>
-          <Content>
-            <WorkspaceList>
-              {workspaceList.map((item, index) => {
-                return (
-                  <WorkspaceItem
-                    onClick={() => {
-                      router.replace(`/workspace/${item.id}`);
-                      onClose();
-                    }}
-                    active={item.id === currentWorkspace?.id}
-                    key={index}
-                  >
-                    <div>
-                      <WorkspaceUnitAvatar size={58} workspaceUnit={item} />
-                    </div>
+                absolute={false}
+              />
+            </StyledOperationWrapper>
+          </StyledModalHeader>
 
-                    <StyleWorkspaceInfo>
-                      <StyleWorkspaceTitle>
-                        {item.name || 'AFFiNE'}
-                      </StyleWorkspaceTitle>
-                      {isOwner ? (
-                        item.provider === 'local' ? (
-                          <p>
-                            <LocalIcon />
-                            Local Workspace
-                          </p>
-                        ) : (
-                          <p>
-                            <CloudIcon />
-                            Cloud Workspace
-                          </p>
-                        )
-                      ) : (
-                        <p>
-                          <UsersIcon fontSize={20} color={'#FF646B'} />
-                          Joined Workspace
-                        </p>
-                      )}
-                      {item.provider === 'local' && (
-                        <p>
-                          <OfflineIcon />
-                          All data can be accessed offline
-                        </p>
-                      )}
-                      {item.published && (
-                        <p>
-                          <PublishedIcon /> Published to Web
-                        </p>
-                      )}
-                    </StyleWorkspaceInfo>
-                  </WorkspaceItem>
-                );
-              })}
-              <WorkspaceItem
-                onClick={() => {
-                  setCreateWorkspaceOpen(true);
-                }}
-              >
-                <div>
-                  <StyleWorkspaceAdd className="add-icon">
-                    <AddIcon fontSize={18} />
-                  </StyleWorkspaceAdd>
-                </div>
+          <StyledModalContent>
+            {workspaceList.map((item, index) => {
+              return (
+                <WorkspaceCard
+                  workspaceData={item}
+                  onClick={workspaceData => {
+                    router.replace(`/workspace/${workspaceData.id}`);
+                    onClose();
+                  }}
+                  key={index}
+                ></WorkspaceCard>
+              );
+            })}
+            <StyledCard
+              onClick={() => {
+                setCreateWorkspaceOpen(true);
+              }}
+            >
+              <Wrapper>
+                <StyleWorkspaceAdd className="add-icon">
+                  <AddIcon fontSize={18} />
+                </StyleWorkspaceAdd>
+              </Wrapper>
 
-                <StyleWorkspaceInfo>
-                  <StyleWorkspaceTitle>New workspace</StyleWorkspaceTitle>
-                  <p>Crete or import</p>
-                </StyleWorkspaceInfo>
-              </WorkspaceItem>
-            </WorkspaceList>
-            {/* <p style={{ fontSize: '14px', color: '#ccc', margin: '12px 0' }}>
-              {t('Tips')}
-              {t('Workspace description')}
-            </p> */}
-          </Content>
-          <LoginModal
-            open={loginOpen}
-            onClose={() => {
-              setLoginOpen(false);
+              <StyleWorkspaceInfo>
+                <StyleWorkspaceTitle>New workspace</StyleWorkspaceTitle>
+                <p>Crete or import</p>
+              </StyleWorkspaceInfo>
+            </StyledCard>
+          </StyledModalContent>
+
+          <Footer
+            onLogin={() => {
+              setLoginOpen(true);
             }}
-          ></LoginModal>
-          <Footer>
-            {!user ? (
-              <StyleSignIn
-                onClick={async () => {
-                  setLoginOpen(true);
-                }}
-              >
-                <span>
-                  <CloudInsyncIcon fontSize={16} />
-                </span>
-                Sign in to sync with AFFINE Cloud
-              </StyleSignIn>
-            ) : (
-              <div style={{ display: 'flex' }}>
-                <div style={{ paddingTop: '20px' }}>
-                  <WorkspaceAvatar
-                    size={40}
-                    name={user.name}
-                    avatar={user.avatar}
-                  ></WorkspaceAvatar>
-                </div>
-                <StyleUserInfo style={{}}>
-                  <p>{user.name}</p>
-                  <p>{user.email}</p>
-                </StyleUserInfo>
-                <div style={{ paddingTop: '25px' }}>
-                  <IconButton
-                    onClick={() => {
-                      setLogoutOpen(true);
-                      // confirm({
-                      //   title: 'Sign out?',
-                      //   content: `All data has been stored in the cloud. `,
-                      //   confirmText: 'Sign out',
-                      //   cancelText: 'Cancel',
-                      // }).then(async confirm => {
-                      //   // if (confirm) {
-                      //   //   if (user) {
-                      //   //     await logout();
-                      //   //     router.replace(`/workspace`);
-                      //   //     toast('Enabled success');
-                      //   //   }
-                      //   // }
-                      // });
-                    }}
-                  >
-                    <LogOutIcon></LogOutIcon>
-                  </IconButton>
-                </div>
-              </div>
-            )}
-          </Footer>
-          <CreateWorkspaceModal
-            open={createWorkspaceOpen}
-            onClose={() => {
-              setCreateWorkspaceOpen(false);
+            onLogout={() => {
+              setLogoutOpen(true);
             }}
-          ></CreateWorkspaceModal>
-          <LogoutModal
-            open={logoutOpen}
-            onClose={async wait => {
-              if (!wait) {
-                await logout();
-                router.replace(`/workspace`);
-              }
-              setLogoutOpen(false);
-            }}
-          ></LogoutModal>
+          />
         </ModalWrapper>
       </Modal>
-    </div>
+
+      <LoginModal
+        open={loginOpen}
+        onClose={() => {
+          setLoginOpen(false);
+        }}
+      />
+      <LogoutModal
+        open={logoutOpen}
+        onClose={async wait => {
+          if (!wait) {
+            await logout();
+            router.replace(`/workspace`);
+          }
+          setLogoutOpen(false);
+        }}
+      />
+      <CreateWorkspaceModal
+        open={createWorkspaceOpen}
+        onClose={() => {
+          setCreateWorkspaceOpen(false);
+        }}
+      />
+    </>
   );
 };
-
-const Header = styled('div')({
-  display: 'flex',
-});
-
-const Content = styled('div')({
-  flexDirection: 'column',
-  alignItems: 'center',
-  gap: '16px',
-  flex: 1,
-});
-const HeaderOption = styled.div(() => {
-  return {
-    marginLeft: '16px',
-  };
-});
-const ContentTitle = styled('div')({
-  fontSize: '20px',
-  lineHeight: '24px',
-  fontWeight: 600,
-  textAlign: 'left',
-  flex: 1,
-});
-
-const WorkspaceList = styled('div')({
-  maxHeight: '500px',
-  overflow: 'auto',
-  display: 'grid',
-  gridRowGap: '24px',
-  gridColumnGap: '24px',
-  fontSize: '16px',
-  marginTop: '36px',
-  gridTemplateColumns: 'repeat(2, 1fr)',
-});
-
-export const WorkspaceItem = styled.div<{
-  active?: boolean;
-}>(({ theme, active }) => {
-  const borderColor = active ? theme.colors.primaryColor : 'transparent';
-  return {
-    cursor: 'pointer',
-    padding: '16px',
-    height: '124px',
-    boxShadow: theme.shadow.modal,
-    display: 'flex',
-    borderRadius: '12px',
-    border: `1px solid ${borderColor}`,
-    ':hover': {
-      background: theme.colors.hoverBackground,
-      '.add-icon': {
-        border: `1.5px dashed ${theme.colors.primaryColor}`,
-        svg: {
-          fill: theme.colors.primaryColor,
-        },
-      },
-    },
-  };
-});
-
-const StyleWorkspaceInfo = styled.div(({ theme }) => {
-  return {
-    marginLeft: '16px',
-    p: {
-      fontSize: theme.font.xs,
-      lineHeight: '16px',
-    },
-    svg: {
-      verticalAlign: 'text-bottom',
-      marginRight: '8px',
-    },
-  };
-});
-
-const StyleWorkspaceTitle = styled.div(({ theme }) => {
-  return {
-    fontSize: theme.font.base,
-    fontWeight: 600,
-    lineHeight: '24px',
-    marginBottom: '8px',
-  };
-});
-
-const StyleWorkspaceAdd = styled.div(() => {
-  return {
-    width: '58px',
-    height: '58px',
-    borderRadius: '100%',
-    textAlign: 'center',
-    background: '#f4f5fa',
-    border: '1.5px dashed #f4f5fa',
-    lineHeight: '58px',
-    marginTop: '2px',
-  };
-});
-
-const Footer = styled('div')({
-  paddingTop: '16px',
-});
-
-const StyleUserInfo = styled.div(({ theme }) => {
-  return {
-    textAlign: 'left',
-    marginLeft: '16px',
-    marginTop: '16px',
-    flex: 1,
-    p: {
-      lineHeight: '24px',
-      color: theme.colors.iconColor,
-    },
-    'p:nth-child(1)': {
-      color: theme.colors.textColor,
-      fontWeight: 600,
-    },
-  };
-});
-
-const StyleSignIn = styled.div(({ theme }) => {
-  return {
-    cursor: 'pointer',
-    fontSize: '16px',
-    fontWeight: 700,
-    color: theme.colors.iconColor,
-    span: {
-      display: 'inline-block',
-      width: '40px',
-      height: '40px',
-      borderRadius: '40px',
-      backgroundColor: theme.colors.innerHoverBackground,
-      textAlign: 'center',
-      lineHeight: '44px',
-      marginRight: '16px',
-      svg: {
-        fill: theme.colors.primaryColor,
-      },
-    },
-  };
-});

packages/app/src/components/workspace-modal/languageMenu.tsx

@@ -1,93 +0,0 @@
-import { LOCALES } from '@affine/i18n';
-import { TooltipProps } from '@mui/material';
-import { styled } from '@/styles';
-import { Tooltip } from '@mui/material';
-import { useState } from 'react';
-import { useTranslation } from '@affine/i18n';
-import { ArrowDownIcon } from '@blocksuite/icons';
-import { Button } from '@/ui/button';
-
-export const LanguageMenu = () => {
-  const { i18n } = useTranslation();
-  const changeLanguage = (event: string) => {
-    i18n.changeLanguage(event);
-  };
-  const [show, setShow] = useState(false);
-  const currentLanguage = LOCALES.find(item => item.tag === i18n.language);
-  const [languageName, setLanguageName] = useState(
-    currentLanguage?.originalName
-  );
-  return (
-    <StyledTooltip
-      title={
-        <>
-          {LOCALES.map(option => {
-            return (
-              <ListItem
-                style={{ border: 'none' }}
-                key={option.name}
-                title={option.name}
-                onClick={() => {
-                  changeLanguage(option.tag);
-                  setShow(false);
-                  setLanguageName(option.originalName);
-                }}
-              >
-                {option.originalName}
-              </ListItem>
-            );
-          })}
-        </>
-      }
-      open={show}
-    >
-      <StyledTitleButton
-        style={{ border: 'none', padding: '0px' }}
-        onClick={() => {
-          setShow(!show);
-        }}
-      >
-        <StyledContainer>
-          <StyledText>{languageName}</StyledText>
-          <ArrowDownIcon fontSize={18} />
-        </StyledContainer>
-      </StyledTitleButton>
-    </StyledTooltip>
-  );
-};
-
-const StyledContainer = styled('div')(() => ({
-  display: 'flex',
-  alignItems: 'center',
-}));
-
-const StyledText = styled('span')(({ theme }) => ({
-  marginRight: '4px',
-  marginLeft: '16px',
-  fontSize: theme.font.sm,
-  fontWeight: '500',
-  textTransform: 'capitalize',
-}));
-const StyledTooltip = styled(({ className, ...props }: TooltipProps) => (
-  <Tooltip {...props} classes={{ popper: className }} />
-))(({ theme }) => ({
-  zIndex: theme.zIndex.modal,
-  '& .MuiTooltip-tooltip': {
-    backgroundColor: theme.colors.popoverBackground,
-    boxShadow: theme.shadow.modal,
-    color: theme.colors.popoverColor,
-  },
-}));
-
-const ListItem = styled(Button)(({ theme }) => ({
-  display: 'block',
-  width: '100%',
-  color: theme.colors.popoverColor,
-  fontSize: theme.font.sm,
-  textTransform: 'capitalize',
-}));
-
-const StyledTitleButton = styled(Button)(({ theme }) => ({
-  color: theme.colors.popoverColor,
-  fontSize: theme.font.sm,
-}));

packages/app/src/components/workspace-modal/styles.ts

@@ -1,38 +1,161 @@
 import { displayFlex, styled } from '@/styles';
 
-export const StyledTitle = styled.div(() => {
+export const StyledSplitLine = styled.div(({ theme }) => {
   return {
-    ...displayFlex('center', 'center'),
-    fontSize: '20px',
-    fontWeight: 500,
-    marginTop: '60px',
-    lineHeight: 1,
+    width: '1px',
+    height: '20px',
+    background: theme.colors.iconColor,
+    marginRight: '24px',
   };
 });
 
-export const StyledContent = styled.div(() => {
+export const StyleWorkspaceInfo = styled.div(({ theme }) => {
   return {
-    padding: '0 40px',
-    marginTop: '32px',
-    fontSize: '18px',
-    lineHeight: '25px',
-    'p:not(last-of-type)': {
-      marginBottom: '10px',
+    marginLeft: '15px',
+    p: {
+      height: '20px',
+      fontSize: theme.font.xs,
+      ...displayFlex('flex-start', 'center'),
+    },
+    svg: {
+      marginRight: '10px',
     },
   };
 });
 
-export const StyledButton = styled.div(({ theme }) => {
+export const StyleWorkspaceTitle = styled.div(({ theme }) => {
   return {
-    width: '146px',
-    height: '42px',
-    background: theme.colors.primaryColor,
-    color: '#FFFFFF',
-    fontSize: '18px',
-    fontWeight: 500,
-    borderRadius: '21px',
-    margin: '52px auto 0',
+    fontSize: theme.font.base,
+    fontWeight: 600,
+    lineHeight: '24px',
+    marginBottom: '10px',
+  };
+});
+
+export const StyledCard = styled.div<{
+  active?: boolean;
+}>(({ theme, active }) => {
+  const borderColor = active ? theme.colors.primaryColor : 'transparent';
+  return {
+    width: '310px',
+    height: '124px',
     cursor: 'pointer',
+    padding: '16px',
+    boxShadow: '0px 0px 8px rgba(0, 0, 0, 0.1)',
+    borderRadius: '12px',
+    border: `1px solid ${borderColor}`,
+    ...displayFlex('flex-start', 'flex-start'),
+    ':hover': {
+      background: theme.colors.hoverBackground,
+      '.add-icon': {
+        border: `1.5px dashed ${theme.colors.primaryColor}`,
+        svg: {
+          fill: theme.colors.primaryColor,
+        },
+      },
+    },
+  };
+});
+
+export const StyledFooter = styled('div')({
+  height: '84px',
+  padding: '0 40px',
+  ...displayFlex('space-between', 'center'),
+});
+
+export const StyleUserInfo = styled.div(({ theme }) => {
+  return {
+    textAlign: 'left',
+    marginLeft: '16px',
+    flex: 1,
+    p: {
+      lineHeight: '24px',
+      color: theme.colors.iconColor,
+    },
+    'p:nth-child(1)': {
+      color: theme.colors.textColor,
+      fontWeight: 600,
+    },
+  };
+});
+
+export const StyleSignIn = styled.div(({ theme }) => {
+  return {
+    cursor: 'pointer',
+    fontSize: '16px',
+    fontWeight: 700,
+    color: theme.colors.iconColor,
+    span: {
+      display: 'inline-block',
+      width: '40px',
+      height: '40px',
+      borderRadius: '40px',
+      backgroundColor: theme.colors.innerHoverBackground,
+      textAlign: 'center',
+      lineHeight: '44px',
+      marginRight: '16px',
+      svg: {
+        fill: theme.colors.primaryColor,
+      },
+    },
+  };
+});
+
+export const StyledModalHeaderLeft = styled.div(() => {
+  return { ...displayFlex('flex-start', 'center') };
+});
+export const StyledModalTitle = styled.div(({ theme }) => {
+  return {
+    fontWeight: 600,
+    fontSize: theme.font.h6,
+  };
+});
+
+export const StyledHelperContainer = styled.div(({ theme }) => {
+  return {
+    color: theme.colors.iconColor,
+    marginLeft: '15px',
+    fontWeight: 400,
     ...displayFlex('center', 'center'),
   };
 });
+
+export const StyledModalContent = styled('div')({
+  height: '534px',
+  padding: '8px 40px',
+  marginTop: '72px',
+  overflow: 'auto',
+  ...displayFlex('space-between', 'flex-start', 'column'),
+  flexWrap: 'wrap',
+});
+export const StyledOperationWrapper = styled.div(() => {
+  return {
+    ...displayFlex('flex-end', 'center'),
+  };
+});
+
+export const StyleWorkspaceAdd = styled.div(() => {
+  return {
+    width: '58px',
+    height: '58px',
+    borderRadius: '100%',
+    textAlign: 'center',
+    background: '#f4f5fa',
+    border: '1.5px dashed #f4f5fa',
+    lineHeight: '58px',
+    marginTop: '2px',
+  };
+});
+export const StyledModalHeader = styled('div')(({ theme }) => {
+  return {
+    width: '100%',
+    height: '72px',
+    position: 'absolute',
+    left: 0,
+    top: 0,
+    background: theme.colors.pageBackground,
+    borderRadius: '24px 24px 0 0',
+    padding: '0 40px',
+    ...displayFlex('space-between', 'center'),
+  };
+});

packages/app/src/components/workspace-setting/general/style.ts

@@ -1,5 +1,5 @@
 import { displayFlex, styled } from '@/styles';
-import MuiAvatar from '@mui/material/Avatar';
+import { MuiAvatar } from '@/ui/mui';
 import IconButton from '@/ui/button/IconButton';
 import Input from '@/ui/input';
 

packages/app/src/components/workspace-setting/member/InviteMemberModal.tsx

@@ -4,7 +4,7 @@ import { Modal, ModalWrapper, ModalCloseButton } from '@/ui/modal';
 import { Button } from '@/ui/button';
 import Input from '@/ui/input';
 import { useState } from 'react';
-import { Avatar } from '@mui/material';
+import { MuiAvatar } from '@/ui/mui';
 import useMembers from '@/hooks/use-members';
 import { User } from '@affine/datacenter';
 import { useTranslation } from '@affine/i18n';
@@ -76,8 +76,6 @@ export const InviteMemberModal = ({
         <ModalWrapper width={460} height={236}>
           <Header>
             <ModalCloseButton
-              top={6}
-              right={6}
               onClick={() => {
                 onClose();
               }}
@@ -102,7 +100,7 @@ export const InviteMemberModal = ({
                   ) : (
                     <Member>
                       {userData?.avatar ? (
-                        <Avatar src={userData?.avatar}></Avatar>
+                        <MuiAvatar src={userData?.avatar}></MuiAvatar>
                       ) : (
                         <MemberIcon>
                           <EmailIcon></EmailIcon>

packages/app/src/components/workspace-setting/member/style.ts

@@ -1,5 +1,5 @@
 import { styled } from '@/styles';
-import MuiAvatar from '@mui/material/Avatar';
+import { MuiAvatar } from '@/ui/mui';
 
 export const StyledMemberTitleContainer = styled('li')(() => {
   return {

packages/app/src/components/workspace-slider-bar/WorkspaceSelector/WorkspaceItem/styles.ts

@@ -1,4 +1,4 @@
-import MuiAvatar from '@mui/material/Avatar';
+import { MuiAvatar } from '@/ui/mui';
 import { styled } from '@/styles';
 
 export const WorkspaceItemWrapper = styled('div')(({ theme }) => ({

packages/app/src/components/workspace-slider-bar/WorkspaceSelector/styles.ts

@@ -1,4 +1,4 @@
-import MuiAvatar from '@mui/material/Avatar';
+import { MuiAvatar } from '@/ui/mui';
 import { styled } from '@/styles';
 import { StyledPopperContainer } from '@/ui/shared/Container';
 

packages/app/src/components/workspace-slider-bar/index.tsx

@@ -11,7 +11,6 @@ import {
   StyledSubListItem,
 } from './style';
 import { Arrow } from './icons';
-import Collapse from '@mui/material/Collapse';
 import {
   ArrowDownIcon,
   SearchIcon,
@@ -22,6 +21,7 @@ import {
   SettingsIcon,
 } from '@blocksuite/icons';
 import Link from 'next/link';
+import { MuiCollapse } from '@/ui/mui';
 import { Tooltip } from '@/ui/tooltip';
 import { useModal } from '@/providers/GlobalModalProvider';
 import { useAppState } from '@/providers/app-state-provider';
@@ -38,7 +38,7 @@ const FavoriteList = ({ showList }: { showList: boolean }) => {
   const { t } = useTranslation();
   const favoriteList = pageList.filter(p => p.favorite && !p.trash);
   return (
-    <Collapse in={showList}>
+    <MuiCollapse in={showList}>
       {favoriteList.map((pageMeta, index) => {
         const active = router.query.pageId === pageMeta.id;
         return (
@@ -60,7 +60,7 @@ const FavoriteList = ({ showList }: { showList: boolean }) => {
       {favoriteList.length === 0 && (
         <StyledSubListItem disable={true}>{t('No item')}</StyledSubListItem>
       )}
-    </Collapse>
+    </MuiCollapse>
   );
 };
 export const WorkSpaceSliderBar = () => {

packages/app/src/pages/invite/[invite_code].tsx

@@ -1,7 +1,6 @@
 import { useWorkspaceHelper } from '@/hooks/use-workspace-helper';
 import { styled } from '@/styles';
 import { Empty } from '@/ui/empty';
-// import { Avatar } from '@mui/material';
 import { useRouter } from 'next/router';
 import { useEffect, useState } from 'react';
 

packages/app/src/styles/helper.ts

@@ -117,3 +117,29 @@ export const textEllipsis = (lineNum = 1): CSSProperties => {
     whiteSpace: 'nowrap',
   };
 };
+
+export const positionAbsolute = ({
+  left,
+  top,
+  right,
+  bottom,
+}: {
+  left?: CSSProperties['left'];
+  top?: CSSProperties['top'];
+  right?: CSSProperties['right'];
+  bottom?: CSSProperties['bottom'];
+}): {
+  position: CSSProperties['position'];
+  left: CSSProperties['left'];
+  top: CSSProperties['top'];
+  right: CSSProperties['right'];
+  bottom: CSSProperties['bottom'];
+} => {
+  return {
+    position: 'absolute',
+    left,
+    top,
+    right,
+    bottom,
+  };
+};

packages/app/src/ui/button/Button.tsx

@@ -15,16 +15,26 @@ export const Button = forwardRef<HTMLButtonElement, ButtonProps>(
       hoverStyle,
       shape = 'default',
       icon,
+      iconPosition = 'start',
       type = 'default',
       children,
       bold = false,
       loading = false,
+      noBorder = false,
       ...props
     },
     ref
   ) => {
     const { iconSize } = getSize(size);
 
+    const iconElement =
+      icon &&
+      cloneElement(Children.only(icon), {
+        width: iconSize,
+        height: iconSize,
+        className: `affine-button-icon ${icon.props.className ?? ''}`,
+      });
+
     return (
       <StyledButton
         ref={ref}
@@ -38,19 +48,16 @@ export const Button = forwardRef<HTMLButtonElement, ButtonProps>(
         // @ts-ignore
         type={type}
         bold={bold}
+        noBorder={noBorder}
         {...props}
       >
         {loading ? (
           <Loading type={type}></Loading>
         ) : (
           <>
-            {icon &&
-              cloneElement(Children.only(icon), {
-                width: iconSize,
-                height: iconSize,
-                className: `affine-button-icon ${icon.props.className ?? ''}`,
-              })}
+            {iconPosition === 'start' && iconElement}
             {children && <span>{children}</span>}
+            {iconPosition === 'end' && iconElement}
           </>
         )}
       </StyledButton>

packages/app/src/ui/button/interface.ts

@@ -17,8 +17,10 @@ export type ButtonProps = PropsWithChildren &
     hoverColor?: CSSProperties['color'];
     hoverStyle?: CSSProperties;
     icon?: ReactElement;
+    iconPosition?: 'start' | 'end';
     shape?: 'default' | 'round' | 'circle';
     type?: 'primary' | 'warning' | 'danger' | 'default';
     bold?: boolean;
     loading?: boolean;
+    noBorder?: boolean;
   };

packages/app/src/ui/button/styles.ts

@@ -149,6 +149,7 @@ export const StyledButton = styled('button', {
       'hoverStyle',
       'type',
       'bold',
+      'noBorder',
     ].includes(prop);
   },
 })<
@@ -162,6 +163,7 @@ export const StyledButton = styled('button', {
     | 'shape'
     | 'type'
     | 'bold'
+    | 'noBorder'
   >
 >(
   ({
@@ -174,6 +176,7 @@ export const StyledButton = styled('button', {
     bold = false,
     shape = 'default',
     type = 'default',
+    noBorder = false,
   }) => {
     const { fontSize, borderRadius, padding, height } = getSize(size);
 
@@ -181,7 +184,7 @@ export const StyledButton = styled('button', {
       height,
       paddingLeft: padding,
       paddingRight: padding,
-      border: '1px solid',
+      border: noBorder ? 'none' : '1px solid',
       ...displayInlineFlex('center', 'center'),
       position: 'relative',
       // TODO: disabled color is not decided

packages/app/src/ui/modal/ModalCloseButton.tsx

@@ -5,6 +5,7 @@ import { styled } from '@/styles';
 export type ModalCloseButtonProps = {
   top?: number;
   right?: number;
+  absolute?: boolean;
 } & Omit<IconButtonProps, 'children'> &
   HTMLAttributes<HTMLButtonElement>;
 
@@ -13,16 +14,23 @@ const StyledIconButton = styled(IconButton)<
 >(({ top, right }) => {
   return {
     position: 'absolute',
-    top: top ?? 6,
-    right: right ?? 6,
+    top: top ?? 24,
+    right: right ?? 40,
   };
 });
 
-export const ModalCloseButton = ({ ...props }: ModalCloseButtonProps) => {
-  return (
+export const ModalCloseButton = ({
+  absolute = true,
+  ...props
+}: ModalCloseButtonProps) => {
+  return absolute ? (
     <StyledIconButton {...props}>
       <CloseIcon />
     </StyledIconButton>
+  ) : (
+    <IconButton>
+      <CloseIcon />
+    </IconButton>
   );
 };
 

packages/app/src/ui/modal/ModalWrapper.tsx

@@ -11,7 +11,7 @@ export const ModalWrapper = styled.div<{
     height,
     minHeight,
     backgroundColor: theme.colors.popoverBackground,
-    borderRadius: '12px',
+    borderRadius: '24px',
     position: 'relative',
   };
 });

packages/app/src/ui/mui.ts

@@ -0,0 +1,7 @@
+import MuiBreadcrumbs from '@mui/material/Breadcrumbs';
+import MuiCollapse from '@mui/material/Collapse';
+import MuiSlide from '@mui/material/Slide';
+import MuiAvatar from '@mui/material/Avatar';
+import MuiGrow from '@mui/material/Grow';
+
+export { MuiBreadcrumbs, MuiCollapse, MuiSlide, MuiAvatar, MuiGrow };

packages/app/src/ui/tooltip/Tooltip.tsx

@@ -5,6 +5,7 @@ import type { TooltipProps } from '@mui/material';
 
 const StyledTooltip = styled(StyledPopperContainer)(({ theme }) => {
   return {
+    maxWidth: '320px',
     boxShadow: theme.shadow.tooltip,
     padding: '4px 12px',
     backgroundColor: theme.colors.tooltipBackground,