fix: registration-certificate-modal-responsive-error-background

cardano-foundation · Aug 4, 2023 · 8a79993 · 8a79993
1 parent e7804a1
commit 8a79993
Show file tree

Hide file tree

Showing 2 changed files with 22 additions and 21 deletions.
diff --git a/src/components/StakingLifeCycle/DelegatorLifecycle/Registration/index.tsx b/src/components/StakingLifeCycle/DelegatorLifecycle/Registration/index.tsx
@@ -2,15 +2,14 @@ import { useState } from "react";
 import { Box, Skeleton } from "@mui/material";
 import { useParams } from "react-router-dom";
 
-import StyledModal from "src/components/commons/StyledModal";
 import useFetch from "src/commons/hooks/useFetch";
 import { API } from "src/commons/utils/api";
 import { details } from "src/commons/routers";
 import CopyButton from "src/components/commons/CopyButton";
 
 import RecentRegistrations from "./RecentRegistrations";
 import { RegistrationDraw } from "./RegistrationDraw";
-import { StakeLink, StyledContainerModal } from "./styles";
+import { StakeLink, StyledCustomModal } from "./styles";
 
 const Registration = () => {
   const [openModal, setOpenModal] = useState(false);
@@ -36,27 +35,25 @@ interface RegistrationCertificateModalProps {
   handleCloseModal: () => void;
 }
 
-export const RegistrationCertificateModal = ({ stake, ...props }: RegistrationCertificateModalProps) => {
+export const RegistrationCertificateModal = ({ stake, open, handleCloseModal }: RegistrationCertificateModalProps) => {
   const { data, loading } = useFetch<IStakeKeyDetail>(`${API.STAKE.DETAIL}/${stake}`);
 
   return (
-    <StyledModal width={550} {...props} title="Registration certificate">
-      <StyledContainerModal>
-        {loading && <Skeleton variant="rectangular" width={500} height={90} />}
-        {!loading && (
-          <Box bgcolor={({ palette }) => palette.secondary[0]} p={3}>
-            <Box fontWeight={"bold"} mb={1} fontSize={"0.875rem"} color={({ palette }) => palette.secondary.light}>
-              Stake Address
-            </Box>
-            {data && (
-              <Box display={"flex"} alignItems={"center"}>
-                <StakeLink to={details.stake(stake)}>{stake || ""}</StakeLink>
-                <CopyButton text={stake} />
-              </Box>
-            )}
+    <StyledCustomModal open={open} onClose={handleCloseModal} title="Registration certificate">
+      {loading && <Skeleton variant="rectangular" width={500} height={90} />}
+      {!loading && (
+        <Box p={3} width="max-content">
+          <Box fontWeight={"bold"} mb={1} fontSize={"0.875rem"} color={({ palette }) => palette.secondary.light}>
+            Stake Address
           </Box>
-        )}
-      </StyledContainerModal>
-    </StyledModal>
+          {data && (
+            <Box display={"flex"} alignItems={"center"}>
+              <StakeLink to={details.stake(stake)}>{stake || ""}</StakeLink>
+              <CopyButton text={stake} />
+            </Box>
+          )}
+        </Box>
+      )}
+    </StyledCustomModal>
   );
 };
diff --git a/src/components/StakingLifeCycle/DelegatorLifecycle/Registration/styles.ts b/src/components/StakingLifeCycle/DelegatorLifecycle/Registration/styles.ts
@@ -3,6 +3,7 @@ import { Link } from "react-router-dom";
 
 import { AdaLogoIcon } from "src/components/commons/ADAIcon";
 import CertificateShape from "src/components/commons/CertificateShape";
+import CustomModal from "src/components/commons/CustomModal";
 
 export const MiddleGroup = styled(Box)(() => ({
   display: "flex",
@@ -162,7 +163,10 @@ export const CertificateShapeMobile = styled(CertificateShape)(() => ({
   margin: "auto"
 }));
 
-export const StyledContainerModal = styled(Box)(() => ({}));
+export const StyledCustomModal = styled(CustomModal)(({ theme }) => ({
+  backgroundColor: theme.palette.secondary[0]
+}));
+
 export const StyledLink = styled(Link)`
   font-size: inherit;
   font-weight: inherit;