mirror of
https://github.com/bitburner-official/bitburner-src.git
synced 2026-05-21 07:02:05 +02:00
IMPROVEMENT: partial migration @mui/styles to tss-react (#1338)
This commit is contained in:
+30
-33
@@ -4,42 +4,39 @@ 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 { makeStyles } from "tss-react/mui";
|
||||
import { SxProps } from "@mui/system";
|
||||
import CloseIcon from "@mui/icons-material/Close";
|
||||
|
||||
const useStyles = makeStyles((theme: Theme) =>
|
||||
createStyles({
|
||||
modal: {
|
||||
display: "flex",
|
||||
alignItems: "center",
|
||||
justifyContent: "center",
|
||||
const useStyles = makeStyles()((theme: Theme) => ({
|
||||
modal: {
|
||||
display: "flex",
|
||||
alignItems: "center",
|
||||
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}`,
|
||||
padding: 2,
|
||||
maxWidth: "80%",
|
||||
maxHeight: "80%",
|
||||
overflow: "auto",
|
||||
"&::-webkit-scrollbar": {
|
||||
// webkit
|
||||
display: "none",
|
||||
},
|
||||
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}`,
|
||||
padding: 2,
|
||||
maxWidth: "80%",
|
||||
maxHeight: "80%",
|
||||
overflow: "auto",
|
||||
"&::-webkit-scrollbar": {
|
||||
// webkit
|
||||
display: "none",
|
||||
},
|
||||
scrollbarWidth: "none", // firefox
|
||||
},
|
||||
closeButton: {
|
||||
position: "absolute",
|
||||
right: 3,
|
||||
top: 3,
|
||||
width: 20,
|
||||
height: 20,
|
||||
},
|
||||
}),
|
||||
);
|
||||
scrollbarWidth: "none", // firefox
|
||||
},
|
||||
closeButton: {
|
||||
position: "absolute",
|
||||
right: 3,
|
||||
top: 3,
|
||||
width: 20,
|
||||
height: 20,
|
||||
},
|
||||
}));
|
||||
|
||||
interface ModalProps {
|
||||
open: boolean;
|
||||
@@ -49,7 +46,7 @@ interface ModalProps {
|
||||
}
|
||||
|
||||
export const Modal = ({ open, onClose, children, sx }: ModalProps): React.ReactElement => {
|
||||
const classes = useStyles();
|
||||
const { classes } = useStyles();
|
||||
const [content, setContent] = useState(children);
|
||||
useEffect(() => {
|
||||
if (!open) return;
|
||||
|
||||
Reference in New Issue
Block a user