кастомные радиокнопки и свич-ползунки исправила и поменяла во всем проекте

src/components/SwichResult.tsx

@@ -1,12 +1,16 @@
-import { Box, IconButton, Typography } from "@mui/material";
+import {Box, FormControlLabel, IconButton, Typography} from "@mui/material";
 import { useState } from "react";
+import CustomizedSwitch from "@ui_kit/CustomSwitch";
+import * as React from "react";
 
-type Props = {
+interface Props {
   text: string;
   icon: any;
-};
+  onClick?: () => void
-export const SwitchSetting = ({ text, icon }: Props) => {
+}
-  const [active, setActive] = useState<boolean>(false);
+
+export const SwitchSetting = ({ text, icon, onClick }: Props) => {
+  // const [active, setActive] = useState<boolean>(false);
   return (
     <Box
       sx={{
@@ -19,26 +23,43 @@ export const SwitchSetting = ({ text, icon }: Props) => {
         alignItems: "center",
       }}
     >
-      <Box sx={{ display: "flex", alignItems: "center", justifyContent: "left" }}>
+      <Box sx={{ display: "flex", alignItems: "center", justifyContent: "left", maxWidth: "756px", width: "100%" }}>
         <img src={icon} alt="icon" />
-        <Typography sx={{ color: "#9A9AAF", ml: "14px" }}>{text}</Typography>
+        {/*<Typography sx={{ color: "#9A9AAF", ml: "14px" }}>{text}</Typography>*/}
+          <FormControlLabel
+              value="start"
+              control={<CustomizedSwitch/>}
+              label={text}
+              labelPlacement="start"
+              sx={{
+                  display: 'flex',
+                  justifyContent: 'space-between',
+                  color: "#9A9AAF",
+                  width: "100%",
+                  paddingRight: "15px"
+              }}
+              onClick={onClick}
+
+          />
       </Box>
 
-      <IconButton disableRipple onClick={() => setActive(!active)}>
+
-        <svg width="52" height="30" viewBox="0 0 52 30" fill="none" xmlns="http://www.w3.org/2000/svg">
+
-          <rect width="52" height="30" rx="15" fill={active ? "#7E2AEA" : "#9A9AAF"} />
+      {/*<IconButton disableRipple onClick={() => setActive(!active)}>*/}
-          <rect
+      {/*  <svg width="52" height="30" viewBox="0 0 52 30" fill="none" xmlns="http://www.w3.org/2000/svg">*/}
-            x={active ? "23" : "1"}
+      {/*    <rect width="52" height="30" rx="15" fill={active ? "#7E2AEA" : "#9A9AAF"} />*/}
-            y="1"
+      {/*    <rect*/}
-            width="28"
+      {/*      x={active ? "23" : "1"}*/}
-            height="28"
+      {/*      y="1"*/}
-            rx="14"
+      {/*      width="28"*/}
-            fill="white"
+      {/*      height="28"*/}
-            stroke={active ? "#7E2AEA" : "#9A9AAF"}
+      {/*      rx="14"*/}
-            strokeWidth="2"
+      {/*      fill="white"*/}
-          />
+      {/*      stroke={active ? "#7E2AEA" : "#9A9AAF"}*/}
-        </svg>
+      {/*      strokeWidth="2"*/}
-      </IconButton>
+      {/*    />*/}
+      {/*  </svg>*/}
+      {/*</IconButton>*/}
     </Box>
   );
 };

src/index.tsx

@@ -21,7 +21,7 @@ import QuestionsPage from "./pages/Questions/QuestionsPage";
 import ContactFormPage from "./pages/ContactFormPage/ContactFormPage";
 import InstallQuiz from "./pages/InstallQuiz/InstallQuiz";
 import {Result} from "./pages/Result/Result";
-import { Setting } from "./pages/Setting";
+import { Setting } from "./pages/Result/Setting";
 
 const root = ReactDOM.createRoot(
     document.getElementById('root') as HTMLElement

src/pages/ContactFormPage/BranchingForm.tsx

@@ -13,6 +13,8 @@ import * as React from "react";
 import CustomButton from "../../components/CustomButton";
 import SelectableButton from "../../components/CreateQuiz/SelectableButton";
 import {useState} from "react";
+import RadioCheck from "@ui_kit/RadioCheck";
+import RadioIcon from "@ui_kit/RadioIcon";
 
 type LogicForm = "conditions" | "results";
 
@@ -111,8 +113,8 @@ export default function BranchingForm() {
                                             value={value}
                                             onChange={handleChangeRadio}
                                         >
-                                            <FormControlLabel sx={{color: theme.palette.grey2.main}} value="1" control={<Radio />} label="Все условия обязательны" />
+                                            <FormControlLabel sx={{color: theme.palette.grey2.main}} value="1" control={<Radio checkedIcon={<RadioCheck/>} icon={<RadioIcon/>}/>} label="Все условия обязательны" />
-                                            <FormControlLabel sx={{color: theme.palette.grey2.main}} value="2" control={<Radio />} label="Обязательно хотя бы одно условие" />
+                                            <FormControlLabel sx={{color: theme.palette.grey2.main}} value="2" control={<Radio checkedIcon={<RadioCheck/>} icon={<RadioIcon/>}/>} label="Обязательно хотя бы одно условие" />
                                         </RadioGroup>
                                     </FormControl>
                                 </>

src/pages/ContactFormPage/NewField/SwitchNewField.tsx

@@ -1,8 +1,8 @@
 import * as React from 'react';
 import NewFieldParent from "./NewFieldParent";
-import {FormControlLabel, Switch} from "@mui/material";
+import {FormControlLabel} from "@mui/material";
 import SelectMask from "../SelectMask";
-import CustomSwitch from "@ui_kit/CustomSwitch";
+import CustomizedSwitch from "@ui_kit/CustomSwitch";
 
 
 
@@ -30,7 +30,7 @@ export default function SwitchNewField({switchState ='name'}: Props) {
                 <NewFieldParent placeholderHelp={'Введите номер'} placeholderField={'+7 900 000 00 00'} defaultValue={'phone'}>
                     <FormControlLabel
                         value="start"
-                        control={<CustomSwitch/>}
+                        control={<CustomizedSwitch/>}
                         label="Маска для телефона"
                         labelPlacement="start"
                         sx={{
@@ -42,6 +42,7 @@ export default function SwitchNewField({switchState ='name'}: Props) {
                         }}
 
                     />
+
                     {SwitchMask ?
                         <SelectMask/>
                         :

src/pages/InstallQuiz/BannerInstall.tsx

@@ -19,6 +19,8 @@ import Accordion from "@mui/material/Accordion";
 import AccordionSummary from "@mui/material/AccordionSummary";
 import ExpandMoreIcon from "@mui/icons-material/ExpandMore";
 import AccordionDetails from "@mui/material/AccordionDetails";
+import RadioCheck from "@ui_kit/RadioCheck";
+import RadioIcon from "@ui_kit/RadioIcon";
 
 
 
@@ -130,25 +132,25 @@ export default function BannerInstall () {
                                 <FormControlLabel
                                     sx={{ color: theme.palette.grey2.main }}
                                     value="1"
-                                    control={<Radio />}
+                                    control={<Radio checkedIcon={<RadioCheck/>} icon={<RadioIcon/>}/>}
                                     label="Слева сверху"
                                 />
                                 <FormControlLabel
                                     sx={{ color: theme.palette.grey2.main }}
                                     value="2"
-                                    control={<Radio />}
+                                    control={<Radio checkedIcon={<RadioCheck/>} icon={<RadioIcon/>}/>}
                                     label="Справа сверху"
                                 />
                                 <FormControlLabel
                                     sx={{ color: theme.palette.grey2.main }}
                                     value="3"
-                                    control={<Radio />}
+                                    control={<Radio checkedIcon={<RadioCheck/>} icon={<RadioIcon/>}/>}
                                     label="Слева снизу"
                                 />
                                 <FormControlLabel
                                     sx={{ color: theme.palette.grey2.main }}
                                     value="4"
-                                    control={<Radio />}
+                                    control={<Radio checkedIcon={<RadioCheck/>} icon={<RadioIcon/>}/>}
                                     label="Справа снизу"
                                 />
                             </RadioGroup>
@@ -185,13 +187,13 @@ export default function BannerInstall () {
                                 <FormControlLabel
                                     sx={{ color: theme.palette.grey2.main }}
                                     value="1"
-                                    control={<Radio />}
+                                    control={<Radio checkedIcon={<RadioCheck/>} icon={<RadioIcon/>}/>}
                                     label="Сверху страницы"
                                 />
                                 <FormControlLabel
                                     sx={{ color: theme.palette.grey2.main }}
                                     value="2"
-                                    control={<Radio />}
+                                    control={<Radio checkedIcon={<RadioCheck/>} icon={<RadioIcon/>}/>}
                                     label="Снизу страницы"
                                 />
                             </RadioGroup>

src/pages/InstallQuiz/VidjetInstall.tsx

@@ -13,10 +13,10 @@ import React, {useState} from "react";
 import InstallQzOnSiteParent from "./InstallQzOnSiteParent";
 import CustomCheckbox from "@ui_kit/CustomCheckbox";
 import VidjetImg from "../../assets/VidjetImg.png"
-import SelectableButton from "../../components/CreateQuiz/SelectableButton";
 import LDownButton from "@icons/InstallQuizIcon/LDownButton";
 import RDownButton from "@icons/InstallQuizIcon/RDownButton";
-import CustomRadio from "@ui_kit/CustomRadio";
+import RadioCheck from "@ui_kit/RadioCheck";
+import RadioIcon from "@ui_kit/RadioIcon";
 
 
 
@@ -104,13 +104,23 @@ export default function VidjetInstall () {
                         <FormControlLabel
                             sx={{ color: theme.palette.grey2.main }}
                             value="1"
-                            control={<CustomRadio/>}
+                            control={
+                                <Radio
+                                checkedIcon={<RadioCheck/>}
+                                icon={<RadioIcon/>}
+                                />
+                            }
                             label="Да"
                         />
                         <FormControlLabel
                             sx={{ color: theme.palette.grey2.main }}
                             value="2"
-                            control={<CustomRadio />}
+                            control={
+                                <Radio
+                                    checkedIcon={<RadioCheck/>}
+                                    icon={<RadioIcon/>}
+                                />
+                            }
                             label="Нет"
                         />
                     </RadioGroup>

src/pages/Questions/branchingQuestions.tsx

@@ -21,6 +21,8 @@ import ArrowDown from "../../assets/icons/ArrowDownIcon";
 import CustomButton from "../../components/CustomButton";
 import { useState } from "react";
 import DeleteIcon from "../../assets/icons/questionsPage/deleteIcon";
+import RadioCheck from "@ui_kit/RadioCheck";
+import RadioIcon from "@ui_kit/RadioIcon";
 
 export default function BranchingQuestions() {
   const theme = useTheme();
@@ -246,13 +248,13 @@ export default function BranchingQuestions() {
                   <FormControlLabel
                     sx={{ color: theme.palette.grey2.main }}
                     value="1"
-                    control={<Radio />}
+                    control={<Radio checkedIcon={<RadioCheck/>} icon={<RadioIcon/>}/>}
                     label="Все условия обязательны"
                   />
                   <FormControlLabel
                     sx={{ color: theme.palette.grey2.main }}
                     value="2"
-                    control={<Radio />}
+                    control={<Radio checkedIcon={<RadioCheck/>} icon={<RadioIcon/>}/>}
                     label="Обязательно хотя бы одно условие"
                   />
                 </RadioGroup>

src/pages/Result/Setting.tsx

@@ -1,16 +1,16 @@
 import { Box, Button, Typography, useTheme } from "@mui/material";
 
-import { SettingForm } from "./Result/SettingForm";
+import { SettingForm } from "./SettingForm";
-import { DescriptionForm } from "../components/DescriptionForm/DescriptionForm";
+import { DescriptionForm } from "../../components/DescriptionForm/DescriptionForm";
-import { ResultListForm } from "../components/ResultListForm";
+import { ResultListForm } from "../../components/ResultListForm";
 
-import CustomWrapper from "../components/CustomWrapper";
+import CustomWrapper from "../../components/CustomWrapper";
-import CustomButton from "../components/CustomButton";
+import CustomButton from "../../components/CustomButton";
-import BackButton from "../components/Button/BackButton";
+import BackButton from "../../components/Button/BackButton";
 
-import Plus from "../assets/icons/Plus";
+import Plus from "@icons/Plus";
-import Info from "../assets/icons/Info";
+import Info from "@icons/Info";
-import IconPlus from "../assets/icons/IconPlus";
+import IconPlus from "@icons/IconPlus";
 
 export const Setting = () => {
   const theme = useTheme();

src/pages/Result/SettingForm.tsx

@@ -29,8 +29,8 @@ const buttonSetting: { title: string; sx: SxProps<Theme>; type: string }[] = [
 ];
 
 export const SettingForm = () => {
-  const [activeIndex, setActiveIndex] = useState<number>();
+  const [activeIndex, setActiveIndex] = useState<number>(0);
-  const [typeActive, setTypeActive] = useState<string>();
+  const [typeActive, setTypeActive] = useState<string>("toContactForm");
 
   const active = (index: number, type: string) => {
     setActiveIndex(index);

src/ui_kit/CustomSwitch.tsx

@@ -1,24 +1,37 @@
-import {IconButton} from "@mui/material";
+import {Switch, SwitchProps} from "@mui/material";
-import {useState} from "react";
+import {styled} from "@mui/material/styles";
 
-
+export default styled((props: SwitchProps) => (
-export default function CustomSwitch () {
+        <Switch focusVisibleClassName=".Mui-focusVisible" disableRipple {...props} />))
-    const [active, setActive] = useState<boolean>(false);
+(() => ({
-    return (
+        width: 52,
-        <IconButton onClick={() => setActive(!active)}>
+        height: 31,
-            <svg width="52" height="30" viewBox="0 0 52 30" fill="none" xmlns="http://www.w3.org/2000/svg">
+        padding: 0,
-                <rect width="52" height="30" rx="15" fill={active ? "#7E2AEA" : "#9A9AAF"} />
+        '& .MuiSwitch-switchBase': {
-                <rect
+            padding: 0,
-                    x={active ? "23" : "1"}
+            margin: 2,
-                    y="1"
+            transitionDuration: '300ms',
-                    width="28"
+            '&.Mui-checked': {
-                    height="28"
+                transform: 'translateX(21px)',
-                    rx="14"
+                color: '#fff',
-                    fill="white"
+                '& + .MuiSwitch-track': {
-                    stroke={active ? "#7E2AEA" : "#9A9AAF"}
+                    backgroundColor: '#7E2AEA',
-                    strokeWidth="2"
+                    opacity: 1,
-                />
+                    border: 0,
-            </svg>
+                },
-        </IconButton>
+            },
-    )
+            '&.Mui-disabled .MuiSwitch-thumb': {
-}
+                color: '#9A9AAF',
+                boxShadow: 'none'
+            },
+        },
+        '& .MuiSwitch-thumb': {
+            boxSizing: 'border-box',
+            width: 27,
+            height: 27,
+        },
+        '& .MuiSwitch-track': {
+            borderRadius: 40 / 2,
+            backgroundColor: '#9A9AAF'
+        },
+    }));

src/ui_kit/RadioCheck.tsx

@@ -0,0 +1,24 @@
+import { Box, useTheme } from "@mui/material";
+
+
+export default function RadioCheck() {
+    const theme = useTheme();
+
+    return (
+        <Box
+
+            sx={{
+                height: "26px",
+                width: "26px",
+                display: "flex",
+                alignItems: "center",
+                justifyContent: "center",
+            }}
+        >
+            <svg width="26" height="26" viewBox="0 0 26 26" fill="none" xmlns="http://www.w3.org/2000/svg">
+                <rect x="0.5" y="0.5" width="25" height="25" rx="12.5" fill="#7E2AEA" stroke="#7E2AEA"/>
+                <rect x="8" y="8" width="10" height="10" rx="5" fill="white"/>
+            </svg>
+        </Box>
+    );
+}

src/ui_kit/RadioIcon.tsx

@@ -0,0 +1,23 @@
+import { Box, useTheme } from "@mui/material";
+
+
+export default function RadioIcon() {
+    const theme = useTheme();
+
+    return (
+        <Box
+
+            sx={{
+                height: "26px",
+                width: "26px",
+                display: "flex",
+                alignItems: "center",
+                justifyContent: "center",
+            }}
+        >
+            <svg width="26" height="26" viewBox="0 0 26 26" fill="none" xmlns="http://www.w3.org/2000/svg">
+                <rect x="0.5" y="0.5" width="25" height="25" rx="12.5" fill="#F2F3F7" stroke="#9A9AAF"/>
+            </svg>
+        </Box>
+    );
+}