Merge branch 'fix-buttons' into 'dev'

fix: buttons and bugs

See merge request frontend/squiz!24

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">
+    <svg
-      <rect y="0.8125" width="30" height="30" rx="6" fill="#252734" />
+      {...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>
   );
-}
+};

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">
+  <svg
-    <rect width="30" height="30" rx="15" fill="#EEE4FC" />
+    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>
 );

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}

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,

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",
+          borderRadius: "12px",
-          backgroundColor: question.expanded ? "white" : "#333647",
+          boxShadow: "none",
+          backgroundColor: question.expanded ? "white" : "#EEE4FC",
+          border: question.expanded ? "none" : "1px solid #9A9AAF",
         }}
       >
         <Box
           sx={{
             display: "flex",
             alignItems: "center",
-            justifyContent: "space-between",
+            padding: isMobile ? "10px" : "20px 10px 20px 20px",
-            padding: isTablet
+            flexDirection: isMobile ? "column" : null,
-              ? isMobile
-                ? "20px 20px 0px 20px"
-                : "20px 10px 20px 20px "
-              : "20px 10px 20px 20px",
-            flexDirection: isMobile ? "column-reverse" : 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
+            <IconButton
-              sx={{
+              sx={{ padding: "0", margin: "5px" }}
-                display: "flex",
+              disableRipple
-                alignItems: "center",
+              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" }}>
+                <ExpandLessIcon
-                  <FormControlLabel
+                  sx={{
-                    control={
+                    boxSizing: "border-box",
-                      <Checkbox
+                    fill: theme.palette.brightPurple.main,
-                        icon={<HideIcon style={{ color: "#7E2AEA" }} />}
+                    background: "#FFF",
-                        checkedIcon={<CrossedEyeIcon />}
+                    borderRadius: "6px",
-                      />
+                    height: "30px",
-                    }
+                    width: "30px",
-                    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>
               )}
+            </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" }} />
+                    removeQuestion(quizId, totalIndex);
-            </Box>
+
+                    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",
+                padding: isMobile ? "0" : "0 5px",
-                position: isMobile ? "absolute" : "relative",
                 right: isMobile ? "0" : null,
                 bottom: isMobile ? "0" : null,
               }}

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}

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";