кастомный аккордион и мелкие правки по пректу

src/assets/icons/ExpandIcon.tsx

@@ -9,7 +9,7 @@ export default function ExpandIcon({ isExpanded }: Props) {
     const theme = useTheme();
 
     return (
-        <svg xmlns="http://www.w3.org/2000/svg" width="32" height="33" viewBox="0 0 32 33" fill="none">
+        <svg style={{ transform: isExpanded ? "rotate(180deg)" : undefined }} xmlns="http://www.w3.org/2000/svg" width="32" height="33" viewBox="0 0 32 33" fill="none">
             <path d="M16 28.7949C22.6274 28.7949 28 23.4223 28 16.7949C28 10.1675 22.6274 4.79492 16 4.79492C9.37258 4.79492 4 10.1675 4 16.7949C4 23.4223 9.37258 28.7949 16 28.7949Z" stroke={isExpanded ? theme.palette.orange.main : theme.palette.brightPurple.main} strokeWidth="2" strokeMiterlimit="10" />
             <path d="M20.5 15.2949L16 20.2949L11.5 15.2949" stroke={isExpanded ? theme.palette.orange.main : theme.palette.brightPurple.main} strokeWidth="2" strokeLinecap="round" strokeLinejoin="round" />
         </svg>

src/assets/icons/questionsPage/arrowLeft.tsx

@@ -16,8 +16,8 @@ export default function ArrowLeft() {
             }}
         >
             <svg width="25" height="24" viewBox="0 0 25 24" fill="none" xmlns="http://www.w3.org/2000/svg">
-                <path d="M20.75 12H4.25" stroke="#7E2AEA" stroke-width="1.5" stroke-linecap="round" stroke-linejoin="round"/>
+                <path d="M20.75 12H4.25" stroke="#7E2AEA" strokeWidth="1.5" strokeLinecap="round" strokeLinejoin="round"/>
-                <path d="M11 5.25L4.25 12L11 18.75" stroke="#7E2AEA" stroke-width="1.5" stroke-linecap="round" stroke-linejoin="round"/>
+                <path d="M11 5.25L4.25 12L11 18.75" stroke="#7E2AEA" strokeWidth="1.5" strokeLinecap="round" strokeLinejoin="round"/>
             </svg>
 
         </Box>

src/components/Navbar/NavbarCollapsed.tsx

@@ -1,7 +1,7 @@
 import { IconButton, useTheme } from "@mui/material";
 import SectionWrapper from "../SectionWrapper";
 import MenuIcon from "@mui/icons-material/Menu";
-import PenaLogo from "../PenaLogo";
+import PenaLogo from "@ui_kit/PenaLogo";
 
 
 interface Props {

src/components/Navbar/NavbarCreateQuiz.tsx

@@ -3,7 +3,7 @@ import CustomButton from "../CustomButton";
 import BackArrowIcon from "../../assets/icons/BackArrowIcon";
 import EyeIcon from "../../assets/icons/EyeIcon";
 import NavMenuItem from "../NavMenuItem";
-import PenaLogo from "../PenaLogo";
+import PenaLogo from "@ui_kit/PenaLogo";
 import CustomAvatar from "./Avatar";
 
 

src/pages/InstallQuiz/AutoOpenInstall.tsx

@@ -1,4 +1,4 @@
-import {Box, FormControl, TextField, Typography, useTheme} from "@mui/material";
+import {Box, Checkbox, FormControl, FormControlLabel, TextField, Typography, useTheme} from "@mui/material";
 import Dots from "../../assets/dots.png";
 import React from "react";
 import InstallQzOnSiteParent from "./InstallQzOnSiteParent";
@@ -7,6 +7,17 @@ import InfoIcon from "../../assets/icons/InfoIcon";
 
 export default function AutoOpenInstall () {
     const theme = useTheme();
+
+    const [checked, setChecked] = React.useState([true, false]);
+
+    const handleChange1 = (event: React.ChangeEvent<HTMLInputElement>) => {
+        setChecked([event.target.checked, checked[1]]);
+    };
+
+    const handleChange2 = (event: React.ChangeEvent<HTMLInputElement>) => {
+        setChecked([checked[0], event.target.checked, ]);
+    };
+
     return (
         <InstallQzOnSiteParent>
             {/*левая часть*/}
@@ -18,7 +29,6 @@ export default function AutoOpenInstall () {
                         borderRadius: '6px',
                         maxWidth: '560px',
                         height: '364px',
-                        // height: '100%'
                     }}
                 >
                     <Box
@@ -66,59 +76,70 @@ export default function AutoOpenInstall () {
             {/*правая часть*/}
             <Box sx={{display: "flex", flexDirection: "column", gap: "15px"}}>
                 <Box sx={{display: "flex", alignItems: "center"}}>
-                    <CustomCheckbox label={"Автооткрытие квиза"}/>
+                    <CustomCheckbox label={"Автооткрытие квиза"} checked={checked[0]} handleChange={handleChange1}/>
                     <InfoIcon/>
                 </Box>
-                <Box sx={{display: "flex", alignItems: "center"}}>
+                <Box sx={{display: "flex", alignItems: "center"}} >
-                    <CustomCheckbox label={"Открывать квиз при попытке уйти с сайта"}/>
+                    <CustomCheckbox label={"Открывать квиз при попытке уйти с сайта"} checked={checked[1]} handleChange={handleChange2}/>
                     <InfoIcon/>
                 </Box>
-                
+                {checked[0] ?
-                <Box>
+                    <Box>
-                    <Box sx={{padding: "15px 0", display: "flex", gap: "10px", alignItems: "center", borderTop: "1px solid #9A9AAF"}}>
+                        <Box sx={{padding: "15px 0", display: "flex", gap: "10px", alignItems: "center", borderTop: "1px solid #9A9AAF"}}>
-                        <Typography sx={{color: theme.palette.grey2.main}}>Показывать через</Typography>
+                            <Typography sx={{color: theme.palette.grey2.main}}>Показывать через</Typography>
-                        <FormControl
+                            <FormControl
-                            fullWidth
-                            variant="standard"
-                            sx={{ p: 0, width: "60px", }}
-                        >
-                            <TextField
                                 fullWidth
-                                placeholder="10"
+                                variant="standard"
-                                sx={{
+                                sx={{ p: 0, width: "60px", }}
-                                    "& .MuiInputBase-root": {
+                            >
-                                        backgroundColor: theme.palette.background.default,
+                                <TextField
-                                        height: "48px",
+                                    fullWidth
-                                        width: "60px",
+                                    placeholder="10"
-                                        borderRadius: "10px",
+                                    sx={{
+                                        "& .MuiInputBase-root": {
+                                            backgroundColor: theme.palette.background.default,
+                                            height: "48px",
+                                            width: "60px",
+                                            borderRadius: "10px",
 
-                                    },
+                                        },
-                                }}
+                                    }}
-                                inputProps={{
+                                    inputProps={{
-                                    sx: {
+                                        sx: {
-                                        borderRadius: "10px",
+                                            borderRadius: "10px",
-                                        fontSize: "18px",
+                                            fontSize: "18px",
-                                        lineHeight: "21px",
+                                            lineHeight: "21px",
-                                        py: 0,
+                                            py: 0,
+
+                                        }
+                                    }}
+                                />
+                            </FormControl>
+                            <Typography sx={{color: theme.palette.grey2.main}}>секунд</Typography>
+                        </Box>
+                        <Box sx={{display: "flex", flexDirection: "column", }}>
+                            <CustomCheckbox label={"Открывать каждый раз"}/>
+                            <CustomCheckbox label={"Отключать автооткрытие на мобильных устройствах"}/>
+                        </Box>
 
-                                    }
-                                }}
-                            />
-                        </FormControl>
-                        <Typography sx={{color: theme.palette.grey2.main}}>секунд</Typography>
                     </Box>
-                    <Box sx={{display: "flex", flexDirection: "column", }}>
+                    :
+                    <></>
+                }
+
+                {checked[1] ?
+                    <Box sx={{
+                        borderTop: "1px solid #9A9AAF",
+                        display: "flex",
+                        flexDirection: "column",
+                        padding: "15px 0"
+                    }}>
                         <CustomCheckbox label={"Открывать каждый раз"}/>
                         <CustomCheckbox label={"Отключать автооткрытие на мобильных устройствах"}/>
                     </Box>
-
+                    :
-                </Box>
+                    <></>
-                
+                }
-                <Box sx={{ borderTop: "1px solid #9A9AAF", display: "flex", flexDirection: "column", padding: "15px 0"}}>
-                    <CustomCheckbox label={"Открывать каждый раз"}/>
-                    <CustomCheckbox label={"Отключать автооткрытие на мобильных устройствах"}/>
-                </Box>
-
             </Box>
         </InstallQzOnSiteParent>
     )

src/pages/InstallQuiz/BannerInstall.tsx

@@ -10,20 +10,16 @@ import {
     useTheme
 } from "@mui/material";
 import InstallQzOnSiteParent from "./InstallQzOnSiteParent";
-import React from "react";
+import React, {useState} from "react";
 import BannerImg from "../../assets/BannerImg.png"
 import CustomTextField from "@ui_kit/CustomTextField";
-import Dots from "../../assets/dots.png";
 import CustomCheckbox from "@ui_kit/CustomCheckbox";
-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";
+import AccordMy from "@ui_kit/Accordion";
 
 
-
+type isExpanded = "panel1" | "panel2"
 export default function BannerInstall () {
     const theme = useTheme();
 
@@ -39,12 +35,7 @@ export default function BannerInstall () {
         setValue2((event.target as HTMLInputElement).value);
     };
 
-    const [expanded, setExpanded] = React.useState<string | false>("panel1");
+        const [isExpanded, setIsExpanded] = useState<isExpanded>("panel1");
-
-    const handleChange =
-        (panel: string) => (event: React.SyntheticEvent, isExpanded: boolean) => {
-            setExpanded(isExpanded ? panel : false);
-        };
 
     return (
         <InstallQzOnSiteParent>
@@ -109,26 +100,18 @@ export default function BannerInstall () {
                     </Box>
                 </Box>
 
+                <AccordMy header={"Баннер сбоку экрана"} isExpanded={isExpanded === "panel1"} onClick={() => setIsExpanded("panel1")} sx={{display: "flex", flexDirection: 'column',}}>
+                    <Typography sx={{color: theme.palette.grey2.main}}>Расположение</Typography>
+                    <FormControl>
 
-                <Accordion expanded={expanded === 'panel1'} onChange={handleChange('panel1')} sx={{boxShadow: "none", "&.css-14nk2kd-MuiPaper-root-MuiAccordion-root::before": {display: "none", backgroundColor: "none"}, margin: 0}}>
+                        <RadioGroup
-                    <AccordionSummary
+                            aria-labelledby="demo-controlled-radio-buttons-group"
-                        expandIcon={<ExpandMoreIcon />}
+                            name="controlled-radio-buttons-group"
-                        aria-controls="panel1bh-content"
+                            value={value}
-                        id="panel1bh-header"
+                            onChange={handleChangeRadio}
-                        sx={{"&.css-o4b71y-MuiAccordionSummary-content.Mui-expanded": {margin: 0}}}
+                            sx={{maxWidth: "380px", display: "flex", flexWrap: "wrap", flexDirection: "row", paddingLeft: "5px", justifyContent: "space-between"}}
-                    >
+                        >
-                        <Typography sx={{padding: '10px 0'}}>Баннер сбоку экрана</Typography>
+                            <Box sx={{display: "flex", flexDirection: "column"}}>
-                    </AccordionSummary>
-                    <AccordionDetails sx={{display: "flex", flexDirection: 'column',}}>
-                        <Typography sx={{color: theme.palette.grey2.main}}>Расположение</Typography>
-                        <FormControl>
-                            <RadioGroup
-                                aria-labelledby="demo-controlled-radio-buttons-group"
-                                name="controlled-radio-buttons-group"
-                                value={value}
-                                onChange={handleChangeRadio}
-                                sx={{maxWidth: "365px", display: "flex", flexWrap: "wrap", flexDirection: "row"}}
-                            >
                                 <FormControlLabel
                                     sx={{ color: theme.palette.grey2.main }}
                                     value="1"
@@ -141,6 +124,8 @@ export default function BannerInstall () {
                                     control={<Radio checkedIcon={<RadioCheck/>} icon={<RadioIcon/>}/>}
                                     label="Справа сверху"
                                 />
+                            </Box>
+                            <Box sx={{display: "flex", flexDirection: "column"}}>
                                 <FormControlLabel
                                     sx={{ color: theme.palette.grey2.main }}
                                     value="3"
@@ -153,60 +138,50 @@ export default function BannerInstall () {
                                     control={<Radio checkedIcon={<RadioCheck/>} icon={<RadioIcon/>}/>}
                                     label="Справа снизу"
                                 />
-                            </RadioGroup>
+                            </Box>
-                        </FormControl>
-                        <Typography sx={{color: theme.palette.grey2.main}}>Параметры</Typography>
-                        <CustomCheckbox label={"Закругленная"}/>
-                        <CustomCheckbox label={"С тенью"}/>
-                        <CustomCheckbox label={"С бликом"}/>
-                        <CustomCheckbox label={'Эффект "пульсация"'}/>
-                        <CustomCheckbox label={"Отключить на мобильных устройствах"}/>
-                    </AccordionDetails>
-                </Accordion>
-                <Accordion expanded={expanded === 'panel2'} onChange={handleChange('panel2')} sx={{boxShadow: "none", borderTop: '1px solid #9A9AAF', borderBottom: '1px solid #9A9AAF', borderRadius: 0}}>
-                    <AccordionSummary
-                        expandIcon={<ExpandMoreIcon />}
-                        aria-controls="panel2bh-content"
-                        id="panel2bh-header"
-                        sx={{margin: 0}}
-                    >
-                        <Typography>Баннер на всю ширину экрана</Typography>
 
-                    </AccordionSummary>
-                    <AccordionDetails sx={{display: "flex", flexDirection: 'column',}}>
-                        <Typography sx={{color: theme.palette.grey2.main}}>Расположение</Typography>
 
-                        <FormControl>
+                        </RadioGroup>
-                            <RadioGroup
+                    </FormControl>
-                                aria-labelledby="demo-controlled-radio-buttons-group"
+                    <Typography sx={{color: theme.palette.grey2.main}}>Параметры</Typography>
-                                name="controlled-radio-buttons-group"
+                    <CustomCheckbox label={"Закругленная"}/>
-                                value={value2}
+                    <CustomCheckbox label={"С тенью"}/>
-                                onChange={handleChangeRadio2}
+                    <CustomCheckbox label={"С бликом"}/>
-                                sx={{maxWidth: "365px", display: "flex", flexWrap: "wrap", flexDirection: "row"}}
+                    <CustomCheckbox label={'Эффект "пульсация"'}/>
-                            >
+                    <CustomCheckbox label={"Отключить на мобильных устройствах"}/>
-                                <FormControlLabel
+                </AccordMy>
-                                    sx={{ color: theme.palette.grey2.main }}
+                <AccordMy header={"Баннер на всю ширину экрана"} isExpanded={isExpanded === "panel2"} onClick={() => setIsExpanded("panel2")} sx={{display: "flex", flexDirection: 'column',}}>
-                                    value="1"
+                    <Typography sx={{color: theme.palette.grey2.main}}>Расположение</Typography>
-                                    control={<Radio checkedIcon={<RadioCheck/>} icon={<RadioIcon/>}/>}
-                                    label="Сверху страницы"
-                                />
-                                <FormControlLabel
-                                    sx={{ color: theme.palette.grey2.main }}
-                                    value="2"
-                                    control={<Radio checkedIcon={<RadioCheck/>} icon={<RadioIcon/>}/>}
-                                    label="Снизу страницы"
-                                />
-                            </RadioGroup>
-                        </FormControl>
 
-                        <Typography sx={{color: theme.palette.grey2.main}}>Параметры</Typography>
+                    <FormControl>
-                        <CustomCheckbox label={"С тенью"}/>
+                        <RadioGroup
-                        <CustomCheckbox label={"С бликом"}/>
+                            aria-labelledby="demo-controlled-radio-buttons-group"
-                        <CustomCheckbox label={'Эффект "пульсация"'}/>
+                            name="controlled-radio-buttons-group"
-                        <CustomCheckbox label={"Отключить на мобильных устройствах"}/>
+                            value={value2}
+                            onChange={handleChangeRadio2}
+                            sx={{maxWidth: "365px", display: "flex", flexWrap: "wrap", flexDirection: "row", paddingLeft: "5px",}}
+                        >
+                            <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 checkedIcon={<RadioCheck/>} icon={<RadioIcon/>}/>}
+                                label="Снизу страницы"
+                            />
+                        </RadioGroup>
+                    </FormControl>
 
-                    </AccordionDetails>
+                    <Typography sx={{color: theme.palette.grey2.main}}>Параметры</Typography>
-                </Accordion>
+                    <CustomCheckbox label={"С тенью"}/>
+                    <CustomCheckbox label={"С бликом"}/>
+                    <CustomCheckbox label={'Эффект "пульсация"'}/>
+                    <CustomCheckbox label={"Отключить на мобильных устройствах"}/>
+                </AccordMy>
                 <Link
                     component='button'
                     // onClick={}
@@ -215,7 +190,8 @@ export default function BannerInstall () {
                         lineHeight: "19px",
                         color: theme.palette.brightPurple.main,
                         textDecorationColor: theme.palette.brightPurple.main,
-                        textAlign: 'left'
+                        textAlign: 'left',
+                        padding: "15px 0",
                     }}>+ Автооткрытие квиза</Link>
             </Box>
         </InstallQzOnSiteParent>

src/pages/InstallQuiz/InstallQuiz.tsx

@@ -34,6 +34,7 @@ import BannerInstall from "./BannerInstall";
 import InBodyInstall from "./InBodyInstall";
 import AutoOpenInstall from "./AutoOpenInstall";
 import VidjetInstall from "./VidjetInstall";
+import InstallQzCode from "./InstallQzCode";
 
 type BackgroundType = "text" | "video";
 
@@ -312,11 +313,12 @@ export default function InstallQuiz() {
             <InBodyInstall/>
             <AutoOpenInstall/>
             <VidjetInstall/>
+            <InstallQzCode/>
             <Box sx={{display: 'flex', gap: '8px', justifyContent: 'end', mt: '30px'}}>
                 <Button variant='outlined' sx={{padding: '10px 20px', borderRadius: '8px'}}>
                     <ArrowLeft/>
                 </Button>
-                <Button variant='contained' sx={{padding: '10px 20px', borderRadius: '8px', background: theme.palette.brightPurple.main, fontSize: '18px'}}>
+                <Button variant='contained'>
                     Запустить рекламу
                 </Button>
             </Box>

src/pages/InstallQuiz/InstallQzCode.tsx

@@ -0,0 +1,129 @@
+import InstallQzOnSiteParent from "./InstallQzOnSiteParent";
+import {
+    Box, Button,
+    FormControl,
+    IconButton,
+    InputAdornment, Link,
+    OutlinedInput,
+    TextField,
+    Typography,
+    useTheme
+} from "@mui/material";
+import CopyIcon from "@icons/CopyIcon";
+import React from "react";
+import InfoIcon from "@icons/InfoIcon";
+
+
+export default function InstallQzCode() {
+    const theme = useTheme();
+    return(
+        <InstallQzOnSiteParent  outerContainerSx={{flexDirection: "column"}}>
+            <Box sx={{display: "flex", justifyContent: "space-between"}}>
+                <Box sx={{ maxWidth: "520px", width: "100%", display: "flex", flexDirection: "column", gap: "20px"}}>
+                    <Typography>1. Код инициализации</Typography>
+                    <Typography sx={{color: theme.palette.grey2.main}}>Вставьте блок head в начале страницы</Typography>
+                    <TextField
+                        id="outlined-multiline-static"
+                        multiline
+                        rows={9}
+                        value="<script>
+                                (function(w, d, s, o){
+                                var j = d.createElement(s); j.async = true; j.src = //script.marquiz.ru/v2.js';j.onload = function() {
+                                if (document.readyState !== 'loading') Marquiz.init(o);
+                                else document.addEventListener('DOMContentLoaded', function() {
+                                Marquiz.init(o);
+                                    });"
+                        sx={{
+                            "& .MuiInputBase-root": {
+                                maxWidth: "520px",
+                                width: "100%",
+                                backgroundColor: theme.palette.background.default,
+                                fontSize: "18px", alignItems: "flex-start"
+                            }
+                        }}
+                        InputProps={{
+                            endAdornment: <InputAdornment position="start">
+                                <IconButton
+                                    edge="end"
+                                    sx={{marginTop: "22px"}}
+                                >
+                                    <CopyIcon color={'#ffffff'} bgcolor={theme.palette.brightPurple.main}/>
+                                </IconButton>
+                            </InputAdornment>
+                        }}
+                    />
+                </Box>
+                <Box sx={{ maxWidth: "520px", width: "100%", display: "flex", flexDirection: "column", gap: "20px"}}>
+                    <Typography>2. Код кнопки</Typography>
+                    <Typography sx={{color: theme.palette.grey2.main}}>Установите код в то место, где должна быть кнопка открытия квиза</Typography>
+                    <TextField
+                        id="outlined-multiline-static"
+                        multiline
+                        rows={9}
+                        value="<script>
+                                (function(w, d, s, o){
+                                var j = d.createElement(s); j.async = true; j.src = //script.marquiz.ru/v2.js';j.onload = function() {
+                                if (document.readyState !== 'loading') Marquiz.init(o);
+                                else document.addEventListener('DOMContentLoaded', function() {
+                                Marquiz.init(o);
+                                    });"
+                        sx={{
+                            "& .MuiInputBase-root": {
+                                backgroundColor: theme.palette.background.default,
+                                fontSize: "18px", alignItems: "flex-start"
+                            }
+                        }}
+                        InputProps={{
+                            endAdornment: <InputAdornment position="start">
+                                <IconButton
+                                    edge="end"
+                                    sx={{marginTop: "22px"}}
+                                >
+                                    <CopyIcon color={'#ffffff'} bgcolor={theme.palette.brightPurple.main}/>
+                                </IconButton>
+                            </InputAdornment>
+                        }}
+                    />
+                    <Box >
+                        <Button variant="contained">Отправить код программисту</Button>
+                        <Box sx={{display: "flex"}}>
+                            <Link
+                                component="button"
+                                variant="body2"
+                                sx={{color: theme.palette.brightPurple.main}}
+                                // onClick={() => {
+                                // }}
+                            >
+                                Инструкция к платформам
+                            </Link>
+                            <IconButton><InfoIcon/></IconButton>
+                        </Box>
+                    </Box>
+                </Box>
+            </Box>
+
+            <Box sx={{ maxWidth: "520px", width: "100%"}}>
+                <Typography>3. Проверьте правильность установки</Typography>
+                <Typography sx={{color: theme.palette.grey2.main}}>Введите полный адрес страницы, где вы установили квиз и нажмите "проверить"</Typography>
+            </Box>
+            <Box sx={{
+                background: "#EEE4FC",
+                border: "1px solid #7E2AEA",
+                padding: "20px 50px 20px 20px",
+                borderRadius: "8px",
+                display: "flex",
+                flexDirection: "column",
+                gap: "20px",
+                marginBottom: "20px"
+            }}>
+                <Typography>
+                    Код нужно вставить один раз. Изменения в самом квизе будут отображаться автоматически после сохранения.
+                </Typography>
+                <Typography>
+                Для добавления нескольких квизов на одну страницу, код инициализации достаточно добавить один раз с любого квиза,
+                а затем вставить кнопки открытия с нужных квизов
+            </Typography>
+            </Box>
+        </InstallQzOnSiteParent>
+    )
+}

src/pages/InstallQuiz/InstallQzOnSiteParent.tsx

@@ -7,14 +7,16 @@ import NumberThree from "@icons/NumberThree";
 interface Props {
     outerContainerSx?: SxProps<Theme>;
     children?: React.ReactNode;
+    sx?: SxProps<Theme>;
 }
 
-export default function InstallQzOnSiteParent ({outerContainerSx: sx, children }: Props) {
+export default function InstallQzOnSiteParent ({outerContainerSx: sx, children}: Props) {
     const theme = useTheme();
     return (
         <>
             <Box
                 sx={{
+                    maxWidth: "1160px",
                     backgroundColor: '#ffffff',
                     padding: '20px',
                     mt: '40px',
@@ -36,6 +38,7 @@ export default function InstallQzOnSiteParent ({outerContainerSx: sx, children }
                         display: 'flex',
                         gap: '40px',
                         marginTop: '30px',
+                        ...sx
                     }}
                 >
 

src/pages/InstallQuiz/OnButtonInstall.tsx

@@ -1,27 +1,17 @@
 import {Box, Button, Link, Typography, useTheme} from "@mui/material";
-import OneIconBorder from "../../assets/icons/OneIconBorder";
+import React, {useState} from "react";
-import React from "react";
 import CustomCheckbox from "@ui_kit/CustomCheckbox";
 import CustomTextField from "@ui_kit/CustomTextField";
 import Dots from '../../assets/dots.png'
 import InstallQzOnSiteParent from "./InstallQzOnSiteParent";
-import Accordion from '@mui/material/Accordion';
+import AccordMy from "@ui_kit/Accordion";
-import AccordionDetails from '@mui/material/AccordionDetails';
-import AccordionSummary from '@mui/material/AccordionSummary';
-import ExpandMoreIcon from '@mui/icons-material/ExpandMore';
 
+type isExpanded = "panel1" | "panel2"
 
 export default function OnButtonInstall () {
     const theme = useTheme();
 
-    const [expanded, setExpanded] = React.useState<string | false>("panel1");
+    const [isExpanded, setIsExpanded] = useState<isExpanded>("panel1");
-
-    const handleChange =
-        (panel: string) => (event: React.SyntheticEvent, isExpanded: boolean) => {
-            setExpanded(isExpanded ? panel : false);
-        };
-
-
     return (
         <>
             <InstallQzOnSiteParent>
@@ -66,21 +56,13 @@ export default function OnButtonInstall () {
                     <Box sx={{
                         display: 'flex',
                         flexDirection: 'column',
+                        width: "100%"
                     }}>
-                        <Accordion expanded={expanded === 'panel1'} onChange={handleChange('panel1')} sx={{boxShadow: "none", "&.css-14nk2kd-MuiPaper-root-MuiAccordion-root::before": {display: "none", backgroundColor: "none"}, margin: 0}}>
+                        <AccordMy header={"Конструктор кнопки"} isExpanded={isExpanded === "panel1"} onClick={() => setIsExpanded("panel1")} sx={{display: "flex", flexDirection: 'column',}}>
-                            <AccordionSummary
-                                expandIcon={<ExpandMoreIcon />}
-                                aria-controls="panel1bh-content"
-                                id="panel1bh-header"
-                                sx={{"&.css-o4b71y-MuiAccordionSummary-content.Mui-expanded": {margin: 0}}}
-                            >
-                                <Typography sx={{padding: '10px 0'}}>Конструктор кнопки</Typography>
-                            </AccordionSummary>
-                            <AccordionDetails sx={{display: "flex", flexDirection: 'column',}}>
                                 <Box
                                     sx={{
                                         display: 'flex',
-                                        gap: '40px'
+                                        gap: '40px',
                                     }}
                                 >
                                     <Typography sx={{color: theme.palette.grey2.main}}>Цвет кнопки</Typography>
@@ -95,25 +77,13 @@ export default function OnButtonInstall () {
                                 <CustomCheckbox label={'Фиксированная'}/>
                                 <Typography sx={{color: theme.palette.grey2.main, marginBottom: '14px'}}>Текст кнопки</Typography>
                                 <CustomTextField placeholder={'Пройти тест'}/>
-                            </AccordionDetails>
+                        </AccordMy>
-                        </Accordion>
+                        <AccordMy header={"Своя кнопка"} isExpanded={isExpanded === "panel2"} onClick={() => setIsExpanded("panel2")} sx={{display: "flex", flexDirection: 'column', width: "100%"}}>
-                        <Accordion expanded={expanded === 'panel2'} onChange={handleChange('panel2')} sx={{boxShadow: "none", borderTop: '1px solid #9A9AAF', borderBottom: '1px solid #9A9AAF', borderRadius: 0}}>
+                            <Typography sx={{color: theme.palette.grey2.main}}>Ссылка для вашей кнопки</Typography>
-                            <AccordionSummary
+                            <CustomTextField placeholder={""} text={"#popup:639727c5177be5004f11a0f2"} />
-                                expandIcon={<ExpandMoreIcon />}
+                            <Typography sx={{color: theme.palette.grey2.main}}>Или событие</Typography>
-                                aria-controls="panel2bh-content"
+                            <CustomTextField placeholder={""} text={"onclick=\":639727c5177be5004f11a0f2"} />
-                                id="panel2bh-header"
+                        </AccordMy>
-                            >
-                                <Typography>Своя кнопка</Typography>
-                            </AccordionSummary>
-                            <AccordionDetails>
-                                <Typography sx={{color: theme.palette.grey2.main}}>Ссылка для вашей кнопки</Typography>
-                                <CustomTextField placeholder={""} text={"#popup:639727c5177be5004f11a0f2"} />
-                                <Typography sx={{color: theme.palette.grey2.main}}>Или событие</Typography>
-                                <CustomTextField placeholder={""} text={"onclick=\":639727c5177be5004f11a0f2"} />
-
-                            </AccordionDetails>
-                        </Accordion>
-
 
                         <Link
                             component='button'

src/pages/InstallQuiz/VidjetInstall.tsx

@@ -125,39 +125,47 @@ export default function VidjetInstall () {
                         />
                     </RadioGroup>
                 </FormControl>
-                <Box sx={{display: "flex", gap: "10px", alignItems: "center"}}>
+                {value === "1" ?
-                    <Typography sx={{color: theme.palette.grey2.main}}>Показывать через</Typography>
+                    <Box>
-                    <FormControl
+                        <Box sx={{display: "flex", gap: "10px", alignItems: "center"}}>
-                        fullWidth
+                            <Typography sx={{color: theme.palette.grey2.main}}>Показывать через</Typography>
-                        variant="standard"
+                            <FormControl
-                        sx={{ p: 0, width: "60px", }}
+                                fullWidth
-                    >
+                                variant="standard"
-                        <TextField
+                                sx={{ p: 0, width: "60px", }}
-                            fullWidth
+                            >
-                            placeholder="10"
+                                <TextField
-                            sx={{
+                                    fullWidth
-                                "& .MuiInputBase-root": {
+                                    placeholder="10"
-                                    backgroundColor: theme.palette.background.default,
+                                    sx={{
-                                    height: "48px",
+                                        "& .MuiInputBase-root": {
-                                    width: "60px",
+                                            backgroundColor: theme.palette.background.default,
-                                    borderRadius: "10px",
+                                            height: "48px",
+                                            width: "60px",
+                                            borderRadius: "10px",
+
+                                        },
+                                    }}
+                                    inputProps={{
+                                        sx: {
+                                            borderRadius: "10px",
+                                            fontSize: "18px",
+                                            lineHeight: "21px",
+                                            py: 0,
+
+                                        }
+                                    }}
+                                />
+                            </FormControl>
+                            <Typography sx={{color: theme.palette.grey2.main}}>секунд</Typography>
+                        </Box>
+                        <Typography sx={{color: theme.palette.grey2.main, fontSize: "14px"}}>Время, через которое квиз автоматически откроется</Typography>
+                    </Box>
+                    :
+                    <></>
+                }
 
-                                },
-                            }}
-                            inputProps={{
-                                sx: {
-                                    borderRadius: "10px",
-                                    fontSize: "18px",
-                                    lineHeight: "21px",
-                                    py: 0,
 
-                                }
-                            }}
-                        />
-                    </FormControl>
-                    <Typography sx={{color: theme.palette.grey2.main}}>секунд</Typography>
-                </Box>
-                <Typography sx={{color: theme.palette.grey2.main, fontSize: "14px"}}>Время, через которое квиз автоматически откроется</Typography>
                 <CustomCheckbox label={"Отключить на мобильных устройствах"}/>
                 <CustomCheckbox label={"Полностью скрывать виджет при закрытии"}/>
             </Box>

src/pages/Result/DescriptionForm/ButtinsOptionsForm.tsx

@@ -3,11 +3,11 @@ import { Box, IconButton, useTheme } from "@mui/material";
 
 import MiniButtonSetting from "@ui_kit/MiniButtonSetting";
 
-import SettingIcon from "../../assets/icons/questionsPage/settingIcon";
+import SettingIcon from "@icons/questionsPage/settingIcon";
-import Branching from "../../assets/icons/questionsPage/branching";
+import Branching from "@icons/questionsPage/branching";
-import HideIcon from "../../assets/icons/questionsPage/hideIcon";
+import HideIcon from "@icons/questionsPage/hideIcon";
-import CopyIcon from "../../assets/icons/questionsPage/CopyIcon";
+import CopyIcon from "@icons/questionsPage/CopyIcon";
-import DeleteIcon from "../../assets/icons/questionsPage/deleteIcon";
+import DeleteIcon from "@icons/questionsPage/deleteIcon";
 
 import StarIconPoints from "./StarIconsPoints";
 

src/pages/Result/DescriptionForm/DescriptionForm.tsx

@@ -1,9 +1,9 @@
 import React from "react";
 import { useState } from "react";
-import { Box, IconButton, TextField, Typography } from "@mui/material";
+import {Box, Button, IconButton, TextField, Typography} from "@mui/material";
 import ExpandMoreIcon from "@mui/icons-material/ExpandMore";
 
-import CustomButton from "../CustomButton";
+import CustomButton from "../../../components/CustomButton";
 
 import SwitchAnswerOptions from "./SwitchAnswerOptions";
 import ButtonsOptionsForm from "./ButtinsOptionsForm";
@@ -12,10 +12,10 @@ import DiscountButtons from "./DiscountButtons";
 
 import CustomTextField from "@ui_kit/CustomTextField";
 
-import OneIcon from "../../assets/icons/questionsPage/OneIcon";
+import OneIcon from "@icons/questionsPage/OneIcon";
-import DeleteIcon from "../../assets/icons/questionsPage/deleteIcon";
+import DeleteIcon from "@icons/questionsPage/deleteIcon";
-import PointsIcon from "../../assets/icons/questionsPage/PointsIcon";
+import PointsIcon from "@icons/questionsPage/PointsIcon";
-import Info from "../../assets/icons/Info";
+import Info from "@icons/Info";
 
 import ImageAndVideoButtons from "./ImageAndVideoButtons";
 
@@ -111,22 +111,18 @@ export const DescriptionForm = () => {
                   },
                 }}
               />
-              <CustomButton
+              <Button
                 onClick={() => setForwarding(true)}
-                variant="contained"
+                variant="outlined"
                 sx={{
                   display: forwarding ? "none" : "",
                   ml: "20px",
                   mb: "20px",
-                  color: "#9A9AAF",
+
-                  backgroundColor: "#F2F3F7",
-                  width: "194px",
-                  height: "48px",
-                  border: "1px solid #9A9AAF",
                 }}
               >
-                Переадрисация +
+                Переадресация +
-              </CustomButton>
+              </Button>
               {forwarding ? (
                 <Box sx={{ ml: "20px", mt: "-36px" }}>
                   <Box sx={{ display: "flex", alignItems: "center", mb: "14xp" }}>
@@ -167,19 +163,12 @@ export const DescriptionForm = () => {
             </Box>
           </Box>
         ) : (
-          <CustomButton
+          <Button
-            variant="contained"
+            variant="outlined"
-            sx={{
+            sx={{mb: "20px"}}
-              mb: "20px",
-              color: "#9A9AAF",
-              backgroundColor: "#F2F3F7",
-              width: "119px",
-              height: "48px",
-              border: "1px solid #9A9AAF",
-            }}
           >
             Кнопка +
-          </CustomButton>
+          </Button>
         )}
       </Box>
       <ButtonsOptionsForm switchState={switchState} SSHC={SSHC} />

src/pages/Result/DescriptionForm/DiscountButtons.tsx

@@ -1,6 +1,6 @@
-import DeleteIcon from "../../assets/icons/questionsPage/deleteIcon";
+import DeleteIcon from "@icons/questionsPage/deleteIcon";
 import {Box, IconButton, Typography, useTheme} from "@mui/material";
-import CustomButton from "../../components/CustomButton";
+import CustomButton from "../../../components/CustomButton";
 
 export default function DiscountButtons() {
     const theme = useTheme();

src/pages/Result/DescriptionForm/ImageAndVideoButtons.tsx

@@ -1,7 +1,7 @@
 import { Box, Typography, useTheme } from "@mui/material";
 
-import AddImage from "../../assets/icons/questionsPage/addImage";
+import AddImage from "@icons/questionsPage/addImage";
-import AddVideofile from "../../assets/icons/questionsPage/addVideofile";
+import AddVideofile from "@icons/questionsPage/addVideofile";
 
 export default function ImageAndVideoButtons() {
   const theme = useTheme();

src/pages/Result/DescriptionForm/PointsQuestions.tsx

@@ -11,8 +11,8 @@ import {
   useTheme,
 } from "@mui/material";
 import * as React from "react";
-import ArrowDown from "../../assets/icons/ArrowDownIcon";
+import ArrowDown from "@icons/ArrowDownIcon";
-import CustomButton from "../../components/CustomButton";
+import CustomButton from "../../../components/CustomButton";
 import { useState } from "react";
 
 export default function PointsQuestions() {

src/pages/Result/DescriptionForm/PriceButton.tsx

@@ -1,8 +1,8 @@
 import { Box, IconButton, SxProps, Theme, Typography } from "@mui/material";
 
-import CustomButton from "../../components/CustomButton";
+import CustomButton from "../../../components/CustomButton";
 
-import DeleteIcon from "../../assets/icons/questionsPage/deleteIcon";
+import DeleteIcon from "@icons/questionsPage/deleteIcon";
 
 const priceButtonsArray: { title: string; type: string; sx: SxProps<Theme> }[] = [
   {

src/pages/Result/DescriptionForm/SwitchAnswerOptions.tsx

@@ -1,6 +1,6 @@
-import Info from "../../assets/icons/Info";
+import Info from "@icons/Info";
 import { Box, TextField } from "@mui/material";
-import BranchingQuestions from "../../pages/Questions/branchingQuestions";
+import BranchingQuestions from "../../Questions/branchingQuestions";
 import PointsQuestions from "./PointsQuestions";
 
 interface Props {

src/pages/Result/ResultListForm.tsx

@@ -1,13 +1,14 @@
 import { Box, IconButton, TextField, Typography } from "@mui/material";
-import { SelectIconButton } from "../pages/Questions/OptionsPicture/settingOpytionsPict";
+import { SelectIconButton } from "../Questions/OptionsPicture/settingOpytionsPict";
 import { useState } from "react";
 
-import FormatIcon2 from "../assets/icons/questionsPage/FormatIcon2";
+import FormatIcon2 from "@icons/questionsPage/FormatIcon2";
-import FormatIcon1 from "../assets/icons/questionsPage/FormatIcon1";
+import FormatIcon1 from "@icons/questionsPage/FormatIcon1";
-import Info from "../assets/icons/Info";
+import Info from "@icons/Info";
-import ProportionsIcon21 from "../assets/icons/questionsPage/ProportionsIcon21";
+import ProportionsIcon21 from "@icons/questionsPage/ProportionsIcon21";
-import ProportionsIcon11 from "../assets/icons/questionsPage/ProportionsIcon11";
+import ProportionsIcon11 from "@icons/questionsPage/ProportionsIcon11";
-import ProportionsIcon12 from "../assets/icons/questionsPage/ProportionsIcon12";
+import ProportionsIcon12 from "@icons/questionsPage/ProportionsIcon12";
+import CustomCheckbox from "@ui_kit/CustomCheckbox";
 
 export const ResultListForm = () => {
   const [alignType, setAlignType] = useState<"left" | "right">("left");
@@ -174,20 +175,7 @@ export const ResultListForm = () => {
           />
         </Box>
         <Box sx={{ mt: "20px", display: "flex", alignItems: "center" }}>
-          <IconButton sx={{ width: "26px", height: "26px", bgcolor: "#7E2AEA", borderRadius: "6px" }}>
+          <CustomCheckbox label={"Кнопка \"Не знаю, что выбрать\""}/>
-            <svg width="18" height="13" viewBox="0 0 18 13" fill="none" xmlns="http://www.w3.org/2000/svg">
-              <path
-                d="M16.75 1L6.25 11.5L1 6.25"
-                stroke="white"
-                stroke-width="1.5"
-                stroke-linecap="round"
-                stroke-linejoin="round"
-              />
-            </svg>
-          </IconButton>
-          <Typography sx={{ color: "#9A9AAF", p: "0 13px" }} component="p">
-            Кнопка "Не знаю, что выбрать"
-          </Typography>
           <Info />
         </Box>
       </Box>

src/pages/Result/Setting.tsx

@@ -1,16 +1,13 @@
 import { Box, Button, Typography, useTheme } from "@mui/material";
-
 import { SettingForm } from "./SettingForm";
-import { DescriptionForm } from "../../components/DescriptionForm/DescriptionForm";
+import { DescriptionForm } from "./DescriptionForm/DescriptionForm";
-import { ResultListForm } from "../../components/ResultListForm";
+import { ResultListForm } from "./ResultListForm";
-
 import CustomWrapper from "../../components/CustomWrapper";
-import CustomButton from "../../components/CustomButton";
-import BackButton from "../../components/Button/BackButton";
-
 import Plus from "@icons/Plus";
 import Info from "@icons/Info";
 import IconPlus from "@icons/IconPlus";
+import ArrowLeft from "@icons/questionsPage/arrowLeft";
+import React from "react";
 
 export const Setting = () => {
   const theme = useTheme();
@@ -78,18 +75,12 @@ export const Setting = () => {
       <Box sx={{ pt: "30px", display: "flex", alignItems: "center" }}>
         <Plus />
         <Typography component="div" sx={{ ml: "auto" }}>
-          <BackButton />
+            <Button variant='outlined' sx={{padding: '10px 20px', borderRadius: '8px'}}>
-          <CustomButton
+                <ArrowLeft/>
-            variant="contained"
+            </Button>
-            sx={{
+          <Button variant="contained" sx={{ml: "10px",}}>
-              backgroundColor: theme.palette.brightPurple.main,
-              width: "194px",
-              height: "44px",
-              ml: "10px",
-            }}
-          >
             Настроить форму
-          </CustomButton>
+          </Button>
         </Typography>
       </Box>
 

src/pages/Result/SettingForm.tsx

@@ -2,7 +2,7 @@ import { useState } from "react";
 import { Box, Button, IconButton, SxProps, Theme, Typography } from "@mui/material";
 
 import CustomButton from "../../components/CustomButton";
-import { SwitchSetting } from "../../components/SwichResult";
+import { SwitchSetting } from "./SwichResult";
 
 import Info from "@icons/Info";
 

src/pages/Result/SwichResult.tsx

@@ -1,5 +1,4 @@
-import {Box, FormControlLabel, IconButton, Typography} from "@mui/material";
+import {Box, FormControlLabel} from "@mui/material";
-import { useState } from "react";
 import CustomizedSwitch from "@ui_kit/CustomSwitch";
 import * as React from "react";
 
@@ -10,7 +9,6 @@ interface Props {
 }
 
 export const SwitchSetting = ({ text, icon, onClick }: Props) => {
-  // const [active, setActive] = useState<boolean>(false);
   return (
     <Box
       sx={{
@@ -25,7 +23,6 @@ export const SwitchSetting = ({ text, icon, onClick }: Props) => {
     >
       <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>*/}
           <FormControlLabel
               value="start"
               control={<CustomizedSwitch/>}
@@ -39,27 +36,8 @@ export const SwitchSetting = ({ text, icon, onClick }: Props) => {
                   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"} />*/}
-      {/*    <rect*/}
-      {/*      x={active ? "23" : "1"}*/}
-      {/*      y="1"*/}
-      {/*      width="28"*/}
-      {/*      height="28"*/}
-      {/*      rx="14"*/}
-      {/*      fill="white"*/}
-      {/*      stroke={active ? "#7E2AEA" : "#9A9AAF"}*/}
-      {/*      strokeWidth="2"*/}
-      {/*    />*/}
-      {/*  </svg>*/}
-      {/*</IconButton>*/}
     </Box>
   );
 };

src/ui_kit/Accordion.tsx

@@ -0,0 +1,101 @@
+import {Box, SxProps, Theme, Typography, useMediaQuery, useTheme} from "@mui/material";
+import React from "react";
+
+
+interface Props {
+    children?: React.ReactNode;
+    isExpanded?: boolean;
+    onClick?: () => void;
+    sx?: SxProps<Theme>;
+    header: string;
+}
+
+export default function AccordMy ({ children, isExpanded = false, onClick, sx, header }: Props) {
+    const theme = useTheme();
+    const upMd = useMediaQuery(theme.breakpoints.up("md"));
+    const upSm = useMediaQuery(theme.breakpoints.up("sm"));
+    return (
+        <Box
+            sx={{
+                width: "100%",
+                paddingBottom: "15px",
+                overflow: "hidden",
+                borderBottom: `1px solid ${theme.palette.grey2.main}`,
+                boxShadow: `0px 100px 309px rgba(210, 208, 225, 0.24),
+                            0px 41.7776px 129.093px rgba(210, 208, 225, 0.172525), 
+                            0px 22.3363px 69.0192px rgba(210, 208, 225, 0.143066),
+                            0px 12.5216px 38.6916px rgba(210, 208, 225, 0.12),
+                            0px 6.6501px 20.5488px rgba(210, 208, 225, 0.0969343), 
+                            0px 2.76726px 8.55082px rgba(210, 208, 225, 0.067
+                              4749)`,
+            }}
+        >
+            <Box
+                sx={{
+                    width: "100%",
+                    backgroundColor: "transparent",
+                }}
+            >
+                <Box
+                    onClick={onClick}
+                    sx={{
+                        paddingTop: "15px",
+                        paddingRight: "20px",
+                        display: "flex",
+                        alignItems: "center",
+                        justifyContent: "space-between",
+                        cursor: "pointer",
+                        userSelect: "none",
+                    }}
+                >
+                    <Typography
+                        sx={{
+                            fontSize: upMd ? "18px" : "16px",
+                            lineHeight: upMd ? undefined : "19px",
+                            px: 0,
+                        }}
+                    >
+                        {header}
+                    </Typography>
+
+                    <Box
+                        sx={{
+                            display: "flex",
+                            justifyContent: "flex-end",
+                            height: "100%",
+                            alignItems: "center",
+                            gap: upSm ? "111px" : "17px",
+                        }}
+                    >
+                        <Box
+                            sx={{
+                                height: "100%",
+                                display: "flex",
+                                justifyContent: "center",
+                                alignItems: "center",
+                            }}
+                        >
+                            <svg style={{ transform: isExpanded ? "rotate(180deg)" : undefined }} xmlns="http://www.w3.org/2000/svg" width="32" height="33" viewBox="0 0 32 33" fill="none">
+                                <path d="M20.5 15.2949L16 20.2949L11.5 15.2949" stroke="#757575" strokeWidth="2" strokeLinecap="round" strokeLinejoin="round" />
+                            </svg>
+                        </Box>
+                    </Box>
+                </Box>
+                {isExpanded && (
+                    <Box
+                        sx={{
+                            backgroundColor: "transparent",
+                            gap: "15px",
+                            paddingTop: "15px",
+                            ...sx
+                        }}
+                    >
+                        {children}
+
+                    </Box>
+                )
+                }
+            </Box>
+        </Box>
+    )
+}

src/ui_kit/CustomCheckbox.tsx

@@ -1,12 +1,14 @@
 import { FormControlLabel, Checkbox, useTheme, Box } from "@mui/material";
+import React from "react";
 
 
 interface Props {
     label: string;
-    handleChange?: () => void;
+    handleChange?: (event: React.ChangeEvent<HTMLInputElement>) => void;
+    checked?: boolean;
 }
 
-export default function CustomCheckbox({ label, handleChange }: Props) {
+export default function CustomCheckbox({ label, handleChange, checked}: Props) {
     const theme = useTheme();
 
     return (
@@ -16,6 +18,7 @@ export default function CustomCheckbox({ label, handleChange }: Props) {
                 icon={<Icon />}
                 checkedIcon={<CheckedIcon />}
                 onChange={handleChange}
+                checked={checked}
             />}
             label={label}
             sx={{

src/ui_kit/Header.tsx

@@ -4,7 +4,7 @@ import BackArrowIcon from "../assets/icons/BackArrowIcon";
 import EyeIcon from "../assets/icons/EyeIcon";
 import CustomAvatar from "../components/Navbar/Avatar";
 import NavMenuItem from "../components/NavMenuItem";
-import PenaLogo from "../components/PenaLogo";
+import PenaLogo from "./PenaLogo";
 
 interface Props {
     isLoggedIn: boolean;

src/utils/themes/generic.ts

@@ -35,6 +35,7 @@ const theme = createTheme({
                         padding: '13px 20px',
                         borderRadius: '8px',
                         color: '#ffffff',
+                        boxShadow: "none",
                         "&:hover": {
                             backgroundColor: "#581CA7"
                         }
@@ -48,10 +49,11 @@ const theme = createTheme({
                         backgroundColor: "#F2F3F7",
                         padding: '10px 20px',
                         borderRadius: '8px',
-                        border: '1px solid #9A9AAF',
+                        border: '1px solid #7E2AEA',
                         color: '#9A9AAF',
                         "&:hover": {
-                            backgroundColor: "#581CA7"
+                            backgroundColor: "#581CA7",
+                            border: '1px solid #581CA7',
                         }
 
                     },