Merge branch 'style' into 'dev'

feat: style See merge request frontend/squiz!20
2023-10-06 13:41:44 +00:00 · 2023-10-06 13:41:44 +00:00 · 84750c2170
commit 84750c2170
parent dff7e7e97f 010704ef40
22 changed files with 257 additions and 187 deletions
--- a/src/pages/Questions/AnswerDraggableList/AnswerItem.tsx
+++ b/src/pages/Questions/AnswerDraggableList/AnswerItem.tsx
@ -147,7 +147,7 @@ export const AnswerItem = ({
                        style={{ color: "#9A9AAF", fontSize: "30px" }}
                      />
                    </InputAdornment>
-                    {additionalContent}
+                    {icon && icon}
                  </>
                ),
                endAdornment: (
@ -166,13 +166,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" }}
@ -201,16 +199,12 @@ export const AnswerItem = ({
                  borderRadius: "8px",
                  height: "48px",
                  background: "#ffffff",
-                  "& .MuiOutlinedInput-notchedOutline": {
-                    border: "none",
-                  },
                },
              }}
              inputProps={{
                sx: { fontSize: "18px", lineHeight: "21px", py: 0, ml: "13px" },
              }}
            />
-            {additionalMobile}
          </FormControl>
        </Box>
      )}
--- a/src/pages/Questions/DataOptions/DataOptions.tsx
+++ b/src/pages/Questions/DataOptions/DataOptions.tsx
@ -43,7 +43,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={listQuestions[quizId][totalIndex].content.type === "calendar"}
            onClick={() => {
@ -67,7 +67,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
@ -34,7 +34,7 @@ export default function SettingsData({ totalIndex }: SettingsDataProps) {
    >
      <Box
        sx={{
-          pt: isMobile ? "25px" : "20px",
+          pt: "20px",
          pb: isMobile ? "25px" : "20px",
          pl: "20px",
          display: "flex",
@ -76,7 +76,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" }}>
@ -92,9 +92,13 @@ export default function SettingsData({ totalIndex }: SettingsDataProps) {
            });
          }}
        />
-        <Box sx={{ width: isMobile ? "93%" : "auto", display: "flex", alignItems: "center" }}>
+        <Box sx={{ width: isMobile ? "93%" : "auto", display: "flex", alignItems: "flex-start" }}>
          <CustomCheckbox
-            sx={{ mr: isMobile ? "0px" : "16px" }}
+            sx={{
+              mr: isMobile ? "0px" : "16px",
+              height: isMobile ? "100%" : "26px",
+              alignItems: isMobile ? "flex-start" : "center",
+            }}
            label={"Внутреннее название вопроса"}
            checked={listQuestions[quizId][totalIndex].content.innerNameCheck}
            handleChange={(e) => {
--- a/src/pages/Questions/DraggableList/QuestionPageCard.tsx
+++ b/src/pages/Questions/DraggableList/QuestionPageCard.tsx
@ -120,7 +120,7 @@ export default function QuestionsPageCard({ totalIndex, draggableProps, isDraggi
            display: "flex",
            alignItems: "center",
            justifyContent: "space-between",
-            padding: isTablet ? (isMobile ? "20px 20px 0px 20px" : "20px 10px 20px 20px ") : "20px 10px 20px 20px",
+            padding: isTablet ? (isMobile ? "10px 20px 0px 20px" : "20px 10px 20px 20px ") : "20px 10px 20px 20px",
            flexDirection: isMobile ? "column-reverse" : null,
          }}
        >
@ -243,9 +243,7 @@ export default function QuestionsPageCard({ totalIndex, draggableProps, isDraggi
                    onClick={() => {
                      const removedId = listQuestions[quizId][totalIndex].id;
                      if (listQuestions[quizId][totalIndex].deleteTimeoutId) {
-                        clearTimeout(
-                          listQuestions[quizId][totalIndex].deleteTimeoutId
-                        );
+                        clearTimeout(listQuestions[quizId][totalIndex].deleteTimeoutId);
                      }

                      removeQuestion(quizId, totalIndex);
--- a/src/pages/Questions/DropDown/DropDown.tsx
+++ b/src/pages/Questions/DropDown/DropDown.tsx
@ -59,7 +59,7 @@ export default function DropDown({ totalIndex }: Props) {
          sx={{
            display: "flex",
            alignItems: "center",
-            marginBottom: "17px",
+            marginBottom: "20px",
          }}
        >
          <Link
@ -93,11 +93,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={listQuestions[quizId][totalIndex].content.innerNameCheck}
              handleChange={(e) => {
@ -169,7 +168,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
@ -26,9 +26,7 @@ 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);
@ -183,9 +181,7 @@ export default function Emoji({ totalIndex }: Props) {
          <EmojiPicker
            onEmojiSelect={({ native }) => {
              setOpen(false);
-              const cloneVariants = [
-                ...listQuestions[quizId][totalIndex].content.variants,
-              ];
+              const cloneVariants = [...listQuestions[quizId][totalIndex].content.variants];

              cloneVariants[currentIndex] = {
                ...cloneVariants[currentIndex],
@ -201,7 +197,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"
@ -244,11 +240,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
@ -77,8 +77,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" }}>
@ -94,9 +94,13 @@ export default function SettingEmoji({ totalIndex }: SettingEmojiProps) {
            });
          }}
        />
-        <Box sx={{ width: isMobile ? "90%" : "auto", display: "flex", alignItems: "center" }}>
+        <Box sx={{ display: "flex", alignItems: "center" }}>
          <CustomCheckbox
-            sx={{ mr: isMobile ? "0px" : "16px" }}
+            sx={{
+              mr: isMobile ? "0px" : "16px",
+              height: isMobile ? "100%" : "26px",
+              alignItems: isMobile ? "flex-start" : "center",
+            }}
            label={"Внутреннее название вопроса"}
            checked={listQuestions[quizId][totalIndex].content.innerNameCheck}
            handleChange={(e) => {
--- a/src/pages/Questions/OptionsAndPicture/OptionsAndPicture.tsx
+++ b/src/pages/Questions/OptionsAndPicture/OptionsAndPicture.tsx
@ -63,19 +63,6 @@ export default function OptionsAndPicture({ totalIndex }: Props) {
    }
  };

-  const addNewAnswer = () => {
-    const answerNew =
-      listQuestions[quizId][totalIndex].content.variants.slice();
-    answerNew.push({ answer: "", hints: "", emoji: "", image: "" });
-
-    updateQuestionsList(quizId, totalIndex, {
-      content: {
-        ...listQuestions[quizId][totalIndex].content,
-        variants: answerNew,
-      },
-    });
-  };
-
  return (
    <>
      <Box sx={{ pl: "20px", pr: "20px" }}>
@ -363,7 +350,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
@ -46,7 +46,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",
@ -105,7 +105,7 @@ export default function SettingOptionsAndPict({ totalIndex }: SettingOptionsAndP
            display: "flex",
            flexDirection: "column",
            gap: isMobile ? "13px" : "14px",
-            width: "100%",
+            width: isMobile ? "auto" : "100%",
          }}
        >
          <Typography
@ -128,7 +128,10 @@ export default function SettingOptionsAndPict({ totalIndex }: SettingOptionsAndP
          />
          <Box sx={{ display: "flex", alignItems: "center" }}>
            <CustomCheckbox
-              sx={{ width: isMobile ? "90%" : "auto", mr: isMobile ? "0px" : "16px" }}
+              sx={{
+                mr: isMobile ? "0px" : "16px",
+                height: isMobile ? "100%" : "26px",
+              }}
              label={"Внутреннее название вопроса"}
              checked={listQuestions[quizId][totalIndex].content.innerNameCheck}
              handleChange={({ target }) => {
--- 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";
@ -31,6 +31,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();
@ -235,15 +236,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
@ -227,6 +227,7 @@ export default function SettingOpytionsPict({ totalIndex }: SettingOpytionsPictP
          </Box>
          <Typography sx={{ fontWeight: "500", fontSize: "18px", color: " #4D4D4D" }}>Настройки вопросов</Typography>
          <CustomCheckbox
+            sx={{ alignItems: isMobile ? "flex-start" : "" }}
            label={"Необязательный вопрос"}
            checked={listQuestions[quizId][totalIndex].content.required}
            handleChange={({ target }) =>
@ -246,6 +247,7 @@ export default function SettingOpytionsPict({ totalIndex }: SettingOpytionsPictP
            }}
          >
            <CustomCheckbox
+              sx={{ height: isMobile ? "100%" : "26px", alignItems: isMobile ? "flex-start" : "center" }}
              label={"Внутреннее название вопроса"}
              checked={listQuestions[quizId][totalIndex].content.innerNameCheck}
              handleChange={({ target }) =>
--- a/src/pages/Questions/OwnTextField/OwnTextField.tsx
+++ b/src/pages/Questions/OwnTextField/OwnTextField.tsx
@ -39,7 +39,7 @@ export default function OwnTextField({ totalIndex }: Props) {
          width: "auto",
          maxWidth: "745px",
          display: "flex",
-          pb: "15px",
+          pb: "20px",
          pl: "20px",
          pr: "20px",
          flexDirection: "column",
@ -50,9 +50,9 @@ export default function OwnTextField({ totalIndex }: Props) {
          placeholder={"Пример ответа"}
          text={listQuestions[quizId][totalIndex].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
@ -107,17 +107,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={listQuestions[quizId][totalIndex].content.autofill}
          handleChange={({ target }) => {
@ -127,7 +131,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={!listQuestions[quizId][totalIndex].required}
          handleChange={(e) => {
@ -136,9 +144,14 @@ export default function SettingTextField({ totalIndex }: SettingTextFieldProps)
            });
          }}
        />
-        <Box sx={{ width: isMobile ? "90%" : "auto", display: "flex", alignItems: "center" }}>
+        <Box sx={{ display: "flex", alignItems: "flex-start" }}>
          <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={listQuestions[quizId][totalIndex].content.innerNameCheck}
            handleChange={(e) => {
--- a/src/pages/Questions/PageOptions/PageOptions.tsx
+++ b/src/pages/Questions/PageOptions/PageOptions.tsx
@ -52,13 +52,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={listQuestions[quizId][totalIndex].content.text}
            onChange={({ target }) => debounced(target.value)}
          />
        </Box>
+
        <Box
          sx={{
            mb: "20px",
@ -79,7 +80,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={{
@ -146,7 +190,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
@ -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 CustomCheckbox from "@ui_kit/CustomCheckbox";
 import CustomTextField from "@ui_kit/CustomTextField";
 import { useDebouncedCallback } from "use-debounce";
@ -37,18 +31,19 @@ export default function SettingPageOptions({ totalIndex }: SettingPageOptionsPro
        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>
-      <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={listQuestions[quizId][totalIndex].content.innerNameCheck}
          handleChange={({ target }) =>
--- a/src/pages/Questions/SliderOptions/SliderOptions.tsx
+++ b/src/pages/Questions/SliderOptions/SliderOptions.tsx
@ -31,30 +31,34 @@ 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"}
              min={0}
              max={99}
-              value={
-                listQuestions[quizId][totalIndex].content.range.split("—")[0]
-              }
+              value={listQuestions[quizId][totalIndex].content.range.split("—")[0]}
              onChange={({ target }) => {
                const clonContent = listQuestions[quizId][totalIndex].content;
-                clonContent.range = `${target.value}—${
-                  listQuestions[quizId][totalIndex].content.range.split("—")[1]
-                }`;
+                clonContent.range = `${target.value}—${listQuestions[quizId][totalIndex].content.range.split("—")[1]}`;
                updateQuestionsList(quizId, totalIndex, {
                  content: clonContent,
                });
@ -62,16 +66,12 @@ export default function SliderOptions({ totalIndex }: Props) {
              onBlur={({ target }) => {
                const start = listQuestions[quizId][totalIndex].content.start;
                const min = Number(target.value);
-                const max = Number(
-                  listQuestions[quizId][totalIndex].content.range.split("—")[1]
-                );
+                const max = Number(listQuestions[quizId][totalIndex].content.range.split("—")[1]);

                if (min >= max) {
                  const clonContent = listQuestions[quizId][totalIndex].content;
                  clonContent.range = `${max - 1 >= 0 ? max - 1 : 0}—${
-                    listQuestions[quizId][totalIndex].content.range.split(
-                      "—"
-                    )[1]
+                    listQuestions[quizId][totalIndex].content.range.split("—")[1]
                  }`;
                  updateQuestionsList(quizId, totalIndex, {
                    content: clonContent,
@ -94,14 +94,10 @@ export default function SliderOptions({ totalIndex }: Props) {
              placeholder={"100"}
              min={0}
              max={100}
-              value={
-                listQuestions[quizId][totalIndex].content.range.split("—")[1]
-              }
+              value={listQuestions[quizId][totalIndex].content.range.split("—")[1]}
              onChange={({ target }) => {
                const clonContent = listQuestions[quizId][totalIndex].content;
-                clonContent.range = `${
-                  listQuestions[quizId][totalIndex].content.range.split("—")[0]
-                }—${target.value}`;
+                clonContent.range = `${listQuestions[quizId][totalIndex].content.range.split("—")[0]}—${target.value}`;
                updateQuestionsList(quizId, totalIndex, {
                  content: clonContent,
                });
@ -109,19 +105,15 @@ export default function SliderOptions({ totalIndex }: Props) {
              onBlur={({ target }) => {
                const start = listQuestions[quizId][totalIndex].content.start;
                const step = listQuestions[quizId][totalIndex].content.step;
-                const min = Number(
-                  listQuestions[quizId][totalIndex].content.range.split("—")[0]
-                );
+                const min = Number(listQuestions[quizId][totalIndex].content.range.split("—")[0]);
                const max = Number(target.value);
                const range = max - min;

                if (max <= min) {
                  const clonContent = listQuestions[quizId][totalIndex].content;
-                  clonContent.range = `${
-                    listQuestions[quizId][totalIndex].content.range.split(
-                      "—"
-                    )[0]
-                  }—${min + 1 >= 100 ? 100 : min + 1}`;
+                  clonContent.range = `${listQuestions[quizId][totalIndex].content.range.split("—")[0]}—${
+                    min + 1 >= 100 ? 100 : min + 1
+                  }`;
                  updateQuestionsList(quizId, totalIndex, {
                    content: clonContent,
                  });
@ -145,11 +137,7 @@ export default function SliderOptions({ totalIndex }: Props) {
                  });

                  if (range % step) {
-                    setStepError(
-                      `Шаг должен делить без остатка диапазон ${max} - ${min} = ${
-                        max - min
-                      }`
-                    );
+                    setStepError(`Шаг должен делить без остатка диапазон ${max} - ${min} = ${max - min}`);
                  } else {
                    setStepError("");
                  }
@ -168,18 +156,14 @@ 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
              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]
-              )}
+              min={Number(listQuestions[quizId][totalIndex].content.range.split("—")[0])}
+              max={Number(listQuestions[quizId][totalIndex].content.range.split("—")[1])}
              value={String(listQuestions[quizId][totalIndex].content.start)}
              onChange={({ target }) => {
                const clonContent = listQuestions[quizId][totalIndex].content;
@ -216,12 +200,8 @@ export default function SliderOptions({ totalIndex }: Props) {
                });
              }}
              onBlur={({ target }) => {
-                const min = Number(
-                  listQuestions[quizId][totalIndex].content.range.split("—")[0]
-                );
-                const max = Number(
-                  listQuestions[quizId][totalIndex].content.range.split("—")[1]
-                );
+                const min = Number(listQuestions[quizId][totalIndex].content.range.split("—")[0]);
+                const max = Number(listQuestions[quizId][totalIndex].content.range.split("—")[1]);
                const range = max - min;
                const step = Number(target.value);

@ -235,11 +215,7 @@ export default function SliderOptions({ totalIndex }: Props) {
                }

                if (range % step) {
-                  setStepError(
-                    `Шаг должен делить без остатка диапазон ${max} - ${min} = ${
-                      max - min
-                    }`
-                  );
+                  setStepError(`Шаг должен делить без остатка диапазон ${max} - ${min} = ${max - min}`);
                } else {
                  setStepError("");
                }
@ -248,11 +224,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
@ -34,19 +34,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={listQuestions[quizId][totalIndex].content.chooseRange}
          handleChange={(e) => {
@ -64,15 +68,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={!listQuestions[quizId][totalIndex].required}
          handleChange={(e) => {
@ -85,11 +89,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={listQuestions[quizId][totalIndex].content.innerNameCheck}
            handleChange={(e) => {
--- a/src/pages/Questions/UploadFile/UploadFile.tsx
+++ b/src/pages/Questions/UploadFile/UploadFile.tsx
@ -71,7 +71,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"
@ -152,9 +152,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
@ -26,20 +26,21 @@ export default function SettingsUpload({ totalIndex }: SettingsUploadProps) {
  return (
    <Box
      sx={{
-        pt: isMobile ? "25px" : "20px",
-        pb: isMobile ? "25px" : "20px",
+        pt: isMobile ? "30px" : "20px",
+        pb: "20px",
        pl: "20px",
+        pr: isMobile ? "20px" : "0px",
        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={{ display: "block", mr: isMobile ? "0px" : "16px" }}
+        sx={{ display: isMobile ? "flex" : "block", mr: isMobile ? "0px" : "16px" }}
        label={"Автозаполнение адреса"}
        checked={listQuestions[quizId][totalIndex].content.autofill}
        handleChange={({ target }) => {
@ -49,7 +50,7 @@ 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={!listQuestions[quizId][totalIndex].required}
        handleChange={(e) => {
@ -58,9 +59,9 @@ export default function SettingsUpload({ totalIndex }: SettingsUploadProps) {
          });
        }}
      />
-      <Box sx={{ width: isMobile ? "90%" : "auto", display: "flex", alignItems: "center" }}>
+      <Box sx={{ display: isMobile ? "flex" : "block", alignItems: "flex-start" }}>
        <CustomCheckbox
-          sx={{ mr: isMobile ? "0px" : "16px" }}
+          sx={{ mr: isMobile ? "0px" : "16px", height: isMobile ? "100%" : "26px", alignItems: "flex-start" }}
          label={"Внутреннее название вопроса"}
          checked={listQuestions[quizId][totalIndex].content.innerNameCheck}
          handleChange={(e) => {
--- a/src/pages/Questions/answerOptions/AnswerOptions.tsx
+++ b/src/pages/Questions/answerOptions/AnswerOptions.tsx
@ -92,11 +92,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
@ -15,6 +15,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 debounced = useDebouncedCallback((value) => {
@ -86,11 +87,11 @@ export default function ResponseSettings({ totalIndex }: Props) {
        sx={{
          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%",
        }}
      >
@ -125,14 +126,13 @@ 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>
        {listQuestions[quizId][totalIndex].content.innerNameCheck && (
          <CustomTextField