fix banner widget close button

src/WidgetDev.tsx

@@ -6,7 +6,7 @@ import { BannerWidget as Widget } from "./widgets";
 
 const widgetProps: ConstructorParameters<typeof Widget>[0] = {
     quizId: "3c49550d-8c77-4788-bc2d-42586a261514",
-    position: "bottomright",
+    position: "bottomleft",
     pulsation: true,
     rounded: true,
 };

src/widgets/banner/QuizBanner.tsx

@@ -1,12 +1,11 @@
 import lightTheme from "@/utils/themes/light";
-import CloseIcon from '@mui/icons-material/Close';
 import { Box, Button, Fade, IconButton, ThemeProvider, Typography, useMediaQuery } from "@mui/material";
 import { useEffect, useRef, useState } from "react";
 import { createPortal } from "react-dom";
+import BannerIcon from "../shared/BannerIcon";
 import QuizDialog from "../shared/QuizDialog";
 import RunningStripe from "../shared/RunningStripe";
 import { useQuizCompletionStatus } from "../shared/useQuizCompletionStatus";
-import BannerIcon from "../shared/BannerIcon";
 
 
 const PADDING = 10;
@@ -103,7 +102,7 @@ export default function QuizBanner({
                             position: "fixed",
                             height: "120px",
                             width: bannerFullWidth ? "100%" : "800px",
-                            maxWidth: "100%",
+                            maxWidth: `calc(100% - ${PADDING * 2}px)`,
                         },
                         position === "topleft" && {
                             top: bannerFullWidth ? 0 : PADDING,
@@ -186,14 +185,18 @@ export default function QuizBanner({
                             position: "absolute",
                             top: 0,
                             right: 0,
-                            p: 0,
-                            width: "34px",
-                            height: "34px",
+                            p: "8px",
+                            width: "44px",
+                            height: "44px",
                             borderRadius: "4px",
-                            backgroundColor: "#333647",
+                            ":hover": {
+                                backgroundColor: "rgba(0, 0, 0, 0.3)",
+                            },
                         }}
                     >
-                        <CloseIcon sx={{ color: "#FFFFFF" }} />
+                        <svg viewBox="0 0 7 7" fill="none" xmlns="http://www.w3.org/2000/svg">
+                            <path d="M1.00391 0.757812L6.67266 6.42656M1.00391 6.42656L6.67266 0.757812" stroke="white" strokeWidth="0.5" />
+                        </svg>
                     </IconButton>
                 </Box>
             </Fade>