fix: remove mui theme provider (#2055)

apps/web/src/components/affine/pinboard/pinboard-render/OperationButton.tsx

@@ -1,4 +1,9 @@
-import { MenuItem, MuiClickAwayListener, PureMenu } from '@affine/component';
+import {
+  baseTheme,
+  MenuItem,
+  MuiClickAwayListener,
+  PureMenu,
+} from '@affine/component';
 import { useTranslation } from '@affine/i18n';
 import {
   MoreVerticalIcon,
@@ -7,7 +12,6 @@ import {
   PlusIcon,
 } from '@blocksuite/icons';
 import type { PageMeta } from '@blocksuite/store';
-import { useTheme } from '@mui/material';
 import { useMemo, useRef, useState } from 'react';
 
 import { useBlockSuiteMetaHelper } from '../../../../hooks/affine/use-block-suite-meta-helper';
@@ -39,9 +43,6 @@ export const OperationButton = ({
   onMenuClose,
   onRename,
 }: OperationButtonProps) => {
-  const {
-    zIndex: { modal: modalIndex },
-  } = useTheme();
   const { t } = useTranslation();
 
   const timer = useRef<ReturnType<typeof setTimeout>>();
@@ -49,7 +50,7 @@ export const OperationButton = ({
   const [operationMenuOpen, setOperationMenuOpen] = useState(false);
   const [pinboardMenuOpen, setPinboardMenuOpen] = useState(false);
   const [confirmModalOpen, setConfirmModalOpen] = useState(false);
-  const menuIndex = useMemo(() => modalIndex + 1, [modalIndex]);
+  const menuIndex = useMemo(() => parseInt(baseTheme.zIndexModal) + 1, []);
   const { removeToTrash } = useBlockSuiteMetaHelper(blockSuiteWorkspace);
 
   return (

apps/web/src/components/pure/footer/styles.ts

@@ -62,7 +62,7 @@ export const StyledCard = styled('div')<{
     ...displayFlex('flex-start', 'flex-start'),
     marginBottom: '24px',
     transition: 'background .2s',
-    background: theme.palette.mode === 'light' ? '#FFF' : '#2C2C2C',
+    background: 'var(--affine-background-primary-color)',
     ':hover': {
       background: 'var(--affine-hover-color)',
       '.add-icon': {

apps/web/src/components/pure/workspace-list-modal/styles.ts

@@ -41,28 +41,6 @@ export const StyleWorkspaceTitle = styled('div')(({ theme }) => {
   };
 });
 
-export const StyledCard = styled('div')<{
-  active?: boolean;
-}>(({ theme, active }) => {
-  const borderColor = active ? 'var(--affine-primary-color)' : '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'),
-    marginBottom: '24px',
-    transition: 'background .2s',
-    background: theme.palette.mode === 'light' ? '#FFF' : '#2C2C2C',
-    ':hover': {
-      background: 'var(--affine-hover-color)',
-    },
-  };
-});
-
 export const StyledCreateWorkspaceCard = styled('div')(({ theme }) => {
   return {
     width: '310px',