fix banner widget preview mobile banner position

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

@@ -49,7 +49,7 @@ export default function BannerWidgetSetup({ step, nextButton }: Props) {
   const [autoShowQuiz, setAutoShowQuiz] = useState<boolean>(false);
   const [autoShowQuizTime, setAutoShowQuizTime] = useState<number>(10);
   const [openOnLeaveAttempt, setOpenOnLeaveAttempt] = useState<boolean>(false);
-  const [position, setPosition] = useState<BannerWidgetParams["position"]>("bottomleft");
+  const [position, setPosition] = useState<BannerWidgetParams["position"]>("topleft");
   const [bannerFullWidth, setBannerFullWidth] = useState<boolean>(false);
   const [autoShowWidgetTime, setAutoShowWidgetTime] = useState<number>(10);
   const [appealText, setAppealText] = useState<string>("");
@@ -190,7 +190,7 @@ export default function BannerWidgetSetup({ step, nextButton }: Props) {
                 overflow: "hidden",
                 display: "flex",
                 alignItems: "center",
-                backgroundColor: theme.palette.brightPurple.main,
+                backgroundColor: buttonBackgroundColor,
                 containerType: "size",
                 gap: "calc(5 / 196 * 100%)",
                 borderRadius: rounded && !bannerFullWidth ? "30px" : 0,
@@ -201,17 +201,17 @@ export default function BannerWidgetSetup({ step, nextButton }: Props) {
             >
               <BannerWidgetPreviewIcon
                 sx={{
-                  height: "calc(18.57 / 29.5 * 100%)",
                   width: "auto",
-                  aspectRatio: 1,
+                  height: "calc(18.57 / 29.5 * 100%)",
                   ml: "calc(7.36 / 196 * 100%)",
+                  aspectRatio: 1,
                 }}
               />
               <Box
                 sx={{
                   display: "flex",
                   flexDirection: "column",
-                  color: "white",
+                  color: buttonTextColor,
                 }}
               >
                 <Typography fontSize="calc(6 / 29.5 * 100cqh)" lineHeight="120%">
@@ -232,11 +232,102 @@ export default function BannerWidgetSetup({ step, nextButton }: Props) {
                 height: "calc(10 / 29.5 * 100%)",
                 width: "auto",
                 aspectRatio: 1,
-                backgroundColor: rounded || bannerFullWidth ? "#581CA7" : undefined,
+                backgroundColor: rounded || bannerFullWidth ? "#581ca763" : undefined,
                 borderRadius: "50%",
               }}
             />
           </Box>
+          <Box
+            sx={[
+              {
+                position: "absolute",
+                width: "calc(94 / 520 * 100%)",
+                height: "calc(21 / 262 * 100%)",
+              },
+              position.startsWith("top") && {
+                top: "calc(66 / 262 * 100%)",
+                left: "calc(422 / 520 * 100%)",
+              },
+              position.startsWith("bottom") && {
+                top: "calc(208 / 262 * 100%)",
+                left: "calc(422 / 520 * 100%)",
+              },
+              pulsation && {
+                ":before": {
+                  content: "''",
+                  position: "absolute",
+                  height: "100%",
+                  width: "100%",
+                  pointerEvents: "none",
+                  willChange: "box-shadow",
+                  borderRadius: "30px",
+                  animation: "pena-pulsation linear 5s infinite",
+                  "@keyframes pena-pulsation": {
+                    "0%": {
+                      boxShadow: "0 0 0 0 rgba(126, 42, 234, 0.5)",
+                    },
+                    "30%": {
+                      boxShadow: "0 0 0 15px rgba(0, 0, 0, 0)",
+                    },
+                    "100%": {
+                      boxShadow: "0 0 0 0 rgba(0, 0, 0, 0)",
+                    },
+                  },
+                },
+              },
+            ]}
+          >
+            <Box
+              sx={{
+                width: "100%",
+                height: "100%",
+                overflow: "hidden",
+                display: "flex",
+                alignItems: "center",
+                backgroundColor: buttonBackgroundColor,
+                containerType: "size",
+                gap: "calc(5 / 196 * 100%)",
+                boxShadow: withShadow
+                  ? "3px 6px 25px 3px rgba(25, 6, 50, 0.4), 0 3px 13px 0 rgba(35, 17, 58, 0.1)"
+                  : "none",
+              }}
+            >
+              <BannerWidgetPreviewIcon
+                sx={{
+                  width: "auto",
+                  height: "calc(18.57 / 29.5 * 100%)",
+                  ml: "calc(7.36 / 196 * 100%)",
+                  aspectRatio: 1,
+                }}
+              />
+              <Box
+                sx={{
+                  display: "flex",
+                  flexDirection: "column",
+                  color: buttonTextColor,
+                }}
+              >
+                <Typography fontSize="calc(6 / 29.5 * 100cqh)" lineHeight="120%">
+                  {appealText || "Пройти тест"}
+                </Typography>
+                <Typography fontSize="calc(11 / 29.5 * 100cqh)" lineHeight="120%">
+                  {quizHeaderText || "Заголовок теста"}
+                </Typography>
+              </Box>
+              {buttonFlash && <RunningStripe />}
+            </Box>
+            <CloseIcon
+              sx={{
+                position: "absolute",
+                top: 0,
+                right: 0,
+                color: "white",
+                height: "calc(8 / 29.5 * 100%)",
+                width: "auto",
+                aspectRatio: 1,
+              }}
+            />
+          </Box>
         </Box>
       </Box>
       <Box
@@ -332,9 +423,9 @@ export default function BannerWidgetSetup({ step, nextButton }: Props) {
             alignItems: "center",
           }}
         >
-          <Typography sx={{ color: theme.palette.grey2.main }}>Цвет кнопки</Typography>
+          <Typography sx={{ color: theme.palette.grey2.main }}>Цвет баннера</Typography>
           <CircleColorPicker color={buttonBackgroundColor} onChange={(color) => setButtonBackgroundColor(color)} />
-          <Typography sx={{ color: theme.palette.grey2.main }}>Цвет текста кнопки</Typography>
+          <Typography sx={{ color: theme.palette.grey2.main }}>Цвет текста баннера</Typography>
           <CircleColorPicker color={buttonTextColor} onChange={(color) => setButtonTextColor(color)} />
         </Box>
         <CustomCheckbox

src/pages/InstallQuiz/QuizInstallationCard/createWidgetScriptText.ts

@@ -5,7 +5,6 @@ import {
   ContainerWidgetParams,
   PopupWidgetParams,
   SideWidgetParams,
-  WidgetType,
 } from "@frontend/squzanswerer";
 
 export function createContainerWidgetScriptText(params: ContainerWidgetParams, widgetUrl: string) {