Merge branch 'dev' of penahub.gitlab.yandexcloud.net:frontend/squiz into dev

src/App.tsx

@@ -5,7 +5,7 @@ import "dayjs/locale/ru";
 import SigninDialog from "./pages/auth/Signin";
 import SignupDialog from "./pages/auth/Signup";
 import { ViewPage } from "./pages/ViewPublicationPage";
-import { BrowserRouter, Route, Routes, useLocation, useNavigate, Navigate } from "react-router-dom";
+import { Route, Routes, useLocation, useNavigate, Navigate } from "react-router-dom";
 import "./index.css";
 import ContactFormPage from "./pages/ContactFormPage/ContactFormPage";
 import InstallQuiz from "./pages/InstallQuiz/InstallQuiz";
@@ -21,12 +21,13 @@ import { clearUserData, setUser, useUserStore } from "@root/user";
 import { enqueueSnackbar } from "notistack";
 import PrivateRoute from "@ui_kit/PrivateRoute";
 
+import { Restore } from "./pages/startPage/Restore";
 
 dayjs.locale("ru");
 
 const routeslink = [
   { path: "/list", page: <MyQuizzesFull />, header: false, sidebar: false },
-    { path: "/questions/:quizId", page: <QuestionsPage />, header: true, sidebar: true, },
+  { path: "/questions/:quizId", page: <QuestionsPage />, header: true, sidebar: true },
   { path: "/contacts", page: <ContactFormPage />, header: true, sidebar: true },
   { path: "/result", page: <Result />, header: true, sidebar: true },
   { path: "/settings", page: <ResultSettings />, header: true, sidebar: true },
@@ -61,16 +62,19 @@ export default function App() {
         <Routes>
           <Route path="/signin" element={<SigninDialog />} />
           <Route path="/signup" element={<SignupDialog />} />
+          <Route path="/restore" element={<Restore />} />
         </Routes>
       )}
       <Routes location={location.state?.backgroundLocation || location}>
         <Route path="/" element={<Landing />} />
         <Route path="/signin" element={<Navigate to="/" replace state={{ redirectTo: "/signin" }} />} />
         <Route path="/signup" element={<Navigate to="/" replace state={{ redirectTo: "/signup" }} />} />
+        <Route path="/restore" element={<Navigate to="/" replace state={{ redirectTo: "/restore" }} />} />
         <Route element={<PrivateRoute />}>
           {routeslink.map((e, i) => (
             <Route key={i} path={e.path} element={<Main page={e.page} header={e.header} sidebar={e.sidebar} />} />
           ))}
+
           <Route path="edit" element={<EditPage />} />
           <Route path="crop" element={<ImageCrop />} />
           <Route path="/view" element={<ViewPage />} />

src/pages/Questions/BranchingMap/CsComponent.tsx

@@ -51,7 +51,6 @@ type Popper = {
 type NodeSingularWithPopper = NodeSingular & {
   popper: (config: PopperConfig) => Popper;
 };
-  let counter = 0;
 
 const stylesheet: Stylesheet[] = [
   {
@@ -161,7 +160,6 @@ function CsComponent({
   }, [modalQuestionTargetContentId])
 
   const addNode = ({ parentNodeContentId, targetNodeContentId }: { parentNodeContentId: string, targetNodeContentId?: string }) => {
-console.log('AN', counter++, parentNodeContentId,targetNodeContentId)
     
     //запрещаем работу родителя-ребенка если это один и тот же вопрос
     if (parentNodeContentId === targetNodeContentId) return
@@ -171,7 +169,6 @@ console.log('AN', counter++, parentNodeContentId,targetNodeContentId)
     const parentNodeChildren = cy?.$('edge[source = "' + parentNodeContentId + '"]')?.length
     //если есть инфо о выбранном вопросе из модалки - берём родителя из инфо модалки. Иначе из значения дропа
     const targetQuestion = { ...getQuestionByContentId(targetNodeContentId || dragQuestionContentId) } as AnyTypedQuizQuestion
-console.log('AN1', targetQuestion, parentNodeContentId,parentNodeChildren)
     if (Object.keys(targetQuestion).length !== 0  && parentNodeContentId && parentNodeChildren !== undefined) {
       clearDataAfterAddNode({ parentNodeContentId, targetQuestion, parentNodeChildren })
       cy?.data('changed', true)
@@ -199,13 +196,13 @@ console.log('AN1', targetQuestion, parentNodeContentId,parentNodeChildren)
 
   const clearDataAfterAddNode = ({ parentNodeContentId, targetQuestion, parentNodeChildren }: { parentNodeContentId: string, targetQuestion: AnyTypedQuizQuestion, parentNodeChildren: number }) => {
 
-console.log('AN2', parentNodeContentId,parentNodeChildren,targetQuestion)
     const parentQuestion = { ...getQuestionByContentId(parentNodeContentId) } as AnyTypedQuizQuestion
 
 
     //смотрим не добавлен ли родителю result. Если да - убираем его. Веточкам result не нужен
     trashQuestions.forEach((targetQuestion) => {
       if (targetQuestion.type === "result" && targetQuestion.content.rule.parentId === parentQuestion.content.id) {
+        console.log('deleteQ', targetQuestion.id)
         deleteQuestion(targetQuestion.id);
       }
     })

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

src/pages/Questions/UploadImage/UploadImageModal.tsx

@@ -4,14 +4,23 @@ import SearchIcon from "../../../assets/icons/SearchIcon";
 import UnsplashIcon from "../../../assets/icons/Unsplash.svg";
 import { useRef, useState, type DragEvent } from "react";
 
+type ImageFormat = "jpg" | "jpeg" | "png" | "gif";
+
 interface ModalkaProps {
   isOpen: boolean;
   onClose: () => void;
   handleImageChange: (file: File) => void;
   description?: string;
+  accept?: ImageFormat[];
 }
 
-export const UploadImageModal: React.FC<ModalkaProps> = ({ handleImageChange, isOpen, onClose, description }) => {
+export const UploadImageModal: React.FC<ModalkaProps> = ({
+  handleImageChange,
+  isOpen,
+  onClose,
+  accept,
+  description,
+}) => {
   const theme = useTheme();
   const dropZone = useRef<HTMLDivElement>(null);
   const [ready, setReady] = useState(false);
@@ -31,6 +40,10 @@ export const UploadImageModal: React.FC<ModalkaProps> = ({ handleImageChange, is
     handleImageChange(file);
   };
 
+  const acceptedFormats = accept ? accept.map((format) => "." + format).join(", ") : "";
+
+  console.log(acceptedFormats);
+
   return (
     <Modal
       open={isOpen}
@@ -67,7 +80,7 @@ export const UploadImageModal: React.FC<ModalkaProps> = ({ handleImageChange, is
             <input
               onChange={(event) => event.target.files?.[0] && handleImageChange(event.target.files[0])}
               hidden
-              accept=".jpg, .jpeg, .png"
+              accept={acceptedFormats || ".jpg, .jpeg, .png , .gif"}
               multiple
               type="file"
               data-cy="upload-image-input"

src/pages/auth/Signin.tsx

@@ -1,18 +1,9 @@
 import { login } from "@api/auth";
 import CloseIcon from "@mui/icons-material/Close";
-import {
+import { Box, Button, Dialog, IconButton, Link, Typography, useMediaQuery, useTheme } from "@mui/material";
-  Box,
-  Button,
-  Dialog,
-  IconButton,
-  Link,
-  Typography,
-  useMediaQuery,
-  useTheme,
-} from "@mui/material";
 import { setUserId, useUserStore } from "@root/user";
 import InputTextfield from "@ui_kit/InputTextfield";
-import PenaLogo2 from "@ui_kit/PenaLogo2";
+import Logotip from "../../pages/Landing/images/icons/QuizLogo";
 import PasswordInput from "@ui_kit/passwordInput";
 import { useFormik } from "formik";
 import { enqueueSnackbar } from "notistack";
@@ -31,9 +22,7 @@ const initialValues: Values = {
 };
 
 const validationSchema = object({
-  email: string()
+  email: string().required("Поле обязательно").email("Введите корректный email"),
-    .required("Поле обязательно")
-    .email("Введите корректный email"),
   password: string().required("Поле обязательно").min(8, "Минимум 8 символов"),
 });
 
@@ -49,10 +38,7 @@ export default function SigninDialog() {
     initialValues,
     validationSchema,
     onSubmit: async (values, formikHelpers) => {
-      const [loginResponse, loginError] = await login(
+      const [loginResponse, loginError] = await login(values.email.trim(), values.password.trim());
-        values.email.trim(),
-        values.password.trim()
-      );
 
       formikHelpers.setSubmitting(false);
 
@@ -111,8 +97,7 @@ export default function SigninDialog() {
           gap: "15px",
           borderRadius: "12px",
           boxShadow: "0px 15px 80px rgb(210 208 225 / 70%)",
-          "& .MuiFormHelperText-root.Mui-error, & .MuiFormHelperText-root.Mui-error.MuiFormHelperText-filled":
+          "& .MuiFormHelperText-root.Mui-error, & .MuiFormHelperText-root.Mui-error.MuiFormHelperText-filled": {
-          {
             position: "absolute",
             top: "46px",
             margin: "0",
@@ -130,7 +115,7 @@ export default function SigninDialog() {
           <CloseIcon sx={{ transform: "scale(1.5)" }} />
         </IconButton>
         <Box>
-          <PenaLogo2 width={upMd ? 233 : 196} color="black" />
+          <Logotip width={upMd ? 233 : 196} />
         </Box>
         <Typography
           sx={{
@@ -212,16 +197,8 @@ export default function SigninDialog() {
             mt: "auto",
           }}
         >
-          <Typography
+          <Typography sx={{ color: "#7E2AEA", textAlign: "center" }}>Вы еще не присоединились?</Typography>
-            sx={{ color: "#7E2AEA", textAlign: "center" }}
+          <Link component={RouterLink} to="/signup" sx={{ color: "#7E2AEA" }}>
-          >
-            Вы еще не присоединились?
-          </Typography>
-          <Link
-            component={RouterLink}
-            to="/signup"
-            sx={{ color: "#7E2AEA" }}
-          >
             Регистрация
           </Link>
         </Box>

src/pages/auth/Signup.tsx

@@ -1,23 +1,14 @@
 import { register } from "@api/auth";
 import CloseIcon from "@mui/icons-material/Close";
-import {
+import { Box, Button, Dialog, IconButton, Link, Typography, useMediaQuery, useTheme } from "@mui/material";
-    Box,
-    Button,
-    Dialog,
-    IconButton,
-    Link,
-    Typography,
-    useMediaQuery,
-    useTheme,
-} from "@mui/material";
 import { setUserId, useUserStore } from "@root/user";
 import InputTextfield from "@ui_kit/InputTextfield";
-import PenaLogo2 from "@ui_kit/PenaLogo2";
+import Logotip from "../../pages/Landing/images/icons/QuizLogo";
 import PasswordInput from "@ui_kit/passwordInput";
 import { useFormik } from "formik";
 import { enqueueSnackbar } from "notistack";
 import { useEffect, useState } from "react";
-import {Link as RouterLink, useLocation, useNavigate} from "react-router-dom";
+import { Link as RouterLink, useLocation, useNavigate } from "react-router-dom";
 import { object, ref, string } from "yup";
 
 interface Values {
@@ -33,9 +24,7 @@ const initialValues: Values = {
 };
 
 const validationSchema = object({
-  email: string()
+  email: string().required("Поле обязательно").email("Введите корректный email"),
-    .required("Поле обязательно")
-    .email("Введите корректный email"),
   password: string()
     .min(8, "Минимум 8 символов")
     .matches(/^[.,:;-_+\d\w]+$/, "Некорректные символы")
@@ -50,18 +39,14 @@ export default function SignupDialog() {
   const user = useUserStore((state) => state.user);
   const theme = useTheme();
   const upMd = useMediaQuery(theme.breakpoints.up("md"));
-  const location = useLocation()
+  const location = useLocation();
 
   const navigate = useNavigate();
   const formik = useFormik<Values>({
     initialValues,
     validationSchema,
     onSubmit: async (values, formikHelpers) => {
-      const [registerResponse, registerError] = await register(
+      const [registerResponse, registerError] = await register(values.email.trim(), values.password.trim(), "+7");
-        values.email.trim(),
-        values.password.trim(),
-        "+7"
-      );
 
       formikHelpers.setSubmitting(false);
 
@@ -120,8 +105,7 @@ export default function SignupDialog() {
           gap: "15px",
           borderRadius: "12px",
           boxShadow: "0px 15px 80px rgb(210 208 225 / 70%)",
-          "& .MuiFormHelperText-root.Mui-error, & .MuiFormHelperText-root.Mui-error.MuiFormHelperText-filled":
+          "& .MuiFormHelperText-root.Mui-error, & .MuiFormHelperText-root.Mui-error.MuiFormHelperText-filled": {
-            {
             position: "absolute",
             top: "46px",
             margin: "0",
@@ -139,7 +123,7 @@ export default function SignupDialog() {
           <CloseIcon sx={{ transform: "scale(1.5)" }} />
         </IconButton>
         <Box sx={{ mt: upMd ? undefined : "62px" }}>
-          <PenaLogo2 width={upMd ? 233 : 196} color="black" />
+          <Logotip width={upMd ? 233 : 196} />
         </Box>
         <Typography
           sx={{
@@ -186,11 +170,8 @@ export default function SignupDialog() {
             value: formik.values.repeatPassword,
             placeholder: "Не менее 8 символов",
             onBlur: formik.handleBlur,
-            error:
+            error: formik.touched.repeatPassword && Boolean(formik.errors.repeatPassword),
-              formik.touched.repeatPassword &&
+            helperText: formik.touched.repeatPassword && formik.errors.repeatPassword,
-              Boolean(formik.errors.repeatPassword),
-            helperText:
-              formik.touched.repeatPassword && formik.errors.repeatPassword,
             autoComplete: "new-password",
             "data-cy": "repeat-password",
           }}

src/pages/startPage/FaviconDropZone.tsx

@@ -52,6 +52,7 @@ export default function FaviconDropZone({ imageUrl, onImageUploadClick, onDelete
         onClose={closeImageUploadModal}
         handleImageChange={handleImageUpload}
         description="Принимает JPG, PNG — максимум 5mb"
+        accept={["jpeg", "jpg", "png"]}
       />
       <Box
         onDragEnter={() => !imageUrl && setIsDropReady(true)}

src/pages/startPage/Restore.tsx

@@ -0,0 +1,189 @@
+import { FC, useState } from "react";
+import CloseIcon from "@mui/icons-material/Close";
+import { Box, Button, Dialog, IconButton, Typography, useMediaQuery, useTheme } from "@mui/material";
+import InputTextfield from "@ui_kit/InputTextfield";
+import PasswordInput from "@ui_kit/passwordInput";
+import { useFormik } from "formik";
+import { object, ref, string } from "yup";
+import Logotip from "../Landing/images/icons/QuizLogo";
+import { useNavigate } from "react-router-dom";
+
+interface Values {
+  email: string;
+  password: string;
+  repeatPassword: string;
+}
+
+const initialValues: Values = {
+  email: "",
+  password: "",
+  repeatPassword: "",
+};
+
+const validationSchema = object({
+  email: string().required("Поле обязательно").email("Введите корректный email"),
+  password: string()
+    .min(8, "Минимум 8 символов")
+    .matches(/^[.,:;-_+\d\w]+$/, "Некорректные символы")
+    .required("Поле обязательно"),
+  repeatPassword: string()
+    .oneOf([ref("password"), undefined], "Пароли не совпадают")
+    .required("Повторите пароль"),
+});
+
+export const Restore: FC = () => {
+  const [isDialogOpen, setIsDialogOpen] = useState<boolean>(true);
+  const navigate = useNavigate();
+  const theme = useTheme();
+  const upMd = useMediaQuery(theme.breakpoints.up("md"));
+
+  const formik = useFormik<Values>({
+    initialValues,
+    validationSchema,
+    onSubmit: (values) => {
+      console.log(values);
+    },
+  });
+
+  function handleClose() {
+    setIsDialogOpen(false);
+    setTimeout(() => navigate("/"), theme.transitions.duration.leavingScreen);
+  }
+
+  return (
+    <Box>
+      <Button sx={{ width: "200px", height: "200px", background: "red" }} onClick={() => setIsDialogOpen(true)}>
+        open
+      </Button>
+      <Dialog
+        open={isDialogOpen}
+        onClose={handleClose}
+        PaperProps={{
+          sx: {
+            width: "600px",
+            maxWidth: "600px",
+          },
+        }}
+        slotProps={{
+          backdrop: {
+            style: {
+              backgroundColor: "rgb(0 0 0 / 0.7)",
+            },
+          },
+        }}
+      >
+        <Box
+          component="form"
+          onSubmit={formik.handleSubmit}
+          noValidate
+          sx={{
+            position: "relative",
+            backgroundColor: "white",
+            display: "flex",
+            alignItems: "center",
+            flexDirection: "column",
+            p: upMd ? "50px" : "18px",
+            pb: upMd ? "40px" : "30px",
+            gap: "15px",
+            borderRadius: "12px",
+            boxShadow: "0px 15px 80px rgb(210 208 225 / 70%)",
+            "& .MuiFormHelperText-root.Mui-error, & .MuiFormHelperText-root.Mui-error.MuiFormHelperText-filled": {
+              position: "absolute",
+              top: "46px",
+              margin: "0",
+            },
+          }}
+        >
+          <IconButton
+            onClick={handleClose}
+            sx={{
+              position: "absolute",
+              right: "7px",
+              top: "7px",
+            }}
+          >
+            <CloseIcon sx={{ transform: "scale(1.5)" }} />
+          </IconButton>
+          <Box sx={{ mt: upMd ? undefined : "62px" }}>
+            <Logotip width={upMd ? 233 : 196} />
+          </Box>
+          <Typography
+            sx={{
+              color: "#4D4D4D",
+              mt: "5px",
+              mb: upMd ? "30px" : "33px",
+            }}
+          >
+            Восстановление пароля
+          </Typography>
+          <InputTextfield
+            TextfieldProps={{
+              value: formik.values.email,
+              placeholder: "username",
+              onBlur: formik.handleBlur,
+              error: formik.touched.email && Boolean(formik.errors.email),
+              helperText: formik.touched.email && formik.errors.email,
+              "data-cy": "username",
+            }}
+            onChange={formik.handleChange}
+            color="#F2F3F7"
+            id="email"
+            label="Email"
+            gap={upMd ? "10px" : "10px"}
+          />
+          <PasswordInput
+            TextfieldProps={{
+              value: formik.values.password,
+              placeholder: "Не менее 8 символов",
+              onBlur: formik.handleBlur,
+              error: formik.touched.password && Boolean(formik.errors.password),
+              helperText: formik.touched.password && formik.errors.password,
+              autoComplete: "new-password",
+              "data-cy": "password",
+            }}
+            onChange={formik.handleChange}
+            color="#F2F3F7"
+            id="password"
+            label="Пароль"
+            gap={upMd ? "10px" : "10px"}
+          />
+          <PasswordInput
+            TextfieldProps={{
+              value: formik.values.repeatPassword,
+              placeholder: "Не менее 8 символов",
+              onBlur: formik.handleBlur,
+              error: formik.touched.repeatPassword && Boolean(formik.errors.repeatPassword),
+              helperText: formik.touched.repeatPassword && formik.errors.repeatPassword,
+              autoComplete: "new-password",
+              "data-cy": "repeat-password",
+            }}
+            onChange={formik.handleChange}
+            color="#F2F3F7"
+            id="repeatPassword"
+            label="Повторить пароль"
+            gap={upMd ? "10px" : "10px"}
+          />
+          <Button
+            variant="contained"
+            fullWidth
+            type="submit"
+            disabled={formik.isSubmitting}
+            sx={{
+              py: "12px",
+              "&:hover": {
+                backgroundColor: "#581CA7",
+              },
+              "&:active": {
+                color: "white",
+                backgroundColor: "black",
+              },
+            }}
+            data-cy="signup"
+          >
+            Восстановить
+          </Button>
+        </Box>
+      </Dialog>
+    </Box>
+  );
+};