Merge branch 'style' into 'dev'

feat: style

See merge request frontend/squiz!20

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={{
+                      anchorOrigin={{ vertical: "bottom", horizontal: "left" }}
-                        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>
       )}

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,

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) => {

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(
+                        clearTimeout(listQuestions[quizId][totalIndex].deleteTimeoutId);
-                          listQuestions[quizId][totalIndex].deleteTimeoutId
-                        );
                       }
 
                       removeQuestion(quizId, totalIndex);

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
+      <ButtonsOptions switchState={switchState} SSHC={SSHC} totalIndex={totalIndex} />
-        switchState={switchState}
-        SSHC={SSHC}
-        totalIndex={totalIndex}
-      />
       <SwitchDropDown switchState={switchState} totalIndex={totalIndex} />
     </>
   );

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",
+            gap: "14px",
-            width: "100%",
+            width: isMobile ? "auto" : "100%",
           }}
         >
           <Typography
@@ -139,10 +139,9 @@ export default function SettingDropDown({ totalIndex }: SettingDropDownProps) {
               });
             }}
           />
-          <Box
+          <Box sx={{ position: "relative", display: "flex", alignItems: "flex-start" }}>
-            sx={{ position: "relative", display: "flex", alignItems: "center" }}
-          >
             <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",
             }}

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>(
+  const [anchorElement, setAnchorElement] = useState<HTMLDivElement | null>(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 = [
+              const cloneVariants = [...listQuestions[quizId][totalIndex].content.variants];
-                ...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
+      <ButtonsOptions switchState={switchState} SSHC={SSHC} totalIndex={totalIndex} />
-        switchState={switchState}
-        SSHC={SSHC}
-        totalIndex={totalIndex}
-      />
       <SwitchEmoji switchState={switchState} totalIndex={totalIndex} />
     </>
   );

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",
+          gap: "14px",
-          width: "100%",
+          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) => {

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>
           )}

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 }) => {

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
+      <ButtonsOptions switchState={switchState} SSHC={SSHC} totalIndex={totalIndex} />
-        switchState={switchState}
+      <SwitchAnswerOptionsPict switchState={switchState} totalIndex={totalIndex} />
-        SSHC={SSHC}
-        totalIndex={totalIndex}
-      />
-      <SwitchAnswerOptionsPict
-        switchState={switchState}
-        totalIndex={totalIndex}
-      />
     </>
   );
 }

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 }) =>

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,

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) => {

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={{

src/pages/Questions/PageOptions/SettingPageOptions.tsx

@@ -1,11 +1,5 @@
 import { useParams } from "react-router-dom";
-import {
+import { Box, Typography, Tooltip, useMediaQuery, useTheme } from "@mui/material";
-  Box,
-  Typography,
-  Tooltip,
-  useMediaQuery,
-  useTheme,
-} from "@mui/material";
 import 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 }) =>

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={
+              value={listQuestions[quizId][totalIndex].content.range.split("—")[0]}
-                listQuestions[quizId][totalIndex].content.range.split("—")[0]
-              }
               onChange={({ target }) => {
                 const clonContent = listQuestions[quizId][totalIndex].content;
-                clonContent.range = `${target.value}—${
+                clonContent.range = `${target.value}—${listQuestions[quizId][totalIndex].content.range.split("—")[1]}`;
-                  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(
+                const max = Number(listQuestions[quizId][totalIndex].content.range.split("—")[1]);
-                  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(
+                    listQuestions[quizId][totalIndex].content.range.split("—")[1]
-                      "—"
-                    )[1]
                   }`;
                   updateQuestionsList(quizId, totalIndex, {
                     content: clonContent,
@@ -94,14 +94,10 @@ export default function SliderOptions({ totalIndex }: Props) {
               placeholder={"100"}
               min={0}
               max={100}
-              value={
+              value={listQuestions[quizId][totalIndex].content.range.split("—")[1]}
-                listQuestions[quizId][totalIndex].content.range.split("—")[1]
-              }
               onChange={({ target }) => {
                 const clonContent = listQuestions[quizId][totalIndex].content;
-                clonContent.range = `${
+                clonContent.range = `${listQuestions[quizId][totalIndex].content.range.split("—")[0]}—${target.value}`;
-                  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(
+                const min = Number(listQuestions[quizId][totalIndex].content.range.split("—")[0]);
-                  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 = `${
+                  clonContent.range = `${listQuestions[quizId][totalIndex].content.range.split("—")[0]}—${
-                    listQuestions[quizId][totalIndex].content.range.split(
+                    min + 1 >= 100 ? 100 : min + 1
-                      "—"
+                  }`;
-                    )[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(
+                    setStepError(`Шаг должен делить без остатка диапазон ${max} - ${min} = ${max - min}`);
-                      `Шаг должен делить без остатка диапазон ${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(
+              min={Number(listQuestions[quizId][totalIndex].content.range.split("—")[0])}
-                listQuestions[quizId][totalIndex].content.range.split("—")[0]
+              max={Number(listQuestions[quizId][totalIndex].content.range.split("—")[1])}
-              )}
-              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(
+                const min = Number(listQuestions[quizId][totalIndex].content.range.split("—")[0]);
-                  listQuestions[quizId][totalIndex].content.range.split("—")[0]
+                const max = Number(listQuestions[quizId][totalIndex].content.range.split("—")[1]);
-                );
-                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(
+                  setStepError(`Шаг должен делить без остатка диапазон ${max} - ${min} = ${max - min}`);
-                    `Шаг должен делить без остатка диапазон ${max} - ${min} = ${
-                      max - min
-                    }`
-                  );
                 } else {
                   setStepError("");
                 }
@@ -248,11 +224,7 @@ export default function SliderOptions({ totalIndex }: Props) {
           </Box>
         </Box>
       </Box>
-      <ButtonsOptions
+      <ButtonsOptions switchState={switchState} SSHC={SSHC} totalIndex={totalIndex} />
-        switchState={switchState}
-        SSHC={SSHC}
-        totalIndex={totalIndex}
-      />
       <SwitchSlider switchState={switchState} totalIndex={totalIndex} />
     </>
   );

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",
+          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", 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) => {

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

src/pages/Questions/UploadFile/settingUpload.tsx

@@ -26,20 +26,21 @@ export default function SettingsUpload({ totalIndex }: SettingsUploadProps) {
   return (
     <Box
       sx={{
-        pt: isMobile ? "25px" : "20px",
+        pt: isMobile ? "30px" : "20px",
-        pb: isMobile ? "25px" : "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) => {

src/pages/Questions/answerOptions/AnswerOptions.tsx

@@ -92,11 +92,7 @@ export default function AnswerOptions({ totalIndex }: Props) {
           )}
         </Box>
       </Box>
-      <ButtonsOptionsAndPict
+      <ButtonsOptionsAndPict switchState={switchState} SSHC={SSHC} totalIndex={totalIndex} />
-        switchState={switchState}
-        SSHC={SSHC}
-        totalIndex={totalIndex}
-      />
       <SwitchAnswerOptions switchState={switchState} totalIndex={totalIndex} />
     </>
   );

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 ||
+          {isMobile && (
-            (!isFigmaTablte && (
+            <Tooltip title="Будет отображаться как заголовок вопроса в приходящих заявках." placement="top">
-              <Tooltip title="Будет отображаться как заголовок вопроса в приходящих заявках." placement="top">
+              <Box>
-                <Box>
+                <InfoIcon />
-                  <InfoIcon />
+              </Box>
-                </Box>
+            </Tooltip>
-              </Tooltip>
+          )}
-            ))}
         </Box>
         {listQuestions[quizId][totalIndex].content.innerNameCheck && (
           <CustomTextField