From aebf66eba4d86de9fd7bd1b1efb7ee607ff1d089 Mon Sep 17 00:00:00 2001
From: nflnkr <molohov.eugeny@yandex.ru>
Date: Fri, 10 May 2024 14:51:29 +0300
Subject: [PATCH] fix banner widget close button

---
 src/WidgetDev.tsx                 |  2 +-
 src/widgets/banner/QuizBanner.tsx | 19 +++++++++++--------
 2 files changed, 12 insertions(+), 9 deletions(-)

diff --git a/src/WidgetDev.tsx b/src/WidgetDev.tsx
index 567736f..7da8233 100644
--- a/src/WidgetDev.tsx
+++ b/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,
 };
diff --git a/src/widgets/banner/QuizBanner.tsx b/src/widgets/banner/QuizBanner.tsx
index 93a2a09..88427ba 100644
--- a/src/widgets/banner/QuizBanner.tsx
+++ b/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>