make button widget preview button interactive

src/pages/InstallQuiz/QuizInstallationCard/WidgetSetupByType/BannerWidgetSetup/BannerWidgetPreviewDesktop.tsx

@@ -1,7 +1,7 @@
+import TaskIcon from "@/ui_kit/TaskIcon";
 import CloseIcon from "@mui/icons-material/Close";
 import { Box, Typography } from "@mui/material";
 import RunningStripe from "@ui_kit/RunningStripe";
-import BannerWidgetPreviewIcon from "./BannerWidgetPreviewIcon";
 
 interface Props {
   position: "topleft" | "topright" | "bottomleft" | "bottomright";
@@ -108,7 +108,7 @@ export default function BannerWidgetPreviewDesktop({
           boxShadow: withShadow ? "3px 6px 25px 3px rgba(25, 6, 50, 0.4), 0 3px 13px 0 rgba(35, 17, 58, 0.1)" : "none",
         }}
       >
-        <BannerWidgetPreviewIcon
+        <TaskIcon
           sx={{
             width: "auto",
             height: "calc(18.57 / 29.5 * 100%)",

src/pages/InstallQuiz/QuizInstallationCard/WidgetSetupByType/BannerWidgetSetup/BannerWidgetPreviewMobile.tsx

@@ -1,7 +1,7 @@
+import TaskIcon from "@/ui_kit/TaskIcon";
 import CloseIcon from "@mui/icons-material/Close";
 import { Box, Typography } from "@mui/material";
 import RunningStripe from "@ui_kit/RunningStripe";
-import BannerWidgetPreviewIcon from "./BannerWidgetPreviewIcon";
 
 interface Props {
   position: "topleft" | "topright" | "bottomleft" | "bottomright";
@@ -81,7 +81,7 @@ export default function BannerWidgetPreviewMobile({
           boxShadow: withShadow ? "3px 6px 25px 3px rgba(25, 6, 50, 0.4), 0 3px 13px 0 rgba(35, 17, 58, 0.1)" : "none",
         }}
       >
-        <BannerWidgetPreviewIcon
+        <TaskIcon
           sx={{
             width: "auto",
             height: "calc(18.57 / 29.5 * 100%)",

src/pages/InstallQuiz/QuizInstallationCard/WidgetSetupByType/BannerWidgetSetup/BannerWidgetSetup.tsx

@@ -19,7 +19,7 @@ import PenaTextField from "@ui_kit/PenaTextField";
 import RadioCheck from "@ui_kit/RadioCheck";
 import RadioIcon from "@ui_kit/RadioIcon";
 import { ReactNode, useState } from "react";
-import fixedButtonWidgetPreview from "../../../../../assets/banner-widget-preview.png";
+import fixedBannerWidgetPreview from "../../../../../assets/banner-widget-preview.png";
 import WidgetScript from "../../WidgetScript";
 import { createBannerWidgetScriptText } from "../../createWidgetScriptText";
 import { useWidgetUrl } from "../../useWidgetUrl";
@@ -113,7 +113,7 @@ export default function BannerWidgetSetup({ step, nextButton }: Props) {
           }}
         >
           <img
-            src={fixedButtonWidgetPreview}
+            src={fixedBannerWidgetPreview}
             style={{
               display: "block",
               width: "100%",

src/pages/InstallQuiz/QuizInstallationCard/WidgetSetupByType/ButtonWidgetSetup.tsx

@@ -26,6 +26,8 @@ import fixedButtonWidgetPreview from "../../../../assets/fixed-button-widget-pre
 import WidgetScript from "../WidgetScript";
 import { createButtonWidgetScriptText } from "../createWidgetScriptText";
 import { useWidgetUrl } from "../useWidgetUrl";
+import ButtonWidgetPreviewDesktop from "./ButtonWidgetSetup/ButtonWidgetPreviewDesktop";
+import ButtonWidgetPreviewMobile from "./ButtonWidgetSetup/ButtonWidgetPreviewMobile";
 
 interface Props {
   step: 2 | 3;
@@ -180,14 +182,43 @@ export default function ButtonWidgetSetup({ step, nextButton }: Props) {
               pt: "40px",
             }}
           >
-            <img
+            <Box
-              src={fixedButtonWidgetPreview}
+              sx={{
-              style={{
+                position: "relative",
-                display: "block",
-                width: "100%",
-                height: "100%",
               }}
-            />
+            >
+              <img
+                src={fixedButtonWidgetPreview}
+                style={{
+                  display: "block",
+                  width: "100%",
+                  height: "100%",
+                }}
+              />
+              <Box
+                sx={{
+                  position: "absolute",
+                  top: 0,
+                  left: 0,
+                  right: 0,
+                  bottom: 0,
+                  containerType: "size",
+                }}
+              >
+                <ButtonWidgetPreviewDesktop
+                  fixedSide={fixedSide}
+                  buttonBackgroundColor={buttonBackgroundColor}
+                  buttonTextColor={buttonTextColor}
+                  buttonFlash={buttonFlash}
+                  buttonText={buttonText}
+                  rounded={rounded}
+                  withShadow={withShadow}
+                />
+                {!hideOnMobile && (
+                  <ButtonWidgetPreviewMobile fixedSide={fixedSide} buttonBackgroundColor={buttonBackgroundColor} />
+                )}
+              </Box>
+            </Box>
           </Box>
         )}
       </Box>
@@ -271,7 +302,7 @@ export default function ButtonWidgetSetup({ step, nextButton }: Props) {
             checked={fixedSide !== null}
             handleChange={(e) => setFixedSide(e.target.checked ? "left" : null)}
           />
-          {fixedSide && (
+          <Collapse in={fixedSide !== null}>
             <FormControl>
               <RadioGroup
                 sx={{
@@ -302,7 +333,7 @@ export default function ButtonWidgetSetup({ step, nextButton }: Props) {
                 />
               </RadioGroup>
             </FormControl>
-          )}
+          </Collapse>
           <Typography sx={{ color: theme.palette.grey2.main }}>Текст кнопки</Typography>
           <PenaTextField
             value={buttonText}

src/pages/InstallQuiz/QuizInstallationCard/WidgetSetupByType/ButtonWidgetSetup/ButtonWidgetPreviewDesktop.tsx

@@ -0,0 +1,67 @@
+import RunningStripe from "@/ui_kit/RunningStripe";
+import TaskIcon from "@/ui_kit/TaskIcon";
+import { Box, Typography } from "@mui/material";
+
+interface Props {
+  buttonBackgroundColor: string;
+  rounded: boolean;
+  withShadow: boolean;
+  fixedSide: "left" | "right";
+  buttonTextColor: string;
+  buttonText: string;
+  buttonFlash: boolean;
+}
+
+export default function ButtonWidgetPreviewDesktop({
+  buttonBackgroundColor,
+  buttonFlash,
+  buttonText,
+  buttonTextColor,
+  fixedSide,
+  rounded,
+  withShadow,
+}: Props) {
+  return (
+    <Box
+      sx={[
+        {
+          position: "absolute",
+          height: "calc(20 / 262 * 100%)",
+          px: "calc(1%)",
+          display: "flex",
+          alignItems: "center",
+          backgroundColor: buttonBackgroundColor,
+          borderRadius: rounded ? "30px" : 0,
+          transform: "rotate(-90deg)",
+          transformOrigin: "left",
+          transitionProperty: "width, height, top, left",
+          transitionDuration: "0.5s",
+          transitionTimingFunction: "ease",
+          whiteSpace: "nowrap",
+          overflow: "hidden",
+          boxShadow: withShadow ? "2px 5px 20px 2px rgba(25, 6, 50, 0.4), 0 2px 10px 0 rgba(35, 17, 58, 0.1)" : "none",
+        },
+        fixedSide === "left" && {
+          top: "calc(57%)",
+          left: "calc(55 / 520 * 100%)",
+        },
+        fixedSide === "right" && {
+          top: "calc(57%)",
+          left: "calc(383 / 520 * 100%)",
+        },
+      ]}
+    >
+      <TaskIcon
+        sx={{
+          width: "auto",
+          height: "calc(18.57 / 29.5 * 100%)",
+          aspectRatio: 1,
+        }}
+      />
+      <Typography fontSize="calc(3cqh)" lineHeight="120%" ml="3px" color={buttonTextColor}>
+        {buttonText || "Пройти тест"}
+      </Typography>
+      {buttonFlash && <RunningStripe />}
+    </Box>
+  );
+}

src/pages/InstallQuiz/QuizInstallationCard/WidgetSetupByType/ButtonWidgetSetup/ButtonWidgetPreviewMobile.tsx

@@ -0,0 +1,45 @@
+import TaskIcon from "@/ui_kit/TaskIcon";
+import { Box } from "@mui/material";
+
+interface Props {
+  fixedSide: "left" | "right";
+  buttonBackgroundColor: string;
+}
+
+export default function ButtonWidgetPreviewMobile({ buttonBackgroundColor, fixedSide }: Props) {
+  return (
+    <Box
+      sx={[
+        {
+          position: "absolute",
+          width: "calc(22 / 520 * 100%)",
+          height: "calc(22 / 262 * 100%)",
+          display: "flex",
+          alignItems: "center",
+          justifyContent: "center",
+          backgroundColor: buttonBackgroundColor,
+          borderRadius: "50%",
+          transitionProperty: "width, height, top, left",
+          transitionDuration: "0.5s",
+          transitionTimingFunction: "ease",
+        },
+        fixedSide === "left" && {
+          top: "calc(88%)",
+          left: "calc(82%)",
+        },
+        fixedSide === "right" && {
+          top: "calc(88%)",
+          left: "calc(94%)",
+        },
+      ]}
+    >
+      <TaskIcon
+        sx={{
+          width: "auto",
+          height: "calc(80%)",
+          aspectRatio: 1,
+        }}
+      />
+    </Box>
+  );
+}

src/ui_kit/TaskIcon.tsx

@@ -4,7 +4,7 @@ interface Props {
   sx?: SxProps<Theme>;
 }
 
-export default function BannerWidgetPreviewIcon({ sx = [] }: Props) {
+export default function TaskIcon({ sx = [] }: Props) {
   return (
     <Box
       sx={[