Merge branch 'dev' into 'main'

Dev

See merge request frontend/squiz!30

src/pages/Questions/DraggableList/QuestionPageCard.tsx

@@ -49,7 +49,10 @@ import { ArrowDownIcon } from "@icons/questionsPage/ArrowDownIcon";
 import { ReactComponent as PlusIcon } from "../../../assets/icons/plus.svg";
 
 import type { DraggableProvidedDragHandleProps } from "react-beautiful-dnd";
-import type { AnyQuizQuestion, QuizQuestionInitial } from "../../../model/questionTypes/shared";
+import type {
+  AnyQuizQuestion,
+  QuizQuestionInitial,
+} from "../../../model/questionTypes/shared";
 
 interface Props {
   totalIndex: number;

src/pages/Result/CreationFullCard.tsx

@@ -1,4 +1,4 @@
-import { Box, Typography } from "@mui/material";
+import { Box, Typography, useTheme, useMediaQuery } from "@mui/material";
 
 type Props = {
   text: string;
@@ -7,14 +7,20 @@ type Props = {
 };
 
 export default function CreationFullCard({ text, text2, image }: Props) {
+  const theme = useTheme();
+  const isSmallMonitor = useMediaQuery(theme.breakpoints.down(1500));
+
   return (
     <Box
       sx={{
         flexGrow: 1,
         backgroundColor: "white",
         p: "20px",
+        marginTop: "50px",
         borderRadius: "12px",
-        display: "flex",
+        display: isSmallMonitor ? "block" : "flex",
+        flexDirection: isSmallMonitor ? "column" : "row",
+        gap: "20px",
         boxShadow: `0px 100px 309px rgba(210, 208, 225, 0.24),
                    0px 41.7776px 129.093px rgba(210, 208, 225, 0.172525), 
                    0px 22.3363px 69.0192px rgba(210, 208, 225, 0.143066), 
@@ -23,36 +29,46 @@ export default function CreationFullCard({ text, text2, image }: Props) {
                    0px 2.76726px 8.55082px rgba(210, 208, 225, 0.0674749)`,
       }}
     >
-      <Box sx={{ mr: "104px", position: "relative" }}>
+      <Box
-        <Typography variant="h5">Результаты квиза в зависимости от ответов</Typography>
+        sx={{
-        <Typography
+          mr: !isSmallMonitor ? "104px" : 0,
+          marginBottom: "20px",
+          position: "relative",
+        }}
+      >
+        <Typography variant="h5" sx={{ marginBottom: "20px" }}>
+          Результаты квиза в зависимости от ответов
+        </Typography>
+        <Box
           sx={{
-            color: "#4D4D4D",
+            display: "flex",
-            mt: "20px",
+            flexDirection: "column",
-            mb: "33px",
+            justifyContent: "space-between",
-            width: "95%",
+            height: "100%",
+            maxHeight: isSmallMonitor ? "none" : "220px",
+            gap: "25px",
           }}
         >
-          {text}
+          <Typography sx={{ color: "#4D4D4D", width: "95%" }}>
-        </Typography>
+            {text}
-        <Typography
+          </Typography>
-          sx={{
+          <Typography
-            color: "#9A9AAF",
+            sx={{
-            width: "100%",
+              color: "#9A9AAF",
-            position: "absolute",
+              width: "100%",
-            bottom: 0,
+            }}
-          }}
+          >
-        >
+            {text2}
-          {text2}
+          </Typography>
-        </Typography>
+        </Box>
       </Box>
       <img
         src={image}
         alt="quiz creation"
         style={{
           display: "block",
-          width: "520px",
+          width: isSmallMonitor ? "100%" : "auto",
-          height: "270xp",
+          maxHeight: isSmallMonitor ? "none" : "270px",
         }}
       />
     </Box>

src/pages/Result/DescriptionForm/ButtinsOptionsForm.tsx

@@ -1,5 +1,5 @@
 import React from "react";
-import { Box, IconButton, useTheme } from "@mui/material";
+import { Box, IconButton, useTheme, useMediaQuery } from "@mui/material";
 import MiniButtonSetting from "@ui_kit/MiniButtonSetting";
 import SettingIcon from "@icons/questionsPage/settingIcon";
 import Branching from "@icons/questionsPage/branching";
@@ -15,20 +15,39 @@ interface Props {
 
 export default function ButtonsOptionsForm({ SSHC, switchState }: Props) {
   const theme = useTheme();
+  const isTablet = useMediaQuery(theme.breakpoints.down(800));
 
   const buttonSetting: { icon: JSX.Element; title: string; value: string }[] = [
     {
-      icon: <SettingIcon color={switchState === "setting" ? "#ffffff" : theme.palette.grey3.main} />,
+      icon: (
+        <SettingIcon
+          color={
+            switchState === "setting" ? "#ffffff" : theme.palette.grey3.main
+          }
+        />
+      ),
       title: "Настройки",
       value: "setting",
     },
     {
-      icon: <Branching color={switchState === "branching" ? "#ffffff" : theme.palette.grey3.main} />,
+      icon: (
+        <Branching
+          color={
+            switchState === "branching" ? "#ffffff" : theme.palette.grey3.main
+          }
+        />
+      ),
       title: "Ветвление",
       value: "branching",
     },
     {
-      icon: <StarIconPoints color={switchState === "points" ? "#ffffff" : theme.palette.grey3.main} />,
+      icon: (
+        <StarIconPoints
+          color={
+            switchState === "points" ? "#ffffff" : theme.palette.grey3.main
+          }
+        />
+      ),
       title: "Баллы",
       value: "points",
     },
@@ -47,6 +66,7 @@ export default function ButtonsOptionsForm({ SSHC, switchState }: Props) {
         sx={{
           padding: "20px",
           display: "flex",
+          flexWrap: "wrap",
           gap: "10px",
         }}
       >
@@ -57,18 +77,23 @@ export default function ButtonsOptionsForm({ SSHC, switchState }: Props) {
               SSHC(value);
             }}
             sx={{
-              backgroundColor: switchState === value ? theme.palette.brightPurple.main : "transparent",
+              backgroundColor:
-              color: switchState === value ? "#ffffff" : theme.palette.grey3.main,
+                switchState === value
+                  ? theme.palette.brightPurple.main
+                  : "transparent",
+              color:
+                switchState === value ? "#ffffff" : theme.palette.grey3.main,
             }}
           >
             {icon}
-            {title}
+            {!isTablet && title}
           </MiniButtonSetting>
         ))}
       </Box>
       <Box
         sx={{
           padding: "20px",
+          display: "flex",
         }}
       >
         <IconButton sx={{ borderRadius: "6px", padding: "2px" }}>

src/pages/Result/DescriptionForm/DescriptionForm.tsx

@@ -31,10 +31,12 @@ export const DescriptionForm = () => {
   return (
     <Box
       sx={{
-        width: "796px",
+        overflow: "hidden",
+        maxWidth: "796px",
         height: "100%",
         bgcolor: "#FFFFFF",
         borderRadius: "12px",
+        boxShadow: "0px 10px 30px #e7e7e7",
       }}
     >
       <Box sx={{ p: "0 20px", pt: "30px" }}>
@@ -57,7 +59,10 @@ export const DescriptionForm = () => {
         </Box>
 
         <Box sx={{ display: "flex" }}>
-          <PriceButtons ButtonsActive={buttonsActive} priceButtonsActive={priceButtonsActive} />
+          <PriceButtons
+            ButtonsActive={buttonsActive}
+            priceButtonsActive={priceButtonsActive}
+          />
           <DiscountButtons />
         </Box>
 
@@ -85,7 +90,10 @@ export const DescriptionForm = () => {
         {priceButtonsType === "smooth" ? (
           <Box sx={{ mb: "20px" }}>
             <Box sx={{ display: "flex", alignItems: "center", mb: "14xp" }}>
-              <Typography component={"h6"} sx={{ weight: "500", fontSize: "18px" }}>
+              <Typography
+                component={"h6"}
+                sx={{ weight: "500", fontSize: "18px" }}
+              >
                 Призыв к действию
               </Typography>
               <IconButton sx={{ borderRadius: "6px", padding: "2px" }}>
@@ -127,8 +135,13 @@ export const DescriptionForm = () => {
               </Button>
               {forwarding ? (
                 <Box sx={{ ml: "20px", mt: "-36px" }}>
-                  <Box sx={{ display: "flex", alignItems: "center", mb: "14xp" }}>
+                  <Box
-                    <Typography component={"h6"} sx={{ weight: "500", fontSize: "18px" }}>
+                    sx={{ display: "flex", alignItems: "center", mb: "14xp" }}
+                  >
+                    <Typography
+                      component={"h6"}
+                      sx={{ weight: "500", fontSize: "18px" }}
+                    >
                       Переадресация
                     </Typography>
                     <IconButton sx={{ borderRadius: "6px", padding: "2px" }}>

src/pages/Result/DescriptionForm/DiscountButtons.tsx

@@ -14,7 +14,10 @@ export default function DiscountButtons() {
           <DeleteIcon style={{ color: "#4D4D4D" }} />
         </IconButton>
       </Box>
-      <Box component="div" sx={{ mb: "20px" }}>
+      <Box
+        component="div"
+        sx={{ display: "flex", gap: "8px", flexWrap: "wrap", mb: "20px" }}
+      >
         <Button
           variant="contained"
           sx={{

src/pages/Result/DescriptionForm/ImageAndVideoButtons.tsx

@@ -1,4 +1,4 @@
-import { Box, Typography, useTheme } from "@mui/material";
+import { Box, Typography, useTheme, useMediaQuery } from "@mui/material";
 
 import AddImage from "@icons/questionsPage/addImage";
 import AddVideofile from "@icons/questionsPage/addVideofile";
@@ -7,11 +7,20 @@ import { CropModal } from "@ui_kit/Modal/CropModal";
 
 export default function ImageAndVideoButtons() {
   const theme = useTheme();
+  const isMobile = useMediaQuery(theme.breakpoints.down(400));
 
   const [opened, setOpened] = useState<boolean>(false);
 
   return (
-    <Box sx={{ display: "flex", alignItems: "center", gap: "12px", mt: "20px", mb: "20px" }}>
+    <Box
+      sx={{
+        display: "flex",
+        alignItems: "center",
+        gap: "12px",
+        mt: "20px",
+        mb: "20px",
+      }}
+    >
       <AddImage onClick={() => setOpened(true)} />
       <CropModal opened={opened} onClose={() => setOpened(false)} />
       <Typography
@@ -22,7 +31,7 @@ export default function ImageAndVideoButtons() {
           color: theme.palette.grey2.main,
         }}
       >
-        Изображение
+        {!isMobile && "Изображение"}
       </Typography>
       <Typography> или</Typography>
       <AddVideofile />
@@ -34,7 +43,7 @@ export default function ImageAndVideoButtons() {
           color: theme.palette.grey2.main,
         }}
       >
-        Видео
+        {!isMobile && "Видео"}
       </Typography>
     </Box>
   );

src/pages/Result/DescriptionForm/PriceButton.tsx

@@ -1,66 +1,73 @@
-import { Box, Button, IconButton, SxProps, Theme, Typography } from "@mui/material";
+import {
+  Box,
+  Button,
+  IconButton,
+  SxProps,
+  Theme,
+  Typography,
+} from "@mui/material";
 
 import { DeleteIcon } from "@icons/questionsPage/deleteIcon";
 
-const priceButtonsArray: { title: string; type: string; sx: SxProps<Theme> }[] = [
+const priceButtonsArray: { title: string; type: string; sx: SxProps<Theme> }[] =
-  {
+  [
-    title: "10000 ₽",
+    {
-    type: "10000 ₽",
+      title: "10000 ₽",
-    sx: {
+      type: "10000 ₽",
-      width: "110px",
+      sx: {
-      height: "48px",
+        width: "110px",
-      border: "1px solid #9A9AAF",
+        height: "48px",
+        border: "1px solid #9A9AAF",
+      },
     },
-  },
+    {
-  {
+      title: "Ровно",
-    title: "Ровно",
+      type: "smooth",
-    type: "smooth",
+      sx: {
-    sx: {
+        width: "94px",
-      width: "94px",
+        height: "48px",
-      height: "48px",
+        border: "1px solid #9A9AAF",
-      ml: "8px",
+      },
-      border: "1px solid #9A9AAF",
     },
-  },
+    {
-  {
+      title: "От и до",
-    title: "От и до",
+      type: "fromAndTo",
-    type: "fromAndTo",
+      sx: {
-    sx: {
+        width: "93px",
-      width: "93px",
+        height: "48px",
-      height: "48px",
+        border: "1px solid #9A9AAF",
-      ml: "8px",
+        whiteSpace: "nowrap",
-      border: "1px solid #9A9AAF",
+      },
-      whiteSpace: "nowrap",
     },
-  },
+    {
-  {
+      title: "ƒ",
-    title: "ƒ",
+      type: "ƒ",
-    type: "ƒ",
+      sx: {
-    sx: {
+        width: "38px",
-      width: "38px",
+        height: "48px",
-      height: "48px",
+        border: "1px solid #9A9AAF",
-      ml: "8px",
+      },
-      border: "1px solid #9A9AAF",
     },
-  },
+    {
-  {
+      title: "Скидка",
-    title: "Скидка",
+      type: "discount",
-    type: "discount",
+      sx: {
-    sx: {
+        width: "93px",
-      width: "93px",
+        height: "48px",
-      height: "48px",
+        border: "1px solid #9A9AAF",
-      border: "1px solid #9A9AAF",
+      },
-      ml: "8px",
     },
-  },
+  ];
-];
 
 type Props = {
   ButtonsActive: (index: number, type: string) => void;
   priceButtonsActive: number | undefined;
 };
 
-export default function PriceButtons({ ButtonsActive, priceButtonsActive }: Props) {
+export default function PriceButtons({
+  ButtonsActive,
+  priceButtonsActive,
+}: Props) {
   return (
     <Box>
       <Box sx={{ display: "flex", alignItems: "center", mb: "14xp" }}>
@@ -71,7 +78,10 @@ export default function PriceButtons({ ButtonsActive, priceButtonsActive }: Prop
           <DeleteIcon style={{ color: "#4D4D4D" }} />
         </IconButton>
       </Box>
-      <Box component="div" sx={{ mb: "20px" }}>
+      <Box
+        component="div"
+        sx={{ display: "flex", flexWrap: "wrap", gap: "8px", mb: "20px" }}
+      >
         {priceButtonsArray.map(({ title, type, sx }, index) => (
           <Button
             onClick={() => ButtonsActive(index, type)}

src/pages/Result/Result.tsx

@@ -1,5 +1,5 @@
-import { Link, useParams } from "react-router-dom";
+import { useParams } from "react-router-dom";
-import { Box, Button, useTheme } from "@mui/material";
+import { Box, Button, Tooltip, useTheme } from "@mui/material";
 import CreationFullCard from "./CreationFullCard";
 
 import Info from "../../assets/icons/Info";
@@ -21,19 +21,19 @@ export const Result = () => {
         text2="Этот шаг - необязательный, квиз будет работать и без автоматических результатов."
         image={image}
       />
-      <Box sx={{ mt: "30px", alignItems: "center" }}>
+      <Box sx={{ display: "flex", mt: "30px", alignItems: "center" }}>
         <Button
           variant="contained"
-          sx={{
+          sx={{ mr: "15px", minWidth: "258px" }}
-            mr: "23px",
-            minWidth: "258px",
-          }}
           onClick={handleNext}
         >
           Создать результаты
         </Button>
-
+        <Tooltip title="Посмотреть справку" placement="top">
-        <Info />
+          <Box>
+            <Info />
+          </Box>
+        </Tooltip>
       </Box>
     </Box>
   );

src/pages/Result/ResultListForm.tsx

@@ -12,9 +12,11 @@ import CustomCheckbox from "@ui_kit/CustomCheckbox";
 
 export const ResultListForm = () => {
   const [alignType, setAlignType] = useState<"left" | "right">("left");
-  const [proportions, setProportions] = useState<"oneOne" | "twoOne" | "oneTwo">("oneOne");
+  const [proportions, setProportions] = useState<
+    "oneOne" | "twoOne" | "oneTwo"
+  >("oneOne");
   return (
-    <Box sx={{ width: "796px", mb: "30px" }}>
+    <Box sx={{ maxWidth: "796px", mb: "30px" }}>
       <Box
         sx={{
           height: "100%",
@@ -31,9 +33,17 @@ export const ResultListForm = () => {
             mb: "20px",
           }}
         >
-          <Typography sx={{ color: "#9A9AAF" }}>Показывать результат</Typography>
+          <Typography sx={{ color: "#9A9AAF" }}>
+            Показывать результат
+          </Typography>
           <IconButton>
-            <svg width="30" height="30" viewBox="0 0 30 30" fill="none" xmlns="http://www.w3.org/2000/svg">
+            <svg
+              width="30"
+              height="30"
+              viewBox="0 0 30 30"
+              fill="none"
+              xmlns="http://www.w3.org/2000/svg"
+            >
               <rect width="30" height="30" rx="6" fill="#EEE4FC" />
               <path
                 d="M22.5 11.25L15 18.75L7.5 11.25"
@@ -175,7 +185,7 @@ export const ResultListForm = () => {
           />
         </Box>
         <Box sx={{ mt: "20px", display: "flex", alignItems: "center" }}>
-          <CustomCheckbox label={"Кнопка \"Не знаю, что выбрать\""}/>
+          <CustomCheckbox label={'Кнопка "Не знаю, что выбрать"'} />
           <Info />
         </Box>
       </Box>

src/pages/Result/Setting.tsx

@@ -8,18 +8,18 @@ import Info from "@icons/Info";
 import IconPlus from "@icons/IconPlus";
 import ArrowLeft from "@icons/questionsPage/arrowLeft";
 import React from "react";
-import {quizStore} from "@root/quizes";
+import { quizStore } from "@root/quizes";
-import {useParams} from "react-router-dom";
+import { useParams } from "react-router-dom";
 
 export const Setting = () => {
-    const {listQuizes, updateQuizesList} = quizStore();
+  const { listQuizes, updateQuizesList } = quizStore();
-    const params = Number(useParams().quizId);
+  const params = Number(useParams().quizId);
-    const handleNext = () => {
+  const handleNext = () => {
-        updateQuizesList(params, {step: listQuizes[params].step + 1})
+    updateQuizesList(params, { step: listQuizes[params].step + 1 });
-    }
+  };
   const theme = useTheme();
   return (
-    <Box sx={{ width: "796px" }}>
+    <Box sx={{ maxWidth: "796px" }}>
       <Box sx={{ display: "flex", alignItems: "center", mb: "40px" }}>
         <Typography sx={{ pr: "10px" }} variant="h5">
           Настройки результатов
@@ -46,7 +46,9 @@ export const Setting = () => {
       </Box>
       <CustomWrapper sx={{ mt: "30px" }} text="Показывать результат" />
       <CustomWrapper sx={{ mt: "30px" }} text="Настройки почты" />
-      <Box sx={{ display: "flex", alignItems: "center", mb: "15px", mt: "15px" }}>
+      <Box
+        sx={{ display: "flex", alignItems: "center", mb: "15px", mt: "15px" }}
+      >
         <Typography variant="p1" sx={{ color: "#4D4D4D", fontSize: "14px" }}>
           Создайте результат
         </Typography>
@@ -70,22 +72,39 @@ export const Setting = () => {
         </Button>
       </Box>
       <CustomWrapper result={true} text="Показывать результат" />
-      <Box sx={{ width: "850px", display: "flex", alignItems: "center" }}>
+      <Box
-        <Typography sx={{ color: "#7E2AEA", cursor: "default" }}>
+        sx={{
-          - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - -
+          display: "flex",
-          - - - - - - -
+          width: "100%",
-          <IconPlus />
+          alignItems: "center",
-        </Typography>
+          columnGap: "10px",
+        }}
+      >
+        <Box
+          sx={{
+            boxSizing: "border-box",
+            width: "100%",
+            height: "1px",
+            backgroundPosition: "bottom",
+            backgroundRepeat: "repeat-x",
+            backgroundSize: "20px 1px",
+            backgroundImage:
+              "radial-gradient(circle, #7E2AEA 6px, #F2F3F7 1px)",
+          }}
+        />
+        <IconPlus />
       </Box>
-
       <CustomWrapper result={true} text="Настройки почты" />
       <Box sx={{ pt: "30px", display: "flex", alignItems: "center" }}>
         <Plus />
         <Typography component="div" sx={{ ml: "auto" }}>
-            <Button variant='outlined' sx={{padding: '10px 20px', borderRadius: '8px'}}>
+          <Button
-                <ArrowLeft/>
+            variant="outlined"
-            </Button>
+            sx={{ padding: "10px 20px", borderRadius: "8px" }}
-          <Button variant="contained" sx={{ml: "10px",}} onClick={handleNext}>
+          >
+            <ArrowLeft />
+          </Button>
+          <Button variant="contained" sx={{ ml: "10px" }} onClick={handleNext}>
             Настроить форму
           </Button>
         </Typography>

src/pages/Result/SettingForm.tsx

@@ -1,5 +1,14 @@
 import { useState } from "react";
-import { Box, Button, IconButton, SxProps, Theme, Typography } from "@mui/material";
+import {
+  Box,
+  Button,
+  IconButton,
+  SxProps,
+  Theme,
+  Typography,
+  useTheme,
+  useMediaQuery,
+} from "@mui/material";
 import { SwitchSetting } from "./SwichResult";
 
 import Info from "@icons/Info";
@@ -10,17 +19,35 @@ import ArrowCounterClockWise from "@icons/ArrowCounterClockWise.svg";
 
 const buttonSetting: { title: string; sx: SxProps<Theme>; type: string }[] = [
   {
-    sx: { backgroundColor: "#7E2AEA", color: "white", width: "237px", height: "44px", border: "1px solid #9A9AAF" },
+    sx: {
+      backgroundColor: "#7E2AEA",
+      color: "white",
+      width: "237px",
+      height: "44px",
+      border: "1px solid #9A9AAF",
+    },
     title: "До формы контактов",
     type: "toContactForm",
   },
   {
-    sx: { backgroundColor: "#F2F3F7", color: "#9A9AAF", width: "266px", height: "44px", border: "1px solid #9A9AAF" },
+    sx: {
+      backgroundColor: "#F2F3F7",
+      color: "#9A9AAF",
+      width: "266px",
+      height: "44px",
+      border: "1px solid #9A9AAF",
+    },
     title: "После формы контактов",
     type: "afterСontactForm",
   },
   {
-    sx: { color: "#9A9AAF", backgroundColor: "#F2F3F7", width: "233px", height: "44px", border: "1px solid #9A9AAF" },
+    sx: {
+      color: "#9A9AAF",
+      backgroundColor: "#F2F3F7",
+      width: "233px",
+      height: "44px",
+      border: "1px solid #9A9AAF",
+    },
     title: "Отправить на E-mail",
     type: "e-mail",
   },
@@ -29,6 +56,8 @@ const buttonSetting: { title: string; sx: SxProps<Theme>; type: string }[] = [
 export const SettingForm = () => {
   const [activeIndex, setActiveIndex] = useState<number>(0);
   const [typeActive, setTypeActive] = useState<string>("toContactForm");
+  const theme = useTheme();
+  const isSmallMonitor = useMediaQuery(theme.breakpoints.down(1100));
 
   const active = (index: number, type: string) => {
     setActiveIndex(index);
@@ -36,7 +65,7 @@ export const SettingForm = () => {
   };
 
   return (
-    <Box component="section" sx={{ width: "796px" }}>
+    <Box component="section" sx={{ maxWidth: "796px" }}>
       <Box sx={{ display: "flex", alignItems: "center", mb: "40px" }}>
         <Typography sx={{ pr: "10px" }} variant="h5">
           Настройки результатов
@@ -63,7 +92,13 @@ export const SettingForm = () => {
             Показывать результат
           </Typography>
           <IconButton>
-            <svg width="30" height="30" viewBox="0 0 30 30" fill="none" xmlns="http://www.w3.org/2000/svg">
+            <svg
+              width="30"
+              height="30"
+              viewBox="0 0 30 30"
+              fill="none"
+              xmlns="http://www.w3.org/2000/svg"
+            >
               <rect width="30" height="30" rx="6" fill="#EEE4FC" />
               <path
                 d="M22.5 11.25L15 18.75L7.5 11.25"
@@ -75,7 +110,15 @@ export const SettingForm = () => {
             </svg>
           </IconButton>
         </Box>
-        <Box sx={{ display: "flex", justifyContent: "space-between", mb: "20px" }}>
+        <Box
+          sx={{
+            display: "flex",
+            flexDirection: isSmallMonitor ? "column" : "row",
+            justifyContent: "space-between",
+            gap: "20px",
+            mb: "20px",
+          }}
+        >
           {buttonSetting.map(({ sx, title, type }, index) => (
             <Button
               disableRipple
@@ -85,6 +128,7 @@ export const SettingForm = () => {
                 ...sx,
                 bgcolor: activeIndex === index ? " #7E2AEA" : "#F2F3F7",
                 color: activeIndex === index ? " white" : "#9A9AAF",
+                minWidth: isSmallMonitor ? "300px" : "auto",
               }}
             >
               {title}
@@ -92,16 +136,27 @@ export const SettingForm = () => {
           ))}
         </Box>
         {typeActive === "e-mail" ? (
-          <SwitchSetting icon={listChecks} text="Показывать несколько результатов" />
+          <SwitchSetting
+            icon={listChecks}
+            text="Показывать несколько результатов"
+          />
         ) : (
           <>
-            <SwitchSetting icon={listChecks} text="Показывать несколько результатов" />
+            <SwitchSetting
+              icon={listChecks}
+              text="Показывать несколько результатов"
+            />
             <SwitchSetting icon={ShareNetwork} text="Поделиться результатами" />
-            <SwitchSetting icon={ArrowCounterClockWise} text="Кнопка `Пройти тест заново`" />
+            <SwitchSetting
+              icon={ArrowCounterClockWise}
+              text="Кнопка `Пройти тест заново`"
+            />
           </>
         )}
       </Box>
-      <Box sx={{ display: "flex", alignItems: "center", mb: "15px", mt: "15px" }}>
+      <Box
+        sx={{ display: "flex", alignItems: "center", mb: "15px", mt: "15px" }}
+      >
         <Typography variant="p1" sx={{ color: "#4D4D4D", fontSize: "14px" }}>
           Создайте результат
         </Typography>

src/pages/startPage/stepOne.tsx

@@ -44,10 +44,7 @@ export default function StepOne() {
           onClick={() => {
             let SPageClone = listQuizes[params].config;
             SPageClone.type = "form";
-            updateQuizesList(params, {
+            updateQuizesList(params, { config: SPageClone });
-              config: SPageClone,
-              step: listQuizes[params].step + 1,
-            });
           }}
         >
           <CreationCard

src/stores/questions.ts

@@ -26,7 +26,6 @@ import { QUIZ_QUESTION_VARIANT } from "../constants/variant";
 import { QUIZ_QUESTION_VARIMG } from "../constants/varimg";
 import { setAutoFreeze } from "immer";
 
-
 setAutoFreeze(false);
 
 interface QuestionStore {
@@ -63,37 +62,40 @@ export const questionStore = create<QuestionStore>()(
 
         return state;
       },
-        merge: (persistedState, currentState) => {
+      merge: (persistedState, currentState) => {
-            const state = persistedState as QuestionStore;
+        const state = persistedState as QuestionStore;
 
-            // replace blob urls with ""
+        // replace blob urls with ""
-            Object.values(state.listQuestions).forEach(questions => {
+        Object.values(state.listQuestions).forEach((questions) => {
-                questions.forEach(question => {
+          questions.forEach((question) => {
-                    if (question.type === "page" && question.content.picture.startsWith("blob:")) {
+            if (
-                        question.content.picture = "";
+              question.type === "page" &&
-                    }
+              question.content.picture.startsWith("blob:")
-                    if (question.type === "images") {
+            ) {
-                        question.content.variants.forEach(variant => {
+              question.content.picture = "";
-                            if (variant.extendedText.startsWith("blob:")) {
+            }
-                                variant.extendedText = "";
+            if (question.type === "images") {
-                            }
+              question.content.variants.forEach((variant) => {
-                        });
+                if (variant.extendedText.startsWith("blob:")) {
-                    }
+                  variant.extendedText = "";
-                    if (question.type === "varimg") {
+                }
-                        question.content.variants.forEach(variant => {
+              });
-                            if (variant.extendedText.startsWith("blob:")) {
+            }
-                                variant.extendedText = "";
+            if (question.type === "varimg") {
-                            }
+              question.content.variants.forEach((variant) => {
-                        });
+                if (variant.extendedText.startsWith("blob:")) {
-                    }
+                  variant.extendedText = "";
-                });
+                }
-            });
+              });
+            }
+          });
+        });
 
-            return {
+        return {
-                ...currentState,
+          ...currentState,
-                ...state,
+          ...state,
-            };
+        };
-        },
+      },
     }
   )
 );
@@ -191,13 +193,11 @@ export const createQuestion = (
 export const copyQuestion = (quizId: number, copiedQuestionIndex: number) => {
   const listQuestions = { ...questionStore.getState()["listQuestions"] };
 
-  const copiedQuiz = listQuestions[quizId][copiedQuestionIndex]
+  const copiedQuiz = { ...listQuestions[quizId][copiedQuestionIndex] };
-  copiedQuiz.id = getRandom()
+  listQuestions[quizId].splice(copiedQuestionIndex, 0, {
-  listQuestions[quizId].splice(
+    ...copiedQuiz,
-    copiedQuestionIndex,
+    id: getRandom(),
-    0,
+  });
-    copiedQuiz
-  );
 
   questionStore.setState({ listQuestions });
 };
@@ -238,4 +238,4 @@ function getRandom() {
   const min = Math.ceil(1000000);
   const max = Math.floor(10000000);
   return Math.floor(Math.random() * (max - min)) + min;
-}
+}

src/ui_kit/CustomWrapper.tsx

@@ -22,7 +22,7 @@ export default function CustomWrapper({ text, sx, result }: Props) {
   return (
     <Box
       sx={{
-        width: "796px",
+        maxWidth: "796px",
 
         overflow: "hidden",
         borderRadius: "12px",

src/ui_kit/switchStepPages.tsx

@@ -25,7 +25,6 @@ export default function SwitchStepPages({
   switch (activeStep) {
     case 1:
       if (!quizType) return <StepOne />;
-      if (quizType === "form") return <></>;
       if (!startpage) return <Steptwo />;
       return <StartPageSettings />;
     case 2: