Lightbox backdrop fixes

This commit is contained in:
Philipp Heckel 2022-03-03 20:28:16 -05:00
parent 695e029147
commit 3bce0ad4ae
5 changed files with 7 additions and 11 deletions

View file

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

View file

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

View file

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

View file

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

View file

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