fix: branching styles

src/assets/icons/Info.tsx

@@ -1,11 +1,16 @@
 import { IconButton } from "@mui/material";
 
-export default function Info() {
+type InfoProps = {
+  width?: number;
+  height?: number;
+};
+
+export default function Info({ width = 20, height = 20 }: InfoProps) {
   return (
     <IconButton>
       <svg
-        width="20"
-        height="20"
+        width={width}
+        height={height}
         viewBox="0 0 20 20"
         fill="none"
         xmlns="http://www.w3.org/2000/svg"

src/pages/Questions/branchingQuestions.tsx

@@ -18,10 +18,11 @@ import {
 import * as React from "react";
 import ArrowDown from "@icons/ArrowDownIcon";
 import { useState } from "react";
+import { questionStore, resetSomeField } from "@root/questions";
 import DeleteIcon from "@icons/questionsPage/deleteIcon";
 import RadioCheck from "@ui_kit/RadioCheck";
 import RadioIcon from "@ui_kit/RadioIcon";
-import { questionStore, resetSomeField } from "@root/questions";
+import InfoIcon from "../../assets/icons/Info";
 
 export default function BranchingQuestions() {
   const { openedModalSettings } = questionStore();
@@ -52,6 +53,7 @@ export default function BranchingQuestions() {
         <Box
           sx={{
             position: "absolute" as "absolute",
+            overflow: "hidden",
             top: "50%",
             left: "50%",
             transform: "translate(-50%, -50%)",
@@ -63,6 +65,18 @@ export default function BranchingQuestions() {
             p: 0,
           }}
         >
+          <Box
+            sx={{
+              boxSizing: "border-box",
+              background: "#F2F3F7",
+              padding: "25px",
+              height: "70px",
+              display: "flex",
+            }}
+          >
+            <Typography sx={{ color: "#9A9AAF" }}>()</Typography>
+            <InfoIcon width={24} height={24} />
+          </Box>
           <Box
             sx={{
               padding: "20px",
@@ -140,7 +154,7 @@ export default function BranchingQuestions() {
                       display: "flex",
                       alignItems: "center",
                       gap: "20px",
-                      p: "4px",
+                      padding: "10px",
                       borderRadius: "5px",
                       color: theme.palette.grey2.main,
                     }}
@@ -153,7 +167,7 @@ export default function BranchingQuestions() {
                       display: "flex",
                       alignItems: "center",
                       gap: "20px",
-                      p: "4px",
+                      padding: "10px",
                       borderRadius: "5px",
                       color: theme.palette.grey2.main,
                     }}
@@ -162,11 +176,27 @@ export default function BranchingQuestions() {
                   </MenuItem>
                 </Select>
               </FormControl>
-              <Typography sx={{ color: theme.palette.grey2.main }}>если в ответе на вопрос</Typography>
+              <Typography sx={{ color: theme.palette.grey2.main }}>
+                если в ответе на вопрос
+              </Typography>
             </Box>
             {condition ? (
-              <Box sx={{ padding: "20px", borderRadius: "8px", height: "100%", bgcolor: "#F2F3F7" }}>
-                <Box sx={{ display: "flex", justifyContent: "space-between", alignItems: "center", pb: "14px" }}>
+              <Box
+                sx={{
+                  padding: "20px",
+                  borderRadius: "8px",
+                  height: "100%",
+                  bgcolor: "#F2F3F7",
+                }}
+              >
+                <Box
+                  sx={{
+                    display: "flex",
+                    justifyContent: "space-between",
+                    alignItems: "center",
+                    pb: "14px",
+                  }}
+                >
                   <Typography>Условие 1</Typography>
                   <IconButton sx={{ borderRadius: "6px", padding: "2px" }}>
                     <DeleteIcon color={"#4D4D4D"} />
@@ -195,7 +225,9 @@ export default function BranchingQuestions() {
                 />
                 <Box sx={{ display: "flex", alignItems: "center", pb: "14px" }}>
                   <Typography>Дан ответ</Typography>
-                  <Typography sx={{ color: "#7E2AEA", pl: "10px" }}>(Укажите один или несколько вариантов)</Typography>
+                  <Typography sx={{ color: "#7E2AEA", pl: "10px" }}>
+                    (Укажите один или несколько вариантов)
+                  </Typography>
                 </Box>
                 <TextField
                   // value={text}
@@ -230,7 +262,10 @@ export default function BranchingQuestions() {
               <Link
                 component="button"
                 variant="body2"
-                sx={{ color: theme.palette.brightPurple.main }}
+                sx={{
+                  color: theme.palette.brightPurple.main,
+                  marginBottom: "10px",
+                }}
                 onClick={() => setCondition(true)}
               >
                 Добавить условие
@@ -246,23 +281,48 @@ export default function BranchingQuestions() {
                   <FormControlLabel
                     sx={{ color: theme.palette.grey2.main }}
                     value="1"
-                    control={<Radio checkedIcon={<RadioCheck />} icon={<RadioIcon />} />}
+                    control={
+                      <Radio
+                        checkedIcon={<RadioCheck />}
+                        icon={<RadioIcon />}
+                      />
+                    }
                     label="Все условия обязательны"
                   />
                   <FormControlLabel
                     sx={{ color: theme.palette.grey2.main }}
                     value="2"
-                    control={<Radio checkedIcon={<RadioCheck />} icon={<RadioIcon />} />}
+                    control={
+                      <Radio
+                        checkedIcon={<RadioCheck />}
+                        icon={<RadioIcon />}
+                      />
+                    }
                     label="Обязательно хотя бы одно условие"
                   />
                 </RadioGroup>
               </FormControl>
             </Box>
             <Box sx={{ display: "flex", justifyContent: "end", gap: "10px" }}>
-              <Button variant="outlined" onClick={handleClose}>
+              <Button
+                variant="outlined"
+                onClick={handleClose}
+                sx={{
+                  width: "100%",
+                  maxWidth: "130px",
+                }}
+              >
                 Отмена
               </Button>
-              <Button variant="contained">Готово</Button>
+              <Button
+                variant="contained"
+                sx={{
+                  width: "100%",
+                  maxWidth: "130px",
+                }}
+              >
+                Готово
+              </Button>
             </Box>
           </Box>
         </Box>