refactor: Modals to be centered using flex instead of translation (#200)

* refactor: Modals to be centered using flex instead of translation * fix: Remove unnecessary prop classname * fix: Update baseModal compontent
decentraland · Oct 29, 2024 · 6f01e75 · 6f01e75
1 parent c752a22
commit 6f01e75
Show file tree

Hide file tree

Showing 2 changed files with 17 additions and 11 deletions.
diff --git a/src/components/Modal/Modal.styled.ts b/src/components/Modal/Modal.styled.ts
@@ -1,7 +1,18 @@
 import styled from "@emotion/styled"
-import { Box as BoxMui, Paper as PaperMui, useTheme } from "@mui/material"
+import {
+  Box as BoxMui,
+  Modal as MuiModal,
+  Paper as PaperMui,
+  useTheme,
+} from "@mui/material"
 import { ModalProps } from "./Modal.types"
 
+const Modal = styled(MuiModal)({
+  display: "flex",
+  alignItems: "center",
+  justifyContent: "center",
+})
+
 const ModalContainer = styled(PaperMui)((props: Pick<ModalProps, "size">) => {
   const theme = useTheme()
   let size = "900px"
@@ -12,10 +23,6 @@ const ModalContainer = styled(PaperMui)((props: Pick<ModalProps, "size">) => {
   }
 
   return {
-    position: "absolute" as const,
-    top: "50%",
-    left: "50%",
-    transform: "translate(-50%, -50%)",
     width: size,
     borderRadius: "12px",
     overflow: "hidden",
@@ -26,9 +33,6 @@ const ModalContainer = styled(PaperMui)((props: Pick<ModalProps, "size">) => {
       borderRadius: "0px",
       margin: "0",
       padding: "0",
-      top: "0",
-      left: "0",
-      transform: "translate(0, 0)",
     },
   }
 })
@@ -55,6 +59,7 @@ const ModalActionsContainer = styled(BoxMui)({
 })
 
 export {
+  Modal,
   ModalContainer,
   ModalTitleContainer,
   ModalContentContainer,

diff --git a/src/components/Modal/Modal.tsx b/src/components/Modal/Modal.tsx
@@ -1,9 +1,10 @@
 import React from "react"
 import ArrowBackIosNewRoundedIcon from "@mui/icons-material/ArrowBackIosNewRounded"
 import CancelRoundedIcon from "@mui/icons-material/CancelRounded"
-import { IconButton, Modal as MuiModal, Typography } from "@mui/material"
+import { IconButton, Typography } from "@mui/material"
 import { ModalProps } from "./Modal.types"
 import {
+  Modal as BaseModal,
   ModalActionsContainer,
   ModalContainer,
   ModalContentContainer,
@@ -66,11 +67,11 @@ const ModalContent = React.memo(
 const Modal = React.memo((props: ModalProps) => {
   const { open, onClose, children, ...modalContentProps } = props
   return (
-    <MuiModal open={open} onClose={onClose}>
+    <BaseModal open={open} onClose={onClose}>
       <ModalContent {...modalContentProps} onClose={onClose}>
         {children}
       </ModalContent>
-    </MuiModal>
+    </BaseModal>
   )
 })