Lightbox backdrop fixes
This commit is contained in:
parent
695e029147
commit
3bce0ad4ae
5 changed files with 7 additions and 11 deletions
|
@ -1,4 +1,3 @@
|
||||||
import db from "./db";
|
|
||||||
import api from "./Api";
|
import api from "./Api";
|
||||||
import subscriptionManager from "./SubscriptionManager";
|
import subscriptionManager from "./SubscriptionManager";
|
||||||
|
|
||||||
|
|
|
@ -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
|
||||||
|
|
|
@ -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";
|
||||||
|
|
|
@ -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
|
||||||
|
});
|
||||||
|
|
|
@ -21,13 +21,6 @@ const theme = createTheme({
|
||||||
},
|
},
|
||||||
},
|
},
|
||||||
},
|
},
|
||||||
MuiBackdrop: {
|
|
||||||
styleOverrides: {
|
|
||||||
root: {
|
|
||||||
backgroundColor: 'rgba(0, 0, 0, 0.8)' // was: 0.5
|
|
||||||
}
|
|
||||||
}
|
|
||||||
}
|
|
||||||
},
|
},
|
||||||
});
|
});
|
||||||
|
|
||||||
|
|
Loading…
Reference in a new issue