Press n or j to go to the next uncovered block, b, p or k for the previous block.
| 1 2 3 4 5 6 7 8 9 10 11 12 13 14 15 16 17 18 19 20 21 22 23 24 25 26 27 28 29 30 31 32 33 34 35 36 37 38 39 40 41 42 43 44 45 46 47 48 49 50 51 52 53 54 55 56 57 58 59 60 61 62 63 64 65 66 67 68 69 70 71 72 73 74 | 5x 5x 5x 165x 165x 165x 165x | import { Stack } from "@mui/material";
import GiveBaseModal from "@shared/modals/GiveBaseModal";
import { useCustomThemeV2 } from "@theme/hooks/useCustomThemeV2";
import { useModal } from "@ebay/nice-modal-react";
import { useBannerOffset } from "@hooks/common/useBannerOffset";
type GiveCheckModalProps = {
title: string;
testid: string;
children: React.ReactNode;
buttons?: React.ReactNode;
height?: string;
hideBackdrop?: boolean;
};
const DESKTOP_WIDTH = "600px";
const CONTENT_GAP = "20px";
const GiveCheckModalBase = ({
title,
testid,
children,
buttons,
height,
hideBackdrop,
}: GiveCheckModalProps) => {
const { visible, remove } = useModal();
const { isMobileView } = useCustomThemeV2();
const bannerOffset = useBannerOffset(true);
return (
<GiveBaseModal
open={visible}
onClose={remove}
title={title}
data-testid={testid}
width={isMobileView ? "100%" : DESKTOP_WIDTH}
height={height}
showFooter={!!buttons}
buttons={buttons}
customContentPadding={
buttons ? "84px 20px 94px 20px" : "84px 20px 20px 20px"
}
customDialogStyle={{
"& .MuiDialog-paper": {
marginTop: bannerOffset ? `${bannerOffset}px` : undefined,
minHeight: `calc(100vh - ${bannerOffset + 96}px)`,
},
"& .MuiDialogContent-root": {
overflow: "auto",
display: "flex",
flexDirection: "column",
},
}}
slotProps={
hideBackdrop ? { backdrop: { sx: { display: "none" } } } : undefined
}
>
<Stack
gap={CONTENT_GAP}
display="flex"
flexDirection="column"
flex={1}
minHeight={0}
height="100%"
>
{children}
</Stack>
</GiveBaseModal>
);
};
export default GiveCheckModalBase;
|