is Full Tablet && desktop version

src/assets/icons/questionsPage/StarIconMini.tsx

@@ -2,26 +2,21 @@ import { Box } from "@mui/material";
 
 interface Props {
   color: string;
+  width?: string;
 }
 
-export default function StarIconMini({ color }: Props) {
+export default function StarIconMini({ color, width = "30px" }: Props) {
   return (
     <Box
       sx={{
         height: "30px",
-        width: "30px",
+        width: width,
         display: "flex",
         alignItems: "center",
         justifyContent: "center",
       }}
     >
-      <svg
+      <svg width="28" height="27" viewBox="0 0 28 27" fill="none" xmlns="http://www.w3.org/2000/svg">
-        width="28"
-        height="27"
-        viewBox="0 0 28 27"
-        fill="none"
-        xmlns="http://www.w3.org/2000/svg"
-      >
         <path
           d="M14.551 21.8375L20.851 25.8375C21.6635 26.35 22.6635 25.5875 22.426 24.65L20.601 17.475C20.5516 17.2762 20.5595 17.0674 20.6236 16.8728C20.6877 16.6781 20.8056 16.5056 20.9635 16.375L26.6135 11.6625C27.351 11.05 26.976 9.81253 26.0135 9.75003L18.6385 9.27503C18.4372 9.26332 18.2438 9.19325 18.0817 9.07338C17.9197 8.95351 17.7961 8.78902 17.726 8.60003L14.976 1.67503C14.9032 1.47491 14.7706 1.30204 14.5961 1.17988C14.4217 1.05772 14.2139 0.992188 14.001 0.992188C13.788 0.992188 13.5802 1.05772 13.4058 1.17988C13.2314 1.30204 13.0988 1.47491 13.026 1.67503L10.276 8.60003C10.2059 8.78902 10.0823 8.95351 9.92021 9.07338C9.75816 9.19325 9.5647 9.26332 9.36347 9.27503L1.98847 9.75003C1.02597 9.81253 0.650971 11.05 1.38847 11.6625L7.03847 16.375C7.19639 16.5056 7.3142 16.6781 7.37834 16.8728C7.44247 17.0674 7.45032 17.2762 7.40097 17.475L5.71347 24.125C5.42597 25.25 6.62597 26.1625 7.58847 25.55L13.451 21.8375C13.6154 21.733 13.8062 21.6775 14.001 21.6775C14.1958 21.6775 14.3866 21.733 14.551 21.8375Z"
           fill={color}

src/assets/icons/questionsPage/VideofileIcon.tsx

@@ -0,0 +1,14 @@
+import { FC, SVGProps } from "react";
+
+export const VideofileIcon: FC<SVGProps<SVGSVGElement>> = (props) => (
+  <svg {...props} height="1em" viewBox="0 0 27 22" fill="none" xmlns="http://www.w3.org/2000/svg">
+    <path
+      d="M1.90476 1H16.381C17.3408 1 18.2613 1.4958 18.94 2.37832C19.6187 3.26085 20 4.4578 20 5.70588V19.8235C20 20.1355 19.9047 20.4348 19.735 20.6554C19.5653 20.8761 19.3352 21 19.0952 21H4.61905C3.65922 21 2.7387 20.5042 2.05999 19.6217C1.38129 18.7392 1 17.5422 1 16.2941V2.17647C1 1.86445 1.09532 1.56521 1.265 1.34458C1.43467 1.12395 1.6648 1 1.90476 1V1Z"
+      stroke="currentColor"
+      strokeWidth="2"
+      strokeLinecap="round"
+      strokeLinejoin="round"
+    />
+    <path d="M20 9L26 5V17L20 13" stroke="currentColor" strokeWidth="2" strokeLinecap="round" strokeLinejoin="round" />
+  </svg>
+);

src/pages/Questions/DataOptions/DataOptions.tsx

@@ -1,11 +1,5 @@
 import { useParams } from "react-router-dom";
-import {
+import { Box, Typography, Tooltip, useMediaQuery, useTheme } from "@mui/material";
-  Box,
-  Typography,
-  Tooltip,
-  useMediaQuery,
-  useTheme,
-} from "@mui/material";
 import ButtonsOptions from "../ButtonsOptions";
 import SwitchData from "./switchData";
 import { useState, useEffect } from "react";
@@ -43,16 +37,15 @@ export default function DataOptions({ totalIndex }: Props) {
           width: isMobile ? "auto" : "100%",
           maxWidth: "493px",
           display: "flex",
-          padding: "20px",
+          pl: "20px",
+          pr: "20px",
           flexDirection: "column",
-          gap: "20px",
+          gap: isMobile ? "18px" : "20px",
         }}
       >
         <Box sx={{ gap: "10px", display: "flex", flexWrap: "wrap" }}>
           <SelectableButton
-            isSelected={
+            isSelected={listQuestions[quizId][totalIndex].content.type === "calendar"}
-              listQuestions[quizId][totalIndex].content.type === "calendar"
-            }
             onClick={() => {
               const clonContent = listQuestions[quizId][totalIndex].content;
               clonContent.type = "calendar";
@@ -63,9 +56,7 @@ export default function DataOptions({ totalIndex }: Props) {
             Использовать календарь
           </SelectableButton>
           <SelectableButton
-            isSelected={
+            isSelected={listQuestions[quizId][totalIndex].content.type === "mask"}
-              listQuestions[quizId][totalIndex].content.type === "mask"
-            }
             onClick={() => {
               const clonContent = listQuestions[quizId][totalIndex].content;
               clonContent.type = "mask";
@@ -76,7 +67,7 @@ export default function DataOptions({ totalIndex }: Props) {
             Использовать маску
           </SelectableButton>
         </Box>
-        <Box sx={{ display: "flex", alignItems: "center", gap: "12px" }}>
+        <Box sx={{ display: "flex", alignItems: "center", gap: "12px", mb: "20px" }}>
           <Typography
             sx={{
               fontWeight: 400,
@@ -94,11 +85,7 @@ export default function DataOptions({ totalIndex }: Props) {
           </Tooltip>
         </Box>
       </Box>
-      <ButtonsOptions
+      <ButtonsOptions switchState={switchState} SSHC={SSHC} totalIndex={totalIndex} />
-        switchState={switchState}
-        SSHC={SSHC}
-        totalIndex={totalIndex}
-      />
       <SwitchData switchState={switchState} totalIndex={totalIndex} />
     </>
   );

src/pages/Questions/DataOptions/settingData.tsx

@@ -1,11 +1,5 @@
 import { useParams } from "react-router-dom";
-import {
+import { Box, Typography, Tooltip, useMediaQuery, useTheme } from "@mui/material";
-  Box,
-  Typography,
-  Tooltip,
-  useMediaQuery,
-  useTheme,
-} from "@mui/material";
 import { useDebouncedCallback } from "use-debounce";
 import CustomCheckbox from "@ui_kit/CustomCheckbox";
 import CustomTextField from "@ui_kit/CustomTextField";
@@ -22,6 +16,7 @@ export default function SettingsData({ totalIndex }: SettingsDataProps) {
   const theme = useTheme();
   const isWrappColumn = useMediaQuery(theme.breakpoints.down(980));
   const isMobile = useMediaQuery(theme.breakpoints.down(790));
+  const isFigmaTablte = useMediaQuery(theme.breakpoints.down(990));
 
   const debounced = useDebouncedCallback((value) => {
     let clonContent = listQuestions[quizId][totalIndex].content;
@@ -37,8 +32,20 @@ export default function SettingsData({ totalIndex }: SettingsDataProps) {
         flexDirection: isWrappColumn ? "column" : null,
       }}
     >
-      <Box sx={{ pt: "20px", pl: "20px", pb: "20px" }}>
+      <Box
-        <Typography>Настройки календаря</Typography>
+        sx={{
+          pt: isMobile ? "25px" : "20px",
+          pb: isMobile ? "25px" : "20px",
+          pl: "20px",
+          display: "flex",
+          flexDirection: "column",
+          gap: "14px",
+          width: "100%",
+        }}
+      >
+        <Typography sx={{ height: isMobile ? "18px" : "auto", fontWeight: "500", fontSize: "18px", color: " #4D4D4D" }}>
+          Настройки календаря
+        </Typography>
         <CustomCheckbox
           sx={{ display: "block", mr: isMobile ? "0px" : "16px" }}
           label={"Выбор диапазона дат"}
@@ -62,14 +69,19 @@ export default function SettingsData({ totalIndex }: SettingsDataProps) {
       </Box>
       <Box
         sx={{
-          padding: isWrappColumn
+          pt: isMobile ? "0px" : "20px",
-            ? "0px 20px 20px 20px "
+          pb: "20px",
-            : "20px 20px 20px 20px",
+          pl: isFigmaTablte ? (isWrappColumn ? "20px" : "34px") : "20px",
-          minWidth: isWrappColumn ? null : "350px",
+          pr: isFigmaTablte ? "19px" : "20px",
-          marginRight: "30px",
+          display: "flex",
+          flexDirection: "column",
+          gap: isMobile ? "13px" : "14px",
+          width: "100%",
         }}
       >
-        <Typography>Настройки вопросов</Typography>
+        <Typography sx={{ height: isMobile ? "18px" : "auto", fontWeight: "500", fontSize: "18px", color: " #4D4D4D" }}>
+          Настройки вопросов
+        </Typography>
         <CustomCheckbox
           sx={{ mr: isMobile ? "0px" : "16px" }}
           label={"Необязательный вопрос"}
@@ -95,10 +107,7 @@ export default function SettingsData({ totalIndex }: SettingsDataProps) {
               updateQuestionsList(quizId, totalIndex, { content: clonContent });
             }}
           />
-          <Tooltip
+          <Tooltip title="Будет отображаться как заголовок вопроса в приходящих заявках." placement="top">
-            title="Будет отображаться как заголовок вопроса в приходящих заявках."
-            placement="top"
-          >
             <Box>
               <InfoIcon />
             </Box>

src/pages/Questions/DropDown/DropDown.tsx

@@ -39,7 +39,7 @@ export default function DropDown({ totalIndex }: Props) {
 
   return (
     <>
-      <Box sx={{ padding: isMobile ? "15px 20px 20px 20px" : "20px 20px 20px 20px " }}>
+      <Box sx={{ pl: "20px", pr: "20px" }}>
         {variants.length === 0 ? (
           <Typography
             sx={{
@@ -55,11 +55,23 @@ export default function DropDown({ totalIndex }: Props) {
         ) : (
           <AnswerDraggableList variants={variants} totalIndex={totalIndex} />
         )}
-        <Box sx={{ display: "flex", alignItems: "center", gap: "10px" }}>
+        <Box
+          sx={{
+            display: "flex",
+            alignItems: "center",
+            marginBottom: "17px",
+          }}
+        >
           <Link
             component="button"
             variant="body2"
-            sx={{ color: theme.palette.brightPurple.main }}
+            sx={{
+              color: theme.palette.brightPurple.main,
+              fontWeight: "400",
+              fontSize: "16px",
+              mr: "4px",
+              height: "19px",
+            }}
             onClick={addNewAnswer}
           >
             Добавьте ответ
@@ -69,14 +81,14 @@ export default function DropDown({ totalIndex }: Props) {
               <Typography
                 sx={{
                   fontWeight: 400,
-                  fontSize: "18px",
                   lineHeight: "21.33px",
                   color: theme.palette.grey2.main,
+                  fontSize: "16px",
                 }}
               >
                 или нажмите Enter
               </Typography>
-              <EnterIcon color="#7E2AEA" />
+              <EnterIcon style={{ color: "#7E2AEA", fontSize: "24px", marginLeft: "6px" }} />
             </>
           )}
         </Box>

src/pages/Questions/DropDown/settingDropDown.tsx

@@ -18,6 +18,8 @@ export default function SettingDropDown({ totalIndex }: SettingDropDownProps) {
 
   const theme = useTheme();
   const isTablet = useMediaQuery(theme.breakpoints.down(1000));
+  const isFigmaTablte = useMediaQuery(theme.breakpoints.down(990));
+
   const isMobile = useMediaQuery(theme.breakpoints.down(790));
   const debounced = useDebouncedCallback((value) => {
     let clonContent = listQuestions[quizId][totalIndex].content;
@@ -43,11 +45,18 @@ export default function SettingDropDown({ totalIndex }: SettingDropDownProps) {
       >
         <Box
           sx={{
-            padding: isMobile ? "20px 20px 0px 20px" : "20px 20px 20px 20px",
+            pt: isMobile ? "25px" : "20px",
+            pb: isMobile ? "25px" : "20px",
+            pl: "20px",
+            display: "flex",
+            flexDirection: "column",
+            gap: "14px",
             width: "100%",
           }}
         >
-          <Typography sx={{ marginBottom: "15px" }}>
+          <Typography
+            sx={{ height: isMobile ? "18px" : "auto", fontWeight: "500", fontSize: "18px", color: " #4D4D4D" }}
+          >
             Настройки ответов
           </Typography>
           <CustomCheckbox
@@ -63,19 +72,34 @@ export default function SettingDropDown({ totalIndex }: SettingDropDownProps) {
             }
           />
           <Box sx={{ display: isMobile ? "none" : "block" }}>
-            <Typography sx={{ marginBottom: "15px" }}>
+            <Typography
+              sx={{ height: isMobile ? "18px" : "auto", fontWeight: "500", fontSize: "18px", color: " #4D4D4D" }}
+            >
               Текст в выпадающем списке
             </Typography>
-            <CustomTextField
-              sx={{ maxWidth: "360px" }}
-              placeholder={"Выберите вариант"}
-              text={listQuestions[quizId][totalIndex].content.default}
-              onChange={({ target }) => debounceAnswer(target.value)}
-            />
           </Box>
+          <CustomTextField
+            sx={{ maxWidth: "360px" }}
+            placeholder={"Выберите вариант"}
+            text={listQuestions[quizId][totalIndex].content.default}
+            onChange={({ target }) => debounceAnswer(target.value)}
+          />
         </Box>
-        <Box sx={{ padding: "20px", width: "100%" }}>
+        <Box
-          <Typography sx={{ marginBottom: "15px" }}>
+          sx={{
+            pt: isMobile ? "0px" : "20px",
+            pb: "20px",
+            pl: isFigmaTablte ? (isMobile ? "20px" : "34px") : "28px",
+            pr: isFigmaTablte ? "19px" : "20px",
+            display: "flex",
+            flexDirection: "column",
+            gap: isMobile ? "13px" : "14px",
+            width: "100%",
+          }}
+        >
+          <Typography
+            sx={{ height: isMobile ? "18px" : "auto", fontWeight: "500", fontSize: "18px", color: " #4D4D4D" }}
+          >
             Настройки вопросов
           </Typography>
           <CustomCheckbox
@@ -87,9 +111,7 @@ export default function SettingDropDown({ totalIndex }: SettingDropDownProps) {
               });
             }}
           />
-          <Box
+          <Box sx={{ position: "relative", display: "flex", alignItems: "center" }}>
-            sx={{ position: "relative", display: "flex", alignItems: "center" }}
-          >
             <CustomCheckbox
               label={"Внутреннее название вопроса"}
               checked={listQuestions[quizId][totalIndex].content.innerNameCheck}
@@ -121,7 +143,15 @@ export default function SettingDropDown({ totalIndex }: SettingDropDownProps) {
               display: isMobile ? "block" : "none",
             }}
           >
-            <Typography sx={{ marginBottom: "15px" }}>
+            <Typography
+              sx={{
+                height: isMobile ? "18px" : "auto",
+                fontWeight: "500",
+                fontSize: "18px",
+                color: " #4D4D4D",
+                mb: "10px",
+              }}
+            >
               Текст в выпадающем списке
             </Typography>
             <CustomTextField

src/pages/Questions/OwnTextField/settingTextField.tsx

@@ -39,7 +39,7 @@ export default function SettingTextField({ totalIndex }: SettingTextFieldProps)
   const { listQuestions } = questionStore();
   const quizId = Number(useParams().quizId);
   const theme = useTheme();
-  const isWrapperColumn = useMediaQuery(theme.breakpoints.down(980));
+  const isWrappColumn = useMediaQuery(theme.breakpoints.down(980));
   const isMobile = useMediaQuery(theme.breakpoints.down(790));
   const isFigmaTablte = useMediaQuery(theme.breakpoints.down(990));
 
@@ -54,7 +54,7 @@ export default function SettingTextField({ totalIndex }: SettingTextFieldProps)
       sx={{
         display: "flex",
         justifyContent: "space-between",
-        flexDirection: isWrapperColumn ? "column" : null,
+        flexDirection: isWrappColumn ? "column" : null,
         marginRight: isMobile ? "0px" : "50px",
       }}
     >
@@ -106,7 +106,7 @@ export default function SettingTextField({ totalIndex }: SettingTextFieldProps)
         sx={{
           pt: isMobile ? "0px" : "20px",
           pb: "20px",
-          pl: isFigmaTablte ? (isMobile ? "20px" : "34px") : "28px",
+          pl: isFigmaTablte ? (isWrappColumn ? "20px" : "34px") : "20px",
           pr: isFigmaTablte ? "19px" : "20px",
           display: "flex",
           flexDirection: "column",

src/pages/Questions/PageOptions/PageOptions.tsx

@@ -12,6 +12,8 @@ import { UploadImageModal } from "../UploadImage/UploadImageModal";
 import { UploadVideoModal } from "../UploadVideoModal";
 import { AddPlusImage } from "@icons/questionsPage/addPlusImage";
 import { AddPlusVideo } from "@icons/questionsPage/addPlusVideo";
+import { ImageAddIcons } from "@icons/ImageAddIcons";
+import { VideofileIcon } from "@icons/questionsPage/VideofileIcon";
 
 type Props = {
   disableInput?: boolean;
@@ -44,9 +46,9 @@ export default function PageOptions({ disableInput, totalIndex }: Props) {
           width: isTablet ? "auto" : "100%",
           maxWidth: "640px",
           display: "flex",
-          padding: "20px",
+          px: "20px",
           flexDirection: "column",
-          gap: "20px",
+          gap: isMobile ? "25px" : "20px",
         }}
       >
         <Box sx={{ display: disableInput ? "none" : "" }}>
@@ -58,6 +60,8 @@ export default function PageOptions({ disableInput, totalIndex }: Props) {
         </Box>
         <Box
           sx={{
+            mb: "20px",
+            ml: isTablet ? "0px" : "60px",
             display: "flex",
             alignItems: "center",
             gap: "12px",
@@ -73,7 +77,37 @@ export default function PageOptions({ disableInput, totalIndex }: Props) {
               gap: "10px",
             }}
           >
-            {isMobile ? <AddPlusImage /> : <AddImage />}
+            {isMobile ? (
+              <AddPlusImage />
+            ) : (
+              <Box
+                sx={{
+                  width: "60px",
+                  height: "40px",
+                  background: "#EEE4FC",
+                  display: "flex",
+                  justifyContent: "space-between",
+                }}
+              >
+                <Box sx={{ display: "flex", alignItems: "center", justifyContent: "center", width: "100%" }}>
+                  <ImageAddIcons fontSize="22px" color="#7E2AEA" />
+                </Box>
+                <span
+                  style={{
+                    display: "flex",
+                    alignItems: "center",
+                    justifyContent: "center",
+                    background: "#7E2AEA",
+                    height: "100%",
+                    width: "25px",
+                    color: "white",
+                    fontSize: "15px",
+                  }}
+                >
+                  +
+                </span>
+              </Box>
+            )}
 
             <Typography
               sx={{
@@ -99,10 +133,10 @@ export default function PageOptions({ disableInput, totalIndex }: Props) {
                 });
               }
             }}
+            // onClick={() => setOpenVideoModal(true)}
           />
           <Typography> или</Typography>
           <Box
-            onClick={() => setOpenVideoModal(true)}
             sx={{
               cursor: "pointer",
               display: "flex",
@@ -110,7 +144,37 @@ export default function PageOptions({ disableInput, totalIndex }: Props) {
               gap: "10px",
             }}
           >
-            {isMobile ? <AddPlusVideo /> : <AddVideofile />}
+            {isMobile ? (
+              <AddPlusVideo />
+            ) : (
+              <Box
+                sx={{
+                  width: "60px",
+                  height: "40px",
+                  background: "#EEE4FC",
+                  display: "flex",
+                  justifyContent: "space-between",
+                }}
+              >
+                <Box sx={{ display: "flex", alignItems: "center", justifyContent: "center", width: "100%" }}>
+                  <VideofileIcon fontSize="22px" color="#7E2AEA" />
+                </Box>
+                <span
+                  style={{
+                    display: "flex",
+                    alignItems: "center",
+                    justifyContent: "center",
+                    background: "#7E2AEA",
+                    height: "100%",
+                    width: "25px",
+                    color: "white",
+                    fontSize: "15px",
+                  }}
+                >
+                  +
+                </span>
+              </Box>
+            )}
 
             <Typography
               sx={{
@@ -136,11 +200,7 @@ export default function PageOptions({ disableInput, totalIndex }: Props) {
           />
         </Box>
       </Box>
-      <ButtonsOptions
+      <ButtonsOptions switchState={switchState} SSHC={SSHC} totalIndex={totalIndex} />
-        switchState={switchState}
-        SSHC={SSHC}
-        totalIndex={totalIndex}
-      />
       <SwitchPageOptions switchState={switchState} totalIndex={totalIndex} />
     </>
   );

src/pages/Questions/PageOptions/SettingPageOptions.tsx

@@ -12,9 +12,7 @@ type SettingPageOptionsProps = {
   totalIndex: number;
 };
 
-export default function SettingPageOptions({
+export default function SettingPageOptions({ totalIndex }: SettingPageOptionsProps) {
-  totalIndex,
-}: SettingPageOptionsProps) {
   const theme = useTheme();
   const isMobile = useMediaQuery(theme.breakpoints.down(790));
 
@@ -29,8 +27,20 @@ export default function SettingPageOptions({
   }, 1000);
 
   return (
-    <Box sx={{ display: "flex", flexDirection: "column", pt: "20px", pb: "20px", pl: "20px" }}>
+    <Box
-      <Typography>Настройки вопроса</Typography>
+      sx={{
+        pt: isMobile ? "25px" : "20px",
+        pb: isMobile ? "25px" : "20px",
+        pl: "20px",
+        display: "flex",
+        flexDirection: "column",
+        gap: "14px",
+        width: "100%",
+      }}
+    >
+      <Typography sx={{ height: isMobile ? "18px" : "auto", fontWeight: "500", fontSize: "18px", color: " #4D4D4D" }}>
+        Настройки вопроса
+      </Typography>
       <Box sx={{ width: isMobile ? "90%" : "auto", display: "flex", alignItems: "center" }}>
         <CustomCheckbox
           sx={{ mr: isMobile ? "0px" : "16px" }}
@@ -46,10 +56,7 @@ export default function SettingPageOptions({
             })
           }
         />
-        <Tooltip
+        <Tooltip title="Будет отображаться как заголовок вопроса в приходящих заявках." placement="top">
-          title="Будет отображаться как заголовок вопроса в приходящих заявках."
-          placement="top"
-        >
           <Box>
             <InfoIcon />
           </Box>

src/pages/Questions/RatingOptions/RatingOptions.tsx

@@ -31,7 +31,7 @@ export default function RatingOptions({ totalIndex }: Props) {
   const isMobile = useMediaQuery(theme.breakpoints.down(790));
 
   const buttonRatingForm: ButtonRatingFrom[] = [
-    { name: "star", icon: <StarIconMini color={theme.palette.grey2.main} /> },
+    { name: "star", icon: <StarIconMini width={"50px"} color={theme.palette.grey2.main} /> },
     { name: "trophie", icon: <TropfyIcon color={theme.palette.grey2.main} /> },
     { name: "flag", icon: <FlagIcon color={theme.palette.grey2.main} /> },
     { name: "heart", icon: <HeartIcon color={theme.palette.grey2.main} /> },
@@ -52,55 +52,50 @@ export default function RatingOptions({ totalIndex }: Props) {
       <Box
         sx={{
           width: isMobile ? "auto" : "100%",
-          maxWidth: "310px",
           display: "flex",
-          padding: "20px",
+          px: "20px",
           flexDirection: "column",
           gap: "20px",
         }}
       >
         <Box sx={{ display: "flex", gap: isMobile ? "10px" : "15px" }}>
-          {Array.from(
+          {Array.from({ length: listQuestions[quizId][totalIndex].content.steps }, (_, index) => index).map(
-            { length: listQuestions[quizId][totalIndex].content.steps },
+            (itemNumber) => (
-            (_, index) => index
+              <Box
-          ).map((itemNumber) => (
+                {...(itemNumber === 0 || itemNumber === listQuestions[quizId][totalIndex].content.steps - 1
-            <Box
+                  ? {
-              {...(itemNumber === 0 ||
+                      onClick: () => {
-              itemNumber === listQuestions[quizId][totalIndex].content.steps - 1
+                        updateQuestionsList(quizId, totalIndex, {
-                ? {
+                          content: {
-                    onClick: () => {
+                            ...listQuestions[quizId][totalIndex].content,
-                      updateQuestionsList(quizId, totalIndex, {
+                            ratingExpanded: true,
-                        content: {
+                          },
-                          ...listQuestions[quizId][totalIndex].content,
+                        });
-                          ratingExpanded: true,
-                        },
-                      });
-                    },
-                    sx: {
-                      cursor: "pointer",
-                      transform: "scale(1.5)",
-                      ":hover": {
-                        transform: "scale(1.7)",
-                        transition: "0.2s",
                       },
-                    },
+                      sx: {
-                  }
+                        cursor: "pointer",
-                : { sx: { transform: "scale(1.5)" } })}
+                        transform: "scale(1.5)",
-            >
+                        ":hover": {
-              {
+                          transform: "scale(1.7)",
-                buttonRatingForm.find(
+                          transition: "0.2s",
-                  ({ name }) =>
+                        },
-                    listQuestions[quizId][totalIndex].content.form === name
+                      },
-                )?.icon
+                    }
-              }
+                  : { sx: { transform: "scale(1.5)" } })}
-            </Box>
+              >
-          ))}
+                {buttonRatingForm.find(({ name }) => listQuestions[quizId][totalIndex].content.form === name)?.icon}
+              </Box>
+            )
+          )}
         </Box>
         <Box
           sx={{
+            mb: "20px",
             display: "flex",
             alignItems: "center",
             justifyContent: "space-between",
+            maxWidth: isMobile ? "303px" : "290px",
+            width: "100%",
           }}
         >
           <Typography
@@ -124,9 +119,7 @@ export default function RatingOptions({ totalIndex }: Props) {
         </Box>
         {listQuestions[quizId][totalIndex].content.ratingExpanded &&
           (listQuestions[quizId][totalIndex].content.ratingDescription ? (
-            <Typography>
+            <Typography>{listQuestions[quizId][totalIndex].content.ratingDescription}</Typography>
-              {listQuestions[quizId][totalIndex].content.ratingDescription}
-            </Typography>
           ) : (
             <CustomTextField
               placeholder={"Описание"}
@@ -154,11 +147,7 @@ export default function RatingOptions({ totalIndex }: Props) {
             />
           ))}
       </Box>
-      <ButtonsOptions
+      <ButtonsOptions switchState={switchState} SSHC={SSHC} totalIndex={totalIndex} />
-        switchState={switchState}
-        SSHC={SSHC}
-        totalIndex={totalIndex}
-      />
       <SwitchRating switchState={switchState} totalIndex={totalIndex} />
     </>
   );

src/pages/Questions/RatingOptions/settingRating.tsx

@@ -1,13 +1,5 @@
 import { useParams } from "react-router-dom";
-import {
+import { Box, ButtonBase, Slider, Typography, Tooltip, useMediaQuery, useTheme } from "@mui/material";
-  Box,
-  ButtonBase,
-  Slider,
-  Typography,
-  Tooltip,
-  useMediaQuery,
-  useTheme,
-} from "@mui/material";
 import { useDebouncedCallback } from "use-debounce";
 
 import CustomCheckbox from "@ui_kit/CustomCheckbox";
@@ -32,6 +24,7 @@ type SettingSliderProps = {
 export default function SettingSlider({ totalIndex }: SettingSliderProps) {
   const quizId = Number(useParams().quizId);
   const theme = useTheme();
+  const isFigmaTablte = useMediaQuery(theme.breakpoints.down(990));
   const isMobile = useMediaQuery(theme.breakpoints.down(790));
   const isWrappColumn = useMediaQuery(theme.breakpoints.down(980));
   const { listQuestions } = questionStore();
@@ -62,48 +55,60 @@ export default function SettingSlider({ totalIndex }: SettingSliderProps) {
         flexDirection: isWrappColumn ? "column" : null,
       }}
     >
-      <Box sx={{ pt: "20px", pb: "20px", pl: "20px" }}>
+      <Box
-        <Typography sx={{ marginBottom: "15px" }}>
+        sx={{
+          pt: isMobile ? "25px" : "20px",
+          pb: isMobile ? "25px" : "20px",
+          pl: "20px",
+          display: "flex",
+          flexDirection: "column",
+          gap: "14px",
+          maxWidth: "310px",
+          width: "100%",
+        }}
+      >
+        <Typography sx={{ height: isMobile ? "18px" : "auto", fontWeight: "500", fontSize: "18px", color: " #4D4D4D" }}>
           Настройки рейтинга
         </Typography>
-        <Typography
+        <Box>
-          sx={{
+          <Typography
-            color: theme.palette.grey2.main,
+            sx={{
-            fontSize: "16px",
+              color: theme.palette.grey2.main,
-            fontWeight: 400,
+              fontSize: "16px",
-          }}
+              fontWeight: 400,
-        >
+              mb: "8px",
-          Форма
+            }}
-        </Typography>
+          >
-        <Box sx={{ display: "flex", marginBottom: "15px" }}>
+            Форма
-          {buttonRatingForm.map(({ name, icon }, index) => (
+          </Typography>
-            <ButtonBase
+          <Box sx={{ display: "flex" }}>
-              key={index}
+            {buttonRatingForm.map(({ name, icon }, index) => (
-              onClick={() => {
+              <ButtonBase
-                const clonContent = listQuestions[quizId][totalIndex].content;
+                key={index}
-                clonContent.form = name;
+                onClick={() => {
-                updateQuestionsList(quizId, totalIndex, {
+                  const clonContent = listQuestions[quizId][totalIndex].content;
-                  content: clonContent,
+                  clonContent.form = name;
-                });
+                  updateQuestionsList(quizId, totalIndex, {
-              }}
+                    content: clonContent,
-              sx={{
+                  });
-                backgroundColor:
+                }}
-                  listQuestions[quizId][totalIndex].content.form === name
+                sx={{
-                    ? theme.palette.brightPurple.main
+                  backgroundColor:
-                    : "transparent",
+                    listQuestions[quizId][totalIndex].content.form === name
-                color:
+                      ? theme.palette.brightPurple.main
-                  listQuestions[quizId][totalIndex].content.form === name
+                      : "transparent",
-                    ? "#ffffff"
+                  color: listQuestions[quizId][totalIndex].content.form === name ? "#ffffff" : theme.palette.grey3.main,
-                    : theme.palette.grey3.main,
+                  width: "40px",
-                width: "40px",
+                  height: "40px",
-                height: "40px",
+                  borderRadius: "4px",
-                borderRadius: "4px",
+                }}
-              }}
+              >
-            >
+                {icon}
-              {icon}
+              </ButtonBase>
-            </ButtonBase>
+            ))}
-          ))}
+          </Box>
         </Box>
+
         <Typography
           sx={{
             color: theme.palette.grey2.main,
@@ -119,7 +124,7 @@ export default function SettingSlider({ totalIndex }: SettingSliderProps) {
           max={10}
           aria-label="Default"
           valueLabelDisplay="auto"
-          sx={{ color: theme.palette.brightPurple.main }}
+          sx={{ color: theme.palette.brightPurple.main, padding: "0" }}
           onChange={(_, value) => {
             const clonContent = listQuestions[quizId][totalIndex].content;
             clonContent.steps = Number(value) || 1;
@@ -127,8 +132,21 @@ export default function SettingSlider({ totalIndex }: SettingSliderProps) {
           }}
         />
       </Box>
-      <Box sx={{ padding: "20px" }}>
+      <Box
-        <Typography>Настройки вопросов</Typography>
+        sx={{
+          pt: isMobile ? "30px" : "20px",
+          pb: "20px",
+          pl: isFigmaTablte ? (isMobile ? "20px" : "34px") : "28px",
+          pr: isFigmaTablte ? "19px" : "20px",
+          display: "flex",
+          flexDirection: "column",
+          gap: isMobile ? "13px" : "14px",
+          width: "100%",
+        }}
+      >
+        <Typography sx={{ height: isMobile ? "18px" : "auto", fontWeight: "500", fontSize: "18px", color: " #4D4D4D" }}>
+          Настройки вопросов
+        </Typography>
         <CustomCheckbox
           sx={{ display: "block", mr: isMobile ? "0px" : "16px" }}
           label={"Необязательный вопрос"}
@@ -155,10 +173,7 @@ export default function SettingSlider({ totalIndex }: SettingSliderProps) {
               updateQuestionsList(quizId, totalIndex, { content: clonContent });
             }}
           />
-          <Tooltip
+          <Tooltip title="Будет отображаться как заголовок вопроса в приходящих заявках." placement="top">
-            title="Будет отображаться как заголовок вопроса в приходящих заявках."
-            placement="top"
-          >
             <Box>
               <InfoIcon />
             </Box>

src/pages/Questions/SliderOptions/SliderOptions.tsx

@@ -28,19 +28,22 @@ export default function SliderOptions({ totalIndex }: Props) {
       <Box
         sx={{
           width: isTablet ? "auto" : "100%",
-          maxWidth: "640px",
+          maxWidth: "673.8px",
           display: "flex",
-          padding: "20px",
+          pl: "20px",
+          pr: "20px",
+          pb: isMobile ? "30px" : "20px",
           flexDirection: "column",
           gap: "20px",
         }}
       >
-        <Box sx={{ gap: "10px", display: "flex", flexDirection: "column" }}>
+        <Box sx={{ gap: "14px", display: "flex", flexDirection: "column" }}>
-          <Typography sx={{ fontWeight: "500", fontSize: "18px", color: "#4D4D4D", mb: "10px" }}>
+          <Typography sx={{ fontWeight: "500", fontSize: "18px", color: "#4D4D4D" }}>
             Выбор значения из диапазона
           </Typography>
-          <Box sx={{ display: "flex", alignItems: "center", gap: "20px" }}>
+          <Box sx={{ width: "100%", display: "flex", alignItems: "center", gap: "20px" }}>
             <CustomNumberField
+              sx={{ maxWidth: "310px", width: "100%" }}
               placeholder={"0"}
               min={0}
               max={99}
@@ -79,6 +82,7 @@ export default function SliderOptions({ totalIndex }: Props) {
             />
             <Typography>—</Typography>
             <CustomNumberField
+              sx={{ maxWidth: "310px", width: "100%" }}
               placeholder={"100"}
               min={0}
               max={100}
@@ -148,6 +152,7 @@ export default function SliderOptions({ totalIndex }: Props) {
               Начальное значение
             </Typography>
             <CustomNumberField
+              sx={{ maxWidth: "310px", width: "100%" }}
               placeholder={"50"}
               min={Number(listQuestions[quizId][totalIndex].content.range.split("—")[0])}
               max={Number(listQuestions[quizId][totalIndex].content.range.split("—")[1])}
@@ -162,8 +167,9 @@ export default function SliderOptions({ totalIndex }: Props) {
             />
           </Box>
           <Box sx={{ width: "100%" }}>
-          <Typography sx={{ fontWeight: "500", fontSize: "18px", color: "#4D4D4D", mb: "10px" }}>Шаг</Typography>
+            <Typography sx={{ fontWeight: "500", fontSize: "18px", color: "#4D4D4D", mb: "10px" }}>Шаг</Typography>
             <CustomNumberField
+              sx={{ maxWidth: "310px", width: "100%" }}
               min={0}
               max={100}
               placeholder={"1"}

src/pages/Questions/SliderOptions/settingSlider.tsx

@@ -1,11 +1,5 @@
 import { useParams } from "react-router-dom";
-import {
+import { Box, Typography, Tooltip, useMediaQuery, useTheme } from "@mui/material";
-  Box,
-  Typography,
-  Tooltip,
-  useMediaQuery,
-  useTheme,
-} from "@mui/material";
 import { useDebouncedCallback } from "use-debounce";
 import CustomCheckbox from "@ui_kit/CustomCheckbox";
 import CustomTextField from "@ui_kit/CustomTextField";
@@ -21,6 +15,7 @@ export default function SettingSlider({ totalIndex }: SettingSliderProps) {
   const { listQuestions } = questionStore();
   const theme = useTheme();
   const isWrappColumn = useMediaQuery(theme.breakpoints.down(980));
+  const isFigmaTablte = useMediaQuery(theme.breakpoints.down(990));
   const isMobile = useMediaQuery(theme.breakpoints.down(790));
   const debounced = useDebouncedCallback((value) => {
     let clonContent = listQuestions[quizId][totalIndex].content;
@@ -36,9 +31,20 @@ export default function SettingSlider({ totalIndex }: SettingSliderProps) {
         flexDirection: isWrappColumn ? "column" : null,
       }}
     >
-      <Box sx={{ pt: "20px", pb: "20px", pl: "20px" }}>
+      <Box
-
+        sx={{
-        <Typography>Настройки ползунка</Typography>
+          pt: isMobile ? "25px" : "20px",
+          pb: isMobile ? "25px" : "20px",
+          pl: "20px",
+          display: "flex",
+          flexDirection: "column",
+          gap: "14px",
+          width: "100%",
+        }}
+      >
+        <Typography sx={{ height: isMobile ? "18px" : "auto", fontWeight: "500", fontSize: "18px", color: " #4D4D4D" }}>
+          Настройки ползунка
+        </Typography>
         <CustomCheckbox
           sx={{ mr: isMobile ? "0px" : "16px" }}
           label={"Выбор диапозона (два ползунка)"}
@@ -50,8 +56,21 @@ export default function SettingSlider({ totalIndex }: SettingSliderProps) {
           }}
         />
       </Box>
-      <Box sx={{ pt: "20px", pb: "20px", pl: "20px" }}>
+      <Box
-        <Typography>Настройки вопросов</Typography>
+        sx={{
+          pt: isMobile ? "0px" : "20px",
+          pb: "20px",
+          pl: isFigmaTablte ? (isWrappColumn ? "20px" : "34px") : "20px",
+          pr: isFigmaTablte ? "19px" : "20px",
+          display: "flex",
+          flexDirection: "column",
+          gap: isMobile ? "13px" : "14px",
+          width: "100%",
+        }}
+      >
+        <Typography sx={{ height: isMobile ? "18px" : "auto", fontWeight: "500", fontSize: "18px", color: " #4D4D4D" }}>
+          Настройки вопросов
+        </Typography>
         <CustomCheckbox
           sx={{ mr: isMobile ? "0px" : "16px" }}
           label={"Необязательный вопрос"}
@@ -78,10 +97,7 @@ export default function SettingSlider({ totalIndex }: SettingSliderProps) {
               updateQuestionsList(quizId, totalIndex, { content: clonContent });
             }}
           />
-          <Tooltip
+          <Tooltip title="Будет отображаться как заголовок вопроса в приходящих заявках." placement="top">
-            title="Будет отображаться как заголовок вопроса в приходящих заявках."
-            placement="top"
-          >
             <Box>
               <InfoIcon />
             </Box>

src/pages/Questions/UploadFile/UploadFile.tsx

@@ -36,6 +36,7 @@ export default function UploadFile({ totalIndex }: Props) {
   const { listQuestions } = questionStore();
   const theme = useTheme();
   const isTablet = useMediaQuery(theme.breakpoints.down(980));
+  const isMobile = useMediaQuery(theme.breakpoints.down(790));
 
   const SSHC = (data: string) => {
     setSwitchState(data);
@@ -64,9 +65,8 @@ export default function UploadFile({ totalIndex }: Props) {
           width: isTablet ? "auto" : "100%",
           maxWidth: "640px",
           display: "flex",
-          padding: "20px",
+          px: "20px",
           flexDirection: "column",
-          gap: "20px",
         }}
       >
         <Box sx={{ gap: "10px", display: "flex" }}>
@@ -145,7 +145,14 @@ export default function UploadFile({ totalIndex }: Props) {
             </Select>
           </FormControl>
         </Box>
-        <Box sx={{ display: "flex", alignItems: "center", gap: "12px" }}>
+        <Box
+          sx={{
+            display: "flex",
+            alignItems: "center",
+            marginBottom: "20px",
+            marginTop: isMobile ? "18px" : "20px",
+          }}
+        >
           <Typography
             sx={{
               fontWeight: 400,

src/pages/Questions/UploadFile/settingUpload.tsx

@@ -24,8 +24,20 @@ export default function SettingsUpload({ totalIndex }: SettingsUploadProps) {
   const isMobile = useMediaQuery(theme.breakpoints.down(790));
 
   return (
-    <Box sx={{ display: "flex", flexDirection: "column", pt: "20px", pb: "20px", pl: "20px" }}>
+    <Box
-      <Typography>Настройки вопроса</Typography>
+      sx={{
+        pt: isMobile ? "25px" : "20px",
+        pb: isMobile ? "25px" : "20px",
+        pl: "20px",
+        display: "flex",
+        flexDirection: "column",
+        gap: "14px",
+        width: "100%",
+      }}
+    >
+      <Typography sx={{ height: isMobile ? "18px" : "auto", fontWeight: "500", fontSize: "18px", color: " #4D4D4D" }}>
+        Настройки вопроса
+      </Typography>
       <CustomCheckbox
         sx={{ display: "block", mr: isMobile ? "0px" : "16px" }}
         label={"Автозаполнение адреса"}
@@ -62,10 +74,7 @@ export default function SettingsUpload({ totalIndex }: SettingsUploadProps) {
             updateQuestionsList(quizId, totalIndex, { content: clonContent });
           }}
         />
-        <Tooltip
+        <Tooltip title="Будет отображаться как заголовок вопроса в приходящих заявках." placement="top">
-          title="Будет отображаться как заголовок вопроса в приходящих заявках."
-          placement="top"
-        >
           <Box>
             <InfoIcon />
           </Box>