import React from "react"; import { makeStyles } from "@material-ui/core/styles"; import Modal from "@material-ui/core/Modal"; import "./index.scss"; const maxDesktopSize = 1250; const maxMobileSize = 550; const fontSize = { desktop: { h2: window.innerWidth > maxDesktopSize ? 20 : window.innerWidth / 70, }, mobile: { h2: window.innerWidth > maxMobileSize ? 18 : window.innerWidth / 22, }, }; function rand() { return Math.round(Math.random() * 20) - 10; } function getModalStyle() { return { top: `${50}%`, left: `${50}%`, transform: `translate(-${50}%, -${50}%)`, padding: "10px", }; } const useStyles = makeStyles((theme) => ({ paper: { position: "absolute", width: "100%", maxWidth: "500px", backgroundColor: theme.palette.background.paper, border: "0px solid #000", boxShadow: theme.shadows[5], padding: theme.spacing(2, 4, 3), direction: "rtl", fontFamily: "numeralLight", }, })); export default function SimpleModal(props) { const classes = useStyles(); // getModalStyle is not a pure function, we roll the style only on the first render const [modalStyle] = React.useState(getModalStyle); const body = (