fix: result styles

src/pages/Result/DescriptionForm/DescriptionForm.tsx

@@ -31,7 +31,7 @@ export const DescriptionForm = () => {
   return (
     <Box
       sx={{
-        width: "796px",
+        maxWidth: "796px",
         height: "100%",
         bgcolor: "#FFFFFF",
         borderRadius: "12px",
@@ -57,7 +57,10 @@ export const DescriptionForm = () => {
         </Box>
 
         <Box sx={{ display: "flex" }}>
-          <PriceButtons ButtonsActive={buttonsActive} priceButtonsActive={priceButtonsActive} />
+          <PriceButtons
+            ButtonsActive={buttonsActive}
+            priceButtonsActive={priceButtonsActive}
+          />
           <DiscountButtons />
         </Box>
 
@@ -85,7 +88,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 +133,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/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/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/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",