use same image for widget preview

fix side widget preview

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 fixedBannerWidgetPreview from "../../../../../assets/banner-widget-preview.png";
+import widgetPreviewImage from "../../../../../assets/widget-preview.png";
 import WidgetScript from "../../WidgetScript";
 import { createBannerWidgetScriptText } from "../../createWidgetScriptText";
 import { useWidgetUrl } from "../../useWidgetUrl";
@@ -88,7 +88,12 @@ export default function BannerWidgetSetup({ step, nextButton }: Props) {
       widgetUrl
     );
 
-    return <WidgetScript scriptText={scriptText} helperText="Установите код внутрь тэга head" />;
+    return (
+      <WidgetScript
+        scriptText={scriptText}
+        helperText="Установите код внутрь тэга head"
+      />
+    );
   }
 
   return (
@@ -113,7 +118,7 @@ export default function BannerWidgetSetup({ step, nextButton }: Props) {
           }}
         >
           <img
-            src={fixedBannerWidgetPreview}
+            src={widgetPreviewImage}
             style={{
               display: "block",
               width: "100%",
@@ -238,9 +243,15 @@ export default function BannerWidgetSetup({ step, nextButton }: Props) {
           }}
         >
           <Typography sx={{ color: theme.palette.grey2.main }}>Цвет баннера</Typography>
-          <CircleColorPicker color={buttonBackgroundColor} onChange={(color) => setButtonBackgroundColor(color)} />
+          <CircleColorPicker
+            color={buttonBackgroundColor}
+            onChange={(color) => setButtonBackgroundColor(color)}
+          />
           <Typography sx={{ color: theme.palette.grey2.main }}>Цвет текста баннера</Typography>
-          <CircleColorPicker color={buttonTextColor} onChange={(color) => setButtonTextColor(color)} />
+          <CircleColorPicker
+            color={buttonTextColor}
+            onChange={(color) => setButtonTextColor(color)}
+          />
         </Box>
         <CustomCheckbox
           label="Баннер на всю ширину экрана"
@@ -276,13 +287,23 @@ export default function BannerWidgetSetup({ step, nextButton }: Props) {
                 <FormControlLabel
                   label="Сверху страницы"
                   value="topleft"
-                  control={<Radio checkedIcon={<RadioCheck />} icon={<RadioIcon />} />}
+                  control={
+                    <Radio
+                      checkedIcon={<RadioCheck />}
+                      icon={<RadioIcon />}
+                    />
+                  }
                   sx={{ color: theme.palette.grey2.main }}
                 />
                 <FormControlLabel
                   label="Снизу страницы"
                   value="bottomleft"
-                  control={<Radio checkedIcon={<RadioCheck />} icon={<RadioIcon />} />}
+                  control={
+                    <Radio
+                      checkedIcon={<RadioCheck />}
+                      icon={<RadioIcon />}
+                    />
+                  }
                   sx={{ color: theme.palette.grey2.main }}
                 />
               </Box>
@@ -297,13 +318,23 @@ export default function BannerWidgetSetup({ step, nextButton }: Props) {
                   <FormControlLabel
                     label="Слева сверху"
                     value="topleft"
-                    control={<Radio checkedIcon={<RadioCheck />} icon={<RadioIcon />} />}
+                    control={
+                      <Radio
+                        checkedIcon={<RadioCheck />}
+                        icon={<RadioIcon />}
+                      />
+                    }
                     sx={{ color: theme.palette.grey2.main }}
                   />
                   <FormControlLabel
                     label="Слева снизу"
                     value="bottomleft"
-                    control={<Radio checkedIcon={<RadioCheck />} icon={<RadioIcon />} />}
+                    control={
+                      <Radio
+                        checkedIcon={<RadioCheck />}
+                        icon={<RadioIcon />}
+                      />
+                    }
                     sx={{ color: theme.palette.grey2.main }}
                   />
                 </Box>
@@ -316,13 +347,23 @@ export default function BannerWidgetSetup({ step, nextButton }: Props) {
                   <FormControlLabel
                     label="Справа сверху"
                     value="topright"
-                    control={<Radio checkedIcon={<RadioCheck />} icon={<RadioIcon />} />}
+                    control={
+                      <Radio
+                        checkedIcon={<RadioCheck />}
+                        icon={<RadioIcon />}
+                      />
+                    }
                     sx={{ color: theme.palette.grey2.main }}
                   />
                   <FormControlLabel
                     label="Справа снизу"
                     value="bottomright"
-                    control={<Radio checkedIcon={<RadioCheck />} icon={<RadioIcon />} />}
+                    control={
+                      <Radio
+                        checkedIcon={<RadioCheck />}
+                        icon={<RadioIcon />}
+                      />
+                    }
                     sx={{ color: theme.palette.grey2.main }}
                   />
                 </Box>
@@ -332,10 +373,22 @@ export default function BannerWidgetSetup({ step, nextButton }: Props) {
         </FormControl>
         <Typography sx={{ color: theme.palette.grey2.main }}>Параметры</Typography>
         {!bannerFullWidth && (
-          <CustomCheckbox label="Закругленная" checked={rounded} handleChange={(e) => setRounded(e.target.checked)} />
+          <CustomCheckbox
+            label="Закругленная"
+            checked={rounded}
+            handleChange={(e) => setRounded(e.target.checked)}
+          />
         )}
-        <CustomCheckbox label="С тенью" checked={withShadow} handleChange={(e) => setWithShadow(e.target.checked)} />
-        <CustomCheckbox label="С бликом" checked={buttonFlash} handleChange={(e) => setButtonFlash(e.target.checked)} />
+        <CustomCheckbox
+          label="С тенью"
+          checked={withShadow}
+          handleChange={(e) => setWithShadow(e.target.checked)}
+        />
+        <CustomCheckbox
+          label="С бликом"
+          checked={buttonFlash}
+          handleChange={(e) => setButtonFlash(e.target.checked)}
+        />
         <CustomCheckbox
           label={'Эффект "пульсация"'}
           checked={pulsation}

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

@@ -22,7 +22,7 @@ import RunningStripe from "@ui_kit/RunningStripe";
 import { nanoid } from "nanoid";
 import { ReactNode, useState } from "react";
 import Dots from "../../../../../assets/dots.png";
-import fixedButtonWidgetPreview from "../../../../../assets/fixed-button-widget-preview.png";
+import widgetPreviewImage from "../../../../../assets/widget-preview.png";
 import WidgetScript from "../../WidgetScript";
 import { createButtonWidgetScriptText } from "../../createWidgetScriptText";
 import { useWidgetUrl } from "../../useWidgetUrl";
@@ -188,7 +188,7 @@ export default function ButtonWidgetSetup({ step, nextButton }: Props) {
               }}
             >
               <img
-                src={fixedButtonWidgetPreview}
+                src={widgetPreviewImage}
                 style={{
                   display: "block",
                   width: "100%",

src/pages/InstallQuiz/QuizInstallationCard/WidgetSetupByType/SideWidgetSetup/SideWidgetPreviewDesktop.tsx

@@ -0,0 +1,55 @@
+import { Box, Typography } from "@mui/material";
+import RunningStripe from "@ui_kit/RunningStripe";
+
+interface Props {
+  position: "left" | "right";
+  buttonFlash: boolean;
+}
+
+export default function SideWidgetPreviewDesktop({ buttonFlash, position }: Props) {
+  return (
+    <Box
+      sx={[
+        {
+          position: "absolute",
+          width: "calc(196 / 520 * 100%)",
+          height: "calc(30 / 262 * 100%)",
+          transitionProperty: "width, height, top, left",
+          transitionDuration: "0.5s",
+          transitionTimingFunction: "ease",
+        },
+        position === "left" && {
+          top: "calc(178 / 262 * 100%)",
+          left: "calc(50.6 / 520 * 100%)",
+        },
+        position === "right" && {
+          top: "calc(178 / 262 * 100%)",
+          left: "calc(190 / 520 * 100%)",
+        },
+      ]}
+    >
+      <Box
+        sx={{
+          width: "100%",
+          height: "100%",
+          overflow: "hidden",
+          display: "flex",
+          alignItems: "center",
+          justifyContent: "center",
+          backgroundColor: (theme) => theme.palette.brightPurple.main,
+          containerType: "size",
+          gap: "calc(5 / 196 * 100%)",
+          borderRadius: "4px",
+        }}
+      >
+        <Typography
+          fontSize="40cqh"
+          color="white"
+        >
+          Пройти квиз
+        </Typography>
+        {buttonFlash && <RunningStripe />}
+      </Box>
+    </Box>
+  );
+}

src/pages/InstallQuiz/QuizInstallationCard/WidgetSetupByType/SideWidgetSetup/SideWidgetPreviewMobile.tsx

@@ -0,0 +1,47 @@
+import { Box, Typography } from "@mui/material";
+import RunningStripe from "@ui_kit/RunningStripe";
+
+interface Props {
+  buttonFlash: boolean;
+}
+
+export default function SideWidgetPreviewMobile({ buttonFlash }: Props) {
+  return (
+    <Box
+      sx={[
+        {
+          position: "absolute",
+          width: "calc(94 / 520 * 100%)",
+          height: "calc(15 / 262 * 100%)",
+          transitionProperty: "width, height, top, left",
+          transitionDuration: "0.5s",
+          transitionTimingFunction: "ease",
+          top: "calc(214 / 262 * 100%)",
+          left: "calc(422 / 520 * 100%)",
+        },
+      ]}
+    >
+      <Box
+        sx={{
+          width: "100%",
+          height: "100%",
+          overflow: "hidden",
+          display: "flex",
+          alignItems: "center",
+          justifyContent: "center",
+          backgroundColor: (theme) => theme.palette.brightPurple.main,
+          containerType: "size",
+          gap: "calc(5 / 196 * 100%)",
+        }}
+      >
+        <Typography
+          fontSize="30cqh"
+          color="white"
+        >
+          Пройти квиз
+        </Typography>
+        {buttonFlash && <RunningStripe />}
+      </Box>
+    </Box>
+  );
+}

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

@@ -5,12 +5,13 @@ import CircleColorPicker from "@ui_kit/CircleColorPicker";
 import CustomCheckbox from "@ui_kit/CustomCheckbox";
 import PenaTextField from "@ui_kit/PenaTextField";
 import { ReactNode, useState } from "react";
-import sideWidgetPreviewLeft from "../../../../../assets/side-widget-preview-left.png";
-import sideWidgetPreviewRight from "../../../../../assets/side-widget-preview-right.png";
+import widgetPreviewImage from "../../../../../assets/widget-preview.png";
 import WidgetScript from "../../WidgetScript";
 import { createSideWidgetScriptText } from "../../createWidgetScriptText";
 import { useWidgetUrl } from "../../useWidgetUrl";
 import SideWidgetPositionButton from "./SideWidgetPositionButton";
+import SideWidgetPreviewDesktop from "./SideWidgetPreviewDesktop";
+import SideWidgetPreviewMobile from "./SideWidgetPreviewMobile";
 
 interface Props {
   step: 2 | 3;
@@ -59,7 +60,12 @@ export default function SideWidgetSetup({ step, nextButton }: Props) {
       widgetUrl
     );
 
-    return <WidgetScript scriptText={scriptText} helperText="Установите код внутрь тэга head" />;
+    return (
+      <WidgetScript
+        scriptText={scriptText}
+        helperText="Установите код внутрь тэга head"
+      />
+    );
   }
 
   return (
@@ -74,22 +80,28 @@ export default function SideWidgetSetup({ step, nextButton }: Props) {
       <Box
         sx={{
           flex: "1 1 0",
+          p: "20px",
+          pt: "40px",
         }}
       >
         <Box
           sx={{
-            p: "20px",
-            pt: "40px",
+            position: "relative",
           }}
         >
           <img
-            src={position === "left" ? sideWidgetPreviewLeft : sideWidgetPreviewRight}
+            src={widgetPreviewImage}
             style={{
               display: "block",
               width: "100%",
               height: "100%",
             }}
           />
+          <SideWidgetPreviewDesktop
+            position={position}
+            buttonFlash={buttonFlash}
+          />
+          <SideWidgetPreviewMobile buttonFlash={buttonFlash} />
         </Box>
       </Box>
       <Box
@@ -192,9 +204,15 @@ export default function SideWidgetSetup({ step, nextButton }: Props) {
           }}
         >
           <Typography sx={{ color: theme.palette.grey2.main }}>Цвет кнопки</Typography>
-          <CircleColorPicker color={buttonBackgroundColor} onChange={(color) => setButtonBackgroundColor(color)} />
+          <CircleColorPicker
+            color={buttonBackgroundColor}
+            onChange={(color) => setButtonBackgroundColor(color)}
+          />
           <Typography sx={{ color: theme.palette.grey2.main }}>Цвет текста кнопки</Typography>
-          <CircleColorPicker color={buttonTextColor} onChange={(color) => setButtonTextColor(color)} />
+          <CircleColorPicker
+            color={buttonTextColor}
+            onChange={(color) => setButtonTextColor(color)}
+          />
         </Box>
         <Box
           sx={{
@@ -214,7 +232,11 @@ export default function SideWidgetSetup({ step, nextButton }: Props) {
           />
           <Typography sx={{ color: theme.palette.grey2.main }}>секунд</Typography>
         </Box>
-        <CustomCheckbox label="С бликом" checked={buttonFlash} handleChange={(e) => setButtonFlash(e.target.checked)} />
+        <CustomCheckbox
+          label="С бликом"
+          checked={buttonFlash}
+          handleChange={(e) => setButtonFlash(e.target.checked)}
+        />
         <Box>
           <CustomCheckbox
             label="Автооткрытие виджета при входе на сайт"