is Full Tablet && desktop version

2023-09-27 00:11:27 +03:00 · 2023-09-27 00:11:27 +03:00 · c8436c1909
commit c8436c1909
parent b2213af336
15 changed files with 378 additions and 222 deletions
--- a/src/assets/icons/questionsPage/StarIconMini.tsx
+++ b/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
-        width="28"
-        height="27"
-        viewBox="0 0 28 27"
-        fill="none"
-        xmlns="http://www.w3.org/2000/svg"
-      >
+      <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}
--- a/src/assets/icons/questionsPage/VideofileIcon.tsx
+++ b/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>
+);
--- a/src/pages/Questions/DataOptions/DataOptions.tsx
+++ b/src/pages/Questions/DataOptions/DataOptions.tsx
@ -1,11 +1,5 @@
 import { useParams } from "react-router-dom";
-import {
-  Box,
-  Typography,
-  Tooltip,
-  useMediaQuery,
-  useTheme,
-} from "@mui/material";
+import { 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={
-              listQuestions[quizId][totalIndex].content.type === "calendar"
-            }
+            isSelected={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={
-              listQuestions[quizId][totalIndex].content.type === "mask"
-            }
+            isSelected={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
-        switchState={switchState}
-        SSHC={SSHC}
-        totalIndex={totalIndex}
-      />
+      <ButtonsOptions switchState={switchState} SSHC={SSHC} totalIndex={totalIndex} />
      <SwitchData switchState={switchState} totalIndex={totalIndex} />
    </>
  );
--- a/src/pages/Questions/DataOptions/settingData.tsx
+++ b/src/pages/Questions/DataOptions/settingData.tsx
@ -1,11 +1,5 @@
 import { useParams } from "react-router-dom";
-import {
-  Box,
-  Typography,
-  Tooltip,
-  useMediaQuery,
-  useTheme,
-} from "@mui/material";
+import { 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" }}>
-        <Typography>Настройки календаря</Typography>
+      <Box
+        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
-            ? "0px 20px 20px 20px "
-            : "20px 20px 20px 20px",
-          minWidth: isWrappColumn ? null : "350px",
-          marginRight: "30px",
+          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>Настройки вопросов</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
-            title="Будет отображаться как заголовок вопроса в приходящих заявках."
-            placement="top"
-          >
+          <Tooltip title="Будет отображаться как заголовок вопроса в приходящих заявках." placement="top">
            <Box>
              <InfoIcon />
            </Box>
--- a/src/pages/Questions/DropDown/DropDown.tsx
+++ b/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>
--- a/src/pages/Questions/DropDown/settingDropDown.tsx
+++ b/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%" }}>
-          <Typography sx={{ marginBottom: "15px" }}>
+        <Box
+          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
-            sx={{ position: "relative", display: "flex", alignItems: "center" }}
-          >
+          <Box 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
--- a/src/pages/Questions/OwnTextField/settingTextField.tsx
+++ b/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",
--- a/src/pages/Questions/PageOptions/PageOptions.tsx
+++ b/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
-        switchState={switchState}
-        SSHC={SSHC}
-        totalIndex={totalIndex}
-      />
+      <ButtonsOptions switchState={switchState} SSHC={SSHC} totalIndex={totalIndex} />
      <SwitchPageOptions switchState={switchState} totalIndex={totalIndex} />
    </>
  );
--- a/src/pages/Questions/PageOptions/SettingPageOptions.tsx
+++ b/src/pages/Questions/PageOptions/SettingPageOptions.tsx
@ -12,9 +12,7 @@ type SettingPageOptionsProps = {
  totalIndex: number;
 };

-export default function SettingPageOptions({
-  totalIndex,
-}: SettingPageOptionsProps) {
+export default function SettingPageOptions({ 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" }}>
-      <Typography>Настройки вопроса</Typography>
+    <Box
+      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
-          title="Будет отображаться как заголовок вопроса в приходящих заявках."
-          placement="top"
-        >
+        <Tooltip title="Будет отображаться как заголовок вопроса в приходящих заявках." placement="top">
          <Box>
            <InfoIcon />
          </Box>
--- a/src/pages/Questions/RatingOptions/RatingOptions.tsx
+++ b/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(
-            { length: listQuestions[quizId][totalIndex].content.steps },
-            (_, index) => index
-          ).map((itemNumber) => (
-            <Box
-              {...(itemNumber === 0 ||
-              itemNumber === listQuestions[quizId][totalIndex].content.steps - 1
-                ? {
-                    onClick: () => {
-                      updateQuestionsList(quizId, totalIndex, {
-                        content: {
-                          ...listQuestions[quizId][totalIndex].content,
-                          ratingExpanded: true,
-                        },
-                      });
-                    },
-                    sx: {
-                      cursor: "pointer",
-                      transform: "scale(1.5)",
-                      ":hover": {
-                        transform: "scale(1.7)",
-                        transition: "0.2s",
+          {Array.from({ length: listQuestions[quizId][totalIndex].content.steps }, (_, index) => index).map(
+            (itemNumber) => (
+              <Box
+                {...(itemNumber === 0 || itemNumber === listQuestions[quizId][totalIndex].content.steps - 1
+                  ? {
+                      onClick: () => {
+                        updateQuestionsList(quizId, totalIndex, {
+                          content: {
+                            ...listQuestions[quizId][totalIndex].content,
+                            ratingExpanded: true,
+                          },
+                        });
                      },
-                    },
-                  }
-                : { sx: { transform: "scale(1.5)" } })}
-            >
-              {
-                buttonRatingForm.find(
-                  ({ name }) =>
-                    listQuestions[quizId][totalIndex].content.form === name
-                )?.icon
-              }
-            </Box>
-          ))}
+                      sx: {
+                        cursor: "pointer",
+                        transform: "scale(1.5)",
+                        ":hover": {
+                          transform: "scale(1.7)",
+                          transition: "0.2s",
+                        },
+                      },
+                    }
+                  : { sx: { transform: "scale(1.5)" } })}
+              >
+                {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>
-              {listQuestions[quizId][totalIndex].content.ratingDescription}
-            </Typography>
+            <Typography>{listQuestions[quizId][totalIndex].content.ratingDescription}</Typography>
          ) : (
            <CustomTextField
              placeholder={"Описание"}
@ -154,11 +147,7 @@ export default function RatingOptions({ totalIndex }: Props) {
            />
          ))}
      </Box>
-      <ButtonsOptions
-        switchState={switchState}
-        SSHC={SSHC}
-        totalIndex={totalIndex}
-      />
+      <ButtonsOptions switchState={switchState} SSHC={SSHC} totalIndex={totalIndex} />
      <SwitchRating switchState={switchState} totalIndex={totalIndex} />
    </>
  );
--- a/src/pages/Questions/RatingOptions/settingRating.tsx
+++ b/src/pages/Questions/RatingOptions/settingRating.tsx
@ -1,13 +1,5 @@
 import { useParams } from "react-router-dom";
-import {
-  Box,
-  ButtonBase,
-  Slider,
-  Typography,
-  Tooltip,
-  useMediaQuery,
-  useTheme,
-} from "@mui/material";
+import { 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" }}>
-        <Typography sx={{ marginBottom: "15px" }}>
+      <Box
+        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
-          sx={{
-            color: theme.palette.grey2.main,
-            fontSize: "16px",
-            fontWeight: 400,
-          }}
-        >
-          Форма
-        </Typography>
-        <Box sx={{ display: "flex", marginBottom: "15px" }}>
-          {buttonRatingForm.map(({ name, icon }, index) => (
-            <ButtonBase
-              key={index}
-              onClick={() => {
-                const clonContent = listQuestions[quizId][totalIndex].content;
-                clonContent.form = name;
-                updateQuestionsList(quizId, totalIndex, {
-                  content: clonContent,
-                });
-              }}
-              sx={{
-                backgroundColor:
-                  listQuestions[quizId][totalIndex].content.form === name
-                    ? theme.palette.brightPurple.main
-                    : "transparent",
-                color:
-                  listQuestions[quizId][totalIndex].content.form === name
-                    ? "#ffffff"
-                    : theme.palette.grey3.main,
-                width: "40px",
-                height: "40px",
-                borderRadius: "4px",
-              }}
-            >
-              {icon}
-            </ButtonBase>
-          ))}
+        <Box>
+          <Typography
+            sx={{
+              color: theme.palette.grey2.main,
+              fontSize: "16px",
+              fontWeight: 400,
+              mb: "8px",
+            }}
+          >
+            Форма
+          </Typography>
+          <Box sx={{ display: "flex" }}>
+            {buttonRatingForm.map(({ name, icon }, index) => (
+              <ButtonBase
+                key={index}
+                onClick={() => {
+                  const clonContent = listQuestions[quizId][totalIndex].content;
+                  clonContent.form = name;
+                  updateQuestionsList(quizId, totalIndex, {
+                    content: clonContent,
+                  });
+                }}
+                sx={{
+                  backgroundColor:
+                    listQuestions[quizId][totalIndex].content.form === name
+                      ? theme.palette.brightPurple.main
+                      : "transparent",
+                  color: listQuestions[quizId][totalIndex].content.form === name ? "#ffffff" : theme.palette.grey3.main,
+                  width: "40px",
+                  height: "40px",
+                  borderRadius: "4px",
+                }}
+              >
+                {icon}
+              </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" }}>
-        <Typography>Настройки вопросов</Typography>
+      <Box
+        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
-            title="Будет отображаться как заголовок вопроса в приходящих заявках."
-            placement="top"
-          >
+          <Tooltip title="Будет отображаться как заголовок вопроса в приходящих заявках." placement="top">
            <Box>
              <InfoIcon />
            </Box>
--- a/src/pages/Questions/SliderOptions/SliderOptions.tsx
+++ b/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" }}>
-          <Typography sx={{ fontWeight: "500", fontSize: "18px", color: "#4D4D4D", mb: "10px" }}>
+        <Box sx={{ gap: "14px", display: "flex", flexDirection: "column" }}>
+          <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"}
--- a/src/pages/Questions/SliderOptions/settingSlider.tsx
+++ b/src/pages/Questions/SliderOptions/settingSlider.tsx
@ -1,11 +1,5 @@
 import { useParams } from "react-router-dom";
-import {
-  Box,
-  Typography,
-  Tooltip,
-  useMediaQuery,
-  useTheme,
-} from "@mui/material";
+import { 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" }}>
-
-        <Typography>Настройки ползунка</Typography>
+      <Box
+        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={{ mr: isMobile ? "0px" : "16px" }}
          label={"Выбор диапозона (два ползунка)"}
@ -50,8 +56,21 @@ export default function SettingSlider({ totalIndex }: SettingSliderProps) {
          }}
        />
      </Box>
-      <Box sx={{ pt: "20px", pb: "20px", pl: "20px" }}>
-        <Typography>Настройки вопросов</Typography>
+      <Box
+        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
-            title="Будет отображаться как заголовок вопроса в приходящих заявках."
-            placement="top"
-          >
+          <Tooltip title="Будет отображаться как заголовок вопроса в приходящих заявках." placement="top">
            <Box>
              <InfoIcon />
            </Box>
--- a/src/pages/Questions/UploadFile/UploadFile.tsx
+++ b/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,
--- a/src/pages/Questions/UploadFile/settingUpload.tsx
+++ b/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" }}>
-      <Typography>Настройки вопроса</Typography>
+    <Box
+      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
-          title="Будет отображаться как заголовок вопроса в приходящих заявках."
-          placement="top"
-        >
+        <Tooltip title="Будет отображаться как заголовок вопроса в приходящих заявках." placement="top">
          <Box>
            <InfoIcon />
          </Box>