feat: add background color

lifinance · Sep 30, 2024 · aefb5df · aefb5df
1 parent a06201e
commit aefb5df
Showing 1 changed file with 8 additions and 1 deletion.
diff --git a/packages/wallet-management/src/components/WalletMenuModal.tsx b/packages/wallet-management/src/components/WalletMenuModal.tsx
@@ -1,3 +1,4 @@
+import type { Theme } from '@mui/material';
 import { Dialog, Drawer, useMediaQuery } from '@mui/material';
 import type { PropsWithChildren } from 'react';
 
@@ -13,7 +14,9 @@ export const WalletMenuModal: React.FC<PropsWithChildren<WalletMenuProps>> = ({
   onClose,
   children,
 }) => {
-  const isMobile = useMediaQuery(`@media (max-width:${maxWidth}px)`);
+  const isMobile = useMediaQuery((theme: Theme) =>
+    theme.breakpoints.down(maxWidth),
+  );
 
   return isMobile ? (
     <Drawer
@@ -23,6 +26,8 @@ export const WalletMenuModal: React.FC<PropsWithChildren<WalletMenuProps>> = ({
       PaperProps={{
         sx: (theme) => ({
           maxHeight: '80%',
+          backgroundImage: 'none',
+          backgroundColor: theme.palette.background.default,
           borderTopLeftRadius: theme.shape.borderRadius * 2,
           borderTopRightRadius: theme.shape.borderRadius * 2,
         }),
@@ -47,6 +52,8 @@ export const WalletMenuModal: React.FC<PropsWithChildren<WalletMenuProps>> = ({
         sx: (theme) => ({
           width: '100%',
           maxWidth: maxWidth,
+          backgroundImage: 'none',
+          backgroundColor: theme.palette.background.default,
           borderTopLeftRadius: theme.shape.borderRadius * 2,
           borderTopRightRadius: theme.shape.borderRadius * 2,
           borderBottomLeftRadius: theme.shape.borderRadius * 2,