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

"import React, { useState } from "react"; import { Dialog, DialogTitle, DialogContent, TextField, Button, Box, IconButton, Typography, ThemeProvider, useTheme, } from "@mui/material"; import { toast, ToastContainer } from "react toastify"; import CloseIcon from "@mui/icons material/Close"; import { lightTheme } from "shared/utils"; import axios from "axios"; function FetchLogs({ open, handleClose }) { const theme = useTheme(); const [fromDate, setFromDate] = useState(""); const [toDate, setToDate] = useState(""); const [logs, setLogs] = useState(""); const [fetchedLogsModalOpen, setFetchedLogsModalOpen] = useState(false); const handleSubmit = async (e) => { e.preventDefault(); try { const response = await axios.get( `${process.env.REACT_APP_API_URL}logs/fetchLogs`, { params: { fromDate, toDate }, } ); toast.success("Logs fetched successfully"); setLogs(response.data.logs); setFetchedLogsModalOpen(true); handleClose(); } catch (error) { console.error("Error fetching logs:", error); toast.error("Failed to fetch logs"); } }; const handleDownload = () => { const blob = new Blob([logs], { type: "text/plain" }); const url = URL.createObjectURL(blob); const link = document.createElement("a"); link.href = url; link.download = "filtered_logs_from_" + fromDate + "_to_" + toDate + ".txt"; link.click(); URL.revokeObjectURL(url); setFromDate(""); setToDate(""); }; const handleCloseFetchedLogsModal = () => { setFetchedLogsModalOpen(false); }; return ( <ThemeProvider theme={lightTheme}> {/* Fetched Logs Modal */} <Dialog open={fetchedLogsModalOpen} onClose={handleCloseFetchedLogsModal} maxWidth="sm" fullWidth PaperProps={{ style: { borderRadius: "8px" }, }} > <DialogTitle sx={{ backgroundColor: theme.palette.secondary.light, color: "white", display: "flex", justifyContent: "space between", alignItems: "center", padding: "10px 10px", }} > <Typography variant="h6"> Fetched Logs for {fromDate} {toDate} </Typography> <IconButton aria label="close" onClick={handleCloseFetchedLogsModal} sx={{ color: "white" }} > <CloseIcon /> </IconButton> </DialogTitle> <DialogContent sx={{ padding: "24px", height: "60vh", display: "flex", flexDirection: "column", width: "600px", }} > <Box sx={{ flexGrow: 1, overflowY: "auto", mb: 2 }}> {logs && <pre>{logs}</pre>} </Box> <Box sx={{ display: "flex", justifyContent: "center" }}> <Button variant="contained" color="primary" onClick={handleDownload} disabled={!logs} sx={{ backgroundColor: theme.palette.secondary.light, fontSize: "16px", width: "50%", }} > Download </Button> </Box> </DialogContent> </Dialog> {/* Fetch Logs Form Modal */} <Dialog open={open} onClose={handleClose} maxWidth="sm" fullWidth PaperProps={{ style: { borderRadius: "8px" }, }} > <DialogTitle sx={{ backgroundColor: theme.palette.secondary.light, color: "white", display: "flex", justifyContent: "space between", alignItems: "center", padding: "10px 10px", }} > <Typography variant="h6">Fetch Logs</Typography> <IconButton aria label="close" onClick={handleClose} sx={{ color: "white" }} > <CloseIcon /> </IconButton> </DialogTitle> <DialogContent sx={{ padding: "24px", minHeight: "220px", position: "relative", overflow: "hidden", }} > <Box component="form" onSubmit={handleSubmit} noValidate sx={{ mt: 2 }} > <Box sx={{ display: "grid", gridTemplateColumns: "1fr 1fr", gap: 2 }} > <TextField label="From" type="date" value={fromDate} onChange={(e) => setFromDate(e.target.value)} fullWidth margin="normal" InputLabelProps={{ shrink: true }} /> <TextField label="To" type="date" value={toDate} onChange={(e) => setToDate(e.target.value)} fullWidth margin="normal" InputLabelProps={{ shrink: true }} /> </Box> <Box sx={{ display: "flex", justifyContent: "center", alignContent: "center", alignItems: "center", flexDirection: "column", mt: 3, }} > <Button variant="contained" color="primary" type="submit" sx={{ backgroundColor: theme.palette.secondary.light, fontSize: "16px", width: "50%", mt: 2, }} > Fetch </Button> </Box> </Box> </DialogContent> </Dialog> <ToastContainer /> </ThemeProvider> ); } export default FetchLogs;" make this ui better looking