fix: css styles and store interaction

src/pages/Questions/AnswerDraggableList/AnswerItem.tsx

@@ -109,7 +109,7 @@ export const AnswerItem = ({
             key={index}
             fullWidth
             variant="standard"
-            sx={{ p: "0 0 20px 0" }}
+            sx={{ padding: "0 0 20px 0" }}
           >
             <TextField
               value={variant.answer}
@@ -171,7 +171,7 @@ export const AnswerItem = ({
               }}
               sx={{
                 "& .MuiInputBase-root": {
-                  padding: "13.5px",
+                  padding: icon ? "5px 13.5px" : "13.5px",
                   borderRadius: "10px",
                   background: "#ffffff",
                 },

src/pages/Questions/DataOptions/settingData.tsx

@@ -1,6 +1,7 @@
 import { useParams } from "react-router-dom";
 import { Box, Typography } from "@mui/material";
 import CustomCheckbox from "@ui_kit/CustomCheckbox";
+import CustomTextField from "@ui_kit/CustomTextField";
 import InfoIcon from "../../../assets/icons/InfoIcon";
 import { questionStore, updateQuestionsList } from "@root/questions";
 
@@ -17,7 +18,7 @@ export default function SettingsData({ totalIndex }: SettingsDataProps) {
       <Box sx={{ padding: "20px" }}>
         <Typography>Настройки календаря</Typography>
         <CustomCheckbox
-          label={"Выбор диапозона дат"}
+          label={"Выбор диапазона дат"}
           checked={listQuestions[quizId][totalIndex].content.dateRange}
           handleChange={({ target }) => {
             const clonContent = listQuestions[quizId][totalIndex].content;
@@ -35,10 +36,45 @@ export default function SettingsData({ totalIndex }: SettingsDataProps) {
           }}
         />
       </Box>
-      <Box sx={{ padding: "20px" }}>
+      <Box sx={{ padding: "20px", minWidth: "350px", marginRight: "30px" }}>
         <Typography>Настройки вопросов</Typography>
-        <CustomCheckbox label={"Необязательный вопрос"} />
+        <CustomCheckbox
-        <CustomCheckbox label={"Внутреннее название вопроса"} /> <InfoIcon />
+          label={"Необязательный вопрос"}
+          checked={!listQuestions[quizId][totalIndex].required}
+          handleChange={(e) => {
+            updateQuestionsList(quizId, totalIndex, {
+              required: !e.target.checked,
+            });
+          }}
+        />
+        <Box sx={{ display: "flex", alignItems: "center" }}>
+          <CustomCheckbox
+            label={"Внутреннее название вопроса"}
+            checked={listQuestions[quizId][totalIndex].content.innerNameCheck}
+            handleChange={(e) => {
+              let clonContent = listQuestions[quizId][totalIndex].content;
+              clonContent.innerNameCheck = e.target.checked;
+
+              if (!e.target.checked) {
+                clonContent.innerName = "";
+              }
+
+              updateQuestionsList(quizId, totalIndex, { content: clonContent });
+            }}
+          />{" "}
+          <InfoIcon />
+        </Box>
+        {listQuestions[quizId][totalIndex].content.innerNameCheck && (
+          <CustomTextField
+            placeholder={"Развёрнутое описание вопроса"}
+            text={listQuestions[quizId][totalIndex].content.innerName}
+            onChange={({ target }) => {
+              let clonContent = listQuestions[quizId][totalIndex].content;
+              clonContent.innerName = target.value;
+              updateQuestionsList(quizId, totalIndex, { content: clonContent });
+            }}
+          />
+        )}
       </Box>
     </Box>
   );

src/pages/Questions/DropDown/settingDropDown.tsx

@@ -38,12 +38,51 @@ export default function SettingDropDown({ totalIndex }: SettingDropDownProps) {
             }}
           />
         </Box>
-        <Box sx={{ padding: "20px" }}>
+        <Box sx={{ padding: "20px", width: "100%" }}>
           <Typography sx={{ marginBottom: "15px" }}>
             Настройки вопросов
           </Typography>
-          <CustomCheckbox label={"Необязательный вопрос"} />
+          <CustomCheckbox
-          <CustomCheckbox label={"Внутреннее название вопроса"} /> <InfoIcon />
+            label={"Необязательный вопрос"}
+            checked={!listQuestions[quizId][totalIndex].required}
+            handleChange={(e) => {
+              updateQuestionsList(quizId, totalIndex, {
+                required: !e.target.checked,
+              });
+            }}
+          />
+          <Box sx={{ display: "flex", alignItems: "center" }}>
+            <CustomCheckbox
+              label={"Внутреннее название вопроса"}
+              checked={listQuestions[quizId][totalIndex].content.innerNameCheck}
+              handleChange={(e) => {
+                let clonContent = listQuestions[quizId][totalIndex].content;
+                clonContent.innerNameCheck = e.target.checked;
+
+                if (!e.target.checked) {
+                  clonContent.innerName = "";
+                }
+
+                updateQuestionsList(quizId, totalIndex, {
+                  content: clonContent,
+                });
+              }}
+            />{" "}
+            <InfoIcon />
+          </Box>
+          {listQuestions[quizId][totalIndex].content.innerNameCheck && (
+            <CustomTextField
+              placeholder={"Развёрнутое описание вопроса"}
+              text={listQuestions[quizId][totalIndex].content.innerName}
+              onChange={({ target }) => {
+                let clonContent = listQuestions[quizId][totalIndex].content;
+                clonContent.innerName = target.value;
+                updateQuestionsList(quizId, totalIndex, {
+                  content: clonContent,
+                });
+              }}
+            />
+          )}
         </Box>
       </Box>
     </>

src/pages/Questions/Emoji/settingEmoji.tsx

@@ -1,6 +1,7 @@
 import { useParams } from "react-router-dom";
 import { Box, Typography } from "@mui/material";
 import CustomCheckbox from "@ui_kit/CustomCheckbox";
+import CustomTextField from "@ui_kit/CustomTextField";
 import InfoIcon from "../../../assets/icons/InfoIcon";
 import { questionStore, updateQuestionsList } from "@root/questions";
 
@@ -13,7 +14,7 @@ export default function SettingEmoji({ totalIndex }: SettingEmojiProps) {
   const { listQuestions } = questionStore();
 
   return (
-    <Box sx={{ display: "flex" }}>
+    <Box sx={{ display: "flex", justifyContent: "space-between" }}>
       <Box sx={{ padding: "20px" }}>
         <Typography>Настройки ответов</Typography>
         <CustomCheckbox
@@ -35,10 +36,45 @@ export default function SettingEmoji({ totalIndex }: SettingEmojiProps) {
           }}
         />
       </Box>
-      <Box sx={{ padding: "20px" }}>
+      <Box sx={{ padding: "20px", minWidth: "350px", marginRight: "30px" }}>
         <Typography>Настройки вопросов</Typography>
-        <CustomCheckbox label={"Необязательный вопрос"} />
+        <CustomCheckbox
-        <CustomCheckbox label={"Внутреннее название вопроса"} /> <InfoIcon />
+          label={"Необязательный вопрос"}
+          checked={!listQuestions[quizId][totalIndex].required}
+          handleChange={(e) => {
+            updateQuestionsList(quizId, totalIndex, {
+              required: !e.target.checked,
+            });
+          }}
+        />
+        <Box sx={{ display: "flex", alignItems: "center" }}>
+          <CustomCheckbox
+            label={"Внутреннее название вопроса"}
+            checked={listQuestions[quizId][totalIndex].content.innerNameCheck}
+            handleChange={(e) => {
+              let clonContent = listQuestions[quizId][totalIndex].content;
+              clonContent.innerNameCheck = e.target.checked;
+
+              if (!e.target.checked) {
+                clonContent.innerName = "";
+              }
+
+              updateQuestionsList(quizId, totalIndex, { content: clonContent });
+            }}
+          />{" "}
+          <InfoIcon />
+        </Box>
+        {listQuestions[quizId][totalIndex].content.innerNameCheck && (
+          <CustomTextField
+            placeholder={"Развёрнутое описание вопроса"}
+            text={listQuestions[quizId][totalIndex].content.innerName}
+            onChange={({ target }) => {
+              let clonContent = listQuestions[quizId][totalIndex].content;
+              clonContent.innerName = target.value;
+              updateQuestionsList(quizId, totalIndex, { content: clonContent });
+            }}
+          />
+        )}
       </Box>
     </Box>
   );

src/pages/Questions/OptionsPicture/settingOpytionsPict.tsx

@@ -89,7 +89,13 @@ export default function SettingOpytionsPict({
 
   return (
     <>
-      <Box sx={{ display: "flex" }}>
+      <Box
+        sx={{
+          display: "flex",
+          justifyContent: "space-between",
+          marginRight: "30px",
+        }}
+      >
         <Box sx={{ padding: "20px" }}>
           <Typography sx={{ marginBottom: "15px" }}>Пропорции</Typography>
           <Box
@@ -152,7 +158,7 @@ export default function SettingOpytionsPict({
             }
           />
         </Box>
-        <Box sx={{ padding: "20px" }}>
+        <Box sx={{ padding: "20px", minWidth: "350px" }}>
           <Typography sx={{ marginBottom: "15px" }}>Форма</Typography>
           <Box
             sx={{
@@ -205,7 +211,7 @@ export default function SettingOpytionsPict({
               })
             }
           />
-          <Box sx={{ display: "flex" }}>
+          <Box sx={{ display: "flex", alignItems: "center" }}>
             <CustomCheckbox
               sx={{ width: "100%" }}
               label={"Внутреннее название вопроса"}

src/pages/Questions/OwnTextField/settingTextField.tsx

@@ -9,6 +9,7 @@ import {
   useTheme,
 } from "@mui/material";
 import CustomCheckbox from "@ui_kit/CustomCheckbox";
+import CustomTextField from "@ui_kit/CustomTextField";
 
 import { questionStore, updateQuestionsList } from "@root/questions";
 
@@ -37,7 +38,13 @@ export default function SettingTextField({
   const theme = useTheme();
 
   return (
-    <Box sx={{ display: "flex" }}>
+    <Box
+      sx={{
+        display: "flex",
+        justifyContent: "space-between",
+        marginRight: "50px",
+      }}
+    >
       <Box sx={{ padding: "20px" }}>
         <Typography>Настройки ответов</Typography>
         <FormControl>
@@ -71,11 +78,54 @@ export default function SettingTextField({
           </RadioGroup>
         </FormControl>
       </Box>
-      <Box sx={{ padding: "20px" }}>
+      <Box sx={{ padding: "20px", display: "flex", flexDirection: "column" }}>
         <Typography>Настройки вопросов</Typography>
-        <CustomCheckbox label={"Автозаполнение адреса"} />
+        <CustomCheckbox
-        <CustomCheckbox label={"Необязательный вопрос"} />
+          label={"Автозаполнение адреса"}
-        <CustomCheckbox label={"Внутреннее название вопроса"} /> <InfoIcon />
+          checked={listQuestions[quizId][totalIndex].content.autofill}
+          handleChange={({ target }) => {
+            const clonContent = listQuestions[quizId][totalIndex].content;
+            clonContent.autofill = target.checked;
+            updateQuestionsList(quizId, totalIndex, { content: clonContent });
+          }}
+        />
+        <CustomCheckbox
+          label={"Необязательный вопрос"}
+          checked={!listQuestions[quizId][totalIndex].required}
+          handleChange={(e) => {
+            updateQuestionsList(quizId, totalIndex, {
+              required: !e.target.checked,
+            });
+          }}
+        />
+        <Box sx={{ display: "flex", alignItems: "center" }}>
+          <CustomCheckbox
+            label={"Внутреннее название вопроса"}
+            checked={listQuestions[quizId][totalIndex].content.innerNameCheck}
+            handleChange={(e) => {
+              let clonContent = listQuestions[quizId][totalIndex].content;
+              clonContent.innerNameCheck = e.target.checked;
+
+              if (!e.target.checked) {
+                clonContent.innerName = "";
+              }
+
+              updateQuestionsList(quizId, totalIndex, { content: clonContent });
+            }}
+          />{" "}
+          <InfoIcon />
+        </Box>
+        {listQuestions[quizId][totalIndex].content.innerNameCheck && (
+          <CustomTextField
+            placeholder={"Развёрнутое описание вопроса"}
+            text={listQuestions[quizId][totalIndex].content.innerName}
+            onChange={({ target }) => {
+              let clonContent = listQuestions[quizId][totalIndex].content;
+              clonContent.innerName = target.value;
+              updateQuestionsList(quizId, totalIndex, { content: clonContent });
+            }}
+          />
+        )}
       </Box>
     </Box>
   );

src/pages/Questions/PageOptions/SettingPageOptions.tsx

@@ -1,15 +1,54 @@
+import { useParams } from "react-router-dom";
 import { Box, Typography } from "@mui/material";
 import CustomCheckbox from "@ui_kit/CustomCheckbox";
+import CustomTextField from "@ui_kit/CustomTextField";
+
+import { questionStore, updateQuestionsList } from "@root/questions";
+
 import InfoIcon from "../../../assets/icons/InfoIcon";
 
-export default function SettingPageOptions() {
+type SettingPageOptionsProps = {
+  totalIndex: number;
+};
+
+export default function SettingPageOptions({
+  totalIndex,
+}: SettingPageOptionsProps) {
+  const quizId = Number(useParams().quizId);
+  const { listQuestions } = questionStore();
+
   return (
     <Box sx={{ display: "flex", flexDirection: "column", padding: "20px" }}>
       <Typography>Настройки вопроса</Typography>
       <Box sx={{ display: "flex", alignItems: "center" }}>
-        <CustomCheckbox label={"Внутреннее название вопроса"} />
+        <CustomCheckbox
+          label={"Внутреннее название вопроса"}
+          checked={listQuestions[quizId][totalIndex].content.innerNameCheck}
+          handleChange={({ target }) =>
+            updateQuestionsList(quizId, totalIndex, {
+              content: {
+                ...listQuestions[quizId][totalIndex].content,
+                innerNameCheck: target.checked,
+                innerName: "",
+              },
+            })
+          }
+        />
         <InfoIcon />
       </Box>
+      {listQuestions[quizId][totalIndex].content.innerNameCheck && (
+        <CustomTextField
+          placeholder={"Внутреннее описание вопроса"}
+          text={listQuestions[quizId][totalIndex].content.innerName}
+          onChange={({ target }) => {
+            let clonContent = listQuestions[quizId][totalIndex].content;
+            clonContent.innerName = target.value;
+            updateQuestionsList(quizId, totalIndex, {
+              content: clonContent,
+            });
+          }}
+        />
+      )}
     </Box>
   );
 }

src/pages/Questions/PageOptions/switchPageOptions.tsx

@@ -13,13 +13,13 @@ export default function SwitchPageOptions({
 }: Props) {
   switch (switchState) {
     case "setting":
-      return <SettingPageOptions />;
+      return <SettingPageOptions totalIndex={totalIndex} />;
       break;
     case "help":
       return <HelpQuestions totalIndex={totalIndex} />;
       break;
     case "branching":
-      return <BranchingQuestions totalIndex={totalIndex}/>;
+      return <BranchingQuestions totalIndex={totalIndex} />;
       break;
     default:
       return <></>;

src/pages/Questions/RatingOptions/settingRating.tsx

@@ -2,6 +2,7 @@ import { useParams } from "react-router-dom";
 import { Box, ButtonBase, Slider, Typography, useTheme } from "@mui/material";
 
 import CustomCheckbox from "@ui_kit/CustomCheckbox";
+import CustomTextField from "@ui_kit/CustomTextField";
 import { questionStore, updateQuestionsList } from "@root/questions";
 
 import InfoIcon from "../../../assets/icons/InfoIcon";
@@ -109,8 +110,43 @@ export default function SettingSlider({ totalIndex }: SettingSliderProps) {
       </Box>
       <Box sx={{ padding: "20px" }}>
         <Typography>Настройки вопросов</Typography>
-        <CustomCheckbox label={"Необязательный вопрос"} />
+        <CustomCheckbox
-        <CustomCheckbox label={"Внутреннее название вопроса"} /> <InfoIcon />
+          label={"Необязательный вопрос"}
+          checked={!listQuestions[quizId][totalIndex].required}
+          handleChange={(e) => {
+            updateQuestionsList(quizId, totalIndex, {
+              required: !e.target.checked,
+            });
+          }}
+        />
+        <Box sx={{ display: "flex", alignItems: "center" }}>
+          <CustomCheckbox
+            label={"Внутреннее название вопроса"}
+            checked={listQuestions[quizId][totalIndex].content.innerNameCheck}
+            handleChange={(e) => {
+              let clonContent = listQuestions[quizId][totalIndex].content;
+              clonContent.innerNameCheck = e.target.checked;
+
+              if (!e.target.checked) {
+                clonContent.innerName = "";
+              }
+
+              updateQuestionsList(quizId, totalIndex, { content: clonContent });
+            }}
+          />{" "}
+          <InfoIcon />
+        </Box>
+        {listQuestions[quizId][totalIndex].content.innerNameCheck && (
+          <CustomTextField
+            placeholder={"Развёрнутое описание вопроса"}
+            text={listQuestions[quizId][totalIndex].content.innerName}
+            onChange={({ target }) => {
+              let clonContent = listQuestions[quizId][totalIndex].content;
+              clonContent.innerName = target.value;
+              updateQuestionsList(quizId, totalIndex, { content: clonContent });
+            }}
+          />
+        )}
       </Box>
     </Box>
   );

src/pages/Questions/SliderOptions/settingSlider.tsx

@@ -1,6 +1,7 @@
 import { useParams } from "react-router-dom";
 import { Box, Typography } from "@mui/material";
 import CustomCheckbox from "@ui_kit/CustomCheckbox";
+import CustomTextField from "@ui_kit/CustomTextField";
 import InfoIcon from "../../../assets/icons/InfoIcon";
 import { questionStore, updateQuestionsList } from "@root/questions";
 
@@ -28,8 +29,43 @@ export default function SettingSlider({ totalIndex }: SettingSliderProps) {
       </Box>
       <Box sx={{ padding: "20px" }}>
         <Typography>Настройки вопросов</Typography>
-        <CustomCheckbox label={"Необязательный вопрос"} />
+        <CustomCheckbox
-        <CustomCheckbox label={"Внутреннее название вопроса"} /> <InfoIcon />
+          label={"Необязательный вопрос"}
+          checked={!listQuestions[quizId][totalIndex].required}
+          handleChange={(e) => {
+            updateQuestionsList(quizId, totalIndex, {
+              required: !e.target.checked,
+            });
+          }}
+        />
+        <Box sx={{ display: "flex", alignItems: "center" }}>
+          <CustomCheckbox
+            label={"Внутреннее название вопроса"}
+            checked={listQuestions[quizId][totalIndex].content.innerNameCheck}
+            handleChange={(e) => {
+              let clonContent = listQuestions[quizId][totalIndex].content;
+              clonContent.innerNameCheck = e.target.checked;
+
+              if (!e.target.checked) {
+                clonContent.innerName = "";
+              }
+
+              updateQuestionsList(quizId, totalIndex, { content: clonContent });
+            }}
+          />{" "}
+          <InfoIcon />
+        </Box>
+        {listQuestions[quizId][totalIndex].content.innerNameCheck && (
+          <CustomTextField
+            placeholder={"Развёрнутое описание вопроса"}
+            text={listQuestions[quizId][totalIndex].content.innerName}
+            onChange={({ target }) => {
+              let clonContent = listQuestions[quizId][totalIndex].content;
+              clonContent.innerName = target.value;
+              updateQuestionsList(quizId, totalIndex, { content: clonContent });
+            }}
+          />
+        )}
       </Box>
     </Box>
   );

src/pages/Questions/UploadFile/settingUpload.tsx

@@ -1,6 +1,7 @@
 import { useParams } from "react-router-dom";
 import { Box, Typography } from "@mui/material";
 import CustomCheckbox from "@ui_kit/CustomCheckbox";
+import CustomTextField from "@ui_kit/CustomTextField";
 
 import { questionStore, updateQuestionsList } from "@root/questions";
 
@@ -26,8 +27,43 @@ export default function SettingsUpload({ totalIndex }: SettingsUploadProps) {
           updateQuestionsList(quizId, totalIndex, { content: clonContent });
         }}
       />
-      <CustomCheckbox label={"Необязательный вопрос"} />
+      <CustomCheckbox
-      <CustomCheckbox label={"Внутреннее название вопроса"} /> <InfoIcon />
+        label={"Необязательный вопрос"}
+        checked={!listQuestions[quizId][totalIndex].required}
+        handleChange={(e) => {
+          updateQuestionsList(quizId, totalIndex, {
+            required: !e.target.checked,
+          });
+        }}
+      />
+      <Box sx={{ display: "flex", alignItems: "center" }}>
+        <CustomCheckbox
+          label={"Внутреннее название вопроса"}
+          checked={listQuestions[quizId][totalIndex].content.innerNameCheck}
+          handleChange={(e) => {
+            let clonContent = listQuestions[quizId][totalIndex].content;
+            clonContent.innerNameCheck = e.target.checked;
+
+            if (!e.target.checked) {
+              clonContent.innerName = "";
+            }
+
+            updateQuestionsList(quizId, totalIndex, { content: clonContent });
+          }}
+        />{" "}
+        <InfoIcon />
+      </Box>
+      {listQuestions[quizId][totalIndex].content.innerNameCheck && (
+        <CustomTextField
+          placeholder={"Развёрнутое описание вопроса"}
+          text={listQuestions[quizId][totalIndex].content.innerName}
+          onChange={({ target }) => {
+            let clonContent = listQuestions[quizId][totalIndex].content;
+            clonContent.innerName = target.value;
+            updateQuestionsList(quizId, totalIndex, { content: clonContent });
+          }}
+        />
+      )}
     </Box>
   );
 }

src/pages/Questions/answerOptions/responseSettings.tsx

@@ -14,7 +14,13 @@ export default function ResponseSettings({ totalIndex }: Props) {
   const { listQuestions } = questionStore();
 
   return (
-    <Box sx={{ display: "flex" }}>
+    <Box
+      sx={{
+        display: "flex",
+        justifyContent: "space-between",
+        marginRight: "30px",
+      }}
+    >
       <Box sx={{ padding: "20px", display: "flex", flexDirection: "column" }}>
         <Typography>Настройки ответов</Typography>
         <CustomCheckbox
@@ -61,7 +67,7 @@ export default function ResponseSettings({ totalIndex }: Props) {
             });
           }}
         />
-        <Box sx={{ display: "flex" }}>
+        <Box sx={{ display: "flex", alignItems: "center" }}>
           <CustomCheckbox
             label={"Внутреннее название вопроса"}
             checked={listQuestions[quizId][totalIndex].content.innerNameCheck}