numbered the questions in the Questionnaire type

src/pages/Questions/DraggableList/QuestionPageCard.tsx

@@ -29,7 +29,17 @@ import {
   useMediaQuery,
   useTheme,
 } from "@mui/material";
-import { copyQuestion, createUntypedQuestion, deleteQuestion, clearRuleForAll, toggleExpandQuestion, updateQuestion, updateUntypedQuestion, getQuestionByContentId, deleteQuestionWithTimeout } from "@root/questions/actions";
+import {
+  copyQuestion,
+  createUntypedQuestion,
+  deleteQuestion,
+  clearRuleForAll,
+  toggleExpandQuestion,
+  updateQuestion,
+  updateUntypedQuestion,
+  getQuestionByContentId,
+  deleteQuestionWithTimeout,
+} from "@root/questions/actions";
 import { updateRootContentId } from "@root/quizes/actions";
 import { useRef, useState } from "react";
 import type { DraggableProvidedDragHandleProps } from "react-beautiful-dnd";
@@ -63,7 +73,7 @@ export default function QuestionsPageCard({ question, draggableProps, isDragging
   const setTitle = useDebouncedCallback((title) => {
     const updateQuestionFn = question.type === null ? updateUntypedQuestion : updateQuestion;
 
-        updateQuestionFn(question.id, question => {
+    updateQuestionFn(question.id, (question) => {
       question.title = title;
     });
   }, 200);
@@ -102,7 +112,7 @@ export default function QuestionsPageCard({ question, draggableProps, isDragging
             <TextField
               defaultValue={question.title}
               placeholder={"Заголовок вопроса"}
-                            onChange={({ target }: { target: HTMLInputElement; }) => setTitle(target.value || " ")}
+              onChange={({ target }: { target: HTMLInputElement }) => setTitle(target.value || " ")}
               InputProps={{
                 startAdornment: (
                   <Box>
@@ -128,9 +138,7 @@ export default function QuestionsPageCard({ question, draggableProps, isDragging
                 margin: isMobile ? "10px 0" : 0,
                 "& .MuiInputBase-root": {
                   color: "#000000",
-                                    backgroundColor: question.expanded
+                  backgroundColor: question.expanded ? theme.palette.background.default : "transparent",
-                                        ? theme.palette.background.default
-                                        : "transparent",
                   height: "48px",
                   borderRadius: "10px",
                   ".MuiOutlinedInput-notchedOutline": {
@@ -226,13 +234,8 @@ export default function QuestionsPageCard({ question, draggableProps, isDragging
                     userSelect: "none",
                   }}
                 />
-                                <IconButton
+                <IconButton sx={{ padding: "0" }} onClick={() => copyQuestion(question.id, question.quizId)}>
-                                    sx={{ padding: "0" }}
+                  <CopyIcon style={{ color: theme.palette.brightPurple.main }} />
-                                    onClick={() => copyQuestion(question.id, question.quizId)}
-                                >
-                                    <CopyIcon
-                                        style={{ color: theme.palette.brightPurple.main }}
-                                    />
                 </IconButton>
                 <IconButton
                   sx={{
@@ -244,26 +247,30 @@ export default function QuestionsPageCard({ question, draggableProps, isDragging
                   onClick={() => {
                     const deleteFn = () => {
                       if (question.type !== null) {
-                                                if (question.content.rule.parentId === "root") { //удалить из стора root и очистить rule всем вопросам
+                        if (question.content.rule.parentId === "root") {
+                          //удалить из стора root и очистить rule всем вопросам
                           updateRootContentId(quiz.id, "");
                           clearRuleForAll();
                           deleteQuestion(question.id);
-                                                    questions.forEach(q => {
+                          questions.forEach((q) => {
                             if (q.type === "result") {
                               deleteQuestion(q.id);
                             }
                           });
-                                                } else if (question.content.rule.parentId.length > 0) { //удалить из стора вопрос из дерева и очистить его потомков
+                        } else if (question.content.rule.parentId.length > 0) {
+                          //удалить из стора вопрос из дерева и очистить его потомков
                           const clearQuestions = [] as string[];
 
                           //записываем потомков , а их результаты удаляем
                           const getChildren = (parentQuestion: AnyTypedQuizQuestion) => {
                             questions.forEach((targetQuestion) => {
-                                                            if (targetQuestion.content.rule.parentId === parentQuestion.content.id) {//если у вопроса совпал родитель с родителем => он потомок, в кучу его
+                              if (targetQuestion.content.rule.parentId === parentQuestion.content.id) {
+                                //если у вопроса совпал родитель с родителем => он потомок, в кучу его
                                 if (targetQuestion.type === "result") {
                                   deleteQuestion(targetQuestion.id);
                                 } else {
-                                                                    if (!clearQuestions.includes(targetQuestion.content.id)) clearQuestions.push(targetQuestion.content.id);
+                                  if (!clearQuestions.includes(targetQuestion.content.id))
+                                    clearQuestions.push(targetQuestion.content.id);
                                   getChildren(targetQuestion); //и ищем его потомков
                                 }
                               }
@@ -272,7 +279,7 @@ export default function QuestionsPageCard({ question, draggableProps, isDragging
                           getChildren(question);
                           //чистим потомков от инфы ветвления
                           clearQuestions.forEach((id) => {
-                                                        updateQuestion(id, question => {
+                            updateQuestion(id, (question) => {
                               question.content.rule.parentId = "";
                               question.content.rule.main = [];
                               question.content.rule.default = "";
@@ -282,10 +289,18 @@ export default function QuestionsPageCard({ question, draggableProps, isDragging
                           //чистим rule родителя
                           const parentQuestion = getQuestionByContentId(question.content.rule.parentId);
                           const newRule = {};
-                                                    newRule.main = parentQuestion.content.rule.main.filter((data) => data.next !== question.content.id); //удаляем условия перехода от родителя к этому вопросу
+                          newRule.main = parentQuestion.content.rule.main.filter(
+                            (data) => data.next !== question.content.id
+                          ); //удаляем условия перехода от родителя к этому вопросу
                           newRule.parentId = parentQuestion.content.rule.parentId;
-                                                    newRule.default = parentQuestion.content.rule.parentId === question.content.id ? "" : parentQuestion.content.rule.parentId;
+                          newRule.default =
-                                                    newRule.children = [...parentQuestion.content.rule.children].splice(parentQuestion.content.rule.children.indexOf(question.content.id), 1);
+                            parentQuestion.content.rule.parentId === question.content.id
+                              ? ""
+                              : parentQuestion.content.rule.parentId;
+                          newRule.children = [...parentQuestion.content.rule.children].splice(
+                            parentQuestion.content.rule.children.indexOf(question.content.id),
+                            1
+                          );
 
                           updateQuestion(question.content.rule.parentId, (PQ) => {
                             PQ.content.rule = newRule;
@@ -293,7 +308,6 @@ export default function QuestionsPageCard({ question, draggableProps, isDragging
                           deleteQuestion(question.id);
                         }
 
-
                         deleteQuestion(question.id);
                       } else {
                         console.log("удаляю безтипогово");
@@ -305,13 +319,11 @@ export default function QuestionsPageCard({ question, draggableProps, isDragging
                   }}
                   data-cy="delete-question"
                 >
-                                    <DeleteIcon
+                  <DeleteIcon style={{ color: theme.palette.brightPurple.main }} />
-                                        style={{ color: theme.palette.brightPurple.main }}
-                                    />
                 </IconButton>
               </Box>
             )}
-                        {question.type !== null &&
+            {question.type !== null && (
               <Box
                 style={{
                   display: "flex",
@@ -322,17 +334,13 @@ export default function QuestionsPageCard({ question, draggableProps, isDragging
                   marginLeft: "3px",
                   borderRadius: "50%",
                   fontSize: "16px",
-                                    color: question.expanded
+                  color: question.expanded ? theme.palette.brightPurple.main : "#FFF",
-                                        ? theme.palette.brightPurple.main
+                  background: question.expanded ? "#EEE4FC" : theme.palette.brightPurple.main,
-                                        : "#FFF",
-                                    background: question.expanded
-                                        ? "#EEE4FC"
-                                        : theme.palette.brightPurple.main,
                 }}
               >
                 {question.page + 1}
               </Box>
-                        }
+            )}
             <IconButton
               disableRipple
               sx={{
@@ -392,8 +400,7 @@ export default function QuestionsPageCard({ question, draggableProps, isDragging
               backgroundPosition: "bottom",
               backgroundRepeat: "repeat-x",
               backgroundSize: "20px 1px",
-                            backgroundImage:
+              backgroundImage: "radial-gradient(circle, #7E2AEA 6px, #F2F3F7 1px)",
-                                "radial-gradient(circle, #7E2AEA 6px, #F2F3F7 1px)",
             }}
           />
           <PlusIcon />
@@ -406,82 +413,27 @@ export default function QuestionsPageCard({ question, draggableProps, isDragging
 const IconAndrom = (isExpanded: boolean, questionType: QuestionType | null) => {
   switch (questionType) {
     case "variant":
-            return (
+      return <Answer color={isExpanded ? "#9A9AAF" : "#7E2AEA"} sx={{ height: "22px", width: "20px" }} />;
-                <Answer
-                    color={isExpanded ? "#9A9AAF" : "#7E2AEA"}
-                    sx={{ height: "22px", width: "20px" }}
-                />
-            );
     case "images":
-            return (
+      return <OptionsPict color={isExpanded ? "#9A9AAF" : "#7E2AEA"} sx={{ height: "22px", width: "20px" }} />;
-                <OptionsPict
-                    color={isExpanded ? "#9A9AAF" : "#7E2AEA"}
-                    sx={{ height: "22px", width: "20px" }}
-                />
-            );
     case "varimg":
-            return (
+      return <OptionsAndPict color={isExpanded ? "#9A9AAF" : "#7E2AEA"} sx={{ height: "22px", width: "20px" }} />;
-                <OptionsAndPict
-                    color={isExpanded ? "#9A9AAF" : "#7E2AEA"}
-                    sx={{ height: "22px", width: "20px" }}
-                />
-            );
     case "emoji":
-            return (
+      return <Emoji color={isExpanded ? "#9A9AAF" : "#7E2AEA"} sx={{ height: "22px", width: "20px" }} />;
-                <Emoji
-                    color={isExpanded ? "#9A9AAF" : "#7E2AEA"}
-                    sx={{ height: "22px", width: "20px" }}
-                />
-            );
     case "text":
-            return (
+      return <Input color={isExpanded ? "#9A9AAF" : "#7E2AEA"} sx={{ height: "22px", width: "20px" }} />;
-                <Input
-                    color={isExpanded ? "#9A9AAF" : "#7E2AEA"}
-                    sx={{ height: "22px", width: "20px" }}
-                />
-            );
     case "select":
-            return (
+      return <DropDown color={isExpanded ? "#9A9AAF" : "#7E2AEA"} sx={{ height: "22px", width: "20px" }} />;
-                <DropDown
-                    color={isExpanded ? "#9A9AAF" : "#7E2AEA"}
-                    sx={{ height: "22px", width: "20px" }}
-                />
-            );
     case "date":
-            return (
+      return <Date color={isExpanded ? "#9A9AAF" : "#7E2AEA"} sx={{ height: "22px", width: "20px" }} />;
-                <Date
-                    color={isExpanded ? "#9A9AAF" : "#7E2AEA"}
-                    sx={{ height: "22px", width: "20px" }}
-                />
-            );
     case "number":
-            return (
+      return <Slider color={isExpanded ? "#9A9AAF" : "#7E2AEA"} sx={{ height: "22px", width: "20px" }} />;
-                <Slider
-                    color={isExpanded ? "#9A9AAF" : "#7E2AEA"}
-                    sx={{ height: "22px", width: "20px" }}
-                />
-            );
     case "file":
-            return (
+      return <Download color={isExpanded ? "#9A9AAF" : "#7E2AEA"} sx={{ height: "22px", width: "20px" }} />;
-                <Download
-                    color={isExpanded ? "#9A9AAF" : "#7E2AEA"}
-                    sx={{ height: "22px", width: "20px" }}
-                />
-            );
     case "page":
-            return (
+      return <Page color={isExpanded ? "#9A9AAF" : "#7E2AEA"} sx={{ height: "22px", width: "20px" }} />;
-                <Page
-                    color={isExpanded ? "#9A9AAF" : "#7E2AEA"}
-                    sx={{ height: "22px", width: "20px" }}
-                />
-            );
     case "rating":
-            return (
+      return <RatingIcon color={isExpanded ? "#9A9AAF" : "#7E2AEA"} sx={{ height: "22px", width: "20px" }} />;
-                <RatingIcon
-                    color={isExpanded ? "#9A9AAF" : "#7E2AEA"}
-                    sx={{ height: "22px", width: "20px" }}
-                />
-            );
     default:
       return <></>;
   }

src/pages/Questions/Form/FormDraggableList/FormDraggableListItem.tsx

@@ -5,14 +5,12 @@ import { Draggable } from "react-beautiful-dnd";
 import { AnyTypedQuizQuestion, UntypedQuizQuestion } from "../../../../model/questionTypes/shared";
 import QuestionsPageCard from "./QuestionPageCard";
 
-
 type FormDraggableListItemProps = {
   question: AnyTypedQuizQuestion | UntypedQuizQuestion;
   questionIndex: number;
 };
 
-export default memo(
+export default memo(({ question, questionIndex }: FormDraggableListItemProps) => {
-    ({ question, questionIndex }: FormDraggableListItemProps) => {
   const theme = useTheme();
 
   return (
@@ -45,7 +43,7 @@ export default memo(
               </Typography>
               <Typography
                 onClick={() => {
-                                        updateQuestion(question.id, question => {
+                  updateQuestion(question.id, (question) => {
                     question.deleted = false;
                   });
                 }}
@@ -80,5 +78,4 @@ export default memo(
       )}
     </Draggable>
   );
-    }
+});
-);

src/pages/Questions/Form/FormDraggableList/QuestionPageCard.tsx

@@ -11,8 +11,8 @@ import OptionsPict from "@icons/questionsPage/options_pict";
 import Page from "@icons/questionsPage/page";
 import RatingIcon from "@icons/questionsPage/rating";
 import Slider from "@icons/questionsPage/slider";
-import { Box, InputAdornment, Paper } from "@mui/material";
+import { Box, FormControlLabel, IconButton, InputAdornment, Paper, useMediaQuery, useTheme } from "@mui/material";
-import { updateQuestion, updateUntypedQuestion } from "@root/questions/actions";
+import { toggleExpandQuestion, updateQuestion, updateUntypedQuestion } from "@root/questions/actions";
 import CustomTextField from "@ui_kit/CustomTextField";
 import { useRef, useState } from "react";
 import type { DraggableProvidedDragHandleProps } from "react-beautiful-dnd";
@@ -22,7 +22,13 @@ import SwitchQuestionsPage from "../../SwitchQuestionsPage";
 import { ChooseAnswerModal } from "./ChooseAnswerModal";
 import FormTypeQuestions from "../FormTypeQuestions";
 import { QuestionType } from "@model/question/question";
-
+import { CrossedEyeIcon } from "@icons/CrossedEyeIcon";
+import { ArrowDownIcon } from "@icons/questionsPage/ArrowDownIcon";
+import { CopyIcon } from "@icons/questionsPage/CopyIcon";
+import { DeleteIcon } from "@icons/questionsPage/deleteIcon";
+import { HideIcon } from "@icons/questionsPage/hideIcon";
+import ExpandLessIcon from "@mui/icons-material/ExpandLess";
+import { NoLuggageOutlined, SignalCellularNullOutlined } from "@mui/icons-material";
 
 interface Props {
   question: AnyTypedQuizQuestion | UntypedQuizQuestion;
@@ -30,18 +36,17 @@ interface Props {
   draggableProps: DraggableProvidedDragHandleProps | null | undefined;
 }
 
-export default function QuestionsPageCard({
+export default function QuestionsPageCard({ question, questionIndex, draggableProps }: Props) {
-    question,
-    questionIndex,
-    draggableProps,
-}: Props) {
   const [open, setOpen] = useState<boolean>(false);
   const anchorRef = useRef(null);
+  const theme = useTheme();
+  const isTablet = useMediaQuery(theme.breakpoints.down(1000));
+  const isMobile = useMediaQuery(theme.breakpoints.down(790));
 
   const setTitle = useDebouncedCallback((title) => {
     const updateQuestionFn = question.type === null ? updateUntypedQuestion : updateQuestion;
 
-        updateQuestionFn(question.id, question => {
+    updateQuestionFn(question.id, (question) => {
       question.title = title;
     });
   }, 200);
@@ -65,15 +70,24 @@ export default function QuestionsPageCard({
         <Box
           sx={{
             display: "flex",
+            p: 0,
             flexDirection: "column",
-                        padding: 0,
+          }}
+        >
+          <Box
+            sx={{
+              display: "flex",
+              alignItems: "center",
+              margin: "20px",
+              gap: "18px",
+              flexDirection: isMobile ? "column-reverse" : null,
             }}
           >
             <CustomTextField
               placeholder={`Заголовок ${questionIndex + 1} вопроса`}
               text={question.title}
               onChange={({ target }) => setTitle(target.value)}
-                        sx={{ margin: "20px", width: "auto" }}
+              sx={{ width: "100%" }}
               InputProps={{
                 startAdornment: (
                   <Box>
@@ -94,19 +108,84 @@ export default function QuestionsPageCard({
                     />
                   </Box>
                 ),
-                            endAdornment: (
-                                <Box {...draggableProps}>
-                                    {questionIndex !== 0 && (
-                                        <InputAdornment position="start">
-                                            <PointsIcon
-                                                style={{ color: "#9A9AAF", fontSize: "30px" }}
-                                            />
-                                        </InputAdornment>
-                                    )}
-                                </Box>
-                            ),
               }}
             />
+            <Box
+              sx={{
+                display: "flex",
+                alignItems: "center",
+                justifyContent: "space-between",
+                width: isMobile ? "100%" : "auto",
+                position: "relative",
+              }}
+            >
+              <Box
+                sx={{
+                  flexDirection: isMobile ? "row-reverse" : null,
+                  display: "flex",
+                  alignItems: "center",
+                  gap: "4px",
+                }}
+              >
+                <IconButton
+                  sx={{ padding: "0", margin: "5px" }}
+                  disableRipple
+                  data-cy="expand-question"
+                  onClick={() => toggleExpandQuestion(question.id)}
+                >
+                  {question.expanded ? (
+                    <ArrowDownIcon
+                      style={{
+                        width: "18px",
+                        color: "#4D4D4D",
+                      }}
+                    />
+                  ) : (
+                    <ExpandLessIcon
+                      sx={{
+                        boxSizing: "border-box",
+                        fill: theme.palette.brightPurple.main,
+                        background: "#FFF",
+                        borderRadius: "6px",
+                        height: "30px",
+                        width: "30px",
+                      }}
+                    />
+                  )}
+                </IconButton>
+
+                <Box
+                  style={{
+                    display: "flex",
+                    alignItems: "center",
+                    justifyContent: "center",
+                    height: "30px",
+                    width: "30px",
+                    marginLeft: "3px",
+                    borderRadius: "50%",
+                    fontSize: "16px",
+                    color: question.expanded ? theme.palette.brightPurple.main : "#FFF",
+                    background: question.expanded ? "#EEE4FC" : theme.palette.brightPurple.main,
+                  }}
+                >
+                  {questionIndex + 1}
+                </Box>
+              </Box>
+
+              <IconButton
+                disableRipple
+                sx={{
+                  padding: isMobile ? "0" : "0 5px",
+                  right: isMobile ? "0" : null,
+                  bottom: isMobile ? "0" : null,
+                }}
+                {...draggableProps}
+              >
+                <PointsIcon style={{ color: "#4D4D4D", fontSize: "30px" }} />
+              </IconButton>
+            </Box>
+          </Box>
+
           {question.type === null ? (
             <FormTypeQuestions question={question} />
           ) : (
@@ -123,41 +202,26 @@ const IconAndrom = (questionType: QuestionType | null) => {
     case "variant":
       return <Answer color="#9A9AAF" sx={{ height: "22px", width: "20px" }} />;
     case "images":
-            return (
+      return <OptionsPict color="#9A9AAF" sx={{ height: "22px", width: "20px" }} />;
-                <OptionsPict color="#9A9AAF" sx={{ height: "22px", width: "20px" }} />
-            );
     case "varimg":
-            return (
+      return <OptionsAndPict color="#9A9AAF" sx={{ height: "22px", width: "20px" }} />;
-                <OptionsAndPict
-                    color="#9A9AAF"
-                    sx={{ height: "22px", width: "20px" }}
-                />
-            );
     case "emoji":
       return <Emoji color="#9A9AAF" sx={{ height: "22px", width: "20px" }} />;
     case "text":
       return <Input color="#9A9AAF" sx={{ height: "22px", width: "20px" }} />;
     case "select":
-            return (
+      return <DropDown color="#9A9AAF" sx={{ height: "22px", width: "20px" }} />;
-                <DropDown color="#9A9AAF" sx={{ height: "22px", width: "20px" }} />
-            );
     case "date":
       return <Date color="#9A9AAF" sx={{ height: "22px", width: "20px" }} />;
     case "number":
       return <Slider color="#9A9AAF" sx={{ height: "22px", width: "20px" }} />;
     case "file":
-            return (
+      return <Download color="#9A9AAF" sx={{ height: "22px", width: "20px" }} />;
-                <Download color="#9A9AAF" sx={{ height: "22px", width: "20px" }} />
-            );
     case "page":
       return <Page color="#9A9AAF" sx={{ height: "22px", width: "20px" }} />;
     case "rating":
-            return (
+      return <RatingIcon color="#9A9AAF" sx={{ height: "22px", width: "20px" }} />;
-                <RatingIcon color="#9A9AAF" sx={{ height: "22px", width: "20px" }} />
-            );
     default:
-            return (
+      return <AnswerGroup color="#9A9AAF" sx={{ height: "22px", width: "20px" }} />;
-                <AnswerGroup color="#9A9AAF" sx={{ height: "22px", width: "20px" }} />
-            );
   }
 };

src/pages/Questions/Form/FormDraggableList/index.tsx

@@ -5,10 +5,8 @@ import { DragDropContext, Droppable } from "react-beautiful-dnd";
 import FormDraggableListItem from "./FormDraggableListItem";
 import { useQuestions } from "@root/questions/hooks";
 
-
 export const FormDraggableList = () => {
-
+  const { questions } = useQuestions();
-    const { questions } = useQuestions()
 
   const onDragEnd = ({ destination, source }: DropResult) => {
     if (destination) reorderQuestions(source.index, destination.index);
@@ -20,11 +18,7 @@ export const FormDraggableList = () => {
         {(provided) => (
           <Box ref={provided.innerRef} {...provided.droppableProps}>
             {questions?.map((question, index) => (
-                            <FormDraggableListItem
+              <FormDraggableListItem key={question.id} question={question} questionIndex={index} />
-                                key={question.id}
-                                question={question}
-                                questionIndex={index}
-                            />
             ))}
             {provided.placeholder}
           </Box>

src/pages/Questions/Form/FormQuestionsPage.tsx

@@ -8,7 +8,6 @@ import { FormDraggableList } from "./FormDraggableList";
 import { collapseAllQuestions, createUntypedQuestion } from "@root/questions/actions";
 import { useCurrentQuiz } from "@root/quizes/hooks";
 
-
 export default function FormQuestionsPage() {
   const theme = useTheme();
   const quiz = useCurrentQuiz();
@@ -73,9 +72,7 @@ export default function FormQuestionsPage() {
           data-cy="create-question"
         >
           <AddAnswer color="#EEE4FC" />
-                    <Typography sx={{ color: "#9A9AAF" }}>
+          <Typography sx={{ color: "#9A9AAF" }}>Добавить еще один вопрос</Typography>
-                        Добавить еще один вопрос
-                    </Typography>
         </Box>
       </Box>
       <Box

src/pages/Questions/Form/FormTypeQuestions.tsx

@@ -12,10 +12,7 @@ import Slider from "../../../assets/icons/questionsPage/slider";
 
 import { QuestionType } from "@model/question/question";
 import { createTypedQuestion } from "@root/questions/actions";
-import type {
+import type { UntypedQuizQuestion } from "../../../model/questionTypes/shared";
-    UntypedQuizQuestion
-} from "../../../model/questionTypes/shared";
-
 
 type ButtonTypeQuestion = {
   icon: JSX.Element;
@@ -61,7 +58,6 @@ interface Props {
 }
 
 export default function FormTypeQuestions({ question }: Props) {
-
   return (
     <Box>
       <Box
@@ -72,10 +68,8 @@ export default function FormTypeQuestions({ question }: Props) {
           margin: "20px",
         }}
       >
-                {(("page" in question) && question.page === 0
+        {("page" in question && question.page === 0 ? BUTTON_TYPE_QUESTIONS : BUTTON_TYPE_SHORT_QUESTIONS).map(
-                    ? BUTTON_TYPE_QUESTIONS
+          ({ icon, title, value: questionType }) => (
-                    : BUTTON_TYPE_SHORT_QUESTIONS
-                ).map(({ icon, title, value: questionType }) => (
             <QuestionsMiniButton
               key={title}
               onClick={() => {
@@ -84,7 +78,8 @@ export default function FormTypeQuestions({ question }: Props) {
               icon={icon}
               text={title}
             />
-                ))}
+          )
+        )}
       </Box>
     </Box>
   );

src/pages/Questions/QuestionsPage.tsx

@@ -1,12 +1,5 @@
-import { useState, useEffect, useLayoutEffect, useRef } from "react"
+import { useState, useEffect, useLayoutEffect, useRef } from "react";
-import {
+import { Box, Button, IconButton, Typography, useMediaQuery, useTheme } from "@mui/material";
-    Box,
-    Button,
-    IconButton,
-    Typography,
-    useMediaQuery,
-    useTheme,
-} from "@mui/material";
 import { collapseAllQuestions, createUntypedQuestion } from "@root/questions/actions";
 import { decrementCurrentStep, incrementCurrentStep } from "@root/quizes/actions";
 import { useCurrentQuiz } from "@root/quizes/hooks";
@@ -14,7 +7,7 @@ import QuizPreview from "@ui_kit/QuizPreview/QuizPreview";
 import { createPortal } from "react-dom";
 import AddPlus from "../../assets/icons/questionsPage/addPlus";
 import ArrowLeft from "../../assets/icons/questionsPage/arrowLeft";
-import BranchingQuestions from "./BranchingModal/BranchingQuestionsModal"
+import BranchingQuestions from "./BranchingModal/BranchingQuestionsModal";
 import { QuestionSwitchWindowTool } from "./QuestionSwitchWindowTool";
 import { useQuestionsStore } from "@root/questions/store";
 import { updateOpenBranchingPanel, updateEditSomeQuestion } from "@root/uiTools/actions";
@@ -26,14 +19,13 @@ export default function QuestionsPage() {
   const isMobile = useMediaQuery(theme.breakpoints.down(660));
   const quiz = useCurrentQuiz();
   useLayoutEffect(() => {
-        updateOpenBranchingPanel(false)
+    updateOpenBranchingPanel(false);
-        updateEditSomeQuestion()
+    updateEditSomeQuestion();
-    },[])
+  }, []);
 
-    const ref = useRef()
+  const ref = useRef();
   if (!quiz) return null;
 
-
   return (
     <>
       <Box
@@ -47,8 +39,7 @@ export default function QuestionsPage() {
           margin: "60px 0 40px 0",
         }}
       >
-                <Typography variant={"h5"}>{
+        <Typography variant={"h5"}>{quiz.name ? quiz.name : "Заголовок квиза"}</Typography>
-                    quiz.name ? quiz.name : "Заголовок квиза" }</Typography>
         <Button
           sx={{
             display: openBranchingPanel ? "none" : "flex",
@@ -64,7 +55,7 @@ export default function QuestionsPage() {
           Свернуть всё
         </Button>
       </Box>
-            <QuestionSwitchWindowTool/>
+      <QuestionSwitchWindowTool />
       <Box
         sx={{
           display: "flex",
@@ -86,7 +77,6 @@ export default function QuestionsPage() {
           <AddPlus />
         </IconButton>
 
-                
         <Box sx={{ display: "flex", gap: "8px", marginLeft: "auto" }}>
           <Button
             variant="outlined"
@@ -112,7 +102,7 @@ export default function QuestionsPage() {
         </Box>
       </Box>
       {createPortal(<QuizPreview />, document.body)}
-            {openedModalSettingsId !== null && <BranchingQuestions/>}
+      {openedModalSettingsId !== null && <BranchingQuestions />}
     </>
   );
 }

src/pages/Questions/SwitchQuestionsPage.tsx

@@ -12,13 +12,11 @@ import UploadFile from "./UploadFile/UploadFile";
 import AnswerOptions from "./answerOptions/AnswerOptions";
 import { notReachable } from "../../utils/notReachable";
 
-
 interface Props {
   question: AnyTypedQuizQuestion;
 }
 
 export default function SwitchQuestionsPage({ question }: Props) {
-
   switch (question.type) {
     case "variant":
       return <AnswerOptions question={question} />;
@@ -54,6 +52,6 @@ export default function SwitchQuestionsPage({ question }: Props) {
       return <RatingOptions question={question} />;
 
     default:
-            notReachable(question)
+      notReachable(question);
   }
 }