Lightbox backdrop fixes

web/src/app/Poller.js

@@ -1,4 +1,3 @@
-import db from "./db";
 import api from "./Api";
 import subscriptionManager from "./SubscriptionManager";
 

web/src/components/Notifications.js

@@ -7,7 +7,7 @@ import {useState} from "react";
 import {formatBytes, formatMessage, formatShortDateTime, formatTitle, topicShortUrl, unmatchedTags} from "../app/utils";
 import IconButton from "@mui/material/IconButton";
 import CloseIcon from '@mui/icons-material/Close';
-import {Paragraph, VerticallyCenteredContainer} from "./styles";
+import {LightboxBackdrop, Paragraph, VerticallyCenteredContainer} from "./styles";
 import {useLiveQuery} from "dexie-react-hooks";
 import Box from "@mui/material/Box";
 import Button from "@mui/material/Button";
@@ -174,6 +174,7 @@ const Image = (props) => {
             <Modal
                 open={open}
                 onClose={() => setOpen(false)}
+                BackdropComponent={LightboxBackdrop}
             >
                 <Fade in={open}>
                     <Box

web/src/components/Preferences.js

@@ -25,7 +25,6 @@ import TextField from "@mui/material/TextField";
 import MenuItem from "@mui/material/MenuItem";
 import Card from "@mui/material/Card";
 import Button from "@mui/material/Button";
-import db from "../app/db";
 import {useLiveQuery} from "dexie-react-hooks";
 import theme from "./theme";
 import Dialog from "@mui/material/Dialog";

web/src/components/styles.js

@@ -1,7 +1,7 @@
 import Typography from "@mui/material/Typography";
 import theme from "./theme";
 import Container from "@mui/material/Container";
-import {styled} from "@mui/material";
+import {Backdrop, styled} from "@mui/material";
 
 export const Paragraph = styled(Typography)({
   paddingTop: 8,
@@ -16,3 +16,7 @@ export const VerticallyCenteredContainer = styled(Container)({
   alignContent: 'center',
   color: theme.palette.text.primary
 });
+
+export const LightboxBackdrop = styled(Backdrop)({
+  backgroundColor: 'rgba(0, 0, 0, 0.8)' // was: 0.5
+});

web/src/components/theme.js

@@ -21,13 +21,6 @@ const theme = createTheme({
         },
       },
     },
-    MuiBackdrop: {
-      styleOverrides: {
-        root: {
-          backgroundColor: 'rgba(0, 0, 0, 0.8)' // was: 0.5
-        }
-      }
-    }
   },
 });