use QuizDialog in side widget

add QuizDialog close button

src/widgets/QuizDialog.tsx

@@ -1,28 +1,52 @@
 import QuizAnswerer from "@/components/QuizAnswerer";
-import { Dialog } from "@mui/material";
+import CloseIcon from '@mui/icons-material/Close';
+import { Dialog, IconButton, Slide, SlideProps, SxProps, Theme } from "@mui/material";
+import { forwardRef } from "react";
 
 
+const SlideTransition = forwardRef<unknown, SlideProps>((props, ref) => {
+    return (
+        <Slide direction="up" ref={ref} {...props} />
+    );
+});
+
 interface Props {
     open?: boolean;
     quizId: string;
+    paperSx?: SxProps<Theme>;
+    hideBackdrop?: boolean;
+    disableScrollLock?: boolean;
     onClose?: () => void;
 }
 
-export default function QuizDialog({ open = true, quizId, onClose }: Props) {
+export default function QuizDialog({
+    open = true,
+    quizId,
+    paperSx = [],
+    hideBackdrop,
+    disableScrollLock,
+    onClose
+}: Props) {
 
     return (
         <Dialog
             open={open}
             onClose={onClose}
             keepMounted
+            hideBackdrop={hideBackdrop}
+            disableScrollLock={disableScrollLock}
+            TransitionComponent={SlideTransition}
             PaperProps={{
-                sx: {
+                sx: [
+                    {
                         backgroundColor: "transparent",
                         width: "calc(min(100%, max(70%, 700px)))",
                         height: "80%",
                         maxWidth: "100%",
                         m: "16px",
-                }
+                    },
+                    ...(Array.isArray(paperSx) ? paperSx : [paperSx])
+                ]
             }}
         >
             <QuizAnswerer
@@ -30,6 +54,25 @@ export default function QuizDialog({ open = true, quizId, onClose }: Props) {
                 changeFaviconAndTitle={false}
                 disableGlobalCss
             />
+            <IconButton
+                onClick={onClose}
+                sx={{
+                    position: "absolute",
+                    zIndex: 10,
+                    top: 0,
+                    right: 0,
+                    backgroundColor: "rgba(0, 0, 0, 0.5)",
+                    borderTopRightRadius: "4px",
+                    borderTopLeftRadius: 0,
+                    borderBottomLeftRadius: "4px",
+                    borderBottomRightRadius: 0,
+                    "&:hover": {
+                        backgroundColor: "rgba(0, 0, 0, 0.7)",
+                    },
+                }}
+            >
+                <CloseIcon sx={{ color: "white" }} />
+            </IconButton>
         </Dialog>
     );
 }

src/widgets/side/QuizSideButton.tsx

@@ -1,8 +1,8 @@
-import { QuizAnswerer } from "@/index";
 import lightTheme from "@/utils/themes/light";
-import { Box, Button, Grow, ThemeProvider } from "@mui/material";
+import { Button, ThemeProvider } from "@mui/material";
 import { useState } from "react";
 import { createPortal } from "react-dom";
+import QuizDialog from "../QuizDialog";
 
 
 const PADDING = 10;
@@ -10,51 +10,41 @@ const PADDING = 10;
 interface Props {
     quizId: string;
     position: "left" | "right";
-    buttonColor?: string;
+    buttonBackgroundColor?: string;
 }
 
-export default function QuizSideButton({ quizId, position, buttonColor }: Props) {
+export default function QuizSideButton({ quizId, position, buttonBackgroundColor }: Props) {
     const [isQuizShown, setIsQuizShown] = useState<boolean>(false);
 
     return createPortal(
         <ThemeProvider theme={lightTheme}>
-            {isQuizShown ? (
-                <Grow in={true}>
-                    <Box
-                        sx={[
-                            {
-                                position: "fixed",
+            <QuizDialog
+                open={isQuizShown}
+                quizId={quizId}
+                onClose={() => setIsQuizShown(false)}
+                hideBackdrop
+                disableScrollLock
+                paperSx={{
+                    position: "absolute",
+                    bottom: PADDING,
+                    right: position === "right" ? PADDING : undefined,
+                    left: position === "left" ? PADDING : undefined,
                     height: `calc(min(calc(100% - ${PADDING * 2}px), 800px))`,
                     width: `calc(min(calc(100% - ${PADDING * 2}px), 600px))`,
-                            },
-                            position === "left" && {
-                                bottom: PADDING,
-                                left: PADDING,
-                            },
-                            position === "right" && {
-                                bottom: PADDING,
-                                right: PADDING,
-                            },
-                        ]}
-                    >
-                        <QuizAnswerer
-                            quizId={quizId}
-                            changeFaviconAndTitle={false}
-                            disableGlobalCss
+                    m: 0,
+                }}
             />
-                    </Box>
-                </Grow>
-            ) : (
             <Button
                 className="pena-quiz-widget-button"
                 variant="contained"
                 onClick={() => setIsQuizShown(true)}
                 sx={[
                     {
+                        display: isQuizShown ? "none" : "block",
                         position: "fixed",
                         height: "70px",
                         width: `calc(min(calc(100% - ${PADDING * 2}px), 600px))`,
-                            color: buttonColor,
+                        backgroundColor: buttonBackgroundColor,
                     },
                     position === "left" && {
                         bottom: PADDING,
@@ -68,7 +58,6 @@ export default function QuizSideButton({ quizId, position, buttonColor }: Props)
             >
                 Пройти квиз
             </Button>
-            )}
         </ThemeProvider>,
         document.body
     );