From 5b21df276d03d0b5a2472256af494ea31286088e Mon Sep 17 00:00:00 2001
From: IlyaDoronin <ryletd@gmail.com>
Date: Thu, 19 Oct 2023 13:55:37 +0300
Subject: [PATCH] feat: StartPageSettings mobile styles

---
 src/pages/startPage/StartPageSettings.tsx | 1093 ++++++++++++---------
 1 file changed, 609 insertions(+), 484 deletions(-)

diff --git a/src/pages/startPage/StartPageSettings.tsx b/src/pages/startPage/StartPageSettings.tsx
index cfa1b465..b5e9095f 100755
--- a/src/pages/startPage/StartPageSettings.tsx
+++ b/src/pages/startPage/StartPageSettings.tsx
@@ -9,6 +9,7 @@ import {
   Select,
   Tooltip,
   Typography,
+  useMediaQuery,
   useTheme,
 } from "@mui/material";
 import { ChangeEvent, useState } from "react";
@@ -59,15 +60,17 @@ type BackgroundType = "image" | "video";
 type AlignType = "left" | "right" | "center";
 
 export default function StartPageSettings() {
+  const [alignType, setAlignType] = useState<AlignType>("left");
+  const [formState, setFormState] = useState<"design" | "content">("design");
   const { listQuizes, updateQuizesList, removeQuiz, createBlank } = quizStore();
   const params = Number(useParams().quizId);
   const theme = useTheme();
   const designType = listQuizes[params].startpage;
-  const StartPageClone = listQuizes[params];
   const [backgroundType, setBackgroundType] = useState(
     listQuizes[params].config.startpage.background.type
   );
-  const [alignType, setAlignType] = useState<AlignType>("left");
+  const isSmallMonitor = useMediaQuery(theme.breakpoints.down(1500));
+  const isTablet = useMediaQuery(theme.breakpoints.down(950));
 
   const handleNext = () => {
     updateQuizesList(params, { step: listQuizes[params].step + 1 });
@@ -132,17 +135,54 @@ export default function StartPageSettings() {
 
   return (
     <>
-      <Typography variant="h5" sx={{ marginTop: "60px" }}>
+      <Typography
+        variant="h5"
+        sx={{ marginTop: "60px", marginBottom: isSmallMonitor ? "0" : "40px" }}
+      >
         Стартовая страница
       </Typography>
+      {isSmallMonitor && (
+        <Box sx={{ display: "flex", gap: "5px", margin: "20px 0px 10px" }}>
+          <Button onClick={() => setFormState("design")}>
+            <Typography
+              sx={{
+                fontWeight: 500,
+                fontSize: "16px",
+                color: formState === "design" ? "#7E2AEA" : "#7D7E86",
+                borderBottom:
+                  formState === "design"
+                    ? "2px solid #7E2AEA"
+                    : "1px solid transparent",
+              }}
+            >
+              Дизайн
+            </Typography>
+          </Button>
+          <Button onClick={() => setFormState("content")}>
+            <Typography
+              sx={{
+                fontWeight: 500,
+                fontSize: "16px",
+                color: formState === "content" ? "#7E2AEA" : "#7D7E86",
+                borderBottom:
+                  formState === "content"
+                    ? "2px solid #7E2AEA"
+                    : "1px solid transparent",
+              }}
+            >
+              Контент
+            </Typography>
+          </Button>
+        </Box>
+      )}
       <Box
         sx={{
+          boxSizing: "border-box",
           backgroundColor: "white",
           borderRadius: "12px",
           p: "20px",
           display: "flex",
           gap: "20px",
-          marginTop: "40px",
           maxWidth: "1160px",
           width: "100%",
           boxShadow: `0px 100px 309px rgba(210, 208, 225, 0.24),
@@ -153,157 +193,448 @@ export default function StartPageSettings() {
                         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 342px`,
-          }}
-        >
-          <Typography
+        {(!isSmallMonitor || (isSmallMonitor && formState === "design")) && (
+          <Box
             sx={{
-              fontWeight: 500,
-              color: theme.palette.grey3.main,
-              mb: "14px",
+              pr: "20px",
+              borderRight: `1px solid ${
+                isTablet ? "transparent" : theme.palette.grey2.main
+              }`,
+              display: "flex",
+              flexDirection: "column",
+              flex: `1 1 342px`,
             }}
           >
-            Дизайн
-          </Typography>
-          <FormControl
-            fullWidth
-            size="small"
-            sx={{
-              width: "100%",
-              minWidth: "200px",
-              height: "48px",
-            }}
-          >
-            <Select
-              id="category-select"
-              variant="outlined"
-              value={designType}
-              displayEmpty
-              onChange={(e) =>
-                updateQuizesList(params, { startpage: e.target.value })
-              }
+            <Typography
               sx={{
-                height: "48px",
-                borderRadius: "8px",
-                "& .MuiOutlinedInput-notchedOutline": {
-                  border: `1px solid ${theme.palette.brightPurple.main} !important`,
-                },
+                fontWeight: 500,
+                color: theme.palette.grey3.main,
+                mb: "14px",
               }}
-              MenuProps={{
-                PaperProps: {
-                  sx: {
-                    mt: "8px",
-                    p: "4px",
-                    borderRadius: "8px",
-                    border: "1px solid #EEE4FC",
-                    boxShadow: "0px 8px 24px rgba(210, 208, 225, 0.4)",
+            >
+              Дизайн
+            </Typography>
+            <FormControl
+              fullWidth
+              size="small"
+              sx={{
+                width: "100%",
+                minWidth: "200px",
+                height: "48px",
+              }}
+            >
+              <Select
+                id="category-select"
+                variant="outlined"
+                value={designType}
+                displayEmpty
+                onChange={(e) =>
+                  updateQuizesList(params, { startpage: e.target.value })
+                }
+                sx={{
+                  height: "48px",
+                  borderRadius: "8px",
+                  "& .MuiOutlinedInput-notchedOutline": {
+                    border: `1px solid ${theme.palette.brightPurple.main} !important`,
                   },
-                },
-                MenuListProps: {
-                  sx: {
-                    py: 0,
-                    display: "flex",
-                    flexDirection: "column",
-                    gap: "8px",
-                    "& .Mui-selected": {
-                      backgroundColor: theme.palette.background.default,
-                      color: theme.palette.brightPurple.main,
+                }}
+                MenuProps={{
+                  PaperProps: {
+                    sx: {
+                      mt: "8px",
+                      p: "4px",
+                      borderRadius: "8px",
+                      border: "1px solid #EEE4FC",
+                      boxShadow: "0px 8px 24px rgba(210, 208, 225, 0.4)",
                     },
                   },
-                },
-              }}
-              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={{
+                  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",
-                    p: "4px",
-                    borderRadius: "5px",
-                    color: theme.palette.grey2.main,
-                  }}
-                >
-                  {type[1](
-                    type[0] === designType
-                      ? theme.palette.orange.main
-                      : theme.palette.grey2.main
-                  )}
-                  {type[2]}
-                </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");
-                let SPageClone = listQuizes[params].config;
-                SPageClone.startpage.background.type = "image";
-                updateQuizesList(params, { config: SPageClone });
+                  },
+                }}
+                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[2]}
+                  </MenuItem>
+                ))}
+              </Select>
+            </FormControl>
+            <Typography
+              sx={{
+                fontWeight: 500,
+                color: theme.palette.grey3.main,
+                mt: "20px",
+                mb: "14px",
               }}
             >
-              Изображение
-            </SelectableButton>
-            <SelectableButton
-              isSelected={backgroundType === "video"}
-              onClick={() => {
-                setBackgroundType("video");
-                let SPageClone = listQuizes[params].config;
-                SPageClone.startpage.background.type = "video";
-                updateQuizesList(params, { config: SPageClone });
-              }}
-            >
-              Видео
-            </SelectableButton>
-          </Box>
-
-          <Box
-            sx={{
-              display: backgroundType === "image" ? "flex" : "none",
-              flexDirection: "column",
-            }}
-          >
+              Фон
+            </Typography>
             <Box
               sx={{
-                display: mobileVersion ? "none" : "flex",
+                display: "flex",
+                gap: "10px",
+              }}
+            >
+              <SelectableButton
+                isSelected={backgroundType === "image"}
+                onClick={() => {
+                  setBackgroundType("image");
+                  let SPageClone = listQuizes[params].config;
+                  SPageClone.startpage.background.type = "image";
+                  updateQuizesList(params, { config: SPageClone });
+                }}
+              >
+                Изображение
+              </SelectableButton>
+              <SelectableButton
+                isSelected={backgroundType === "video"}
+                onClick={() => {
+                  setBackgroundType("video");
+                  let SPageClone = listQuizes[params].config;
+                  SPageClone.startpage.background.type = "video";
+                  updateQuizesList(params, { config: SPageClone });
+                }}
+              >
+                Видео
+              </SelectableButton>
+            </Box>
+
+            <Box
+              sx={{
+                display: backgroundType === "image" ? "flex" : "none",
                 flexDirection: "column",
               }}
             >
+              <Box
+                sx={{
+                  display: mobileVersion ? "none" : "flex",
+                  flexDirection: "column",
+                }}
+              >
+                <Typography
+                  sx={{
+                    fontWeight: 500,
+                    color: theme.palette.grey3.main,
+                    mt: "20px",
+                    mb: "14px",
+                  }}
+                >
+                  Изображение
+                </Typography>
+                <DropZone
+                  text={"5 MB максимум"}
+                  heightImg={"110px"}
+                  sx={{ maxWidth: "300px" }}
+                />
+              </Box>
+
+              <ModalSizeImage />
+
+              <Box
+                sx={{
+                  mt: "20px",
+                  display: "flex",
+                  gap: "10px",
+                  flexDirection: "column",
+                }}
+              >
+                <FormControlLabel
+                  control={
+                    <Checkbox
+                      icon={<IconCheck />}
+                      checkedIcon={<MobilePhoneIcon bgcolor={"#EEE4FC"} />}
+                    />
+                  }
+                  label="мобильная версия"
+                  sx={{
+                    color: theme.palette.brightPurple.main,
+                    textDecorationLine: "underline",
+                    textDecorationColor: theme.palette.brightPurple.main,
+                    ml: "-9px",
+                    userSelect: "none",
+                  }}
+                  onClick={() => {
+                    MobileVersionHC(!mobileVersion);
+                  }}
+                />
+                {mobileVersion ? (
+                  <Box sx={{ display: "flex", flexDirection: "column" }}>
+                    <Typography
+                      sx={{
+                        fontWeight: 500,
+                        color: theme.palette.grey3.main,
+                        mt: "11px",
+                        mb: "14px",
+                      }}
+                    >
+                      Изображение для мобильной версии
+                    </Typography>
+                    <DropZone text={"5 MB максимум"} heightImg={"110px"} />
+                  </Box>
+                ) : (
+                  <></>
+                )}
+              </Box>
+            </Box>
+
+            <Box
+              sx={{
+                display: backgroundType === "image" ? "none" : "flex",
+                flexDirection: "column",
+              }}
+            >
+              <Box
+                sx={{
+                  display: "flex",
+                  alignItems: "center",
+                  gap: "7px",
+                  mt: "20px",
+                  mb: "14px",
+                }}
+              >
+                <Typography
+                  sx={{ fontWeight: 500, color: theme.palette.grey3.main }}
+                >
+                  Добавить видео
+                </Typography>
+                <Tooltip title="Можно загрузить видео." placement="top">
+                  <Box>
+                    <InfoIcon />
+                  </Box>
+                </Tooltip>
+              </Box>
+              <ButtonBase
+                component="label"
+                sx={{ justifyContent: "flex-start" }}
+              >
+                <input
+                  onChange={(event) => videoHC(event.target)}
+                  hidden
+                  accept=".mp4"
+                  multiple
+                  type="file"
+                />
+                <UploadBox
+                  icon={<UploadIcon />}
+                  sx={{
+                    height: "48px",
+                    width: "48px",
+                    marginBottom: "20px",
+                  }}
+                />
+              </ButtonBase>
+              {video ? <video src={video} width="400" controls /> : null}
+              <Typography
+                sx={{
+                  fontWeight: 500,
+                  color: theme.palette.grey3.main,
+                  mt: "20px",
+                  mb: "5px",
+                }}
+              >
+                Настройки видео
+              </Typography>
+              <CustomCheckbox
+                label="Зацикливать видео"
+                checked={listQuizes[params].config.startpage.background.cycle}
+                handleChange={(e) => {
+                  let SPageClone = listQuizes[params].config;
+                  SPageClone.startpage.background.cycle = e.target.checked;
+                  updateQuizesList(params, { config: SPageClone });
+                }}
+              />
+              <Typography
+                sx={{
+                  fontWeight: 500,
+                  color: theme.palette.grey3.main,
+                  mt: "11px",
+                  mb: "14px",
+                }}
+              >
+                Изображение для мобильной версии
+              </Typography>
+              <DropZone text={"5 MB максимум"} heightImg={"110px"} />
+            </Box>
+
+            <Typography
+              sx={{
+                fontWeight: 500,
+                color: theme.palette.grey3.main,
+                mt: "20px",
+                mb: "14px",
+              }}
+            >
+              Расположение элементов
+            </Typography>
+            <Box
+              sx={{
+                display: "flex",
+                gap: "10px",
+              }}
+            >
+              <SelectableIconButton
+                onClick={() => {
+                  setAlignType("left");
+                  let SPageClone = listQuizes[params].config;
+                  SPageClone.startpage.position = "ltr";
+                  updateQuizesList(params, { config: SPageClone });
+                }}
+                isActive={alignType === "left"}
+                Icon={AlignLeftIcon}
+              />
+              <SelectableIconButton
+                onClick={() => {
+                  setAlignType("center");
+                  let SPageClone = listQuizes[params].config;
+                  SPageClone.startpage.position = "cnt";
+                  updateQuizesList(params, { config: SPageClone });
+                }}
+                isActive={alignType === "center"}
+                Icon={AlignCenterIcon}
+                sx={{ display: designType === "centered" ? "flex" : "none" }}
+              />
+              <SelectableIconButton
+                onClick={() => {
+                  setAlignType("right");
+                  let SPageClone = listQuizes[params].config;
+                  SPageClone.startpage.position = "rtl";
+                  updateQuizesList(params, { config: SPageClone });
+                }}
+                isActive={alignType === "right"}
+                Icon={AlignRightIcon}
+              />
+            </Box>
+
+            {(isTablet || !isSmallMonitor) && (
+              <>
+                <Box
+                  sx={{
+                    display: backgroundType === "image" ? "flex" : "none",
+                    flexDirection: "column",
+                  }}
+                >
+                  <Typography
+                    sx={{
+                      fontWeight: 500,
+                      color: theme.palette.grey3.main,
+                      margin: "20px 0",
+                    }}
+                  >
+                    Логотип
+                  </Typography>
+                  <DropZone
+                    text={"5 MB максимум"}
+                    heightImg={"110px"}
+                    sx={{ maxWidth: "300px" }}
+                  />
+                </Box>
+
+                <Typography
+                  sx={{
+                    fontWeight: 500,
+                    color: theme.palette.grey3.main,
+                    mt: "20px",
+                    mb: "14px",
+                  }}
+                >
+                  Favicon
+                </Typography>
+                <Box
+                  sx={{
+                    display: "flex",
+                    alignItems: "end",
+                    gap: "10px",
+                  }}
+                >
+                  <DropFav
+                    sx={{ height: "48px", width: "48px" }}
+                    heightImg={"48px"}
+                    widthImg={"48px"}
+                  />
+
+                  <Typography
+                    sx={{
+                      color: theme.palette.orange.main,
+                      fontSize: "16px",
+                      lineHeight: "19px",
+                      textDecoration: "underline",
+                    }}
+                  >
+                    5 MB максимум
+                  </Typography>
+                </Box>
+              </>
+            )}
+          </Box>
+        )}
+        {/*Правая сторона*/}
+        <Box
+          sx={{
+            display: isTablet && formState === "design" ? "none" : "flex",
+            flexDirection: "column",
+            flex: `1 1 795px`,
+          }}
+        >
+          {!isTablet && isSmallMonitor && formState === "design" && (
+            <>
+              <Box
+                sx={{
+                  display: backgroundType === "image" ? "flex" : "none",
+                  flexDirection: "column",
+                }}
+              >
+                <Typography
+                  sx={{
+                    fontWeight: 500,
+                    color: theme.palette.grey3.main,
+                    margin: "20px 0",
+                  }}
+                >
+                  Логотип
+                </Typography>
+                <DropZone
+                  text={"5 MB максимум"}
+                  heightImg={"110px"}
+                  sx={{ maxWidth: "300px" }}
+                />
+              </Box>
+
               <Typography
                 sx={{
                   fontWeight: 500,
@@ -312,360 +643,154 @@ export default function StartPageSettings() {
                   mb: "14px",
                 }}
               >
-                Изображение
+                Favicon
               </Typography>
-              <DropZone text={"5 MB максимум"} heightImg={"110px"} />
-            </Box>
-
-            <ModalSizeImage />
-
-            <Box
-              sx={{
-                mt: "20px",
-                display: "flex",
-                gap: "10px",
-                flexDirection: "column",
-              }}
-            >
-              <FormControlLabel
-                control={
-                  <Checkbox
-                    icon={<IconCheck />}
-                    checkedIcon={<MobilePhoneIcon bgcolor={"#EEE4FC"} />}
-                  />
-                }
-                label="мобильная версия"
+              <Box
                 sx={{
-                  color: theme.palette.brightPurple.main,
-                  textDecorationLine: "underline",
-                  textDecorationColor: theme.palette.brightPurple.main,
-                  ml: "-9px",
-                  userSelect: "none",
+                  display: "flex",
+                  alignItems: "end",
+                  gap: "10px",
                 }}
-                onClick={() => {
-                  MobileVersionHC(!mobileVersion);
-                }}
-              />
-              {mobileVersion ? (
-                <Box sx={{ display: "flex", flexDirection: "column" }}>
-                  <Typography
-                    sx={{
-                      fontWeight: 500,
-                      color: theme.palette.grey3.main,
-                      mt: "11px",
-                      mb: "14px",
-                    }}
-                  >
-                    Изображение для мобильной версии
-                  </Typography>
-                  <DropZone text={"5 MB максимум"} heightImg={"110px"} />
-                </Box>
-              ) : (
-                <></>
-              )}
-            </Box>
-          </Box>
-
-          <Box
-            sx={{
-              display: backgroundType === "image" ? "none" : "flex",
-              flexDirection: "column",
-            }}
-          >
-            <Box
-              sx={{
-                display: "flex",
-                alignItems: "center",
-                gap: "7px",
-                mt: "20px",
-                mb: "14px",
-              }}
-            >
-              <Typography
-                sx={{ fontWeight: 500, color: theme.palette.grey3.main }}
               >
-                Добавить видео
-              </Typography>
-              <Tooltip title="Можно загрузить видео." placement="top">
-                <Box>
-                  <InfoIcon />
-                </Box>
-              </Tooltip>
-            </Box>
-            <ButtonBase component="label" sx={{ justifyContent: "flex-start" }}>
-              <input
-                onChange={(event) => videoHC(event.target)}
-                hidden
-                accept=".mp4"
-                multiple
-                type="file"
-              />
-              <UploadBox
-                icon={<UploadIcon />}
+                <DropFav
+                  sx={{ height: "48px", width: "48px" }}
+                  heightImg={"48px"}
+                  widthImg={"48px"}
+                />
+
+                <Typography
+                  sx={{
+                    color: theme.palette.orange.main,
+                    fontSize: "16px",
+                    lineHeight: "19px",
+                    textDecoration: "underline",
+                  }}
+                >
+                  5 MB максимум
+                </Typography>
+              </Box>
+            </>
+          )}
+          {(!isSmallMonitor || (isSmallMonitor && formState === "content")) && (
+            <>
+              <Typography
                 sx={{
-                  height: "48px",
-                  width: "48px",
-                  marginBottom: "20px",
+                  fontWeight: 500,
+                  color: theme.palette.grey3.main,
+                  mb: "14px",
+                }}
+              >
+                Заголовок
+              </Typography>
+              <CustomTextField
+                placeholder="Текст-заполнитель — это текст, который"
+                text={listQuizes[params].name}
+                onChange={(e) =>
+                  updateQuizesList(params, { name: e.target.value })
+                }
+              />
+              <Typography
+                sx={{
+                  fontWeight: 500,
+                  color: theme.palette.grey3.main,
+                  mt: "20px",
+                  mb: "14px",
+                }}
+              >
+                Текст
+              </Typography>
+              <CustomTextField
+                placeholder="Текст-заполнитель — это текст, который "
+                text={listQuizes[params].config.startpage.description}
+                onChange={mutationHC}
+              />
+              <Typography
+                sx={{
+                  fontWeight: 500,
+                  color: theme.palette.grey3.main,
+                  mt: "20px",
+                  mb: "14px",
+                }}
+              >
+                Текст кнопки
+              </Typography>
+              <CustomTextField
+                placeholder="Начать"
+                text={listQuizes[params].config.startpage.button}
+                onChange={mutationButtonHC}
+              />
+              <Typography
+                sx={{
+                  fontWeight: 500,
+                  color: theme.palette.grey3.main,
+                  mt: "20px",
+                  mb: "14px",
+                }}
+              >
+                Телефон
+              </Typography>
+              <CustomTextField
+                placeholder="+7 900 000 00 00"
+                text={listQuizes[params].config.info.phonenumber}
+                onChange={mutationPhoneHC}
+              />
+              <CustomCheckbox
+                label="Кликабельный"
+                checked={listQuizes[params].config.info.clickable}
+                handleChange={(e) => {
+                  let SPageClone = listQuizes[params].config;
+                  SPageClone.info.clickable = e.target.checked;
+                  updateQuizesList(params, { config: SPageClone });
                 }}
               />
-            </ButtonBase>
-            {video ? <video src={video} width="400" controls /> : null}
-            <Typography
-              sx={{
-                fontWeight: 500,
-                color: theme.palette.grey3.main,
-                mt: "20px",
-                mb: "5px",
-              }}
-            >
-              Настройки видео
-            </Typography>
-            <CustomCheckbox
-              label="Зацикливать видео"
-              checked={listQuizes[params].config.startpage.background.cycle}
-              handleChange={(e) => {
-                let SPageClone = listQuizes[params].config;
-                SPageClone.startpage.background.cycle = e.target.checked;
-                updateQuizesList(params, { config: SPageClone });
-              }}
-            />
-            <Typography
-              sx={{
-                fontWeight: 500,
-                color: theme.palette.grey3.main,
-                mt: "11px",
-                mb: "14px",
-              }}
-            >
-              Изображение для мобильной версии
-            </Typography>
-            <DropZone text={"5 MB максимум"} heightImg={"110px"} />
-          </Box>
-
-          <Typography
-            sx={{
-              fontWeight: 500,
-              color: theme.palette.grey3.main,
-              mt: "20px",
-              mb: "14px",
-            }}
-          >
-            Расположение элементов
-          </Typography>
-          <Box
-            sx={{
-              display: "flex",
-              gap: "10px",
-            }}
-          >
-            <SelectableIconButton
-              onClick={() => {
-                setAlignType("left");
-                let SPageClone = listQuizes[params].config;
-                SPageClone.startpage.position = "ltr";
-                updateQuizesList(params, { config: SPageClone });
-              }}
-              isActive={alignType === "left"}
-              Icon={AlignLeftIcon}
-            />
-            <SelectableIconButton
-              onClick={() => {
-                setAlignType("center");
-                let SPageClone = listQuizes[params].config;
-                SPageClone.startpage.position = "cnt";
-                updateQuizesList(params, { config: SPageClone });
-              }}
-              isActive={alignType === "center"}
-              Icon={AlignCenterIcon}
-              sx={{ display: designType === "centered" ? "flex" : "none" }}
-            />
-            <SelectableIconButton
-              onClick={() => {
-                setAlignType("right");
-                let SPageClone = listQuizes[params].config;
-                SPageClone.startpage.position = "rtl";
-                updateQuizesList(params, { config: SPageClone });
-              }}
-              isActive={alignType === "right"}
-              Icon={AlignRightIcon}
-            />
-          </Box>
-
-          <Box
-            sx={{
-              display: backgroundType === "image" ? "flex" : "none",
-              flexDirection: "column",
-            }}
-          >
-            <Typography
-              sx={{
-                fontWeight: 500,
-                color: theme.palette.grey3.main,
-                margin: "20px 0",
-              }}
-            >
-              Логотип
-            </Typography>
-            <DropZone text={"5 MB максимум"} heightImg={"110px"} />
-          </Box>
-
-          <Typography
-            sx={{
-              fontWeight: 500,
-              color: theme.palette.grey3.main,
-              mt: "20px",
-              mb: "14px",
-            }}
-          >
-            Favicon
-          </Typography>
-          <Box
-            sx={{
-              display: "flex",
-              alignItems: "end",
-              gap: "10px",
-            }}
-          >
-            <DropFav
-              sx={{ height: "48px", width: "48px" }}
-              heightImg={"48px"}
-              widthImg={"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={listQuizes[params].name}
-            onChange={(e) => updateQuizesList(params, { name: e.target.value })}
-          />
-          <Typography
-            sx={{
-              fontWeight: 500,
-              color: theme.palette.grey3.main,
-              mt: "20px",
-              mb: "14px",
-            }}
-          >
-            Текст
-          </Typography>
-          <CustomTextField
-            placeholder="Текст-заполнитель — это текст, который "
-            text={listQuizes[params].config.startpage.description}
-            onChange={mutationHC}
-          />
-          <Typography
-            sx={{
-              fontWeight: 500,
-              color: theme.palette.grey3.main,
-              mt: "20px",
-              mb: "14px",
-            }}
-          >
-            Текст кнопки
-          </Typography>
-          <CustomTextField
-            placeholder="Начать"
-            text={listQuizes[params].config.startpage.button}
-            onChange={mutationButtonHC}
-          />
-          <Typography
-            sx={{
-              fontWeight: 500,
-              color: theme.palette.grey3.main,
-              mt: "20px",
-              mb: "14px",
-            }}
-          >
-            Телефон
-          </Typography>
-          <CustomTextField
-            placeholder="+7 900 000 00 00"
-            text={listQuizes[params].config.info.phonenumber}
-            onChange={mutationPhoneHC}
-          />
-          <CustomCheckbox
-            label="Кликабельный"
-            checked={listQuizes[params].config.info.clickable}
-            handleChange={(e) => {
-              let SPageClone = listQuizes[params].config;
-              SPageClone.info.clickable = e.target.checked;
-              updateQuizesList(params, { config: SPageClone });
-            }}
-          />
-          <Typography
-            sx={{
-              fontWeight: 500,
-              color: theme.palette.grey3.main,
-              mt: "11px",
-              mb: "14px",
-            }}
-          >
-            Название или слоган компании
-          </Typography>
-          <CustomTextField
-            placeholder="Текст-заполнитель — это текст, который "
-            text={listQuizes[params].config.info.orgname}
-            onChange={mutationOrgNameHC}
-          />
-          <Typography
-            sx={{
-              fontWeight: 500,
-              color: theme.palette.grey3.main,
-              mt: "20px",
-              mb: "14px",
-            }}
-          >
-            Сайт
-          </Typography>
-          <CustomTextField
-            placeholder="Текст-заполнитель — это текст, который "
-            text={listQuizes[params].config.info.site}
-            onChange={mutationSiteHC}
-          />
-          <Typography
-            sx={{
-              fontWeight: 500,
-              color: theme.palette.grey3.main,
-              mt: "20px",
-              mb: "14px",
-            }}
-          >
-            Юридическая информация
-          </Typography>
-          <CustomTextField
-            placeholder="Текст-заполнитель — это текст, который "
-            text={listQuizes[params].config.info.law}
-            onChange={mutationLawHC}
-          />
-          <Extra />
+              <Typography
+                sx={{
+                  fontWeight: 500,
+                  color: theme.palette.grey3.main,
+                  mt: "11px",
+                  mb: "14px",
+                }}
+              >
+                Название или слоган компании
+              </Typography>
+              <CustomTextField
+                placeholder="Текст-заполнитель — это текст, который "
+                text={listQuizes[params].config.info.orgname}
+                onChange={mutationOrgNameHC}
+              />
+              <Typography
+                sx={{
+                  fontWeight: 500,
+                  color: theme.palette.grey3.main,
+                  mt: "20px",
+                  mb: "14px",
+                }}
+              >
+                Сайт
+              </Typography>
+              <CustomTextField
+                placeholder="Текст-заполнитель — это текст, который "
+                text={listQuizes[params].config.info.site}
+                onChange={mutationSiteHC}
+              />
+              <Typography
+                sx={{
+                  fontWeight: 500,
+                  color: theme.palette.grey3.main,
+                  mt: "20px",
+                  mb: "14px",
+                }}
+              >
+                Юридическая информация
+              </Typography>
+              <CustomTextField
+                placeholder="Текст-заполнитель — это текст, который "
+                text={listQuizes[params].config.info.law}
+                onChange={mutationLawHC}
+              />
+              <Extra />
+            </>
+          )}
         </Box>
       </Box>
       <Box