feat: Main page mobile styles

src/pages/createQuize/MyQuizzesFull.tsx

@@ -1,4 +1,12 @@
-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";
@@ -11,20 +19,21 @@ interface Props {
   children?: React.ReactNode;
 }
 
-
+export default function MyQuizzesFull({
-export default function MyQuizzesFull({outerContainerSx: sx, children}: Props) {
+  outerContainerSx: sx,
-    const {listQuizes, updateQuizesList, removeQuiz, createBlank} = quizStore()
+  children,
-    const navigate = useNavigate()
+}: 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 ?
+      {Object.keys(listQuizes).length === 0 ? (
-                <FirstQuiz/> :
+        <FirstQuiz />
-
+      ) : (
-
+        <SectionWrapper maxWidth="lg">
-                    <SectionWrapper
-                        maxWidth="lg"
-                    >
           <ComplexNavText text1="Кабинет квизов" />
           <Box
             sx={{
@@ -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={{
@@ -54,25 +68,21 @@ export default function MyQuizzesFull({outerContainerSx: sx, children}: Props) {
             }}
           >
             {Object.values(listQuizes).map((e, i) => (
-                                    <QuizCard name={e.name}
+              <QuizCard
+                name={e.name}
                 openCount={0}
                 applicationCount={0}
                 conversionPercent={0}
                 onClickDelete={() => {
-                                                  removeQuiz(e.id)
+                  removeQuiz(e.id);
                 }}
-                                              onClickEdit={() =>
+                onClickEdit={() => navigate(`/setting/${e.id}`)}
-                                                  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={{
@@ -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

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
                 }}
             >