Merge branch 'dev' into 'main'

Dev See merge request frontend/squiz!30
2023-10-16 18:18:40 +00:00 · 2023-10-16 18:18:40 +00:00 · 062d253601
commit 062d253601
parent 144079c264 b3b4947a6c
15 changed files with 339 additions and 180 deletions
--- a/src/pages/Questions/DraggableList/QuestionPageCard.tsx
+++ b/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;
--- a/src/pages/Result/CreationFullCard.tsx
+++ b/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" }}>
-        <Typography variant="h5">Результаты квиза в зависимости от ответов</Typography>
-        <Typography
+      <Box
+        sx={{
+          mr: !isSmallMonitor ? "104px" : 0,
+          marginBottom: "20px",
+          position: "relative",
+        }}
+      >
+        <Typography variant="h5" sx={{ marginBottom: "20px" }}>
+          Результаты квиза в зависимости от ответов
+        </Typography>
+        <Box
          sx={{
-            color: "#4D4D4D",
-            mt: "20px",
-            mb: "33px",
-            width: "95%",
+            display: "flex",
+            flexDirection: "column",
+            justifyContent: "space-between",
+            height: "100%",
+            maxHeight: isSmallMonitor ? "none" : "220px",
+            gap: "25px",
          }}
        >
-          {text}
-        </Typography>
-        <Typography
-          sx={{
-            color: "#9A9AAF",
-            width: "100%",
-            position: "absolute",
-            bottom: 0,
-          }}
-        >
-          {text2}
-        </Typography>
+          <Typography sx={{ color: "#4D4D4D", width: "95%" }}>
+            {text}
+          </Typography>
+          <Typography
+            sx={{
+              color: "#9A9AAF",
+              width: "100%",
+            }}
+          >
+            {text2}
+          </Typography>
+        </Box>
      </Box>
      <img
        src={image}
        alt="quiz creation"
        style={{
          display: "block",
-          width: "520px",
-          height: "270xp",
+          width: isSmallMonitor ? "100%" : "auto",
+          maxHeight: isSmallMonitor ? "none" : "270px",
        }}
      />
    </Box>
--- a/src/pages/Result/DescriptionForm/ButtinsOptionsForm.tsx
+++ b/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",
-              color: switchState === value ? "#ffffff" : theme.palette.grey3.main,
+              backgroundColor:
+                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" }}>
--- a/src/pages/Result/DescriptionForm/DescriptionForm.tsx
+++ b/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" }}>
-                    <Typography component={"h6"} sx={{ weight: "500", fontSize: "18px" }}>
+                  <Box
+                    sx={{ display: "flex", alignItems: "center", mb: "14xp" }}
+                  >
+                    <Typography
+                      component={"h6"}
+                      sx={{ weight: "500", fontSize: "18px" }}
+                    >
                      Переадресация
                    </Typography>
                    <IconButton sx={{ borderRadius: "6px", padding: "2px" }}>
--- a/src/pages/Result/DescriptionForm/DiscountButtons.tsx
+++ b/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={{
--- a/src/pages/Result/DescriptionForm/ImageAndVideoButtons.tsx
+++ b/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>
  );
--- a/src/pages/Result/DescriptionForm/PriceButton.tsx
+++ b/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> }[] = [
-  {
-    title: "10000 ₽",
-    type: "10000 ₽",
-    sx: {
-      width: "110px",
-      height: "48px",
-      border: "1px solid #9A9AAF",
+const priceButtonsArray: { title: string; type: string; sx: SxProps<Theme> }[] =
+  [
+    {
+      title: "10000 ₽",
+      type: "10000 ₽",
+      sx: {
+        width: "110px",
+        height: "48px",
+        border: "1px solid #9A9AAF",
+      },
    },
-  },
-  {
-    title: "Ровно",
-    type: "smooth",
-    sx: {
-      width: "94px",
-      height: "48px",
-      ml: "8px",
-      border: "1px solid #9A9AAF",
+    {
+      title: "Ровно",
+      type: "smooth",
+      sx: {
+        width: "94px",
+        height: "48px",
+        border: "1px solid #9A9AAF",
+      },
    },
-  },
-  {
-    title: "От и до",
-    type: "fromAndTo",
-    sx: {
-      width: "93px",
-      height: "48px",
-      ml: "8px",
-      border: "1px solid #9A9AAF",
-      whiteSpace: "nowrap",
+    {
+      title: "От и до",
+      type: "fromAndTo",
+      sx: {
+        width: "93px",
+        height: "48px",
+        border: "1px solid #9A9AAF",
+        whiteSpace: "nowrap",
+      },
    },
-  },
-  {
-    title: "ƒ",
-    type: "ƒ",
-    sx: {
-      width: "38px",
-      height: "48px",
-      ml: "8px",
-      border: "1px solid #9A9AAF",
+    {
+      title: "ƒ",
+      type: "ƒ",
+      sx: {
+        width: "38px",
+        height: "48px",
+        border: "1px solid #9A9AAF",
+      },
    },
-  },
-  {
-    title: "Скидка",
-    type: "discount",
-    sx: {
-      width: "93px",
-      height: "48px",
-      border: "1px solid #9A9AAF",
-      ml: "8px",
+    {
+      title: "Скидка",
+      type: "discount",
+      sx: {
+        width: "93px",
+        height: "48px",
+        border: "1px solid #9A9AAF",
+      },
    },
-  },
-];
+  ];

 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)}
--- a/src/pages/Result/Result.tsx
+++ b/src/pages/Result/Result.tsx
@ -1,5 +1,5 @@
-import { Link, useParams } from "react-router-dom";
-import { Box, Button, useTheme } from "@mui/material";
+import { useParams } from "react-router-dom";
+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={{
-            mr: "23px",
-            minWidth: "258px",
-          }}
+          sx={{ mr: "15px", minWidth: "258px" }}
          onClick={handleNext}
        >
          Создать результаты
        </Button>
-
-        <Info />
+        <Tooltip title="Посмотреть справку" placement="top">
+          <Box>
+            <Info />
+          </Box>
+        </Tooltip>
      </Box>
    </Box>
  );
--- a/src/pages/Result/ResultListForm.tsx
+++ b/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>
--- a/src/pages/Result/Setting.tsx
+++ b/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 {useParams} from "react-router-dom";
+import { quizStore } from "@root/quizes";
+import { useParams } from "react-router-dom";

 export const Setting = () => {
-    const {listQuizes, updateQuizesList} = quizStore();
-    const params = Number(useParams().quizId);
-    const handleNext = () => {
-        updateQuizesList(params, {step: listQuizes[params].step + 1})
-    }
+  const { listQuizes, updateQuizesList } = quizStore();
+  const params = Number(useParams().quizId);
+  const handleNext = () => {
+    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" }}>
-        <Typography sx={{ color: "#7E2AEA", cursor: "default" }}>
-          - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - -
-          - - - - - - -
-          <IconPlus />
-        </Typography>
+      <Box
+        sx={{
+          display: "flex",
+          width: "100%",
+          alignItems: "center",
+          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'}}>
-                <ArrowLeft/>
-            </Button>
-          <Button variant="contained" sx={{ml: "10px",}} onClick={handleNext}>
+          <Button
+            variant="outlined"
+            sx={{ padding: "10px 20px", borderRadius: "8px" }}
+          >
+            <ArrowLeft />
+          </Button>
+          <Button variant="contained" sx={{ ml: "10px" }} onClick={handleNext}>
            Настроить форму
          </Button>
        </Typography>
--- a/src/pages/Result/SettingForm.tsx
+++ b/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>
--- a/src/pages/startPage/stepOne.tsx
+++ b/src/pages/startPage/stepOne.tsx
@ -44,10 +44,7 @@ export default function StepOne() {
          onClick={() => {
            let SPageClone = listQuizes[params].config;
            SPageClone.type = "form";
-            updateQuizesList(params, {
-              config: SPageClone,
-              step: listQuizes[params].step + 1,
-            });
+            updateQuizesList(params, { config: SPageClone });
          }}
        >
          <CreationCard
--- a/src/stores/questions.ts
+++ b/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) => {
-            const state = persistedState as QuestionStore;
+      merge: (persistedState, currentState) => {
+        const state = persistedState as QuestionStore;

-            // replace blob urls with ""
-            Object.values(state.listQuestions).forEach(questions => {
-                questions.forEach(question => {
-                    if (question.type === "page" && question.content.picture.startsWith("blob:")) {
-                        question.content.picture = "";
-                    }
-                    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 = "";
-                            }
-                        });
-                    }
-                });
-            });
+        // replace blob urls with ""
+        Object.values(state.listQuestions).forEach((questions) => {
+          questions.forEach((question) => {
+            if (
+              question.type === "page" &&
+              question.content.picture.startsWith("blob:")
+            ) {
+              question.content.picture = "";
+            }
+            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 = "";
+                }
+              });
+            }
+          });
+        });

-            return {
-                ...currentState,
-                ...state,
-            };
-        },
+        return {
+          ...currentState,
+          ...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]
-  copiedQuiz.id = getRandom()
-  listQuestions[quizId].splice(
-    copiedQuestionIndex,
-    0,
-    copiedQuiz
-  );
+  const copiedQuiz = { ...listQuestions[quizId][copiedQuestionIndex] };
+  listQuestions[quizId].splice(copiedQuestionIndex, 0, {
+    ...copiedQuiz,
+    id: getRandom(),
+  });

  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;
-}
+}
--- a/src/ui_kit/CustomWrapper.tsx
+++ b/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",
--- a/src/ui_kit/switchStepPages.tsx
+++ b/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: