fix: drag & drop

src/pages/Questions/ButtonsOptions.tsx

@@ -23,6 +23,7 @@ import {
   updateQuestionsList,
   removeQuestion,
 } from "@root/questions";
+import { quizStore } from "@root/quizes";
 import { DoubleTick } from "@icons/questionsPage/DoubleTick";
 import { DoubleArrowRight } from "@icons/questionsPage/DoubleArrowRight";
 import { VectorQuestions } from "@icons/questionsPage/VectorQuestions";
@@ -36,23 +37,19 @@ interface Props {
   SSHC: (data: string) => void;
   totalIndex: number;
   sx?: SxProps;
-  disableSettings?: boolean;
-  disableBranching?: boolean;
-  disableMiniButtons?: boolean;
 }
 
 export default function ButtonsOptions({
   SSHC,
   switchState,
   totalIndex,
-  disableSettings = false,
-  disableBranching = false,
-  disableMiniButtons = false,
 }: Props) {
   const quizId = Number(useParams().quizId);
   const { openedModalSettings, listQuestions } = questionStore();
+  const { listQuizes } = quizStore();
   const [openedReallyChangingModal, setOpenedReallyChangingModal] =
     useState<boolean>(false);
+  const quize = listQuizes[quizId];
   const question = listQuestions[quizId][totalIndex] as QuizQuestionBase;
 
   useEffect(() => {
@@ -132,7 +129,7 @@ export default function ButtonsOptions({
         {buttonSetting.map(({ icon, title, value, myFunc }) => (
           <Box key={value}>
             {value === "branching" ? (
-              !disableBranching && (
+              quize.config.type === "quize" && (
                 <Tooltip
                   arrow
                   placement="right"
@@ -196,8 +193,7 @@ export default function ButtonsOptions({
               )
             ) : (
               <>
-                {(value !== "setting" ||
+                {value !== "setting" && quize.config.type === "quize" && (
-                  (value === "setting" && !disableSettings)) && (
                   <MiniButtonSetting
                     key={title}
                     onClick={() => {
@@ -229,7 +225,7 @@ export default function ButtonsOptions({
             )}
           </Box>
         ))}
-        {!disableMiniButtons && (
+        {quize.config.type === "quize" && (
           <>
             <MiniButtonSetting
               onClick={() => setOpenedReallyChangingModal(true)}

src/pages/Questions/ButtonsOptionsAndPict.css

@@ -1,10 +0,0 @@
-.MuiTooltip-popper > .MuiTooltip-tooltip {
-    background: #fff;
-    border-radius: 6px;
-    color: #9A9AAF;
-    box-shadow: 0px 8px 24px rgba(210, 208, 225, 0.4);
-}
-
-.MuiTooltip-popper > .MuiTooltip-tooltip .MuiTooltip-arrow::before {
-    background: #fff;
-}

src/pages/Questions/ButtonsOptionsAndPict.tsx

@@ -29,8 +29,6 @@ import { DoubleTick } from "@icons/questionsPage/DoubleTick";
 import { VectorQuestions } from "@icons/questionsPage/VectorQuestions";
 import { ReallyChangingModal } from "@ui_kit/Modal/ReallyChangingModal/ReallyChangingModal";
 
-import "./ButtonsOptionsAndPict.css";
-
 import type { QuizQuestionBase } from "../../model/questionTypes/shared";
 
 interface Props {
@@ -151,6 +149,19 @@ export default function ButtonsOptionsAndPict({
         <Tooltip
           arrow
           placement="right"
+          componentsProps={{
+            tooltip: {
+              sx: {
+                background: "#fff",
+                borderRadius: "6px",
+                color: "#9A9AAF",
+                boxShadow: "0px 8px 24px rgba(210, 208, 225, 0.4)",
+                "& .MuiTooltip-arrow": {
+                  color: "#FFF",
+                },
+              },
+            },
+          }}
           title={
             <Box>
               <Typography

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

@@ -38,7 +38,7 @@ export default memo(
                   maxWidth: "800px",
                   display: "flex",
                   justifyContent: "center",
-                  marginBottom: "40px",
+                  marginTop: "30px",
                   gap: "5px",
                 }}
               >

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

@@ -14,6 +14,7 @@ import {
 } from "@mui/material";
 import { useDebouncedCallback } from "use-debounce";
 
+import CustomTextField from "@ui_kit/CustomTextField";
 import { ChooseAnswerModal } from "./ChooseAnswerModal";
 import FormTypeQuestions from "../FormTypeQuestions";
 import SwitchQuestionsPage from "../../SwitchQuestionsPage";
@@ -181,6 +182,10 @@ export default function QuestionsPageCard({
           backgroundColor: "white",
           border: "none",
           boxShadow: "none",
+          marginBottom: "20px",
+          borderRadius: "0",
+          borderTopLeftRadius: "12px",
+          borderTopRightRadius: "12px",
         }}
       >
         <Box
@@ -188,9 +193,25 @@ export default function QuestionsPageCard({
             display: "flex",
             flexDirection: "column",
             padding: 0,
-            borderRadius: "12px",
           }}
         >
+          <CustomTextField
+            placeholder={`Заголовок ${totalIndex + 1} вопроса`}
+            text={question.title}
+            onChange={({ target }) => debounced(target.value)}
+            sx={{ margin: "20px", width: "auto" }}
+            InputProps={{
+              endAdornment: (
+                <>
+                  <InputAdornment {...draggableProps} position="start">
+                    <PointsIcon
+                      style={{ color: "#9A9AAF", fontSize: "30px" }}
+                    />
+                  </InputAdornment>
+                </>
+              ),
+            }}
+          />
           {question.type.length === 0 ? (
             <FormTypeQuestions totalIndex={totalIndex} />
           ) : (

src/pages/Questions/Form/FormQuestionsPage.tsx

@@ -70,7 +70,9 @@ export default function FormQuestionsPage() {
           boxShadow: "0px 10px 30px #e7e7e7",
           borderRadius: "12px",
           marginBottom: "40px",
-          border: "1px solid transparent",
+          borderTop: "1px solid transparent",
+          borderBottom: "1px solid transparent",
+          background: "#FFFFFF",
         }}
       >
         <FormDraggableList />

src/pages/Questions/Form/FormTypeQuestions.tsx

@@ -1,10 +1,12 @@
 import { useState } from "react";
 import { useParams } from "react-router-dom";
-import { Box, Typography } from "@mui/material";
+import { useDebouncedCallback } from "use-debounce";
+import { Box } from "@mui/material";
 
 import QuestionsMiniButton from "@ui_kit/QuestionsMiniButton";
 import CustomTextField from "@ui_kit/CustomTextField";
 import ButtonsOptions from "../ButtonsOptions";
+import SwitchAnswerOptions from "../answerOptions/switchAnswerOptions";
 
 import Answer from "../../../assets/icons/questionsPage/answer";
 import OptionsPict from "../../../assets/icons/questionsPage/options_pict";
@@ -99,22 +101,25 @@ export const BUTTON_TYPE_QUESTIONS: ButtonTypeQuestion[] = [
 ];
 
 export default function FormTypeQuestions({ totalIndex }: Props) {
-  const [switchState, setSwitchState] = useState("setting");
+  const [switchState, setSwitchState] = useState("");
   const quizId = Number(useParams().quizId);
   const { listQuestions } = questionStore();
   const question = listQuestions[quizId][totalIndex] as QuizQuestionBase;
+  const debounced = useDebouncedCallback((title) => {
+    updateQuestionsList<QuizQuestionBase>(quizId, totalIndex, { title });
+  }, 1000);
+  console.log("listQuestions[quizId]", listQuestions[quizId]);
 
   return (
-    <Box sx={{ paddingTop: "20px" }}>
+    <Box>
       <Box
         sx={{
           display: "flex",
           flexWrap: "wrap",
           gap: "20px",
-          margin: "0 20px 20px",
+          margin: "20px",
         }}
       >
-        <CustomTextField placeholder="Заголовок 1 вопроса" text={""} />
         {BUTTON_TYPE_QUESTIONS.map(({ icon, title, value }) => (
           <QuestionsMiniButton
             key={title}
@@ -137,10 +142,8 @@ export default function FormTypeQuestions({ totalIndex }: Props) {
         switchState={switchState}
         SSHC={setSwitchState}
         totalIndex={totalIndex}
-        disableSettings
-        disableBranching
-        disableMiniButtons
       />
+      <SwitchAnswerOptions switchState={switchState} totalIndex={totalIndex} />
     </Box>
   );
 }

src/ui_kit/CustomTextField.tsx

@@ -7,6 +7,7 @@ import {
 } from "@mui/material";
 
 import type { ChangeEvent, KeyboardEvent, FocusEvent } from "react";
+import type { InputProps } from "@mui/material";
 
 interface CustomTextFieldProps {
   placeholder: string;
@@ -17,6 +18,7 @@ interface CustomTextFieldProps {
   onBlur?: (event: FocusEvent<HTMLInputElement>) => void;
   text?: string;
   sx?: SxProps<Theme>;
+  InputProps?: Partial<InputProps>;
 }
 
 export default function CustomTextField({
@@ -28,6 +30,7 @@ export default function CustomTextField({
   onChange,
   onKeyDown,
   onBlur,
+  InputProps,
 }: CustomTextFieldProps) {
   const theme = useTheme();
 
@@ -55,6 +58,7 @@ export default function CustomTextField({
           },
           ...sx,
         }}
+        InputProps={InputProps}
         inputProps={{
           sx: {
             borderRadius: "10px",