From 3bce0ad4ae70b7c965341e88ebb34d15a1adf8d8 Mon Sep 17 00:00:00 2001
From: Philipp Heckel <pheckel@datto.com>
Date: Thu, 3 Mar 2022 20:28:16 -0500
Subject: [PATCH] Lightbox backdrop fixes

---
 web/src/app/Poller.js               | 1 -
 web/src/components/Notifications.js | 3 ++-
 web/src/components/Preferences.js   | 1 -
 web/src/components/styles.js        | 6 +++++-
 web/src/components/theme.js         | 7 -------
 5 files changed, 7 insertions(+), 11 deletions(-)

diff --git a/web/src/app/Poller.js b/web/src/app/Poller.js
index c0ab8bfa..0f1ec665 100644
--- a/web/src/app/Poller.js
+++ b/web/src/app/Poller.js
@@ -1,4 +1,3 @@
-import db from "./db";
 import api from "./Api";
 import subscriptionManager from "./SubscriptionManager";
 
diff --git a/web/src/components/Notifications.js b/web/src/components/Notifications.js
index c59b0af9..703e0d48 100644
--- a/web/src/components/Notifications.js
+++ b/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
diff --git a/web/src/components/Preferences.js b/web/src/components/Preferences.js
index a34bfc38..bf88995b 100644
--- a/web/src/components/Preferences.js
+++ b/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";
diff --git a/web/src/components/styles.js b/web/src/components/styles.js
index 3232b018..d6127941 100644
--- a/web/src/components/styles.js
+++ b/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
+});
diff --git a/web/src/components/theme.js b/web/src/components/theme.js
index 3778356e..2b3f73c9 100644
--- a/web/src/components/theme.js
+++ b/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
-        }
-      }
-    }
   },
 });