Q: How to make a card in the centre of a screen while keeping the contents of the screen? I am trying to make a login/sign up form for my website where the user is not rerouted to a different page for the same. Instead, a login/sign up form is displayed on top of the existing page (as a card) and they are asked to sign up/login. The user should also be able to close the form and return to the existing web page.
I am trying to do this, however, I am not able to figure out how to keep the existing contents of the page while still displaying the form.
I am using Material UI to make the form.
Below is my code -
homePage.js
import "./homePage.css";
import { motion } from "framer-motion";
import React, { useState } from "react";
import SignupCard from "../signupCard/signupCard";
import CloseIcon from "@mui/icons-material/Close";

function HomePage() {
  const [open, setOpen] = useState(false);

  const handleOpen = () => {
    setOpen(true);
  };

  const handleClose = () => {
    setOpen(false);
  };

  return (
    <>
      {open ? (
        <SignupCard>
          <CloseIcon onClick={handleClose} />
        </SignupCard>
      ) : null}
      <div className="header">
        <ul>
          <motion.li
            className="li__signup"
            whileHover={{ scale: 1.05 }}
            whileTap={{ scale: 0.9 }}
            transition={{ type: "spring", stiffness: 400, damping: 70 }}
            onClick={handleOpen}
          >
            Signup
          </motion.li>
        </ul>
      </div>
      <img src="../assets/memories.png" alt="placeholder" />
    </>
  );
}

export default HomePage;

signupCard.js
import * as React from "react";
import Grid from "@mui/material/Grid";
import Paper from "@mui/material/Paper";
import Box from "@mui/material/Box";
import { styled } from "@mui/material/styles";

const Item = styled(Paper)(({ theme }) => ({
  ...theme.typography.body2,
  textAlign: "center",
  justifyItems: "center",
  color: theme.palette.text.secondary,
  height: 60,
  lineHeight: "60px",
}));

export default function SlCard() {
  // Sign Up Login Card -> SlCard

  return (
    <Grid>
      <Box
        sx={{
          justifyContent: "center",
          alignItems: "center",
          minHeight: "100vh",
        }}
      >
        <Item elevation={3}>Content</Item>
      </Box>
    </Grid>
  );
}

