SQuiz/frontAnswerer
2
0
Fork 0
Code Issues 4 Pull Requests Actions Packages Projects Releases Wiki Activity

fix banner widget close button

Browse Source
This commit is contained in:
nflnkr 2024-05-10 14:51:29 +03:00
parent 4e0bdb6f3f
commit aebf66eba4
2 changed files with 12 additions and 9 deletions
Show Stats Download Patch File Download Diff File Expand all files Collapse all files

2
src/WidgetDev.tsx
View File

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

19
src/widgets/banner/QuizBanner.tsx
View File

@ -1,12 +1,11 @@
import lightTheme from "@/utils/themes/light"; 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 { Box, Button, Fade, IconButton, ThemeProvider, Typography, useMediaQuery } from "@mui/material";
import { useEffect, useRef, useState } from "react"; import { useEffect, useRef, useState } from "react";
import { createPortal } from "react-dom"; import { createPortal } from "react-dom";
import BannerIcon from "../shared/BannerIcon";
import QuizDialog from "../shared/QuizDialog"; import QuizDialog from "../shared/QuizDialog";
import RunningStripe from "../shared/RunningStripe"; import RunningStripe from "../shared/RunningStripe";
import { useQuizCompletionStatus } from "../shared/useQuizCompletionStatus"; import { useQuizCompletionStatus } from "../shared/useQuizCompletionStatus";
import BannerIcon from "../shared/BannerIcon";
const PADDING = 10; const PADDING = 10;
@ -103,7 +102,7 @@ export default function QuizBanner({
position: "fixed", position: "fixed",
height: "120px", height: "120px",
width: bannerFullWidth ? "100%" : "800px", width: bannerFullWidth ? "100%" : "800px",
maxWidth: "100%", maxWidth: `calc(100% - ${PADDING * 2}px)`,
}, },
position === "topleft" && { position === "topleft" && {
top: bannerFullWidth ? 0 : PADDING, top: bannerFullWidth ? 0 : PADDING,
@ -186,14 +185,18 @@ export default function QuizBanner({
position: "absolute", position: "absolute",
top: 0, top: 0,
right: 0, right: 0,
p: 0, p: "8px",
width: "34px", width: "44px",
height: "34px", height: "44px",
borderRadius: "4px", 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> </IconButton>
</Box> </Box>
</Fade> </Fade>