style: review modal

src/app/(dashboard)/review/page.tsx

@@ -0,0 +1,46 @@
+"use client";
+import React, { useState } from "react";
+import Box from "@mui/material/Box";
+import Button from "@mui/material/Button";
+import Typography from "@mui/material/Typography";
+import Modal from "@mui/material/Modal";
+
+const style = {
+  position: "absolute" as "absolute",
+  top: "50%",
+  left: "50%",
+  transform: "translate(-50%, -50%)",
+  width: 400,
+  bgcolor: "background.paper",
+  border: "none",
+  boxShadow: 24,
+  p: 4,
+};
+
+const HomePage = () => {
+  const [open, setOpen] = useState(false);
+  const handleOpen = () => setOpen(true);
+  const handleClose = () => setOpen(false);
+  return (
+    <Box>
+      <Button onClick={handleOpen}>Open modal</Button>
+      <Modal
+        open={open}
+        onClose={handleClose}
+        aria-labelledby="modal-modal-title"
+        aria-describedby="modal-modal-description"
+      >
+        <Box sx={style}>
+          <Typography id="modal-modal-title" variant="h6" component="h2">
+            Text in a modal
+          </Typography>
+          <Typography id="modal-modal-description" sx={{ mt: 2 }}>
+            Duis mollis, est non commodo luctus, nisi erat porttitor ligula.
+          </Typography>
+        </Box>
+      </Modal>
+    </Box>
+  );
+};
+
+export default HomePage;

src/components/wrapper/dashboardWrapper.tsx

@@ -177,7 +177,11 @@ export default function DashboardWrapper(props: Props) {
               src="/static/images/avatar/1.jpg"
             />
             <GEAR
-              sx={{ color: "var(--primary_Active_text)", fontSize: "1.8rem" }}
+              sx={{
+                color: "var(--primary_Active_text)",
+                fontSize: "1.8rem",
+                cursor: "pointer",
+              }}
             />
           </Box>
         </Toolbar>