WIP new design of setting modal in branching

src/pages/Questions/BranchingMap/helper.ts

@@ -65,7 +65,7 @@ export const storeToNodes = (questions: AnyTypedQuizQuestion[]) => {
         question.title === "" || question.title === " "
           ? "noname"
           : question.title;
-      if (label.length > 20) label = label.slice(0, 20).toLowerCase() + "…";
+      if (label.length > 17) label = label.slice(0, 17).toLowerCase() + "…";
 
       nodes.push({
         data: {

src/pages/Questions/BranchingMap/index.tsx

@@ -22,7 +22,6 @@ export const BranchingMap = () => {
         background: theme.palette.common.white,
         borderRadius: "12px",
         boxShadow: "0px 8px 24px rgba(210, 208, 225, 0.4)",
-        // marginBottom: isMobile ? "25px" : "30px",
         width: "100%",
         border:
           dragQuestionContentId === null

src/pages/Questions/BranchingModal/BranchingQuestionsModal.tsx

@@ -1,34 +1,26 @@
-import { useState, useRef, useEffect, useLayoutEffect } from "react";
+import { useLayoutEffect, useState } from "react";
 import {
   Box,
   Button,
-  FormControl,
+  Checkbox,
   FormControlLabel,
   Link,
   Modal,
-  Radio,
-  RadioGroup,
   Tooltip,
   Typography,
-  useTheme,
-  Checkbox,
   useMediaQuery,
+  useTheme,
 } from "@mui/material";
 import {
   AnyTypedQuizQuestion,
   createBranchingRuleMain,
 } from "../../../model/questionTypes/shared";
-import { Select } from "../Select";
-
-import RadioCheck from "@ui_kit/RadioCheck";
-import RadioIcon from "@ui_kit/RadioIcon";
 import InfoIcon from "@icons/Info";
-import { DeleteIcon } from "@icons/questionsPage/deleteIcon";
 
-import { TypeSwitch, BlockRule } from "./Settings";
+import { TypeSwitch } from "./Settings";
 import {
-  getQuestionById,
   getQuestionByContentId,
+  getQuestionById,
   updateQuestion,
 } from "@root/questions/actions";
 import { updateOpenedModalSettingsId } from "@root/uiTools/actions";
@@ -101,7 +93,7 @@ export default function BranchingQuestions() {
             left: "50%",
             transform: "translate(-50%, -50%)",
             maxWidth: "620px",
-            width: "100%",
+            width: "90%",
             bgcolor: "background.paper",
             borderRadius: "12px",
             boxShadow: 24,
@@ -114,30 +106,30 @@ export default function BranchingQuestions() {
                 boxSizing: "border-box",
                 background: "#F2F3F7",
                 height: "70px",
-                padding: "0 25px",
+                padding: "25px 20px",
                 display: "flex",
                 alignItems: "center",
+                color: "#9A9AAF",
+                gap: "10px",
               }}
             >
-              <Box sx={{ color: "#4d4d4d" }}>
-                <Typography
-                  component="span"
-                  sx={{
-                    overflow: "hidden",
-                    textOverflow: "ellipsis",
-                    whiteSpace: "nowrap",
-                    maxWidth: isSmallMobile
-                      ? "250px"
-                      : isMobile
-                        ? "350px"
-                        : "450px",
-                    display: "inline-block",
-                    width: "100%",
-                  }}
-                >
-                  {targetQuestion.title}
-                </Typography>
-              </Box>
+              <Typography
+                component="span"
+                sx={{
+                  lineHeight: "1",
+                  overflow: "hidden",
+                  textOverflow: "ellipsis",
+                  whiteSpace: "nowrap",
+                  maxWidth: isSmallMobile
+                    ? "250px"
+                    : isMobile
+                      ? "350px"
+                      : "450px",
+                  display: "inline-block",
+                }}
+              >
+                {targetQuestion.title}
+              </Typography>
               {isMobile ? (
                 <TooltipClickInfo
                   title={
@@ -150,7 +142,7 @@ export default function BranchingQuestions() {
                   placement="top"
                 >
                   <Box>
-                    <InfoIcon />
+                    <InfoIcon sx={{ padding: 0 }} />
                   </Box>
                 </Tooltip>
               )}