Styled Dialog - Copy this React, Mui Component to your project

import React, { useState } from "react"; import { Dialog, DialogTitle, DialogContent, DialogActions, Button, Typography, Box, IconButton, styled } from "@mui/material"; import { IoClose, IoTrophy } from "react-icons/io5"; const StyledDialog = styled(Dialog)(({ theme }) => ({ "& .MuiDialog-paper": { borderRadius: 16, padding: theme.spacing(2), maxWidth: 500, width: "90%" } })); const ImageContainer = styled(Box)({ width: "100%", height: 200, position: "relative", overflow: "hidden", borderRadius: 8, marginBottom: 16 }); const StyledImage = styled("img")({ width: "100%", height: "100%", objectFit: "cover" }); const CloseButton = styled(IconButton)(({ theme }) => ({ position: "absolute", right: theme.spacing(1), top: theme.spacing(1), color: theme.palette.grey[500], transition: "transform 0.2s ease-in-out", "&:hover": { transform: "rotate(90deg)" } })); const GamificationDialog = () => { const [open, setOpen] = useState(true); const handleClose = () => { setOpen(false); }; const handleClaimReward = () => { console.log("Claiming reward..."); handleClose(); }; return ( <StyledDialog open={open} onClose={handleClose} aria-labelledby="gamification-dialog-title" aria-describedby="gamification-dialog-description" > <CloseButton aria-label="close" onClick={handleClose} > <IoClose /> </CloseButton> <DialogTitle id="gamification-dialog-title" sx={{ textAlign: "center", pt: 3 }}> <Box display="flex" alignItems="center" justifyContent="center" gap={1}> <IoTrophy size={30} color="#FFD700" /> <Typography variant="h5" component="span" fontWeight="bold"> Congratulations! </Typography> </Box> </DialogTitle> <DialogContent> <ImageContainer> <StyledImage src="https://images.unsplash.com/photo-1552820728-8b83bb6b773f" alt="Achievement celebration" onError={(e) => { e.target.src = "https://images.unsplash.com/photo-1533227268428-f9ed0900fb3b"; }} /> </ImageContainer> <Typography id="gamification-dialog-description" variant="body1" align="center" gutterBottom > You've successfully completed all challenges! 🎉 </Typography> <Typography variant="body2" color="text.secondary" align="center" sx={{ mb: 2 }} > Your dedication and persistence have paid off. You've earned a special reward for your outstanding achievement! </Typography> <Box sx={{ backgroundColor: "#FFF9C4", borderRadius: 2, p: 2, mb: 2 }} > <Typography variant="body2" color="text.secondary" align="center"> 🎁 Unlock your exclusive reward package including premium features and special bonuses! </Typography> </Box> </DialogContent> <DialogActions sx={{ justifyContent: "center", pb: 3 }}> <Button variant="contained" color="primary" onClick={handleClaimReward} sx={{ borderRadius: 4, px: 4, py: 1, textTransform: "none", fontSize: "1.1rem" }} > Claim Your Reward </Button> </DialogActions> </StyledDialog> ); }; export default GamificationDialog;