feat: Main page mobile styles

src/pages/createQuize/MyQuizzesFull.tsx

@@ -1,31 +1,40 @@
-import {Typography, Box, Button, SxProps, Theme} from "@mui/material";
+import {
+  Typography,
+  Box,
+  Button,
+  SxProps,
+  Theme,
+  useTheme,
+  useMediaQuery,
+} from "@mui/material";
 import ComplexNavText from "./ComplexNavText";
 import QuizCard from "./QuizCard";
 import SectionWrapper from "@ui_kit/SectionWrapper";
 import React from "react";
-import {quizStore} from "@root/quizes";
+import { quizStore } from "@root/quizes";
 import FirstQuiz from "./FirstQuiz";
-import {useNavigate} from "react-router-dom";
+import { useNavigate } from "react-router-dom";
 interface Props {
   outerContainerSx?: SxProps<Theme>;
   children?: React.ReactNode;
 }
 
-
-export default function MyQuizzesFull({outerContainerSx: sx, children}: Props) {
-    const {listQuizes, updateQuizesList, removeQuiz, createBlank} = quizStore()
-    const navigate = useNavigate()
+export default function MyQuizzesFull({
+  outerContainerSx: sx,
+  children,
+}: Props) {
+  const { listQuizes, updateQuizesList, removeQuiz, createBlank } = quizStore();
+  const navigate = useNavigate();
+  const theme = useTheme();
+  const isMobile = useMediaQuery(theme.breakpoints.down(500));
 
   return (
     <>
-        {Object.keys(listQuizes).length === 0 ?
-                <FirstQuiz/> :
-
-
-                    <SectionWrapper
-                        maxWidth="lg"
-                    >
-                        <ComplexNavText text1="Кабинет квизов"/>
+      {Object.keys(listQuizes).length === 0 ? (
+        <FirstQuiz />
+      ) : (
+        <SectionWrapper maxWidth="lg">
+          <ComplexNavText text1="Кабинет квизов" />
           <Box
             sx={{
               display: "flex",
@@ -38,11 +47,16 @@ export default function MyQuizzesFull({outerContainerSx: sx, children}: Props) {
             <Typography variant="h4">Мои квизы</Typography>
             <Button
               variant="contained"
-                                sx={{padding: "10px 47px"}}
+              sx={{
+                padding: isMobile ? "10px" : "10px 47px",
+                minWidth: "44px",
+              }}
               onClick={() => {
                 navigate(`/setting/${createBlank()}`);
               }}
-                            >Создать +</Button>
+            >
+              {isMobile ? "+" : "Создать +"}
+            </Button>
           </Box>
           <Box
             sx={{
@@ -53,26 +67,22 @@ export default function MyQuizzesFull({outerContainerSx: sx, children}: Props) {
               mb: "60px",
             }}
           >
-                            {Object.values(listQuizes).map((e, i) =>(
-                                    <QuizCard name={e.name}
+            {Object.values(listQuizes).map((e, i) => (
+              <QuizCard
+                name={e.name}
                 openCount={0}
                 applicationCount={0}
                 conversionPercent={0}
                 onClickDelete={() => {
-                                                  removeQuiz(e.id)
+                  removeQuiz(e.id);
                 }}
-                                              onClickEdit={() =>
-                                                  navigate(`/setting/${e.id}`)
-                                              }
+                onClickEdit={() => navigate(`/setting/${e.id}`)}
               />
-                                )
-                            )}
-
+            ))}
           </Box>
           {children}
         </SectionWrapper>
-
-      }
+      )}
     </>
-    )
+  );
 }

src/pages/createQuize/QuizCard.tsx

@@ -1,10 +1,16 @@
-import {Box, Button, IconButton, Typography, useTheme} from "@mui/material";
+import {
+  Box,
+  Button,
+  IconButton,
+  Typography,
+  useTheme,
+  useMediaQuery,
+} from "@mui/material";
 import ChartIcon from "@icons/ChartIcon";
 import LinkIcon from "@icons/LinkIcon";
 import PencilIcon from "@icons/PencilIcon";
 import MoreHorizIcon from "@mui/icons-material/MoreHoriz";
 
-
 interface Props {
   name: string;
   openCount?: number;
@@ -14,8 +20,16 @@ interface Props {
   onClickEdit?: () => void;
 }
 
-export default function QuizCard({ name, openCount = 0, applicationCount = 0, conversionPercent = 0, onClickDelete, onClickEdit }: Props) {
+export default function QuizCard({
+  name,
+  openCount = 0,
+  applicationCount = 0,
+  conversionPercent = 0,
+  onClickDelete,
+  onClickEdit,
+}: Props) {
   const theme = useTheme();
+  const isMobile = useMediaQuery(theme.breakpoints.down(600));
 
   return (
     <Box
@@ -46,7 +60,9 @@ export default function QuizCard({ name, openCount = 0, applicationCount = 0, co
         }}
       >
         <LinkIcon bgcolor="#EEE4FC" color={theme.palette.brightPurple.main} />
-                <Typography color={theme.palette.grey3.main}>быстрая ссылка ...</Typography>
+        <Typography color={theme.palette.grey3.main}>
+          быстрая ссылка ...
+        </Typography>
       </Box>
       <Box
         sx={{
@@ -55,15 +71,15 @@ export default function QuizCard({ name, openCount = 0, applicationCount = 0, co
           mr: "22px",
         }}
       >
-                <Box sx={{flex: "1 1 0"}}>
+        <Box sx={{ flex: "1 1 0" }}>
           <Typography variant="h5">{openCount}</Typography>
           <Typography color={theme.palette.grey3.main}>Открытий</Typography>
         </Box>
-                <Box sx={{flex: "1 1 0"}}>
+        <Box sx={{ flex: "1 1 0" }}>
           <Typography variant="h5">{openCount}</Typography>
           <Typography color={theme.palette.grey3.main}>Заявок</Typography>
         </Box>
-                <Box sx={{flex: "1 1 0"}}>
+        <Box sx={{ flex: "1 1 0" }}>
           <Typography variant="h5">{openCount} %</Typography>
           <Typography color={theme.palette.grey3.main}>Конверсия</Typography>
         </Box>
@@ -72,13 +88,13 @@ export default function QuizCard({ name, openCount = 0, applicationCount = 0, co
         sx={{
           mt: "auto",
           display: "flex",
-                    gap: "20px",
+          gap: isMobile ? "10px" : "20px",
         }}
       >
         <Button
           variant="contained"
           sx={{
-                        padding: "10px 39px"
+            padding: "10px 39px",
           }}
         >
           Заявки
@@ -88,13 +104,16 @@ export default function QuizCard({ name, openCount = 0, applicationCount = 0, co
           startIcon={<PencilIcon />}
           onClick={onClickEdit}
           sx={{
+            padding: isMobile ? "10px" : "10px 20px",
+            minWidth: "unset",
             color: theme.palette.brightPurple.main,
             "& .MuiButton-startIcon": {
-                            mr: "4px",
-                        }
+              marginRight: isMobile ? 0 : "4px",
+              marginLeft: 0,
+            },
           }}
         >
-                    Редактировать
+          {isMobile ? "" : "Редактировать"}
         </Button>
         <Button
           variant="outlined"
@@ -105,7 +124,7 @@ export default function QuizCard({ name, openCount = 0, applicationCount = 0, co
             "& .MuiButton-startIcon": {
               mr: 0,
               ml: 0,
-                        }
+            },
           }}
         />
         <IconButton
@@ -118,6 +137,6 @@ export default function QuizCard({ name, openCount = 0, applicationCount = 0, co
           <MoreHorizIcon sx={{ transform: "scale(1.75)" }} />
         </IconButton>
       </Box>
-        </Box >
+    </Box>
   );
 }

src/pages/main.tsx

@@ -1,7 +1,7 @@
 import Header from "@ui_kit/Header/Header";
 import Sidebar from "@ui_kit/Sidebar";
 import Box from "@mui/material/Box";
-import { useTheme } from "@mui/material";
+import { useTheme, useMediaQuery } from "@mui/material";
 import HeaderFull from "@ui_kit/Header/HeaderFull";
 
 interface Props {
@@ -12,6 +12,8 @@ interface Props {
 
 export default function Main({ sidebar, header, page }: Props) {
   const theme = useTheme();
+  const isMobile = useMediaQuery(theme.breakpoints.down(600));
+
   return (
     <>
       {header ? <Header /> : <HeaderFull />}
@@ -25,7 +27,7 @@ export default function Main({ sidebar, header, page }: Props) {
           sx={{
             background: theme.palette.background.default,
             width: "100%",
-            padding: "25px",
+            padding: isMobile ? "15px" : "25px",
             height: "calc(100vh - 80px)",
             overflow: "auto",
             boxSizing: "border-box",

src/ui_kit/SectionWrapper.tsx

@@ -25,7 +25,7 @@ export default function SectionWrapper({ component, outerContainerSx: sx, sx: in
                 disableGutters
                 maxWidth={maxWidth}
                 sx={{
-                    px: matchMd ? "20px" : "18px",
+                    px: matchMd ? "20px" : "0px",
                     ...innerSx
                 }}
             >