feat: StartPageSettings mobile styles

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,10 +193,13 @@ export default function StartPageSettings() {
                         0px 2.76726px 8.55082px rgba(210, 208, 225, 0.0674749)`,
         }}
       >
+        {(!isSmallMonitor || (isSmallMonitor && formState === "design")) && (
           <Box
             sx={{
               pr: "20px",
-            borderRight: `1px solid ${theme.palette.grey2.main}`,
+              borderRight: `1px solid ${
+                isTablet ? "transparent" : theme.palette.grey2.main
+              }`,
               display: "flex",
               flexDirection: "column",
               flex: `1 1 342px`,
@@ -314,7 +357,11 @@ export default function StartPageSettings() {
                 >
                   Изображение
                 </Typography>
-              <DropZone text={"5 MB максимум"} heightImg={"110px"} />
+                <DropZone
+                  text={"5 MB максимум"}
+                  heightImg={"110px"}
+                  sx={{ maxWidth: "300px" }}
+                />
               </Box>
 
               <ModalSizeImage />
@@ -392,7 +439,10 @@ export default function StartPageSettings() {
                   </Box>
                 </Tooltip>
               </Box>
-            <ButtonBase component="label" sx={{ justifyContent: "flex-start" }}>
+              <ButtonBase
+                component="label"
+                sx={{ justifyContent: "flex-start" }}
+              >
                 <input
                   onChange={(event) => videoHC(event.target)}
                   hidden
@@ -491,6 +541,8 @@ export default function StartPageSettings() {
               />
             </Box>
 
+            {(isTablet || !isSmallMonitor) && (
+              <>
                 <Box
                   sx={{
                     display: backgroundType === "image" ? "flex" : "none",
@@ -506,7 +558,11 @@ export default function StartPageSettings() {
                   >
                     Логотип
                   </Typography>
-            <DropZone text={"5 MB максимум"} heightImg={"110px"} />
+                  <DropZone
+                    text={"5 MB максимум"}
+                    heightImg={"110px"}
+                    sx={{ maxWidth: "300px" }}
+                  />
                 </Box>
 
                 <Typography
@@ -543,15 +599,80 @@ export default function StartPageSettings() {
                     5 MB максимум
                   </Typography>
                 </Box>
+              </>
+            )}
           </Box>
+        )}
         {/*Правая сторона*/}
         <Box
           sx={{
-            display: "flex",
+            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,
+                  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>
+            </>
+          )}
+          {(!isSmallMonitor || (isSmallMonitor && formState === "content")) && (
+            <>
               <Typography
                 sx={{
                   fontWeight: 500,
@@ -564,7 +685,9 @@ export default function StartPageSettings() {
               <CustomTextField
                 placeholder="Текст-заполнитель — это текст, который"
                 text={listQuizes[params].name}
-            onChange={(e) => updateQuizesList(params, { name: e.target.value })}
+                onChange={(e) =>
+                  updateQuizesList(params, { name: e.target.value })
+                }
               />
               <Typography
                 sx={{
@@ -666,6 +789,8 @@ export default function StartPageSettings() {
                 onChange={mutationLawHC}
               />
               <Extra />
+            </>
+          )}
         </Box>
       </Box>
       <Box