From 81fd62c85b9b2cfed187a747dce1842584aaf1da Mon Sep 17 00:00:00 2001
From: IlyaDoronin <ryletd@gmail.com>
Date: Mon, 9 Oct 2023 10:59:23 +0300
Subject: [PATCH 1/3] fix: button styles

---
 src/pages/Questions/ButtonsOptions.tsx | 9 ++++++++-
 1 file changed, 8 insertions(+), 1 deletion(-)

diff --git a/src/pages/Questions/ButtonsOptions.tsx b/src/pages/Questions/ButtonsOptions.tsx
index 2a785131..ad5505de 100644
--- a/src/pages/Questions/ButtonsOptions.tsx
+++ b/src/pages/Questions/ButtonsOptions.tsx
@@ -174,10 +174,13 @@ export default function ButtonsOptions({
                         : theme.palette.grey3.main,
                     minWidth: isWrappMiniButtonSetting ? "30px" : "64px",
                     height: "30px",
+                    "&:hover": {
+                      color: theme.palette.grey3.main,
+                      "& path": { stroke: theme.palette.grey3.main },
+                    },
                   }}
                 >
                   {icon}
-
                   {isWrappMiniButtonSetting ? null : title}
                 </MiniButtonSetting>
               </Tooltip>
@@ -199,6 +202,10 @@ export default function ButtonsOptions({
                       : theme.palette.grey3.main,
                   minWidth: isWrappMiniButtonSetting ? "30px" : "64px",
                   height: "30px",
+                  "&:hover": {
+                    color: theme.palette.grey3.main,
+                    "& path": { stroke: theme.palette.grey3.main },
+                  },
                 }}
               >
                 {icon}

From 9aa6fbf4116572096a164c44c6a83c27cb69fcbd Mon Sep 17 00:00:00 2001
From: IlyaDoronin <ryletd@gmail.com>
Date: Mon, 9 Oct 2023 11:33:46 +0300
Subject: [PATCH 2/3] fix: 2 bugs

---
 src/pages/Questions/DraggableList/ChooseAnswerModal.tsx | 4 ++--
 src/pages/Questions/TypeQuestions.tsx                   | 7 ++++---
 2 files changed, 6 insertions(+), 5 deletions(-)

diff --git a/src/pages/Questions/DraggableList/ChooseAnswerModal.tsx b/src/pages/Questions/DraggableList/ChooseAnswerModal.tsx
index 1c4493ac..44150618 100644
--- a/src/pages/Questions/DraggableList/ChooseAnswerModal.tsx
+++ b/src/pages/Questions/DraggableList/ChooseAnswerModal.tsx
@@ -129,9 +129,9 @@ export const ChooseAnswerModal = ({
               onClick={() => {
                 setOpenModal(false);
 
-                const question = listQuestions[quizId][totalIndex];
+                const question = { ...listQuestions[quizId][totalIndex] };
 
-                removeQuestionForce(quizId, totalIndex);
+                removeQuestionForce(quizId, question.id);
                 createQuestion(quizId, selectedValue, totalIndex);
                 updateQuestionsList<QuizQuestionBase>(quizId, totalIndex, {
                   expanded: question.expanded,
diff --git a/src/pages/Questions/TypeQuestions.tsx b/src/pages/Questions/TypeQuestions.tsx
index 36560307..2b5e8007 100755
--- a/src/pages/Questions/TypeQuestions.tsx
+++ b/src/pages/Questions/TypeQuestions.tsx
@@ -17,7 +17,7 @@ import {
   questionStore,
   updateQuestionsList,
   createQuestion,
-  removeQuestion,
+  removeQuestionForce,
 } from "@root/questions";
 
 import type {
@@ -110,12 +110,13 @@ export default function TypeQuestions({ totalIndex }: Props) {
         <QuestionsMiniButton
           key={title}
           onClick={() => {
-            const question = listQuestions[quizId][totalIndex];
+            const question = { ...listQuestions[quizId][totalIndex] };
 
-            removeQuestion(quizId, totalIndex);
+            removeQuestionForce(quizId, question.id);
             createQuestion(quizId, value, totalIndex);
             updateQuestionsList<QuizQuestionBase>(quizId, totalIndex, {
               expanded: question.expanded,
+              type: value,
             });
           }}
           icon={icon}

From 428ba8812306b474c89f04aab909513903727544 Mon Sep 17 00:00:00 2001
From: IlyaDoronin <ryletd@gmail.com>
Date: Mon, 9 Oct 2023 17:39:40 +0300
Subject: [PATCH 3/3] fix: closed answer styles

---
 src/assets/icons/CrossedEyeIcon.tsx           |  17 +-
 src/assets/icons/questionsPage/OneIcon.tsx    |  12 +-
 .../DraggableList/QuestionPageCard.tsx        | 244 ++++++++++--------
 src/ui_kit/CustomWrapper.tsx                  |   2 +-
 4 files changed, 162 insertions(+), 113 deletions(-)

diff --git a/src/assets/icons/CrossedEyeIcon.tsx b/src/assets/icons/CrossedEyeIcon.tsx
index f2db60c7..c9021ca9 100644
--- a/src/assets/icons/CrossedEyeIcon.tsx
+++ b/src/assets/icons/CrossedEyeIcon.tsx
@@ -1,7 +1,16 @@
-export default function CrossedEyeIcon() {
+import { FC, SVGProps } from "react";
+
+export const CrossedEyeIcon: FC<SVGProps<SVGSVGElement>> = (props) => {
   return (
-    <svg width="30" height="31" viewBox="0 0 30 31" fill="none" xmlns="http://www.w3.org/2000/svg">
-      <rect y="0.8125" width="30" height="30" rx="6" fill="#252734" />
+    <svg
+      {...props}
+      width="30"
+      height="30"
+      viewBox="0 0 30 30"
+      fill="none"
+      xmlns="http://www.w3.org/2000/svg"
+    >
+      <rect y="0.8125" width="30" height="30" rx="6" fill="#FFF" />
       <path
         d="M7.5 7.5625L22.5 24.0625"
         stroke="#7E2AEA"
@@ -39,4 +48,4 @@ export default function CrossedEyeIcon() {
       />
     </svg>
   );
-}
+};
diff --git a/src/assets/icons/questionsPage/OneIcon.tsx b/src/assets/icons/questionsPage/OneIcon.tsx
index e7763088..64853a84 100755
--- a/src/assets/icons/questionsPage/OneIcon.tsx
+++ b/src/assets/icons/questionsPage/OneIcon.tsx
@@ -2,11 +2,17 @@ import { Box } from "@mui/material";
 import { FC, SVGProps } from "react";
 
 export const OneIcon: FC<SVGProps<SVGSVGElement>> = (props) => (
-  <svg {...props} height="1em" viewBox="0 0 30 30" fill="none" xmlns="http://www.w3.org/2000/svg">
-    <rect width="30" height="30" rx="15" fill="#EEE4FC" />
+  <svg
+    fill="#7E2AEA"
+    height="1em"
+    viewBox="0 0 30 30"
+    xmlns="http://www.w3.org/2000/svg"
+    {...props}
+  >
+    <rect width="30" height="30" rx="15" />
     <path
       d="M15.864 19.5C15.7707 19.5 15.6913 19.472 15.626 19.416C15.57 19.3507 15.542 19.2713 15.542 19.178V11.338L13.218 13.13C13.1433 13.186 13.064 13.2093 12.98 13.2C12.896 13.1907 12.826 13.1487 12.77 13.074L12.406 12.612C12.35 12.528 12.3267 12.444 12.336 12.36C12.3547 12.276 12.4013 12.206 12.476 12.15L15.528 9.798C15.5933 9.75133 15.654 9.72333 15.71 9.714C15.766 9.70467 15.8267 9.7 15.892 9.7H16.606C16.6993 9.7 16.774 9.73267 16.83 9.798C16.886 9.854 16.914 9.92867 16.914 10.022V19.178C16.914 19.2713 16.886 19.3507 16.83 19.416C16.774 19.472 16.6993 19.5 16.606 19.5H15.864Z"
-      fill="#7E2AEA"
+      fill={props.style?.color || "#7E2AEA"}
     />
   </svg>
 );
diff --git a/src/pages/Questions/DraggableList/QuestionPageCard.tsx b/src/pages/Questions/DraggableList/QuestionPageCard.tsx
index 01b8d026..68b63065 100644
--- a/src/pages/Questions/DraggableList/QuestionPageCard.tsx
+++ b/src/pages/Questions/DraggableList/QuestionPageCard.tsx
@@ -32,7 +32,7 @@ import { DeleteIcon } from "@icons/questionsPage/deleteIcon";
 import { OneIcon } from "@icons/questionsPage/OneIcon";
 import { PointsIcon } from "@icons/questionsPage/PointsIcon";
 import { CopyIcon } from "@icons/questionsPage/CopyIcon";
-import CrossedEyeIcon from "@icons/CrossedEyeIcon";
+import { CrossedEyeIcon } from "@icons/CrossedEyeIcon";
 import { HideIcon } from "@icons/questionsPage/hideIcon";
 import Answer from "@icons/questionsPage/answer";
 import OptionsPict from "@icons/questionsPage/options_pict";
@@ -62,77 +62,77 @@ const IconAndrom = (isExpanded: boolean, switchState: string) => {
     case "variant":
       return (
         <Answer
-          color={isExpanded ? "#9A9AAF" : "white"}
+          color={isExpanded ? "#9A9AAF" : "#7E2AEA"}
           sx={{ height: "22px", width: "20px" }}
         />
       );
     case "images":
       return (
         <OptionsPict
-          color={isExpanded ? "#9A9AAF" : "white"}
+          color={isExpanded ? "#9A9AAF" : "#7E2AEA"}
           sx={{ height: "22px", width: "20px" }}
         />
       );
     case "varimg":
       return (
         <OptionsAndPict
-          color={isExpanded ? "#9A9AAF" : "white"}
+          color={isExpanded ? "#9A9AAF" : "#7E2AEA"}
           sx={{ height: "22px", width: "20px" }}
         />
       );
     case "emoji":
       return (
         <Emoji
-          color={isExpanded ? "#9A9AAF" : "white"}
+          color={isExpanded ? "#9A9AAF" : "#7E2AEA"}
           sx={{ height: "22px", width: "20px" }}
         />
       );
     case "text":
       return (
         <Input
-          color={isExpanded ? "#9A9AAF" : "white"}
+          color={isExpanded ? "#9A9AAF" : "#7E2AEA"}
           sx={{ height: "22px", width: "20px" }}
         />
       );
     case "select":
       return (
         <DropDown
-          color={isExpanded ? "#9A9AAF" : "white"}
+          color={isExpanded ? "#9A9AAF" : "#7E2AEA"}
           sx={{ height: "22px", width: "20px" }}
         />
       );
     case "date":
       return (
         <Date
-          color={isExpanded ? "#9A9AAF" : "white"}
+          color={isExpanded ? "#9A9AAF" : "#7E2AEA"}
           sx={{ height: "22px", width: "20px" }}
         />
       );
     case "number":
       return (
         <Slider
-          color={isExpanded ? "#9A9AAF" : "white"}
+          color={isExpanded ? "#9A9AAF" : "#7E2AEA"}
           sx={{ height: "22px", width: "20px" }}
         />
       );
     case "file":
       return (
         <Download
-          color={isExpanded ? "#9A9AAF" : "white"}
+          color={isExpanded ? "#9A9AAF" : "#7E2AEA"}
           sx={{ height: "22px", width: "20px" }}
         />
       );
     case "page":
       return (
         <Page
-          color={isExpanded ? "#9A9AAF" : "white"}
+          color={isExpanded ? "#9A9AAF" : "#7E2AEA"}
           sx={{ height: "22px", width: "20px" }}
         />
       );
     case "rating":
       return (
         <RatingIcon
-          color={isExpanded ? "#9A9AAF" : "white"}
+          color={isExpanded ? "#9A9AAF" : "#7E2AEA"}
           sx={{ height: "22px", width: "20px" }}
         />
       );
@@ -171,21 +171,18 @@ export default function QuestionsPageCard({
         sx={{
           maxWidth: "796px",
           width: "100%",
-          borderRadius: "8px",
-          backgroundColor: question.expanded ? "white" : "#333647",
+          borderRadius: "12px",
+          boxShadow: "none",
+          backgroundColor: question.expanded ? "white" : "#EEE4FC",
+          border: question.expanded ? "none" : "1px solid #9A9AAF",
         }}
       >
         <Box
           sx={{
             display: "flex",
             alignItems: "center",
-            justifyContent: "space-between",
-            padding: isTablet
-              ? isMobile
-                ? "20px 20px 0px 20px"
-                : "20px 10px 20px 20px "
-              : "20px 10px 20px 20px",
-            flexDirection: isMobile ? "column-reverse" : null,
+            padding: isMobile ? "10px" : "20px 10px 20px 20px",
+            flexDirection: isMobile ? "column" : null,
           }}
         >
           <FormControl
@@ -223,8 +220,9 @@ export default function QuestionsPageCard({
                 ),
               }}
               sx={{
+                margin: isMobile ? "10px 0" : 0,
                 "& .MuiInputBase-root": {
-                  color: question.expanded ? "#9A9AAF" : "white",
+                  color: question.expanded ? "#9A9AAF" : "#4D4D4D",
                   backgroundColor: question.expanded
                     ? theme.palette.background.default
                     : "transparent",
@@ -232,6 +230,11 @@ export default function QuestionsPageCard({
                   borderRadius: "10px",
                   ".MuiOutlinedInput-notchedOutline": {
                     borderWidth: "1px !important",
+                    border: !question.expanded ? "none" : null,
+                  },
+                  "& .MuiInputBase-input::placeholder": {
+                    color: "#4D4D4D",
+                    opacity: 0.8,
                   },
                 },
               }}
@@ -248,101 +251,132 @@ export default function QuestionsPageCard({
           <Box
             sx={{
               display: "flex",
-              alignItems: "flex-start",
+              alignItems: "center",
+              justifyContent: "flex-end",
               width: isMobile ? "100%" : "auto",
               position: "relative",
-              height: "30px",
-              marginBottom: "10px",
             }}
           >
-            <Box
-              sx={{
-                display: "flex",
-                alignItems: "center",
-              }}
+            <IconButton
+              sx={{ padding: "0", margin: "5px" }}
+              disableRipple
+              onClick={() =>
+                updateQuestionsList<QuizQuestionBase>(quizId, totalIndex, {
+                  expanded: !question.expanded,
+                })
+              }
             >
-              <IconButton
-                sx={{ paddingBottom: isMobile ? "0" : "" }}
-                disableRipple
-                onClick={() =>
-                  updateQuestionsList<QuizQuestionBase>(quizId, totalIndex, {
-                    expanded: !question.expanded,
-                  })
-                }
-              >
-                {question.expanded ? (
-                  <ArrowDownIcon
-                    style={{
-                      width: "18px",
-                      color: "#4D4D4D",
-                    }}
-                  />
-                ) : (
-                  <ExpandLessIcon fill="#7E2AEA" />
-                )}
-              </IconButton>
               {question.expanded ? (
-                <></>
+                <ArrowDownIcon
+                  style={{
+                    width: "18px",
+                    color: "#4D4D4D",
+                  }}
+                />
               ) : (
-                <Box sx={{ display: "flex", borderRight: "solid 1px white" }}>
-                  <FormControlLabel
-                    control={
-                      <Checkbox
-                        icon={<HideIcon style={{ color: "#7E2AEA" }} />}
-                        checkedIcon={<CrossedEyeIcon />}
-                      />
-                    }
-                    label={""}
-                    sx={{
-                      color: theme.palette.grey2.main,
-                      ml: "-9px",
-                      mr: 0,
-                      userSelect: "none",
-                    }}
-                  />
-                  <IconButton onClick={() => copyQuestion(quizId, totalIndex)}>
-                    <CopyIcon style={{ color: "white" }} />
-                  </IconButton>
-                  <IconButton
-                    sx={{
-                      cursor: "pointer",
-                      borderRadius: "6px",
-                      padding: "2px",
-                    }}
-                    onClick={() => {
-                      const removedId = question.id;
-                      if (question.deleteTimeoutId) {
-                        clearTimeout(question.deleteTimeoutId);
-                      }
-
-                      removeQuestion(quizId, totalIndex);
-
-                      const newTimeoutId = window.setTimeout(() => {
-                        removeQuestionForce(quizId, removedId);
-                      }, 5000);
-
-                      updateQuestionsList<QuizQuestionBase>(
-                        quizId,
-                        totalIndex,
-                        {
-                          ...question,
-                          deleteTimeoutId: newTimeoutId,
-                        }
-                      );
-                    }}
-                  >
-                    <DeleteIcon style={{ color: "white" }} />
-                  </IconButton>
-                </Box>
+                <ExpandLessIcon
+                  sx={{
+                    boxSizing: "border-box",
+                    fill: theme.palette.brightPurple.main,
+                    background: "#FFF",
+                    borderRadius: "6px",
+                    height: "30px",
+                    width: "30px",
+                  }}
+                />
               )}
+            </IconButton>
+            {question.expanded ? (
+              <></>
+            ) : (
+              <Box
+                sx={{
+                  display: "flex",
+                  height: "30px",
+                  borderRight: "solid 1px #4D4D4D",
+                }}
+              >
+                <FormControlLabel
+                  control={
+                    <Checkbox
+                      icon={
+                        <HideIcon
+                          style={{
+                            boxSizing: "border-box",
+                            color: "#7E2AEA",
+                            background: "#FFF",
+                            borderRadius: "6px",
+                            height: "30px",
+                            width: "30px",
+                            padding: "3px",
+                          }}
+                        />
+                      }
+                      checkedIcon={<CrossedEyeIcon />}
+                    />
+                  }
+                  label={""}
+                  sx={{
+                    color: theme.palette.grey2.main,
+                    ml: "-9px",
+                    mr: 0,
+                    userSelect: "none",
+                  }}
+                />
+                <IconButton
+                  sx={{ padding: "0" }}
+                  onClick={() => copyQuestion(quizId, totalIndex)}
+                >
+                  <CopyIcon
+                    style={{ color: theme.palette.brightPurple.main }}
+                  />
+                </IconButton>
+                <IconButton
+                  sx={{
+                    cursor: "pointer",
+                    borderRadius: "6px",
+                    padding: "0",
+                    margin: "0 5px 0 10px",
+                  }}
+                  onClick={() => {
+                    const removedId = question.id;
+                    if (question.deleteTimeoutId) {
+                      clearTimeout(question.deleteTimeoutId);
+                    }
 
-              <OneIcon style={{ fontSize: "30px", marginRight: "-2px" }} />
-            </Box>
+                    removeQuestion(quizId, totalIndex);
+
+                    const newTimeoutId = window.setTimeout(() => {
+                      removeQuestionForce(quizId, removedId);
+                    }, 5000);
+
+                    updateQuestionsList<QuizQuestionBase>(quizId, totalIndex, {
+                      ...question,
+                      deleteTimeoutId: newTimeoutId,
+                    });
+                  }}
+                >
+                  <DeleteIcon
+                    style={{ color: theme.palette.brightPurple.main }}
+                  />
+                </IconButton>
+              </Box>
+            )}
+
+            <OneIcon
+              style={{
+                fontSize: "30px",
+                marginLeft: "3px",
+                color: !question.expanded ? "#FFF" : "",
+                fill: question.expanded
+                  ? "#EEE4FC"
+                  : theme.palette.brightPurple.main,
+              }}
+            />
             <IconButton
               disableRipple
               sx={{
-                padding: isMobile ? "0" : "5px 10px 8px 8px",
-                position: isMobile ? "absolute" : "relative",
+                padding: isMobile ? "0" : "0 5px",
                 right: isMobile ? "0" : null,
                 bottom: isMobile ? "0" : null,
               }}
diff --git a/src/ui_kit/CustomWrapper.tsx b/src/ui_kit/CustomWrapper.tsx
index f99ced30..0efbbe66 100644
--- a/src/ui_kit/CustomWrapper.tsx
+++ b/src/ui_kit/CustomWrapper.tsx
@@ -1,7 +1,7 @@
 import { useState } from "react";
 import { Box, IconButton, SxProps, Theme, Typography, useMediaQuery, useTheme } from "@mui/material";
 
-import CrossedEyeIcon from "@icons/CrossedEyeIcon";
+import { CrossedEyeIcon } from "@icons/CrossedEyeIcon";
 import CopyIcon from "@icons/CopyIcon";
 import TrashIcon from "@icons/TrashIcon";
 import CountIcon from "@icons/CountIcon";