mirror of
https://github.com/bitburner-official/bitburner-src.git
synced 2024-12-23 22:52:29 +01:00
add close modal button (#546)
This commit is contained in:
parent
e51527aa86
commit
ea8f5cede7
@ -1,11 +1,13 @@
|
||||
import React from "react";
|
||||
import { Theme } from "@mui/material";
|
||||
import Box from "@mui/material/Box";
|
||||
import IconButton from "@mui/material/IconButton";
|
||||
import Fade from "@mui/material/Fade";
|
||||
import M from "@mui/material/Modal";
|
||||
import createStyles from "@mui/styles/createStyles";
|
||||
import makeStyles from "@mui/styles/makeStyles";
|
||||
import { SxProps } from "@mui/system";
|
||||
import React from "react";
|
||||
import CloseIcon from "@mui/icons-material/Close";
|
||||
|
||||
const useStyles = makeStyles((theme: Theme) =>
|
||||
createStyles({
|
||||
@ -15,6 +17,7 @@ const useStyles = makeStyles((theme: Theme) =>
|
||||
justifyContent: "center",
|
||||
},
|
||||
paper: {
|
||||
position: "relative",
|
||||
backgroundColor: theme.palette.background.default,
|
||||
border: "2px solid " + theme.palette.primary.main,
|
||||
boxShadow: `0px 3px 5px -1px ${theme.palette.primary.dark},0px 5px 8px 0px ${theme.palette.primary.dark},0px 1px 14px 0px ${theme.palette.primary.dark}`,
|
||||
@ -28,6 +31,13 @@ const useStyles = makeStyles((theme: Theme) =>
|
||||
},
|
||||
scrollbarWidth: "none", // firefox
|
||||
},
|
||||
closeButton: {
|
||||
position: "absolute",
|
||||
right: 3,
|
||||
top: 3,
|
||||
width: 20,
|
||||
height: 20,
|
||||
},
|
||||
}),
|
||||
);
|
||||
|
||||
@ -54,6 +64,9 @@ export const Modal = (props: IProps): React.ReactElement => {
|
||||
>
|
||||
<Fade in={props.open}>
|
||||
<div className={classes.paper}>
|
||||
<IconButton className={classes.closeButton} onClick={props.onClose}>
|
||||
<CloseIcon />
|
||||
</IconButton>
|
||||
<Box sx={{ m: 2 }}>{props.children}</Box>
|
||||
</div>
|
||||
</Fade>
|
||||
|
Loading…
Reference in New Issue
Block a user