feat: add modal backdrop as blur

PolkaGate · Nov 9, 2024 · c0a3e5c · c0a3e5c
1 parent 649e730
commit c0a3e5c
Show file tree

Hide file tree

Showing 2 changed files with 18 additions and 4 deletions.
diff --git a/packages/extension-polkagate/src/fullscreen/governance/components/DraggableModal.tsx b/packages/extension-polkagate/src/fullscreen/governance/components/DraggableModal.tsx
@@ -13,9 +13,10 @@ interface Props {
   children: React.ReactElement;
   open: boolean;
   onClose: () => void
+  blurBackdrop?: boolean;
 }
 
-export function DraggableModal ({ children, maxHeight = 740, minHeight = 615, onClose, open, width = 500 }: Props): React.ReactElement<Props> {
+export function DraggableModal ({ blurBackdrop, children, maxHeight = 740, minHeight = 615, onClose, open, width = 500 }: Props): React.ReactElement<Props> {
   const theme = useTheme();
 
   const isDarkMode = useMemo(() => theme.palette.mode === 'dark', [theme.palette.mode]);
@@ -62,7 +63,7 @@ export function DraggableModal ({ children, maxHeight = 740, minHeight = 615, on
       outline: 'none' // Remove outline when Box is focused
     },
     bgcolor: 'background.default',
-    border: isDarkMode ? '0.5px solid' : 'none',
+    border: isDarkMode && !blurBackdrop ? '0.5px solid' : 'none',
     borderColor: 'secondary.light',
     borderRadius: '10px',
     boxShadow: 24,
@@ -79,7 +80,20 @@ export function DraggableModal ({ children, maxHeight = 740, minHeight = 615, on
   };
 
   return (
-    <Modal onClose={_onClose} open={open}>
+    <Modal
+      onClose={_onClose}
+      open={open}
+      slotProps={{
+        backdrop: {
+          style: blurBackdrop
+            ? {
+              backdropFilter: 'blur(5px)',
+              backgroundColor: 'rgba(0, 0, 0, 0.4)'
+            }
+            : {}
+        }
+      }}
+    >
       <Box
         onMouseDown={handleMouseDown}
         onMouseMove={handleMouseMove}

diff --git a/packages/extension-polkagate/src/fullscreen/nft/components/Details.tsx b/packages/extension-polkagate/src/fullscreen/nft/components/Details.tsx
@@ -200,7 +200,7 @@ export default function Details ({ api, itemInformation, setShowDetail, show }:
 
   return (
     <>
-      <DraggableModal minHeight={540} onClose={closeDetail} open={show} width={800}>
+      <DraggableModal blurBackdrop minHeight={540} onClose={closeDetail} open={show} width={800}>
         <Grid container item>
           <Grid alignItems='center' container item justifyContent='space-between' sx={{ borderBottom: '1px solid', borderBottomColor: 'divider', mb: '20px' }}>
             <Typography fontSize='20px' fontWeight={500} sx={{ maxWidth: '380px', overflow: 'hidden', textAlign: 'center', textOverflow: 'ellipsis', whiteSpace: 'nowrap', width: 'fit-content' }}>