add side widget button flash animation

reorganize widget folders

src/widgets/banner/QuizBanner.tsx

@@ -3,7 +3,7 @@ import CloseIcon from '@mui/icons-material/Close';
 import { Box, Button, IconButton, ThemeProvider } from "@mui/material";
 import { useState } from "react";
 import { createPortal } from "react-dom";
-import QuizDialog from "../QuizDialog";
+import QuizDialog from "../shared/QuizDialog";
 
 
 const PADDING = 10;

src/widgets/button/ButtonWidget.tsx

@@ -1,7 +1,7 @@
 import { Root, createRoot } from "react-dom/client";
 import OpenQuizButton from "./OpenQuizButton";
 import { createPortal } from "react-dom";
-import { pollForSelector } from "../pollForSelector";
+import { pollForSelector } from "../shared/pollForSelector";
 
 
 export class ButtonWidget {

src/widgets/button/OpenQuizButton.tsx

@@ -1,7 +1,7 @@
 import lightTheme from "@/utils/themes/light";
 import { Button, ThemeProvider } from "@mui/material";
 import { useState } from "react";
-import QuizDialog from "../QuizDialog";
+import QuizDialog from "../shared/QuizDialog";
 
 
 interface Props {

src/widgets/container/ContainerWidget.tsx

@@ -1,6 +1,6 @@
 import QuizAnswerer from "@/components/QuizAnswerer";
 import { Root, createRoot } from "react-dom/client";
-import { pollForSelector } from "../pollForSelector";
+import { pollForSelector } from "../shared/pollForSelector";
 
 
 export class ContainerWidget {

src/widgets/popup/PopupWidget.tsx

@@ -1,5 +1,5 @@
 import { Root, createRoot } from "react-dom/client";
-import QuizDialog from "../QuizDialog";
+import QuizDialog from "../shared/QuizDialog";
 
 
 export class PopupWidget {

src/widgets/shared/RunningStripe.tsx

@@ -0,0 +1,35 @@
+import { Box, SxProps, Theme } from "@mui/material";
+
+
+interface Props {
+    sx?: SxProps<Theme>;
+}
+
+export default function RunningStripe({ sx = [] }: Props) {
+
+    return (
+        <Box
+            sx={[
+                {
+                    position: "absolute",
+                    height: "30px",
+                    width: "140px",
+                    backgroundColor: "rgba(255 255 255 / 0.6)",
+                    animation: "runningStripe linear 3s infinite",
+                    transform: "rotate(-60deg)",
+                    "@keyframes runningStripe": {
+                        "0%": {
+                            left: "-20%",
+                            opacity: 1,
+                        },
+                        "25%, 100%": {
+                            left: "100%",
+                            opacity: 0,
+                        },
+                    },
+                },
+                ...(Array.isArray(sx) ? sx : [sx]),
+            ]}
+        />
+    );
+}

src/widgets/side/QuizSideButton.tsx

@@ -2,7 +2,8 @@ import lightTheme from "@/utils/themes/light";
 import { Button, ThemeProvider, useMediaQuery } from "@mui/material";
 import { useState } from "react";
 import { createPortal } from "react-dom";
-import QuizDialog from "../QuizDialog";
+import QuizDialog from "../shared/QuizDialog";
+import RunningStripe from "../shared/RunningStripe";
 
 
 const PADDING = 10;
@@ -65,6 +66,7 @@ export default function QuizSideButton({ quizId, position, buttonBackgroundColor
                         width: "600px",
                         maxWidth: `calc(100% - ${PADDING * 2}px)`,
                         backgroundColor: buttonBackgroundColor,
+                        overflow: "hidden",
                     },
                     position === "left" && {
                         bottom: PADDING,
@@ -76,6 +78,7 @@ export default function QuizSideButton({ quizId, position, buttonBackgroundColor
                     },
                 ]}
             >
+                <RunningStripe />
                 Пройти квиз
             </Button>
         </ThemeProvider>,