fix: resolve conflicts

2023-10-06 22:28:30 +03:00 · 2023-10-06 22:28:30 +03:00 · 5d8f8be9f0
commit 5d8f8be9f0
parent 9ab232aec7 84750c2170
22 changed files with 307 additions and 125 deletions
--- a/src/pages/Questions/AnswerDraggableList/AnswerItem.tsx
+++ b/src/pages/Questions/AnswerDraggableList/AnswerItem.tsx
@ -1,4 +1,4 @@
-import { useState, useRef } from "react";
+import { useState } from "react";
 import { useParams } from "react-router-dom";
 import { Draggable } from "react-beautiful-dnd";
 import {
@ -155,13 +155,11 @@ export const AnswerItem = ({
                      />
                    </IconButton>
                    <Popover
+                      id="my-popover-id"
                      open={isOpen}
                      anchorEl={anchorEl}
                      onClose={handleClose}
-                      anchorOrigin={{
-                        vertical: "bottom",
-                        horizontal: "left",
-                      }}
+                      anchorOrigin={{ vertical: "bottom", horizontal: "left" }}
                    >
                      <TextareaAutosize
                        style={{ margin: "10px" }}
--- a/src/pages/Questions/DataOptions/DataOptions.tsx
+++ b/src/pages/Questions/DataOptions/DataOptions.tsx
@ -46,7 +46,7 @@ export default function DataOptions({ totalIndex }: Props) {
          gap: isMobile ? "18px" : "20px",
        }}
      >
-        <Box sx={{ gap: "10px", display: "flex", flexWrap: "wrap" }}>
+        <Box sx={{ gap: "10px", display: "flex", flexWrap: "wrap", mt: isMobile ? "25px" : "0px" }}>
          <SelectableButton
            isSelected={question.content.type === "calendar"}
            onClick={() => {
@ -70,7 +70,7 @@ export default function DataOptions({ totalIndex }: Props) {
            Использовать маску
          </SelectableButton>
        </Box>
-        <Box sx={{ display: "flex", alignItems: "center", gap: "12px", mb: "20px" }}>
+        <Box sx={{ display: "flex", alignItems: "flex-start", gap: "12px", mb: "20px" }}>
          <Typography
            sx={{
              fontWeight: 400,
--- a/src/pages/Questions/DataOptions/settingData.tsx
+++ b/src/pages/Questions/DataOptions/settingData.tsx
@ -37,7 +37,7 @@ export default function SettingsData({ totalIndex }: SettingsDataProps) {
    >
      <Box
        sx={{
-          pt: isMobile ? "25px" : "20px",
+          pt: "20px",
          pb: isMobile ? "25px" : "20px",
          pl: "20px",
          display: "flex",
@ -79,7 +79,7 @@ export default function SettingsData({ totalIndex }: SettingsDataProps) {
          display: "flex",
          flexDirection: "column",
          gap: isMobile ? "13px" : "14px",
-          width: "100%",
+          width: isMobile ? "auto" : "100%",
        }}
      >
        <Typography sx={{ height: isMobile ? "18px" : "auto", fontWeight: "500", fontSize: "18px", color: " #4D4D4D" }}>
@ -103,7 +103,11 @@ export default function SettingsData({ totalIndex }: SettingsDataProps) {
          }}
        >
          <CustomCheckbox
-            sx={{ mr: isMobile ? "0px" : "16px" }}
+            sx={{
+              mr: isMobile ? "0px" : "16px",
+              height: isMobile ? "100%" : "26px",
+              alignItems: isMobile ? "flex-start" : "center",
+            }}
            label={"Внутреннее название вопроса"}
            checked={question.content.innerNameCheck}
            handleChange={({ target }) => {
--- a/src/pages/Questions/DropDown/DropDown.tsx
+++ b/src/pages/Questions/DropDown/DropDown.tsx
@ -65,7 +65,7 @@ export default function DropDown({ totalIndex }: Props) {
          sx={{
            display: "flex",
            alignItems: "center",
-            marginBottom: "17px",
+            marginBottom: "20px",
          }}
        >
          <Link
@ -99,11 +99,7 @@ export default function DropDown({ totalIndex }: Props) {
          )}
        </Box>
      </Box>
-      <ButtonsOptions
-        switchState={switchState}
-        SSHC={SSHC}
-        totalIndex={totalIndex}
-      />
+      <ButtonsOptions switchState={switchState} SSHC={SSHC} totalIndex={totalIndex} />
      <SwitchDropDown switchState={switchState} totalIndex={totalIndex} />
    </>
  );
--- a/src/pages/Questions/DropDown/settingDropDown.tsx
+++ b/src/pages/Questions/DropDown/settingDropDown.tsx
@ -116,8 +116,8 @@ export default function SettingDropDown({ totalIndex }: SettingDropDownProps) {
            pr: isFigmaTablte ? "19px" : "20px",
            display: "flex",
            flexDirection: "column",
-            gap: isMobile ? "13px" : "14px",
-            width: "100%",
+            gap: "14px",
+            width: isMobile ? "auto" : "100%",
          }}
        >
          <Typography
@ -139,10 +139,9 @@ export default function SettingDropDown({ totalIndex }: SettingDropDownProps) {
              });
            }}
          />
-          <Box
-            sx={{ position: "relative", display: "flex", alignItems: "center" }}
-          >
+          <Box sx={{ position: "relative", display: "flex", alignItems: "flex-start" }}>
            <CustomCheckbox
+              sx={{ height: isMobile ? "100%" : "26px", alignItems: isMobile ? "flex-start" : "center" }}
              label={"Внутреннее название вопроса"}
              checked={question.content.innerNameCheck}
              handleChange={({ target }) => {
@ -166,7 +165,7 @@ export default function SettingDropDown({ totalIndex }: SettingDropDownProps) {
          </Box>
          <Box
            sx={{
-              width: "85%",
+              width: "100%",
              pt: "20px",
              display: isMobile ? "block" : "none",
            }}
--- a/src/pages/Questions/Emoji/Emoji.tsx
+++ b/src/pages/Questions/Emoji/Emoji.tsx
@ -28,16 +28,16 @@ interface Props {
 export default function Emoji({ totalIndex }: Props) {
  const [switchState, setSwitchState] = useState<string>("setting");
  const [open, setOpen] = useState<boolean>(false);
-  const [anchorElement, setAnchorElement] = useState<HTMLDivElement | null>(
-    null
-  );
+  const [anchorElement, setAnchorElement] = useState<HTMLDivElement | null>(null);
  const [currentIndex, setCurrentIndex] = useState<number>(0);
  const { listQuestions } = questionStore();
  const quizId = Number(useParams().quizId);
  const theme = useTheme();
  const question = listQuestions[quizId][totalIndex] as QuizQuestionEmoji;
+  const isMobile = useMediaQuery(theme.breakpoints.down(790));
  const isTablet = useMediaQuery(theme.breakpoints.down(1000));

+
  const SSHC = (data: string) => {
    setSwitchState(data);
  };
@ -198,7 +198,7 @@ export default function Emoji({ totalIndex }: Props) {
            }}
          />
        </Popover>
-        <Box sx={{ display: "flex", alignItems: "center", gap: "10px" }}>
+        <Box sx={{ display: "flex", alignItems: "center", gap: "10px", marginBottom: isMobile ? "17px" : "20px" }}>
          <Link
            component="button"
            variant="body2"
@ -237,11 +237,7 @@ export default function Emoji({ totalIndex }: Props) {
          )}
        </Box>
      </Box>
-      <ButtonsOptions
-        switchState={switchState}
-        SSHC={SSHC}
-        totalIndex={totalIndex}
-      />
+      <ButtonsOptions switchState={switchState} SSHC={SSHC} totalIndex={totalIndex} />
      <SwitchEmoji switchState={switchState} totalIndex={totalIndex} />
    </>
  );
--- a/src/pages/Questions/Emoji/settingEmoji.tsx
+++ b/src/pages/Questions/Emoji/settingEmoji.tsx
@ -80,8 +80,8 @@ export default function SettingEmoji({ totalIndex }: SettingEmojiProps) {
          pr: isFigmaTablte ? "30px" : "20px",
          display: "flex",
          flexDirection: "column",
-          gap: isMobile ? "13px" : "14px",
-          width: "100%",
+          gap: "14px",
+          width: isMobile ? "auto" : "100%",
        }}
      >
        <Typography sx={{ height: isMobile ? "18px" : "auto", fontWeight: "500", fontSize: "18px", color: " #4D4D4D" }}>
@ -105,7 +105,11 @@ export default function SettingEmoji({ totalIndex }: SettingEmojiProps) {
          }}
        >
          <CustomCheckbox
-            sx={{ mr: isMobile ? "0px" : "16px" }}
+            sx={{
+              mr: isMobile ? "0px" : "16px",
+              height: isMobile ? "100%" : "26px",
+              alignItems: isMobile ? "flex-start" : "center",
+            }}
            label={"Внутреннее название вопроса"}
            checked={question.content.innerNameCheck}
            handleChange={({ target }) => {
--- a/src/pages/Questions/OptionsAndPicture/OptionsAndPicture.tsx
+++ b/src/pages/Questions/OptionsAndPicture/OptionsAndPicture.tsx
@ -353,7 +353,32 @@ export default function OptionsAndPicture({ totalIndex }: Props) {
                  backgroundColor: "#7E2AEA",
                }}
              >
-                +
+                <Box
+                  sx={{ width: "100%", background: "#EEE4FC", height: "40px" }}
+                />
+                <ImageAddIcons
+                  style={{
+                    position: "absolute",
+                    color: "#7E2AEA",
+                    fontSize: "20px",
+                    left: "45%",
+                    right: "55%",
+                  }}
+                />
+                <Box
+                  sx={{
+                    display: "flex",
+                    justifyContent: "center",
+                    alignItems: "center",
+                    width: "20px",
+                    background: "#EEE4FC",
+                    height: "40px",
+                    color: "white",
+                    backgroundColor: "#7E2AEA",
+                  }}
+                >
+                  +
+                </Box>
              </Box>
            </Box>
          )}
--- a/src/pages/Questions/OptionsAndPicture/SettingOptionsAndPict.tsx
+++ b/src/pages/Questions/OptionsAndPicture/SettingOptionsAndPict.tsx
@ -44,7 +44,7 @@ export default function SettingOptionsAndPict({ totalIndex }: SettingOptionsAndP
      >
        <Box
          sx={{
-            pt: isMobile ? "25px" : "20px",
+            pt: isMobile ? "30px" : "20px",
            pb: isMobile ? "25px" : "20px",
            pl: "20px",
            display: "flex",
@ -104,7 +104,7 @@ export default function SettingOptionsAndPict({ totalIndex }: SettingOptionsAndP
            display: "flex",
            flexDirection: "column",
            gap: isMobile ? "13px" : "14px",
-            width: "100%",
+            width: isMobile ? "auto" : "100%",
          }}
        >
          <Typography
--- a/src/pages/Questions/OptionsPicture/OptionsPicture.tsx
+++ b/src/pages/Questions/OptionsPicture/OptionsPicture.tsx
@ -6,7 +6,7 @@ import {
  Typography,
  Button,
  useTheme,
-  useMediaQuery,
+  useMediaQuery
 } from "@mui/material";

 import ButtonsOptions from "../ButtonsOptions";
@ -33,6 +33,7 @@ export default function OptionsPicture({ totalIndex }: Props) {
  const [currentIndex, setCurrentIndex] = useState<number>(0);
  const theme = useTheme();
  const isMobile = useMediaQuery(theme.breakpoints.down(790));
+  const isTablet = useMediaQuery(theme.breakpoints.down(790));
  const quizId = Number(useParams().quizId);
  const [switchState, setSwitchState] = useState("setting");
  const { listQuestions } = questionStore();
@ -234,15 +235,8 @@ export default function OptionsPicture({ totalIndex }: Props) {
          )}
        </Box>
      </Box>
-      <ButtonsOptions
-        switchState={switchState}
-        SSHC={SSHC}
-        totalIndex={totalIndex}
-      />
-      <SwitchAnswerOptionsPict
-        switchState={switchState}
-        totalIndex={totalIndex}
-      />
+      <ButtonsOptions switchState={switchState} SSHC={SSHC} totalIndex={totalIndex} />
+      <SwitchAnswerOptionsPict switchState={switchState} totalIndex={totalIndex} />
    </>
  );
 }
--- a/src/pages/Questions/OptionsPicture/settingOpytionsPict.tsx
+++ b/src/pages/Questions/OptionsPicture/settingOpytionsPict.tsx
@ -228,6 +228,11 @@ export default function SettingOpytionsPict({
            sx={{
              marginBottom: "5px",
              opacity: question.content.xy !== "1:1" ? 1 : 0,
+              display: isTablet
+                ? question.content.xy === "1:1"
+                  ? "none"
+                  : "block"
+                : "block",
            }}
          >
            <Typography
@ -265,6 +270,7 @@ export default function SettingOpytionsPict({
            Настройки вопросов
          </Typography>
          <CustomCheckbox
+            sx={{ alignItems: isMobile ? "flex-start" : "" }}
            label={"Необязательный вопрос"}
            checked={question.content.required}
            handleChange={({ target }) =>
@ -281,6 +287,10 @@ export default function SettingOpytionsPict({
            }}
          >
            <CustomCheckbox
+              sx={{
+                height: isMobile ? "100%" : "26px",
+                alignItems: isMobile ? "flex-start" : "center",
+              }}
              label={"Внутреннее название вопроса"}
              checked={question.content.innerNameCheck}
              handleChange={({ target }) =>
--- a/src/pages/Questions/OwnTextField/OwnTextField.tsx
+++ b/src/pages/Questions/OwnTextField/OwnTextField.tsx
@ -41,7 +41,7 @@ export default function OwnTextField({ totalIndex }: Props) {
          width: "auto",
          maxWidth: "745px",
          display: "flex",
-          pb: "15px",
+          pb: "20px",
          pl: "20px",
          pr: "20px",
          flexDirection: "column",
@ -52,9 +52,9 @@ export default function OwnTextField({ totalIndex }: Props) {
          placeholder={"Пример ответа"}
          text={question.content.placeholder}
          onChange={({ target }) => debounced(target.value)}
-          sx={{ maxWidth: isFigmaTablte ? "549px" : "640px", width: "100%" }}
+          sx={{ maxWidth: isFigmaTablte ? "549px" : "640px", width: "100%", mt: isMobile ? "15px" : "0px" }}
        />
-        <Box sx={{ display: "flex", alignItems: "center", gap: "12px" }}>
+        <Box sx={{ display: "flex", alignItems: isMobile ? "flex-start" : "center", gap: "12px" }}>
          <Typography
            sx={{
              fontWeight: 400,
--- a/src/pages/Questions/OwnTextField/settingTextField.tsx
+++ b/src/pages/Questions/OwnTextField/settingTextField.tsx
@ -109,17 +109,21 @@ export default function SettingTextField({ totalIndex }: SettingTextFieldProps)
          pt: isMobile ? "0px" : "20px",
          pb: "20px",
          pl: isFigmaTablte ? (isWrappColumn ? "20px" : "34px") : "20px",
-          pr: isFigmaTablte ? "14px" : "20px",
+          pr: "20px",
          display: "flex",
          flexDirection: "column",
-          gap: isMobile ? "13px" : "14px",
+          gap: "14px",
        }}
      >
        <Typography sx={{ height: isMobile ? "18px" : "auto", fontWeight: "500", fontSize: "18px", color: " #4D4D4D" }}>
          Настройки вопросов
        </Typography>
        <CustomCheckbox
-          sx={{ display: "block", mr: isMobile ? "0px" : "16px" }}
+          sx={{
+            display: isMobile ? "flex" : "block",
+            mr: isMobile ? "0px" : "16px",
+            alignItems: isMobile ? "flex-end" : "center",
+          }}
          label={"Автозаполнение адреса"}
          checked={question.content.autofill}
          handleChange={({ target }) => {
@ -129,7 +133,11 @@ export default function SettingTextField({ totalIndex }: SettingTextFieldProps)
          }}
        />
        <CustomCheckbox
-          sx={{ display: "block", mr: isMobile ? "0px" : "16px" }}
+          sx={{
+            display: isMobile ? "flex" : "block",
+            mr: isMobile ? "0px" : "16px",
+            alignItems: isMobile ? "flex-end" : "center",
+          }}
          label={"Необязательный вопрос"}
          checked={!question.required}
          handleChange={(e) => {
@ -146,7 +154,12 @@ export default function SettingTextField({ totalIndex }: SettingTextFieldProps)
          }}
        >
          <CustomCheckbox
-            sx={{ display: "block", mr: isMobile ? "0px" : "16px" }}
+            sx={{
+              alignItems: isMobile ? "flex-start" : "center",
+              display: isMobile ? "flex" : "block",
+              mr: isMobile ? "0px" : "16px",
+              height: isMobile ? "100%" : "26px",
+            }}
            label={"Внутреннее название вопроса"}
            checked={question.content.innerNameCheck}
            handleChange={({ target }) => {
--- a/src/pages/Questions/PageOptions/PageOptions.tsx
+++ b/src/pages/Questions/PageOptions/PageOptions.tsx
@ -55,13 +55,14 @@ export default function PageOptions({ disableInput, totalIndex }: Props) {
          gap: isMobile ? "25px" : "20px",
        }}
      >
-        <Box sx={{ display: disableInput ? "none" : "" }}>
+        <Box sx={{ display: disableInput ? "none" : "", mt: isMobile ? "15px" : "0px" }}>
          <CustomTextField
            placeholder={"Можно добавить текст"}
            text={question.content.text}
            onChange={({ target }) => debounced(target.value)}
          />
        </Box>
+
        <Box
          sx={{
            mb: "20px",
@ -82,7 +83,50 @@ export default function PageOptions({ disableInput, totalIndex }: Props) {
            }}
          >
            {isMobile ? (
-              <AddPlusImage />
+              <Box
+                sx={{
+                  display: "flex",
+                  alignItems: "center",
+                  width: "120px",
+                  position: "relative",
+                }}
+              >
+                <Box
+                  sx={{
+                    width: "100%",
+                    background: "#EEE4FC",
+                    height: "40px",
+                    display: "flex",
+                    alignItems: "center",
+                    justifyContent: "center",
+                    borderTopLeftRadius: "4px",
+                    borderBottomLeftRadius: "4px",
+                  }}
+                >
+                  <ImageAddIcons
+                    style={{
+                      color: "#7E2AEA",
+                      fontSize: "20px",
+                    }}
+                  />
+                </Box>
+                <Box
+                  sx={{
+                    display: "flex",
+                    justifyContent: "center",
+                    alignItems: "center",
+                    width: "20px",
+                    background: "#EEE4FC",
+                    height: "40px",
+                    color: "white",
+                    backgroundColor: "#7E2AEA",
+                    borderTopRightRadius: "4px",
+                    borderBottomRightRadius: "4px",
+                  }}
+                >
+                  +
+                </Box>
+              </Box>
            ) : (
              <Box
                sx={{
@ -150,7 +194,50 @@ export default function PageOptions({ disableInput, totalIndex }: Props) {
            }}
          >
            {isMobile ? (
-              <AddPlusVideo />
+              <Box
+                sx={{
+                  display: "flex",
+                  alignItems: "center",
+                  width: "120px",
+                  position: "relative",
+                }}
+              >
+                <Box
+                  sx={{
+                    width: "100%",
+                    background: "#EEE4FC",
+                    height: "40px",
+                    display: "flex",
+                    alignItems: "center",
+                    justifyContent: "center",
+                    borderTopLeftRadius: "4px",
+                    borderBottomLeftRadius: "4px",
+                  }}
+                >
+                  <VideofileIcon
+                    style={{
+                      color: "#7E2AEA",
+                      fontSize: "20px",
+                    }}
+                  />
+                </Box>
+                <Box
+                  sx={{
+                    display: "flex",
+                    justifyContent: "center",
+                    alignItems: "center",
+                    width: "20px",
+                    background: "#EEE4FC",
+                    height: "40px",
+                    color: "white",
+                    backgroundColor: "#7E2AEA",
+                    borderTopRightRadius: "4px",
+                    borderBottomRightRadius: "4px",
+                  }}
+                >
+                  +
+                </Box>
+              </Box>
            ) : (
              <Box
                sx={{
--- a/src/pages/Questions/PageOptions/SettingPageOptions.tsx
+++ b/src/pages/Questions/PageOptions/SettingPageOptions.tsx
@ -20,7 +20,9 @@ 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));
  const quizId = Number(useParams().quizId);
@ -35,21 +37,33 @@ export default function SettingPageOptions({ totalIndex }: SettingPageOptionsPro
  return (
    <Box
      sx={{
+        boxSizing: "border-box",
        pt: isMobile ? "25px" : "20px",
        pb: isMobile ? "25px" : "20px",
        pl: "20px",
+        pr: "20px",
        display: "flex",
        flexDirection: "column",
        gap: "14px",
-        width: "100%",
+        width: isMobile ? "auto" : "100%",
      }}
    >
-      <Typography sx={{ height: isMobile ? "18px" : "auto", fontWeight: "500", fontSize: "18px", color: " #4D4D4D" }}>
+      <Typography
+        sx={{
+          height: isMobile ? "18px" : "auto",
+          fontWeight: "500",
+          fontSize: "18px",
+          color: " #4D4D4D",
+        }}
+      >
        Настройки вопроса
      </Typography>
-      <Box sx={{ width: isMobile ? "90%" : "auto", display: "flex", alignItems: "center" }}>
+      <Box sx={{ display: "flex", alignItems: "flex-start" }}>
        <CustomCheckbox
-          sx={{ mr: isMobile ? "0px" : "16px" }}
+          sx={{
+            mr: isMobile ? "0px" : "16px",
+            height: isMobile ? "100%" : "26px",
+          }}
          label={"Внутреннее название вопроса"}
          checked={question.content.innerNameCheck}
          handleChange={({ target }) =>
@ -62,7 +76,10 @@ export default function SettingPageOptions({ totalIndex }: SettingPageOptionsPro
            })
          }
        />
-        <Tooltip title="Будет отображаться как заголовок вопроса в приходящих заявках." placement="top">
+        <Tooltip
+          title="Будет отображаться как заголовок вопроса в приходящих заявках."
+          placement="top"
+        >
          <Box>
            <InfoIcon />
          </Box>
--- a/src/pages/Questions/RatingOptions/settingRating.tsx
+++ b/src/pages/Questions/RatingOptions/settingRating.tsx
@ -134,6 +134,7 @@ export default function SettingSlider({ totalIndex }: SettingSliderProps) {
      </Box>
      <Box
        sx={{
+          boxSizing: "border-box",
          pt: isMobile ? "30px" : "20px",
          pb: "20px",
          pl: isFigmaTablte ? (isMobile ? "20px" : "34px") : "40px",
--- a/src/pages/Questions/SliderOptions/SliderOptions.tsx
+++ b/src/pages/Questions/SliderOptions/SliderOptions.tsx
@ -34,17 +34,25 @@ export default function SliderOptions({ totalIndex }: Props) {
          maxWidth: "673.8px",
          display: "flex",
          pl: "20px",
-          pr: "20px",
+          pr: isMobile ? "13px" : "20px",
          pb: isMobile ? "30px" : "20px",
          flexDirection: "column",
-          gap: "20px",
+          gap: isMobile ? "25px" : "20px",
        }}
      >
-        <Box sx={{ gap: "14px", display: "flex", flexDirection: "column" }}>
+        <Box
+          sx={{
+            gap: isMobile ? "10px" : "14px",
+            mt: isMobile ? "25px" : "0px",
+            display: "flex",
+            flexDirection: "column",
+            marginRight: isMobile ? "10px" : "0px",
+          }}
+        >
          <Typography sx={{ fontWeight: "500", fontSize: "18px", color: "#4D4D4D" }}>
            Выбор значения из диапазона
          </Typography>
-          <Box sx={{ width: "100%", display: "flex", alignItems: "center", gap: "20px" }}>
+          <Box sx={{ width: "100%", display: "flex", alignItems: "center", gap: isMobile ? "9px" : "20px" }}>
            <CustomNumberField
              sx={{ maxWidth: "310px", width: "100%" }}
              placeholder={"0"}
@ -131,11 +139,7 @@ export default function SliderOptions({ totalIndex }: Props) {
                  });

                  if (range % step) {
-                    setStepError(
-                      `Шаг должен делить без остатка диапазон ${max} - ${min} = ${
-                        max - min
-                      }`
-                    );
+                    setStepError(`Шаг должен делить без остатка диапазон ${max} - ${min} = ${max - min}`);
                  } else {
                    setStepError("");
                  }
@ -154,7 +158,7 @@ export default function SliderOptions({ totalIndex }: Props) {
          }}
        >
          <Box sx={{ width: "100%" }}>
-            <Typography sx={{ fontWeight: "500", fontSize: "18px", color: "#4D4D4D", mb: "14px" }}>
+            <Typography sx={{ fontWeight: "500", fontSize: "18px", color: "#4D4D4D", mb: isMobile ? "10px" : "14px" }}>
              Начальное значение
            </Typography>
            <CustomNumberField
@ -206,11 +210,7 @@ export default function SliderOptions({ totalIndex }: Props) {
                }

                if (range % step) {
-                  setStepError(
-                    `Шаг должен делить без остатка диапазон ${max} - ${min} = ${
-                      max - min
-                    }`
-                  );
+                  setStepError(`Шаг должен делить без остатка диапазон ${max} - ${min} = ${max - min}`);
                } else {
                  setStepError("");
                }
@ -219,11 +219,7 @@ export default function SliderOptions({ totalIndex }: Props) {
          </Box>
        </Box>
      </Box>
-      <ButtonsOptions
-        switchState={switchState}
-        SSHC={SSHC}
-        totalIndex={totalIndex}
-      />
+      <ButtonsOptions switchState={switchState} SSHC={SSHC} totalIndex={totalIndex} />
      <SwitchSlider switchState={switchState} totalIndex={totalIndex} />
    </>
  );
--- a/src/pages/Questions/SliderOptions/settingSlider.tsx
+++ b/src/pages/Questions/SliderOptions/settingSlider.tsx
@ -37,19 +37,23 @@ export default function SettingSlider({ totalIndex }: SettingSliderProps) {
      <Box
        sx={{
          pt: isMobile ? "25px" : "20px",
-          pb: isMobile ? "25px" : "20px",
+          pb: isMobile ? "30px" : "20px",
          pl: "20px",
          display: "flex",
          flexDirection: "column",
          gap: "14px",
-          width: "100%",
+          width: isMobile ? "auto" : "100%",
        }}
      >
        <Typography sx={{ height: isMobile ? "18px" : "auto", fontWeight: "500", fontSize: "18px", color: " #4D4D4D" }}>
          Настройки ползунка
        </Typography>
        <CustomCheckbox
-          sx={{ mr: isMobile ? "0px" : "16px" }}
+          sx={{
+            mr: isMobile ? "0px" : "16px",
+            height: isMobile ? "100%" : "auto",
+            alignItems: isMobile ? "flex-start" : "center",
+          }}
          label={"Выбор диапозона (два ползунка)"}
          checked={question.content.chooseRange}
          handleChange={({ target }) => {
@ -67,15 +71,15 @@ export default function SettingSlider({ totalIndex }: SettingSliderProps) {
          pr: isFigmaTablte ? (isMobile ? "20px" : "12px") : "20px",
          display: "flex",
          flexDirection: "column",
-          gap: isMobile ? "13px" : "14px",
-          width: "100%",
+          gap: "14px",
+          width: isMobile ? "auto" : "100%",
        }}
      >
        <Typography sx={{ height: isMobile ? "18px" : "auto", fontWeight: "500", fontSize: "18px", color: " #4D4D4D" }}>
          Настройки вопросов
        </Typography>
        <CustomCheckbox
-          sx={{ mr: isMobile ? "0px" : "16px" }}
+          sx={{ mr: isMobile ? "0px" : "16px", alignItems: isMobile ? "flex-end" : "center" }}
          label={"Необязательный вопрос"}
          checked={!question.required}
          handleChange={(e) => {
@ -88,11 +92,15 @@ export default function SettingSlider({ totalIndex }: SettingSliderProps) {
          sx={{
            width: isMobile ? "90%" : "auto",
            display: "flex",
-            alignItems: "center",
+            alignItems: "flex-start",
          }}
        >
          <CustomCheckbox
-            sx={{ mr: isMobile ? "0px" : "16px", whiteSpace: isFigmaTablte ? "nowrap" : "" }}
+            sx={{
+              mr: isMobile ? "0px" : "16px",
+              height: isMobile ? "100%" : "auto",
+              alignItems: isMobile ? "flex-start" : "center",
+            }}
            label={"Внутреннее название вопроса"}
            checked={question.content.innerNameCheck}
            handleChange={({ target }) => {
--- a/src/pages/Questions/UploadFile/UploadFile.tsx
+++ b/src/pages/Questions/UploadFile/UploadFile.tsx
@ -85,7 +85,7 @@ export default function UploadFile({ totalIndex }: Props) {
          flexDirection: "column",
        }}
      >
-        <Box sx={{ gap: "10px", display: "flex" }}>
+        <Box sx={{ gap: "10px", display: "flex", mt: isMobile ? "15px" : "0px" }}>
          <FormControl
            fullWidth
            size="small"
@ -166,9 +166,9 @@ export default function UploadFile({ totalIndex }: Props) {
        <Box
          sx={{
            display: "flex",
-            alignItems: "center",
+            alignItems: "flex-start",
            marginBottom: "20px",
-            marginTop: isMobile ? "18px" : "15px",
+            marginTop: "15px",
          }}
        >
          <Typography
--- a/src/pages/Questions/UploadFile/settingUpload.tsx
+++ b/src/pages/Questions/UploadFile/settingUpload.tsx
@ -35,17 +35,23 @@ export default function SettingsUpload({ totalIndex }: SettingsUploadProps) {
  return (
    <Box
      sx={{
-        display: "flex",
-        flexDirection: "column",
-        pt: "20px",
+        boxSizing: "border-box",
+        pt: isMobile ? "30px" : "20px",
        pb: "20px",
        pl: "20px",
-        gap: "15px",
+        pr: isMobile ? "20px" : "0px",
+        display: "flex",
+        flexDirection: "column",
+        gap: "14px",
+        width: isMobile ? "auto" : "100%",
      }}
    >
      <Typography>Настройки вопроса</Typography>
      <CustomCheckbox
-        sx={{ display: "block", mr: isMobile ? "0px" : "16px" }}
+        sx={{
+          display: isMobile ? "flex" : "block",
+          mr: isMobile ? "0px" : "16px",
+        }}
        label={"Автозаполнение адреса"}
        checked={question.content.autofill}
        handleChange={({ target }) => {
@ -55,7 +61,10 @@ export default function SettingsUpload({ totalIndex }: SettingsUploadProps) {
        }}
      />
      <CustomCheckbox
-        sx={{ display: "block", mr: isMobile ? "0px" : "16px" }}
+        sx={{
+          display: isMobile ? "flex" : "block",
+          mr: isMobile ? "0px" : "16px",
+        }}
        label={"Необязательный вопрос"}
        checked={!question.required}
        handleChange={(e) => {
@ -72,7 +81,11 @@ export default function SettingsUpload({ totalIndex }: SettingsUploadProps) {
        }}
      >
        <CustomCheckbox
-          sx={{ mr: isMobile ? "0px" : "16px" }}
+          sx={{
+            mr: isMobile ? "0px" : "16px",
+            height: isMobile ? "100%" : "26px",
+            alignItems: "flex-start",
+          }}
          label={"Внутреннее название вопроса"}
          checked={question.content.innerNameCheck}
          handleChange={({ target }) => {
@ -99,10 +112,7 @@ export default function SettingsUpload({ totalIndex }: SettingsUploadProps) {
          placeholder={"Развёрнутое описание вопроса"}
          text={question.content.innerName}
          onChange={({ target }) => debounced(target.value)}
-          sx={{
-            boxSizing: "border-box",
-            paddingRight: "20px",
-          }}
+          sx={{ paddingRight: "20px" }}
        />
      )}
    </Box>
--- a/src/pages/Questions/answerOptions/AnswerOptions.tsx
+++ b/src/pages/Questions/answerOptions/AnswerOptions.tsx
@ -94,11 +94,7 @@ export default function AnswerOptions({ totalIndex }: Props) {
          )}
        </Box>
      </Box>
-      <ButtonsOptionsAndPict
-        switchState={switchState}
-        SSHC={SSHC}
-        totalIndex={totalIndex}
-      />
+      <ButtonsOptionsAndPict switchState={switchState} SSHC={SSHC} totalIndex={totalIndex} />
      <SwitchAnswerOptions switchState={switchState} totalIndex={totalIndex} />
    </>
  );
--- a/src/pages/Questions/answerOptions/responseSettings.tsx
+++ b/src/pages/Questions/answerOptions/responseSettings.tsx
@ -1,5 +1,11 @@
 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 InfoIcon from "../../../assets/icons/InfoIcon";
@ -17,6 +23,7 @@ export default function ResponseSettings({ totalIndex }: Props) {
  const { listQuestions } = questionStore();
  const theme = useTheme();
  const isTablet = useMediaQuery(theme.breakpoints.down(900));
+
  const isFigmaTablte = useMediaQuery(theme.breakpoints.down(990));
  const isMobile = useMediaQuery(theme.breakpoints.down(790));
  const question = listQuestions[quizId][totalIndex] as QuizQuestionVariant;
@ -46,7 +53,14 @@ export default function ResponseSettings({ totalIndex }: Props) {
          width: "100%",
        }}
      >
-        <Typography sx={{ height: isMobile ? "18px" : "auto", fontWeight: "500", fontSize: "18px", color: " #4D4D4D" }}>
+        <Typography
+          sx={{
+            height: isMobile ? "18px" : "auto",
+            fontWeight: "500",
+            fontSize: "18px",
+            color: " #4D4D4D",
+          }}
+        >
          Настройки ответов
        </Typography>
        <CustomCheckbox
@ -85,17 +99,25 @@ export default function ResponseSettings({ totalIndex }: Props) {
      </Box>
      <Box
        sx={{
+          boxSizing: "border-box",
          pt: isMobile ? "0px" : "20px",
          pb: "20px",
-          pl: isFigmaTablte ? (isMobile ? "20px" : "34px") : "28px",
+          pl: isFigmaTablte ? (isTablet ? "20px" : "34px") : "28px",
          pr: isFigmaTablte ? "19px" : "20px",
          display: "flex",
          flexDirection: "column",
-          gap: isMobile ? "13px" : "14px",
+          gap: "14px",
          width: "100%",
        }}
      >
-        <Typography sx={{ height: isMobile ? "18px" : "auto", fontWeight: "500", fontSize: "18px", color: " #4D4D4D" }}>
+        <Typography
+          sx={{
+            height: isMobile ? "18px" : "auto",
+            fontWeight: "500",
+            fontSize: "18px",
+            color: " #4D4D4D",
+          }}
+        >
          Настройки вопросов
        </Typography>
        <CustomCheckbox
@ -116,7 +138,11 @@ export default function ResponseSettings({ totalIndex }: Props) {
          }}
        >
          <CustomCheckbox
-            sx={{ mr: isMobile ? "0px" : "9px", height: isMobile ? "42px" : "26px", alignItems: "start" }}
+            sx={{
+              mr: isMobile ? "0px" : "9px",
+              height: isMobile ? "42px" : "26px",
+              alignItems: "start",
+            }}
            label={"Внутреннее название вопроса"}
            checked={question.content.innerNameCheck}
            handleChange={({ target }) => {
@ -129,14 +155,16 @@ export default function ResponseSettings({ totalIndex }: Props) {
              });
            }}
          />
-          {isMobile ||
-            (!isFigmaTablte && (
-              <Tooltip title="Будет отображаться как заголовок вопроса в приходящих заявках." placement="top">
-                <Box>
-                  <InfoIcon />
-                </Box>
-              </Tooltip>
-            ))}
+          {isMobile && (
+            <Tooltip
+              title="Будет отображаться как заголовок вопроса в приходящих заявках."
+              placement="top"
+            >
+              <Box>
+                <InfoIcon />
+              </Box>
+            </Tooltip>
+          )}
        </Box>
        {question.content.innerNameCheck && (
          <CustomTextField