add start page settings

src/components/CreateQuiz/CreateQuiz.tsx

@@ -12,9 +12,15 @@ import PencilCircleIcon from "../icons/PencilCircleIcon";
 import PuzzlePieceIcon from "../icons/PuzzlePieceIcon";
 import GearIcon from "../icons/GearIcon";
 import LayoutIcon from "../icons/LayoutIcon";
+import CardWithImage from "./CardWithImage";
 import CreationCard from "./CreationCard";
 import quizCreationImage1 from "../../assets/quiz-creation-1.png";
 import quizCreationImage2 from "../../assets/quiz-creation-2.png";
+import cardImage1 from "../../assets/card-1.png";
+import cardImage2 from "../../assets/card-2.png";
+import cardImage3 from "../../assets/card-3.png";
+import StartPageSettings from "./StartPageSettings";
+import CustomButton from "../CustomButton";
 
 
 const createQuizMenuItems = [
@@ -47,7 +53,7 @@ export default function CreateQuiz() {
             disableGutters
             sx={{
                 display: "flex",
-                height: "calc(100vh - 80px)",
+                minHeight: "calc(100vh - 80px)",
             }}
         >
             <Box
@@ -214,13 +220,11 @@ export default function CreateQuiz() {
                         }}
                     >Настройка стартовой страницы</Typography>
                 </Box>
-                <Box
-                    sx={{
+                <Box sx={{
                     display: "flex",
                     gap: "3.4%",
                     mt: "60px",
-                    }}
-                >
+                }}>
                     <CreationCard
                         header="Создание квиз-опроса"
                         text="У стартовой страницы одна ключевая задача - заинтересовать посетителя пройти квиз. С ней сложно ошибиться, сформулируйте суть предложения и подберите живую фотографию, остальное мы сделаем за вас"
@@ -232,6 +236,54 @@ export default function CreateQuiz() {
                         image={quizCreationImage2}
                     />
                 </Box>
+                <Box sx={{
+                    mt: "60px",
+                }}>
+                    <Typography variant="h5">Стартовая страница</Typography>
+                    <Box sx={{
+                        display: "flex",
+                        gap: "3.4%",
+                        mt: "40px",
+                    }}>
+                        <CardWithImage image={cardImage1} text="Standart" />
+                        <CardWithImage image={cardImage2} text="Expanded" />
+                        <CardWithImage image={cardImage3} text="Centered" />
+                    </Box>
+                </Box>
+                <Box sx={{
+                    mt: "60px",
+                }}>
+                    <Typography variant="h5" mb="40px">Стартовая страница</Typography>
+                    <StartPageSettings />
+                    <Box sx={{
+                        mt: "30px",
+                        width: "100%",
+                        display: "flex",
+                        gap: "20px",
+                    }}>
+                        <CustomButton
+                            variant="outlined"
+                            sx={{
+                                border: `1px solid ${theme.palette.brightPurple.main}`,
+                                color: theme.palette.brightPurple.main,
+                                width: "auto",
+                                ml: "auto",
+                                px: "20px",
+                                py: "9px",
+                            }}
+                        >Отключить стартовую страницу</CustomButton>
+                        <CustomButton
+                            variant="contained"
+                            sx={{
+                                backgroundColor: theme.palette.brightPurple.main,
+                                color: "white",
+                                width: "auto",
+                                px: "20px",
+                                py: "9px",
+                            }}
+                        >Настроить вопросы</CustomButton>
+                    </Box>
+                </Box>
             </Container>
         </Container>
     );

src/components/CreateQuiz/CreationCard.tsx

@@ -10,9 +10,8 @@ interface Props {
 export default function CreationCard({ header, text, image }: Props) {
 
     return (
-        <Box
-            sx={{
-                width: "48.3%",
+        <Box sx={{
+            flexGrow: 1,
             backgroundColor: "white",
             p: "20px",
             borderRadius: "12px",
@@ -24,8 +23,7 @@ export default function CreationCard({ header, text, image }: Props) {
                             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.0674749)`,
-            }}
-        >
+        }}>
             <Typography variant="h5">{header}</Typography>
             <Typography
                 sx={{

src/components/CreateQuiz/SelectableButton.tsx

@@ -0,0 +1,32 @@
+import { useTheme } from "@mui/material";
+import CustomButton from "../CustomButton";
+
+
+interface Props {
+    children?: React.ReactNode;
+    isSelected?: boolean;
+    onClick: () => void;
+}
+
+export default function SelectableButton({ children, isSelected = false, onClick }: Props) {
+    const theme = useTheme();
+
+    return (
+        <CustomButton
+            onClick={onClick}
+            sx={{
+                backgroundColor: isSelected ? theme.palette.brightPurple.main : theme.palette.background.default,
+                border: isSelected ? "none" : `1px solid ${theme.palette.grey2.main}`,
+                color: isSelected ? "white" : theme.palette.grey2.main,
+                py: isSelected ? "12px" : "11px",
+                width: "auto",
+                flex: "1 1 auto",
+                "&:hover": {
+                    backgroundColor: theme.palette.lightPurple.main
+                },
+            }}
+        >
+            {children}
+        </CustomButton>
+    );
+}

src/components/CreateQuiz/SelectableIconButton.tsx

@@ -0,0 +1,36 @@
+import { useTheme } from "@mui/material";
+import CustomButton from "../CustomButton";
+
+
+interface Props {
+    Icon: React.ElementType;
+    isActive?: boolean;
+    onClick: () => void;
+}
+
+export default function SelectableIconButton({ Icon, isActive = false, onClick }: Props) {
+    const theme = useTheme();
+
+    return (
+        <CustomButton
+            onClick={onClick}
+            variant="outlined"
+            startIcon={<Icon color={isActive ? theme.palette.brightPurple.main : theme.palette.grey2.main} />}
+            sx={{
+                backgroundColor: isActive ? undefined : theme.palette.background.default,
+                borderColor: isActive ? theme.palette.brightPurple.main : theme.palette.grey2.main,
+                color: isActive ? theme.palette.brightPurple.main : theme.palette.grey2.main,
+                p: "7px",
+                width: "auto",
+                minWidth: 0,
+                "& .MuiButton-startIcon": {
+                    mr: 0,
+                    ml: 0,
+                },
+                "&:hover": {
+                    borderColor: isActive ? theme.palette.brightPurple.main : theme.palette.grey2.main,
+                },
+            }}
+        />
+    );
+}

src/components/CreateQuiz/StartPageSettings.tsx

@@ -0,0 +1,311 @@
+import { Box, FormControl, Link, MenuItem, Select, TextField, Typography, useTheme } from "@mui/material";
+import { useState } from "react";
+import CustomCheckbox from "../CustomCheckbox";
+import AlignLeftIcon from "../icons/AlignLeftIcon";
+import AlignRightIcon from "../icons/AlignRightIcon";
+import ArrowDown from "../icons/ArrowDownIcon";
+import InfoIcon from "../icons/InfoIcon";
+import LayoutCenteredIcon from "../icons/LayoutCenteredIcon";
+import LayoutExpandedIcon from "../icons/LayoutExpandedIcon";
+import LayoutStandartIcon from "../icons/LayoutStandartIcon";
+import MobilePhoneIcon from "../icons/MobilePhoneIcon";
+import UploadIcon from "../icons/UploadIcon";
+import SelectableButton from "./SelectableButton";
+import SelectableIconButton from "./SelectableIconButton";
+import UploadBox from "./UploadBox";
+
+
+const designTypes = [
+    ["Standart", (color: string) => <LayoutStandartIcon color={color} />],
+    ["Expanded", (color: string) => <LayoutExpandedIcon color={color} />],
+    ["Centered", (color: string) => <LayoutCenteredIcon color={color} />]
+] as const;
+type DesignType = typeof designTypes[number][0];
+
+type BackgroundType = "image" | "video";
+type AlignType = "left" | "right";
+
+export default function StartPageSettings() {
+    const theme = useTheme();
+    const [designType, setDesignType] = useState<DesignType | "">(designTypes[0][0]);
+    const [backgroundType, setBackgroundType] = useState<BackgroundType>("image");
+    const [alignType, setAlignType] = useState<AlignType>("left");
+
+    return (
+        <Box sx={{
+            backgroundColor: "white",
+            borderRadius: "12px",
+            p: "20px",
+            display: "flex",
+            gap: "20px",
+            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.0674749)`,
+        }}>
+            <Box sx={{
+                pr: "20px",
+                borderRight: `1px solid ${theme.palette.grey2.main}`,
+                display: "flex",
+                flexDirection: "column",
+                flex: `1 1 365px`,
+            }}>
+                <Typography sx={{ fontWeight: 500, color: theme.palette.grey3.main, mb: "14px" }}>Дизайн</Typography>
+                <FormControl
+                    fullWidth
+                    size="small"
+                    sx={{
+                        width: "100%",
+                        minWidth: "200px",
+                        height: "48px",
+                    }}
+                >
+                    <Select
+                        id="category-select"
+                        variant="outlined"
+                        value={designType}
+                        displayEmpty
+                        onChange={e => setDesignType(e.target.value as DesignType)}
+                        sx={{
+                            height: "48px",
+                            borderRadius: "8px",
+                            "& .MuiOutlinedInput-notchedOutline": {
+                                border: `1px solid ${theme.palette.brightPurple.main} !important`,
+                            },
+                        }}
+                        MenuProps={{
+                            PaperProps: {
+                                sx: {
+                                    mt: "8px",
+                                    p: "4px",
+                                    borderRadius: "8px",
+                                    border: "1px solid #EEE4FC",
+                                    boxShadow: "0px 8px 24px rgba(210, 208, 225, 0.4)",
+                                },
+                            },
+                            MenuListProps: {
+                                sx: {
+                                    py: 0,
+                                    display: "flex",
+                                    flexDirection: "column",
+                                    gap: "8px",
+                                    "& .Mui-selected": {
+                                        backgroundColor: theme.palette.background.default,
+                                        color: theme.palette.brightPurple.main,
+                                    }
+                                },
+                            },
+                        }}
+                        inputProps={{
+                            sx: {
+                                color: theme.palette.brightPurple.main,
+                                display: "flex",
+                                alignItems: "center",
+                                px: "9px",
+                                gap: "20px",
+                            }
+                        }}
+                        IconComponent={props => <ArrowDown {...props} />}
+                    >
+                        {designTypes.map(type =>
+                            <MenuItem
+                                key={type[0]}
+                                value={type[0]}
+                                sx={{
+                                    display: "flex",
+                                    alignItems: "center",
+                                    gap: "20px",
+                                    p: "4px",
+                                    borderRadius: "5px",
+                                    color: theme.palette.grey2.main,
+                                }}
+                            >
+                                {type[1](type[0] === designType ? theme.palette.orange.main : theme.palette.grey2.main)}
+                                {type[0]}
+                            </MenuItem>
+                        )}
+                    </Select>
+                </FormControl>
+                <Typography sx={{ fontWeight: 500, color: theme.palette.grey3.main, mt: "20px", mb: "14px" }}>Фон</Typography>
+                <Box sx={{
+                    display: "flex",
+                    gap: "10px",
+                }}>
+                    <SelectableButton isSelected={backgroundType === "image"} onClick={() => setBackgroundType("image")}>
+                        Изображение
+                    </SelectableButton>
+                    <SelectableButton isSelected={backgroundType === "video"} onClick={() => setBackgroundType("video")}>
+                        Видео
+                    </SelectableButton>
+                </Box>
+                {backgroundType === "image" ?
+                    <>
+                        <Typography sx={{ fontWeight: 500, color: theme.palette.grey3.main, mt: "20px", mb: "14px" }}>Изображение</Typography>
+                        <UploadBox icon={<UploadIcon />} text="5 MB максимум" />
+                        <Link sx={{
+                            mt: "20px",
+                            fontSize: "16px",
+                            lineHeight: "19px",
+                            color: theme.palette.orange.main,
+                            textDecorationColor: theme.palette.orange.main
+                        }}>Размер картинок</Link>
+                        <Box sx={{
+                            mt: "20px",
+                            display: "flex",
+                            gap: "10px",
+                            alignItems: "center",
+
+                        }}>
+                            <MobilePhoneIcon bgcolor="#EEE4FC" />
+                            <Link sx={{
+                                fontSize: "16px",
+                                lineHeight: "19px",
+                                color: theme.palette.brightPurple.main,
+                                textDecorationColor: theme.palette.brightPurple.main
+                            }}>мобильная версия</Link>
+                        </Box>
+                    </>
+                    :
+                    <>
+                        <Box sx={{
+                            display: "flex",
+                            alignItems: "center",
+                            gap: "7px",
+                            mt: "20px",
+                            mb: "14px",
+                        }}>
+                            <Typography sx={{ fontWeight: 500, color: theme.palette.grey3.main }}>Добавить видео</Typography>
+                            <InfoIcon />
+                        </Box>
+                        <UploadBox
+                            icon={<UploadIcon />}
+                            sx={{
+                                height: "48px",
+                                width: "48px",
+                            }}
+                        />
+                        <Typography sx={{ fontWeight: 500, color: theme.palette.grey3.main, mt: "20px", mb: "5px" }}>Настройки видео</Typography>
+                        <CustomCheckbox label="Зацикливать видео" />
+                        <Typography sx={{ fontWeight: 500, color: theme.palette.grey3.main, mt: "11px", mb: "14px" }}>Изображение для мобильной версии</Typography>
+                        <UploadBox icon={<UploadIcon />} text="5 MB максимум" />
+                    </>
+                }
+                <Typography sx={{ fontWeight: 500, color: theme.palette.grey3.main, mt: "20px", mb: "14px" }}>Расположение элементов</Typography>
+                <Box sx={{
+                    display: "flex",
+                    gap: "10px",
+                }}>
+                    <SelectableIconButton onClick={() => setAlignType("left")} isActive={alignType === "left"} Icon={AlignLeftIcon} />
+                    <SelectableIconButton onClick={() => setAlignType("right")} isActive={alignType === "right"} Icon={AlignRightIcon} />
+                </Box>
+                {backgroundType === "image" &&
+                    <Typography sx={{ fontWeight: 500, color: theme.palette.grey3.main, mt: "20px" }}>Логотип</Typography>
+                }
+                <UploadBox sx={{ mt: "20px" }} icon={<UploadIcon />} text="5 MB максимум" />
+                <Typography sx={{ fontWeight: 500, color: theme.palette.grey3.main, mt: "20px", mb: "14px" }}>Favicon</Typography>
+                <Box sx={{
+                    display: "flex",
+                    alignItems: "end",
+                    gap: "10px",
+                }}>
+                    <UploadBox
+                        icon={<UploadIcon />}
+                        sx={{
+                            height: "48px",
+                            width: "48px",
+                        }}
+                    />
+                    <Typography sx={{
+                        color: theme.palette.orange.main,
+                        fontSize: "16px",
+                        lineHeight: "19px",
+                        textDecoration: "underline",
+                    }}>5 MB максимум</Typography>
+                </Box>
+            </Box>
+            <Box sx={{
+                display: "flex",
+                flexDirection: "column",
+                flex: `1 1 795px`,
+            }}>
+                <Typography sx={{ fontWeight: 500, color: theme.palette.grey3.main, mb: "14px" }}>Заголовок</Typography>
+                <CustomTextField placeholder="Текст-заполнитель — это текст, который " text={""} />
+                <Typography sx={{ fontWeight: 500, color: theme.palette.grey3.main, mt: "20px", mb: "14px" }}>Текст</Typography>
+                <CustomTextField placeholder="Текст-заполнитель — это текст, который " text={""} />
+                <Typography sx={{ fontWeight: 500, color: theme.palette.grey3.main, mt: "20px", mb: "14px" }}>Текст кнопки</Typography>
+                <CustomTextField placeholder="Начать" text={""} />
+                <Typography sx={{ fontWeight: 500, color: theme.palette.grey3.main, mt: "20px", mb: "14px" }}>Телефон</Typography>
+                <CustomTextField placeholder="+7 900 000 00 00" text={""} />
+                <CustomCheckbox label="Кликабельный" />
+                <Typography sx={{ fontWeight: 500, color: theme.palette.grey3.main, mt: "11px", mb: "14px" }}>Название или слоган компании</Typography>
+                <CustomTextField placeholder="Текст-заполнитель — это текст, который " text={""} />
+                <Typography sx={{ fontWeight: 500, color: theme.palette.grey3.main, mt: "20px", mb: "14px" }}>Сайт</Typography>
+                <CustomTextField placeholder="Текст-заполнитель — это текст, который " text={""} />
+                <Typography sx={{ fontWeight: 500, color: theme.palette.grey3.main, mt: "20px", mb: "14px" }}>Юридическая информация</Typography>
+                <CustomTextField placeholder="Текст-заполнитель — это текст, который " text={""} />
+                <Link sx={{
+                    mt: "20px",
+                    fontSize: "16px",
+                    lineHeight: "19px",
+                    color: theme.palette.brightPurple.main,
+                    textDecorationColor: theme.palette.brightPurple.main
+                }}>Дополнительно</Link>
+                <Typography sx={{ fontWeight: 500, color: theme.palette.grey3.main, mt: "20px", mb: "14px" }}>Mета заголовок</Typography>
+                <CustomTextField placeholder="Текст-заполнитель — это текст, который " text={""} />
+                <Typography sx={{
+                    mt: "20px",
+                    fontSize: "16px",
+                    lineHeight: "19px",
+                    maxWidth: "80%",
+                    color: theme.palette.grey3.main,
+                }}>
+                    Текст-заполнитель —
+                    это текст, который имеет Текст-заполнитель —
+                    это текст, который имеет Текст-заполнитель —
+                    это текст, который имеет Текст-заполнитель —
+                    это текст, который имеет Текст-заполнитель
+                </Typography>
+            </Box>
+        </Box>
+    );
+}
+
+interface CustomTextFieldProps {
+    placeholder: string;
+    text: string;
+}
+
+function CustomTextField({ placeholder, text }: CustomTextFieldProps) {
+    const theme = useTheme();
+
+    return (
+        <FormControl
+            fullWidth
+            variant="standard"
+            sx={{ p: 0 }}
+        >
+            <TextField
+                // value={text}
+                fullWidth
+                placeholder={placeholder}
+                sx={{
+                    backgroundColor: theme.palette.background.default,
+                    "& .MuiInputBase-root": {
+                        height: "48px",
+                        borderRadius: "10px",
+                    }
+                }}
+                inputProps={{
+                    sx: {
+                        borderRadius: "10px",
+                        fontSize: "18px",
+                        lineHeight: "21px",
+                        py: 0,
+                    }
+                }}
+            />
+        </FormControl>
+    );
+}

src/components/CreateQuiz/UploadBox.tsx

@@ -0,0 +1,39 @@
+import { Box, Typography, useTheme } from "@mui/material";
+import { SxProps, Theme } from "@mui/material/styles";
+
+
+interface Props {
+    sx?: SxProps<Theme>;
+    icon: React.ReactNode;
+    text?: string;
+}
+
+export default function UploadBox({ sx, icon, text }: Props) {
+    const theme = useTheme();
+
+    return (
+        <Box sx={{
+            width: "100%",
+            height: "120px",
+            position: "relative",
+            display: "flex",
+            justifyContent: "center",
+            alignItems: "center",
+            backgroundColor: theme.palette.background.default,
+            border: `1px solid ${theme.palette.grey2.main}`,
+            borderRadius: "8px",
+            ...sx,
+        }}>
+            {icon}
+            <Typography sx={{
+                position: "absolute",
+                right: "10px",
+                bottom: "10px",
+                color: theme.palette.orange.main,
+                fontSize: "16px",
+                lineHeight: "19px",
+                textDecoration: "underline",
+            }}>{text}</Typography>
+        </Box>
+    );
+}

src/components/CustomCheckbox.tsx

@@ -0,0 +1,61 @@
+import { FormControlLabel, Checkbox, useTheme, Box } from "@mui/material";
+
+
+interface Props {
+    label: string;
+}
+
+export default function CustomCheckbox({ label }: Props) {
+    const theme = useTheme();
+
+    return (
+        <FormControlLabel
+            control={<Checkbox
+                defaultChecked
+                icon={<Icon />}
+                checkedIcon={<CheckedIcon />}
+            />}
+            label={label}
+            sx={{
+                color: theme.palette.grey2.main,
+                ml: "-9px",
+                userSelect: "none",
+            }}
+        />
+    );
+}
+
+function Icon() {
+    const theme = useTheme();
+
+    return (
+        <Box sx={{
+            height: "26px",
+            width: "26px",
+            borderRadius: "8px",
+            backgroundColor: theme.palette.background.default,
+            border: `1px solid ${theme.palette.grey2.main}`,
+        }} />
+    );
+}
+
+function CheckedIcon() {
+    const theme = useTheme();
+
+    return (
+        <Box sx={{
+            height: "26px",
+            width: "26px",
+            borderRadius: "8px",
+            display: "flex",
+            justifyContent: "center",
+            alignItems: "center",
+            backgroundColor: theme.palette.background.default,
+            border: `1px solid ${theme.palette.grey2.main}`,
+        }}>
+            <svg xmlns="http://www.w3.org/2000/svg" width="15" height="15" viewBox="0 0 25 18" fill="none">
+                <path d="M2 9L10 16.5L22.5 1.5" stroke={theme.palette.grey3.main} strokeWidth="4" strokeLinecap="round" />
+            </svg>
+        </Box>
+    );
+}

src/components/icons/AlignLeftIcon.tsx

@@ -0,0 +1,27 @@
+import { Box } from "@mui/material";
+
+
+interface Props {
+    color: string;
+}
+
+export default function AlignLeftIcon({ color }: Props) {
+
+    return (
+        <Box
+            sx={{
+                height: "32px",
+                width: "32px",
+                display: "flex",
+                alignItems: "center",
+                justifyContent: "center",
+            }}
+        >
+            <svg xmlns="http://www.w3.org/2000/svg" width="32" height="32" viewBox="0 0 32 32" fill="none">
+                <path d="M5 5V27" stroke={color} strokeWidth="2" strokeLinecap="round" strokeLinejoin="round" />
+                <path d="M22 7H10C9.44772 7 9 7.44772 9 8V13C9 13.5523 9.44772 14 10 14H22C22.5523 14 23 13.5523 23 13V8C23 7.44772 22.5523 7 22 7Z" stroke={color} strokeWidth="2" strokeLinecap="round" strokeLinejoin="round" />
+                <path d="M27 18H10C9.44772 18 9 18.4477 9 19V24C9 24.5523 9.44772 25 10 25H27C27.5523 25 28 24.5523 28 24V19C28 18.4477 27.5523 18 27 18Z" stroke={color} strokeWidth="2" strokeLinecap="round" strokeLinejoin="round" />
+            </svg>
+        </Box>
+    );
+}

src/components/icons/AlignRightIcon.tsx

@@ -0,0 +1,27 @@
+import { Box } from "@mui/material";
+
+
+interface Props {
+    color: string;
+}
+
+export default function AlignRightIcon({ color }: Props) {
+
+    return (
+        <Box
+            sx={{
+                height: "32px",
+                width: "32px",
+                display: "flex",
+                alignItems: "center",
+                justifyContent: "center",
+            }}
+        >
+            <svg xmlns="http://www.w3.org/2000/svg" width="32" height="32" viewBox="0 0 32 32" fill="none">
+                <path d="M27 5V27" stroke={color} strokeWidth="2" strokeLinecap="round" strokeLinejoin="round" />
+                <path d="M10 14L22 14C22.5523 14 23 13.5523 23 13V8C23 7.44772 22.5523 7 22 7L10 7C9.44771 7 9 7.44772 9 8V13C9 13.5523 9.44771 14 10 14Z" stroke={color} strokeWidth="2" strokeLinecap="round" strokeLinejoin="round" />
+                <path d="M22 18H5C4.44772 18 4 18.4477 4 19V24C4 24.5523 4.44772 25 5 25H22C22.5523 25 23 24.5523 23 24V19C23 18.4477 22.5523 18 22 18Z" stroke={color} strokeWidth="2" strokeLinecap="round" strokeLinejoin="round" />
+            </svg>
+        </Box>
+    );
+}

src/components/icons/InfoIcon.tsx

@@ -0,0 +1,22 @@
+import { Box, useTheme } from "@mui/material";
+
+
+export default function InfoIcon() {
+    const theme = useTheme();
+
+    return (
+        <Box sx={{
+            height: "24px",
+            width: "24px",
+            display: "flex",
+            alignItems: "center",
+            justifyContent: "center",
+        }}>
+            <svg xmlns="http://www.w3.org/2000/svg" width="24" height="24" viewBox="0 0 24 24" fill="none">
+                <path d="M12 21C16.9706 21 21 16.9706 21 12C21 7.02944 16.9706 3 12 3C7.02944 3 3 7.02944 3 12C3 16.9706 7.02944 21 12 21Z" stroke={theme.palette.brightPurple.main} strokeWidth="1.5" strokeLinecap="round" strokeLinejoin="round" />
+                <path d="M11.25 11.25H12V16.5H12.75" stroke={theme.palette.brightPurple.main} strokeWidth="1.5" strokeLinecap="round" strokeLinejoin="round" />
+                <path d="M11.8125 9C12.4338 9 12.9375 8.49632 12.9375 7.875C12.9375 7.25368 12.4338 6.75 11.8125 6.75C11.1912 6.75 10.6875 7.25368 10.6875 7.875C10.6875 8.49632 11.1912 9 11.8125 9Z" fill={theme.palette.brightPurple.main} />
+            </svg>
+        </Box>
+    );
+}

src/components/icons/LayoutCenteredIcon.tsx

@@ -0,0 +1,26 @@
+import { Box } from "@mui/material";
+
+
+interface Props {
+    color: string;
+}
+
+export default function LayoutCenteredIcon({ color }: Props) {
+
+    return (
+        <Box sx={{
+            height: "32px",
+            width: "32px",
+            display: "flex",
+            alignItems: "center",
+            justifyContent: "center",
+        }}>
+            <svg xmlns="http://www.w3.org/2000/svg" width="32" height="32" viewBox="0 0 32 32" fill="none">
+                <path d="M27 6H5C4.44772 6 4 6.44772 4 7V25C4 25.5523 4.44772 26 5 26H27C27.5523 26 28 25.5523 28 25V7C28 6.44772 27.5523 6 27 6Z" stroke={color} strokeWidth="2" strokeLinecap="round" strokeLinejoin="round" />
+                <path d="M23.3333 9H8.66667C8.29848 9 8 9.1567 8 9.35V15.65C8 15.8433 8.29848 16 8.66667 16H23.3333C23.7015 16 24 15.8433 24 15.65V9.35C24 9.1567 23.7015 9 23.3333 9Z" stroke={color} strokeWidth="2" strokeLinecap="round" strokeLinejoin="round" />
+                <path d="M13 22L18 22" stroke={color} strokeWidth="2" strokeLinecap="round" strokeLinejoin="round" />
+                <path d="M8 19H24" stroke={color} strokeWidth="2" strokeLinecap="round" strokeLinejoin="round" />
+            </svg>
+        </Box>
+    );
+}

src/components/icons/LayoutExpandedIcon.tsx

@@ -0,0 +1,26 @@
+import { Box } from "@mui/material";
+
+
+interface Props {
+    color: string;
+}
+
+export default function LayoutExpandedIcon({ color }: Props) {
+
+    return (
+        <Box sx={{
+            height: "32px",
+            width: "32px",
+            display: "flex",
+            alignItems: "center",
+            justifyContent: "center",
+        }}>
+            <svg xmlns="http://www.w3.org/2000/svg" width="32" height="32" viewBox="0 0 32 32" fill="none">
+                <path d="M27 6H5C4.44772 6 4 6.44772 4 7V25C4 25.5523 4.44772 26 5 26H27C27.5523 26 28 25.5523 28 25V7C28 6.44772 27.5523 6 27 6Z" stroke={color} strokeWidth="2" strokeLinecap="round" strokeLinejoin="round" />
+                <path d="M18 12L24 12" stroke={color} strokeWidth="2" strokeLinecap="round" strokeLinejoin="round" />
+                <path d="M18 16L24 16" stroke={color} strokeWidth="2" strokeLinecap="round" strokeLinejoin="round" />
+                <path d="M18 20L21 20" stroke={color} strokeWidth="2" strokeLinecap="round" strokeLinejoin="round" />
+            </svg>
+        </Box>
+    );
+}

src/components/icons/LayoutStandartIcon.tsx

@@ -0,0 +1,27 @@
+import { Box } from "@mui/material";
+
+
+interface Props {
+    color: string;
+}
+
+export default function LayoutStandartIcon({ color }: Props) {
+
+    return (
+        <Box sx={{
+            height: "32px",
+            width: "32px",
+            display: "flex",
+            alignItems: "center",
+            justifyContent: "center",
+        }}>
+            <svg xmlns="http://www.w3.org/2000/svg" width="32" height="32" viewBox="0 0 32 32" fill="none">
+                <path d="M27 6H5C4.44772 6 4 6.44772 4 7V25C4 25.5523 4.44772 26 5 26H27C27.5523 26 28 25.5523 28 25V7C28 6.44772 27.5523 6 27 6Z" stroke={color} strokeWidth="2" strokeLinecap="round" strokeLinejoin="round" />
+                <path d="M18 26L18 6" stroke={color} strokeWidth="2" strokeLinecap="round" strokeLinejoin="round" />
+                <path d="M21 12L25 12" stroke={color} strokeWidth="2" strokeLinecap="round" strokeLinejoin="round" />
+                <path d="M21 16L25 16" stroke={color} strokeWidth="2" strokeLinecap="round" strokeLinejoin="round" />
+                <path d="M21 20L23 20" stroke={color} strokeWidth="2" strokeLinecap="round" strokeLinejoin="round" />
+            </svg>
+        </Box>
+    );
+}

src/components/icons/MobilePhoneIcon.tsx

@@ -0,0 +1,30 @@
+import { Box, useTheme } from "@mui/material";
+
+
+interface Props {
+    bgcolor: string;
+}
+
+export default function MobilePhoneIcon({ bgcolor }: Props) {
+    const theme = useTheme();
+
+    return (
+        <Box
+            sx={{
+                height: "36px",
+                width: "36px",
+                display: "flex",
+                alignItems: "center",
+                justifyContent: "center",
+                backgroundColor: bgcolor,
+                borderRadius: "6px",
+            }}
+        >
+            <svg xmlns="http://www.w3.org/2000/svg" width="24" height="24" viewBox="0 0 24 24" fill="none">
+                <path d="M16.5 2.25H7.5C6.67157 2.25 6 2.92157 6 3.75V20.25C6 21.0784 6.67157 21.75 7.5 21.75H16.5C17.3284 21.75 18 21.0784 18 20.25V3.75C18 2.92157 17.3284 2.25 16.5 2.25Z" stroke={theme.palette.brightPurple.main} strokeWidth="1.5" strokeLinecap="round" strokeLinejoin="round" />
+                <path d="M6 5.25H18" stroke={theme.palette.brightPurple.main} strokeWidth="1.5" strokeLinecap="round" strokeLinejoin="round" />
+                <path d="M6 18.75H18" stroke={theme.palette.brightPurple.main} strokeWidth="1.5" strokeLinecap="round" strokeLinejoin="round" />
+            </svg>
+        </Box>
+    );
+}

src/components/icons/UploadIcon.tsx

@@ -0,0 +1,24 @@
+import { Box, useTheme } from "@mui/material";
+
+
+export default function UploadIcon() {
+    const theme = useTheme();
+
+    return (
+        <Box
+            sx={{
+                height: "32px",
+                width: "32px",
+                display: "flex",
+                alignItems: "center",
+                justifyContent: "center",
+            }}
+        >
+            <svg xmlns="http://www.w3.org/2000/svg" width="32" height="32" viewBox="0 0 32 32" fill="none">
+                <path d="M10.75 10.25L16 5L21.25 10.25" stroke={theme.palette.grey2.main} strokeWidth="2" strokeLinecap="round" strokeLinejoin="round" />
+                <path d="M16 19V5" stroke={theme.palette.grey2.main} strokeWidth="2" strokeLinecap="round" strokeLinejoin="round" />
+                <path d="M27 19V26C27 26.2652 26.8946 26.5196 26.7071 26.7071C26.5196 26.8946 26.2652 27 26 27H6C5.73478 27 5.48043 26.8946 5.29289 26.7071C5.10536 26.5196 5 26.2652 5 26V19" stroke={theme.palette.grey2.main} strokeWidth="2" strokeLinecap="round" strokeLinejoin="round" />
+            </svg>
+        </Box>
+    );
+}