работа над степпером

.idea/.gitignore

@@ -0,0 +1,8 @@
+# Default ignored files
+/shelf/
+/workspace.xml
+# Datasource local storage ignored files
+/dataSources/
+/dataSources.local.xml
+# Editor-based HTTP Client requests
+/httpRequests/

.idea/inspectionProfiles/Project_Default.xml

@@ -0,0 +1,6 @@
+<component name="InspectionProjectProfileManager">
+  <profile version="1.0">
+    <option name="myName" value="Project Default" />
+    <inspection_tool class="Eslint" enabled="true" level="WARNING" enabled_by_default="true" />
+  </profile>
+</component>

.idea/modules.xml

@@ -0,0 +1,8 @@
+<?xml version="1.0" encoding="UTF-8"?>
+<project version="4">
+  <component name="ProjectModuleManager">
+    <modules>
+      <module fileurl="file://$PROJECT_DIR$/.idea/squiz.iml" filepath="$PROJECT_DIR$/.idea/squiz.iml" />
+    </modules>
+  </component>
+</project>

.idea/squiz.iml

@@ -0,0 +1,8 @@
+<?xml version="1.0" encoding="UTF-8"?>
+<module type="WEB_MODULE" version="4">
+  <component name="NewModuleRootManager">
+    <content url="file://$MODULE_DIR$" />
+    <orderEntry type="inheritedJdk" />
+    <orderEntry type="sourceFolder" forTests="false" />
+  </component>
+</module>

.idea/vcs.xml

@@ -0,0 +1,6 @@
+<?xml version="1.0" encoding="UTF-8"?>
+<project version="4">
+  <component name="VcsDirectoryMappings">
+    <mapping directory="$PROJECT_DIR$" vcs="Git" />
+  </component>
+</project>

src/App.tsx

@@ -6,7 +6,8 @@ import MyQuizzes from "./components/MyQuizzes";
 import Navbar from "./components/Navbar/Navbar";
 import NavbarCreateQuiz from "./components/Navbar/NavbarCreateQuiz";
 import QuizGallery from "./components/QuizGallery";
-import lightTheme from "./utils/themes/light";
+// import lightTheme from "./utils/themes/light";
+// import darkTheme from "./utils/themes/dark";
 
 const Divider = styled("div")(() => ({
     height: "30px",
@@ -16,7 +17,7 @@ const Divider = styled("div")(() => ({
 function App() {
 
     return (
-        <ThemeProvider theme={lightTheme}>
+        <>
             <CssBaseline />
             <Navbar isLoggedIn={true} />
             <FirstQuiz />
@@ -27,10 +28,10 @@ function App() {
 
             <QuizGallery />
             <Divider />
-            
+
             <NavbarCreateQuiz />
             <CreateQuiz />
-        </ThemeProvider>
+        </>
     );
 }
 

src/components/Navbar/Navbar.tsx

@@ -1,6 +1,6 @@
 import NavbarCollapsed from "./NavbarCollapsed";
 import NavbarCreateQuiz from "./NavbarCreateQuiz";
-import NavbarFull from "./NavbarFull";
+import Header from "../../ui_kit/Header";
 
 
 interface Props {
@@ -17,5 +17,5 @@ export default function Navbar({ isLoggedIn, isCollapsed = false, mode = "defaul
         mode === "createQuiz" ?
             <NavbarCreateQuiz />
             :
-            <NavbarFull isLoggedIn={isLoggedIn} />;
+            <Header isLoggedIn={true} />;
 }

src/components/Navbar/NavbarFull.tsx

@@ -1,117 +0,0 @@
-import { Box, Button, Container, IconButton, Typography, useTheme } from "@mui/material";
-import LogoutIcon from "../icons/LogoutIcon";
-import NavMenuItem from "../NavMenuItem";
-import PenaLogo from "../PenaLogo";
-import SectionWrapper from "../SectionWrapper";
-import WalletIcon from "../icons/WalletIcon";
-import CustomAvatar from "./Avatar";
-
-
-interface Props {
-    isLoggedIn: boolean;
-}
-
-export default function NavbarFull({ isLoggedIn }: Props) {
-    const theme = useTheme();
-
-    return isLoggedIn ? (
-        <Container
-            component="nav"
-            disableGutters
-            maxWidth={false}
-            sx={{
-                px: "16px",
-                display: "flex",
-                height: "80px",
-                alignItems: "center",
-                gap: "60px",
-                bgcolor: "white",
-                borderBottom: "1px solid #E3E3E3",
-            }}
-        >
-            <PenaLogo width={124} />
-            <Box
-                sx={{
-                    display: "flex",
-                    gap: "30px",
-                    overflow: "hidden",
-                }}
-            >
-                <NavMenuItem text="Меню 1" />
-                <NavMenuItem text="Меню 2" isActive />
-                <NavMenuItem text="Меню 3" />
-                <NavMenuItem text="Меню 4" />
-                <NavMenuItem text="Меню 5" />
-                <NavMenuItem text="Меню 1" />
-                <NavMenuItem text="Меню 2" />
-            </Box>
-            <Box
-                sx={{
-                    display: "flex",
-                    ml: "auto",
-                }}
-            >
-                <IconButton sx={{ p: 0 }}>
-                    <WalletIcon color={theme.palette.grey2.main} bgcolor="#F2F3F7" />
-                </IconButton>
-                <Box sx={{ ml: "8px", whiteSpace: "nowrap" }}>
-                    <Typography
-                        sx={{
-                            fontSize: "12px",
-                            lineHeight: "14px",
-                            color: theme.palette.grey3.main,
-                        }}
-                    >Мой баланс</Typography>
-                    <Typography variant="body2" color={theme.palette.brightPurple.main}>00.00 руб.</Typography>
-                </Box>
-                <CustomAvatar sx={{ ml: "27px", backgroundColor: theme.palette.orange.main, height: "36px", width: "36px" }} />
-                <IconButton
-                    sx={{ ml: "20px", bgcolor: "#F2F3F7", borderRadius: "6px", height: "36px", width: "36px" }}
-                >
-                    <LogoutIcon />
-                </IconButton>
-            </Box>
-        </Container>
-    ) : (
-        <SectionWrapper
-            component="nav"
-            maxWidth="lg"
-            outerContainerSx={{
-                backgroundColor: theme.palette.lightPurple.main,
-                // borderBottom: "1px solid #E3E3E3",
-            }}
-            sx={{
-                px: "20px",
-                display: "flex",
-                justifyContent: "space-between",
-                height: "80px",
-                alignItems: "center",
-            }}
-        >
-            <Box
-                sx={{
-                    display: "flex",
-                    gap: "30px",
-                    overflow: "hidden",
-                }}
-            >
-                <NavMenuItem text="Меню 1" />
-                <NavMenuItem text="Меню 2" isActive />
-                <NavMenuItem text="Меню 3" />
-                <NavMenuItem text="Меню 4" />
-                <NavMenuItem text="Меню 5" />
-                <NavMenuItem text="Меню 1" />
-                <NavMenuItem text="Меню 2" />
-            </Box>
-            <Button
-                variant="outlined"
-                sx={{
-                    px: "18px",
-                    py: "10px",
-                    borderColor: "white",
-                    borderRadius: "8px"
-                }}
-            >Личный кабинет</Button>
-        </SectionWrapper>
-    );
-}

src/index.tsx

@@ -7,13 +7,15 @@ import lightTheme from "./utils/themes/light";
 import { ThemeProvider } from '@mui/material';
 import CreateQuiz from './components/CreateQuiz/CreateQuiz';
 import NavbarCreateQuiz from './components/Navbar/NavbarCreateQuiz';
-
+import darkTheme from "./utils/themes/dark";
 
 import HorizontalLinearStepper from './ui_kit/Stepper';
 import Create from './pages/createQuize/Create';
 import Quizes from './pages/createQuize/Quizes';
 import Projects from './pages/createQuize/Projects';
 import Gallery from './pages/createQuize/Gallery';
+import StartPage from "./pages/startPage/StartPage";
+import Main from "./pages/main"
 
 const root = ReactDOM.createRoot(
     document.getElementById('root') as HTMLElement
@@ -23,18 +25,23 @@ root.render(
         <ThemeProvider theme={lightTheme}>
     <BrowserRouter>
         <Routes>
-          <Route path="/" element={ <App /> } />
+          <Route path="/" element={ <Main /> }>
-          <Route path="/create" element={<Create/>} />
+            <Route path="/create" element={<Create/>} />
-          <Route path="/quizes" element={<Quizes/>}/>
+            <Route path="/start" element={<StartPage/>} />
-          <Route path="/projects" element={<Projects/>}  />
+          </Route>
-          <Route path="/gallery" element={<Gallery/>} />
-          <Route path="/create/quiz" element={<><NavbarCreateQuiz /></>} />
-          <Route path="/create/start" element={<><NavbarCreateQuiz /></>} />
-          <Route path="/create/settings" element={<><NavbarCreateQuiz /><CreateQuiz /></>} />
-          <Route path="/create/stepper" element={<><NavbarCreateQuiz /><HorizontalLinearStepper/></>} />
 
         </Routes>
     </BrowserRouter>
     </ThemeProvider>
   </React.StrictMode>
 );
+
+
+
+// <Route path="/quizes" element={<Quizes/>}/>
+// <Route path="/projects" element={<Projects/>}  />
+// <Route path="/gallery" element={<Gallery/>} />
+// <Route path="/create/quiz" element={<><NavbarCreateQuiz /></>} />
+// <Route path="/create/start" element={<><NavbarCreateQuiz /></>} />
+// <Route path="/create/settings" element={<><NavbarCreateQuiz /><CreateQuiz /></>} />
+// <Route path="/create/stepper" element={<><NavbarCreateQuiz /><HorizontalLinearStepper/></>} />

src/pages/createQuize/Create.tsx

@@ -3,6 +3,9 @@ import Navbar from "../../components/Navbar/Navbar";
 
 export default function Create(){
     return (
-<><Navbar isLoggedIn={true} /><FirstQuiz/></>
+        <>
+            <Navbar isLoggedIn={true} /><FirstQuiz/>
+            <></>
+        </>
     )
 }

src/pages/main.tsx

@@ -0,0 +1,30 @@
+import Header from '../ui_kit/Header';
+import Sidebar from '../ui_kit/sidebarCreateQuize';
+import Box from '@mui/material/Box';
+import {Outlet} from "react-router-dom";
+import {useTheme} from "@mui/material";
+
+
+export default function Main () {
+    const theme = useTheme();
+    return (
+        <>
+            <Header isLoggedIn={true}/>
+            <Box sx={{
+                display: 'flex'
+            }}
+            >
+                <Sidebar />
+                <Box
+                    sx={{
+                        background: theme.palette.background.default,
+                        width: '100%',
+                        padding: '25px'
+                    }}
+                >
+                    <Outlet />
+                </Box>
+            </Box>
+        </>
+    )
+}

src/pages/startPage/StartPage.tsx

@@ -0,0 +1,48 @@
+import { Box, Typography } from "@mui/material";
+import CardWithImage from "../../components/CreateQuiz/CardWithImage";
+import cardImage1 from "../../assets/card-1.png";
+import cardImage2 from "../../assets/card-2.png";
+import cardImage3 from "../../assets/card-3.png";
+import Card from '@mui/material/Card';
+import CardContent from '@mui/material/CardContent';
+import CardMedia from '@mui/material/CardMedia';
+import { Button, CardActionArea, CardActions } from '@mui/material';
+import CustomButton from "../../components/CustomButton";
+import Stepper from "../../ui_kit/Stepper";
+import StartPageSettings from "../../components/CreateQuiz/StartPageSettings";
+import CreateCard from "../../ui_kit/CreateCard";
+
+export default function StartPage() {
+    return (
+        <>
+            {/*Степпер*/}
+            <Stepper />
+            {/*первый шаг*/}
+            <CreateCard/>
+            {/*второй шаг*/}
+            <Box sx={{
+                mt: "60px",
+            }}>
+                <Typography variant="h5">Стартовая страница</Typography>
+
+                <Box sx={{
+                    display: "flex",
+                    gap: "3.4%",
+                    mt: "40px",
+                }}>
+                    <Button variant='text'>
+                        <CardWithImage image={cardImage1} text="Standart" />
+                    </Button>
+                    <Button variant='text'>
+                        <CardWithImage image={cardImage2} text="Expanded" />
+                    </Button>
+                    <Button variant='text'>
+                        <CardWithImage image={cardImage3} text="Centered" />
+                    </Button>
+                </Box>
+            </Box>
+            {/*третий шаг*/}
+            <StartPageSettings/>
+        </>
+    )
+}

src/pages/startPage/stepone.tsx

@@ -0,0 +1,7 @@
+import {Box} from "@mui/material";
+
+export default function Stepone () {
+    return (
+        <Box></Box>
+    )
+}

src/pages/startPage/steptwo.tsx

@@ -0,0 +1,7 @@
+import {Box} from "@mui/material";
+
+export default function Steptwo () {
+    return (
+        <Box></Box>
+    )
+}

src/ui_kit/CreateCard.tsx

@@ -1,75 +1,31 @@
-import { Box, Typography, useTheme } from "@mui/material";
+import {Box, Button, Typography, useTheme} from "@mui/material";
 import CreationCard from "../components/CreateQuiz/CreationCard";
 import quizCreationImage1 from "../assets/quiz-creation-1.png";
 import quizCreationImage2 from "../assets/quiz-creation-2.png";
 import { useState } from "react";
 export default function CreateCard() {
     const theme = useTheme();
-    const [progress, setProgress] = useState<number>(1 / 6);
+    return (
-    return (<>
+        <>
-        <Box
-        sx={{
-            border: `1px solid ${theme.palette.brightPurple.main}`,
-            borderRadius: "12px",
-            overflow: "hidden",
-            px: "20px",
-            pt: "20px",
-            pb: "10px",
-            position: "relative",
-        }}
-    >
-        <Box
-            sx={{
-                backgroundColor: "white",
-                height: "10px",
-                position: "absolute",
-                top: 0,
-                left: 0,
-                width: "100%",
-                boxShadow: `0px 6.6501px 20.5488px rgba(210, 208, 225, 0.0969343), 0px 2.76726px 8.55082px rgba(210, 208, 225, 0.0674749)`,
-            }}
-        />
-        <Box
-            sx={{
-                backgroundColor: theme.palette.brightPurple.main,
-                height: "10px",
-                position: "absolute",
-                top: 0,
-                left: 0,
-                width: `${(progress * 100).toFixed(3)}%`,
-            }}
-        />
-        <Typography
-            sx={{
-                fontSize: "12px",
-                lineHeight: "14px",
-                color: "#4D4D4D",
-            }}
-        >Шаг 1 из 6</Typography>
-        <Typography
-            sx={{
-                fontSize: "18px",
-                lineHeight: "24px",
-                color: "#4D4D4D",
-                mt: "5px",
-            }}
-        >Настройка стартовой страницы</Typography>
-    </Box>
     <Box sx={{
         display: "flex",
         gap: "3.4%",
         mt: "60px",
     }}>
-        <CreationCard
+        <Button variant='text'>
-            header="Создание квиз-опроса"
+            <CreationCard
-            text="У стартовой страницы одна ключевая задача - заинтересовать посетителя пройти квиз. С ней сложно ошибиться, сформулируйте суть предложения и подберите живую фотографию, остальное мы сделаем за вас"
+                header="Создание квиз-опроса"
-            image={quizCreationImage1}
+                text="У стартовой страницы одна ключевая задача - заинтересовать посетителя пройти квиз. С ней сложно ошибиться, сформулируйте суть предложения и подберите живую фотографию, остальное мы сделаем за вас"
-        />
+                image={quizCreationImage1}
-        <CreationCard
+            />
-            header="Создание анкеты"
+        </Button>
-            text="У стартовой страницы одна ключевая задача - заинтересовать посетителя пройти квиз. С ней сложно ошибиться, сформулируйте суть предложения и подберите живую фотографию, остальное мы сделаем за вас"
+        <Button variant='text'>
-            image={quizCreationImage2}
+            <CreationCard
-        />
+                header="Создание анкеты"
+                text="У стартовой страницы одна ключевая задача - заинтересовать посетителя пройти квиз. С ней сложно ошибиться, сформулируйте суть предложения и подберите живую фотографию, остальное мы сделаем за вас"
+                image={quizCreationImage2}
+            />
+        </Button>
     </Box>
     </>
     )

src/ui_kit/Header.tsx

@@ -0,0 +1,129 @@
+import { Box, Container, FormControl, IconButton, TextField, useTheme } from "@mui/material";
+import CustomButton from "../components/CustomButton";
+import BackArrowIcon from "../components/icons/BackArrowIcon";
+import EyeIcon from "../components/icons/EyeIcon";
+import CustomAvatar from "../components/Navbar/Avatar";
+import NavMenuItem from "../components/NavMenuItem";
+import PenaLogo from "../components/PenaLogo";
+
+interface Props {
+    isLoggedIn: boolean;
+}
+
+export default function Header({ isLoggedIn }: Props)  {
+    const theme = useTheme();
+
+    return (
+        <Container
+            component="nav"
+            maxWidth={false}
+            disableGutters
+            sx={{
+                px: "16px",
+                display: "flex",
+                height: "80px",
+                alignItems: "center",
+                bgcolor: "white",
+                borderBottom: "1px solid #E3E3E3",
+                zIndex: theme.zIndex.drawer + 1,
+            }}
+        >
+            <PenaLogo width={124} />
+            <Box
+                sx={{
+                    display: "flex",
+                    alignItems: "center",
+                    ml: "37px",
+                }}
+            >
+                <IconButton sx={{ p: "6px" }}>
+                    <BackArrowIcon />
+                </IconButton>
+                <FormControl
+                    fullWidth
+                    variant="standard"
+                >
+                    <TextField
+                        fullWidth
+                        id="project-name"
+                        placeholder="Название проекта окно"
+                        sx={{
+                            width: "270px",
+                            "& .MuiInputBase-root": {
+                                height: "34px",
+                                borderRadius: "8px",
+                                p: 0,
+                            },
+                        }}
+                        inputProps={{
+                            sx: {
+                                height: "20px",
+                                borderRadius: "8px",
+                                fontSize: "16px",
+                                lineHeight: "20px",
+                                p: "7px",
+                                color: "black",
+                                "&::placeholder": {
+                                    opacity: 1,
+                                },
+                            }
+                        }}
+                    />
+                </FormControl>
+            </Box>
+            <Box
+                sx={{
+                    display: "flex",
+                    gap: "30px",
+                    overflow: "hidden",
+                    ml: "20px",
+                }}
+            >
+                <NavMenuItem text="Редактировать" isActive />
+                <NavMenuItem text="Заявки" />
+                <NavMenuItem text="Аналитика" />
+                <NavMenuItem text="История" />
+                <NavMenuItem text="Помощь" />
+            </Box>
+            <Box
+                sx={{
+                    display: "flex",
+                    ml: "auto",
+                    gap: "15px",
+                }}
+            >
+                <CustomButton
+                    variant="outlined"
+                    startIcon={<EyeIcon />}
+                    sx={{
+                        color: theme.palette.brightPurple.main,
+                        borderColor: theme.palette.brightPurple.main,
+                        fontSize: "14px",
+                        lineHeight: "18px",
+                        px: "14px",
+                        py: "8px",
+                        width: "auto",
+                        height: "34px",
+                        "& .MuiButton-startIcon": {
+                            mr: "3px",
+                        }
+                    }}
+                >Предпросмотр</CustomButton>
+                <CustomButton
+                    variant="contained"
+                    sx={{
+                        backgroundColor: theme.palette.brightPurple.main,
+                        borderColor: theme.palette.brightPurple.main,
+                        fontSize: "14px",
+                        lineHeight: "18px",
+                        px: "17px",
+                        py: "8px",
+                        width: "auto",
+                        height: "34px",
+                    }}
+                >Опубликовать</CustomButton>
+                <CustomAvatar sx={{ ml: "11px", backgroundColor: theme.palette.orange.main, height: "36px", width: "36px" }} />
+            </Box>
+        </Container>
+    );
+}

src/ui_kit/StartPage.tsx

@@ -1,25 +0,0 @@
-import { Box, Typography } from "@mui/material";
-import CardWithImage from "../components/CreateQuiz/CardWithImage";
-import cardImage1 from "../assets/card-1.png";
-import cardImage2 from "../assets/card-2.png";
-import cardImage3 from "../assets/card-3.png";
-export default function StartPage() {
-    return (
-        <>
-      <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>  
-        </>
-    )
-}

src/ui_kit/Stepper.tsx

@@ -1,159 +1,268 @@
-import * as React from "react";
+import * as React from 'react';
-import Box from "@mui/material/Box";
+import { useTheme } from '@mui/material/styles';
-import Stepper from "@mui/material/Stepper";
+import MobileStepper from '@mui/material/MobileStepper';
-import Step from "@mui/material/Step";
+import Button from '@mui/material/Button';
-import StepLabel from "@mui/material/StepLabel";
+import KeyboardArrowLeft from '@mui/icons-material/KeyboardArrowLeft';
-import Button from "@mui/material/Button";
+import KeyboardArrowRight from '@mui/icons-material/KeyboardArrowRight';
-import Typography from "@mui/material/Typography";
+import {Box, Typography} from "@mui/material";
-import Navbar from "../components/Navbar/Navbar";
-import Create from "../pages/createQuize/Create";
-import { Container, useTheme } from "@mui/material";
-import Projects from "../pages/createQuize/Projects";
-import MyQuizzes from "../components/MyQuizzes";
-import SidebarCreateQuize from "./sidebarCreateQuize";
-import CreateCard from "./CreateCard";
-import StartPage from "./StartPage";
 
-const steps = ["Step 34", "Step 2", "Step 3"];
+export default function ProgressMobileStepper() {
-
-export default function HorizontalLinearStepper() {
-  const [activeStep, setActiveStep] = React.useState(0);
-  const [skipped, setSkipped] = React.useState(new Set<number>());
   const theme = useTheme();
-  const isStepOptional = (step: number) => {
+  const [activeStep, setActiveStep] = React.useState(1);
-    return step === 1;
-  };
-
-  const isStepSkipped = (step: number) => {
-    return skipped.has(step);
-  };
 
   const handleNext = () => {
-    let newSkipped = skipped;
-    if (isStepSkipped(activeStep)) {
-      newSkipped = new Set(newSkipped.values());
-      newSkipped.delete(activeStep);
-    }
-
     setActiveStep((prevActiveStep) => prevActiveStep + 1);
-    setSkipped(newSkipped);
   };
 
   const handleBack = () => {
     setActiveStep((prevActiveStep) => prevActiveStep - 1);
   };
 
-  const handleSkip = () => {
+  return (
-    if (!isStepOptional(activeStep)) {
+      <Box
-      // You probably want to guard against something like this,
+          sx={{
-      // it should never occur unless someone's actively trying to break something.
+              width: '100%',
-      throw new Error("You can't skip a step that isn't optional.");
+              display: 'flex',
-    }
+              justifyContent: 'center',
-
+              flexDirection: 'column',
-    setActiveStep((prevActiveStep) => prevActiveStep + 1);
+              height: '51px',
-    setSkipped((prevSkipped) => {
+              borderRadius: '13px',
-      const newSkipped = new Set(prevSkipped.values());
+              border: 'solid #7E2AEA 1px',
-      newSkipped.add(activeStep);
+              padding: '0 0 20px 20px',
-      return newSkipped;
+              overflow: 'hidden'
-    });
+          }}
-  };
+      >
-
+          <MobileStepper
-  const handleReset = () => {
+              variant="progress"
-    setActiveStep(0);
+              steps={6}
-  };
+              position="static"
-  let component = null
+              activeStep={activeStep}
-  switch (activeStep) {
+              sx={{
-  case 0:
+                  width: '100%',
-    component = <></>
+                  flexGrow: 1,
-    break;
+                  '& .css-1ej0n1q-MuiLinearProgress-root-MuiMobileStepper-progress': {
-  case 1:
+                    height: '10px',
-    component = <CreateCard/>
+                    background: '#ffffff',
-    break;
+                    width: '100%'
-  case 2:
+                  },
-    component = <StartPage/>
+                  '& .css-1v0msyf-MuiLinearProgress-bar1': {
-    break;
+                    background: '#7e2aea',
-  default:
+                  },
-    break;
+              }}
-}
+              nextButton={
-  return (<>
+                <Button size="small" onClick={handleNext} disabled={activeStep === 5} sx={{display: 'none'}}>
-    <Container  maxWidth={false}
+                  {theme.direction === 'rtl' ? (
-    disableGutters
+                      <KeyboardArrowLeft />
-    sx={{
+                  ) : (
-      display:'flex',
+                      <KeyboardArrowRight />
-        minHeight: "calc(100vh - 80px)",
+                  )}
-    }}>
+                </Button>
-      <SidebarCreateQuize/>
+              }
-      <Container
+              backButton={
-                maxWidth="lg"
+                <Button size="small" onClick={handleBack} disabled={activeStep === 0} sx={{display: 'none'}}>
-                disableGutters
+                  {theme.direction === 'rtl' ? (
-                sx={{
+                      <KeyboardArrowRight />
-                    p: "25px",
+                  ) : (
-                    [theme.breakpoints.up("lg")]: {
+                      <KeyboardArrowLeft />
-                        maxWidth: "1210px",
+                  )}
-                    }
+                </Button>
-                }}
+              }
-            >
+          />
-     {component}
+          <Typography> Шаг 1 из 6</Typography>
-     </Container>
+          <Typography>Настройка стартовой страницы</Typography>
-     </Container>
+    </Box>
-      {activeStep === steps.length ? (
-        <React.Fragment>
-          <Typography sx={{ mt: 2, mb: 1 }}>
-            All steps completed - you&apos;re finished
-          </Typography>
-          <Box sx={{ display: "flex", flexDirection: "row", pt: 2 }}>
-            <Box sx={{ flex: "1 1 auto" }} />
-            <Button onClick={handleReset}>Reset</Button>
-          </Box>
-        </React.Fragment>
-      ) : (
-
-        //Тут отображаемые компоненты
-        <React.Fragment>
-          <Box sx={{ display: "flex", flexDirection: "row", pt: 2 }}>
-            <Button
-              color="inherit"
-              disabled={activeStep === 0}
-              onClick={handleBack}
-              sx={{ mr: 1 }}
-            >
-              Back
-            </Button>
-            <Box sx={{ flex: "1 1 auto" }} />
-            {isStepOptional(activeStep) && (
-              <Button color="inherit" onClick={handleSkip} sx={{ mr: 1 }}>
-                Skip
-              </Button>
-            )}
-            <Button onClick={handleNext}>
-              {activeStep === steps.length - 1 ? "Finish" : "Next"}
-            </Button>
-          </Box>
-        </React.Fragment>
-      )}
-      
-      <Stepper activeStep={activeStep}>
-        {steps.map((label, index) => {
-          const stepProps: { completed?: boolean } = {};
-          const labelProps: {
-            optional?: React.ReactNode;
-          } = {};
-          if (isStepOptional(index)) {
-            labelProps.optional = (
-              <Typography variant="caption">Optional</Typography>
-            );
-          }
-          if (isStepSkipped(index)) {
-            stepProps.completed = false;
-          }
-
-          return (
-            <Step key={label} {...stepProps}>
-              <StepLabel {...labelProps}>{label}</StepLabel>
-            </Step>
-          );
-        })}
-      </Stepper>
-      </>
   );
 }
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+// import * as React from "react";
+// import Box from "@mui/material/Box";
+// import Stepper from "@mui/material/Stepper";
+// import Step from "@mui/material/Step";
+// import StepLabel from "@mui/material/StepLabel";
+// import Button from "@mui/material/Button";
+// import Typography from "@mui/material/Typography";
+// import Navbar from "../components/Navbar/Navbar";
+// import Create from "../pages/createQuize/Create";
+// import { Container, useTheme } from "@mui/material";
+// import Projects from "../pages/createQuize/Projects";
+// import MyQuizzes from "../components/MyQuizzes";
+// import SidebarCreateQuize from "./sidebarCreateQuize";
+// import CreateCard from "./CreateCard";
+// // import StartPage from "../pages/startPage/StartPage";
+//
+// const steps = ["Step 34", "Step 2", "Step 3"];
+//
+// export default function HorizontalLinearStepper() {
+//   const [activeStep, setActiveStep] = React.useState(0);
+//   const [skipped, setSkipped] = React.useState(new Set<number>());
+//   const theme = useTheme();
+//   const isStepOptional = (step: number) => {
+//     return step === 1;
+//   };
+//
+//   const isStepSkipped = (step: number) => {
+//     return skipped.has(step);
+//   };
+//
+//   const handleNext = () => {
+//     let newSkipped = skipped;
+//     if (isStepSkipped(activeStep)) {
+//       newSkipped = new Set(newSkipped.values());
+//       newSkipped.delete(activeStep);
+//     }
+//
+//     setActiveStep((prevActiveStep) => prevActiveStep + 1);
+//     setSkipped(newSkipped);
+//   };
+//
+//   const handleBack = () => {
+//     setActiveStep((prevActiveStep) => prevActiveStep - 1);
+//   };
+//
+//   const handleSkip = () => {
+//     if (!isStepOptional(activeStep)) {
+//       // You probably want to guard against something like this,
+//       // it should never occur unless someone's actively trying to break something.
+//       throw new Error("You can't skip a step that isn't optional.");
+//     }
+//
+//     setActiveStep((prevActiveStep) => prevActiveStep + 1);
+//     setSkipped((prevSkipped) => {
+//       const newSkipped = new Set(prevSkipped.values());
+//       newSkipped.add(activeStep);
+//       return newSkipped;
+//     });
+//   };
+//
+//   const handleReset = () => {
+//     setActiveStep(0);
+//   };
+//   let component = null
+//   switch (activeStep) {
+//   case 0:
+//     component = <></>
+//     break;
+//   case 1:
+//     component = <CreateCard/>
+//     break;
+//   // case 2:
+//   //   component = <StartPage/>
+//   //   break;
+//   default:
+//     break;
+// }
+//   return (<>
+//     <Container  maxWidth={false}
+//     disableGutters
+//     sx={{
+//       display:'flex',
+//         minHeight: "calc(100vh - 80px)",
+//     }}>
+//       {/*<SidebarCreateQuize/>*/}
+//       <Container
+//                 maxWidth="lg"
+//                 disableGutters
+//                 sx={{
+//                     p: "25px",
+//                     [theme.breakpoints.up("lg")]: {
+//                         maxWidth: "1210px",
+//                     }
+//                 }}
+//             >
+//      {component}
+//      </Container>
+//      </Container>
+//       {activeStep === steps.length ? (
+//         <React.Fragment>
+//           <Typography sx={{ mt: 2, mb: 1 }}>
+//             All steps completed - you&apos;re finished
+//           </Typography>
+//           <Box sx={{ display: "flex", flexDirection: "row", pt: 2 }}>
+//             <Box sx={{ flex: "1 1 auto" }} />
+//             <Button onClick={handleReset}>Reset</Button>
+//           </Box>
+//         </React.Fragment>
+//       ) : (
+//
+//         //Тут отображаемые компоненты
+//         <React.Fragment>
+//           <Box sx={{ display: "flex", flexDirection: "row", pt: 2 }}>
+//             <Button
+//               color="inherit"
+//               disabled={activeStep === 0}
+//               onClick={handleBack}
+//               sx={{ mr: 1 }}
+//             >
+//               Back
+//             </Button>
+//             <Box sx={{ flex: "1 1 auto" }} />
+//             {isStepOptional(activeStep) && (
+//               <Button color="inherit" onClick={handleSkip} sx={{ mr: 1 }}>
+//                 Skip
+//               </Button>
+//             )}
+//             <Button onClick={handleNext}>
+//               {activeStep === steps.length - 1 ? "Finish" : "Next"}
+//             </Button>
+//           </Box>
+//         </React.Fragment>
+//       )}
+//
+//       <Stepper activeStep={activeStep}>
+//         {steps.map((label, index) => {
+//           const stepProps: { completed?: boolean } = {};
+//           const labelProps: {
+//             optional?: React.ReactNode;
+//           } = {};
+//           if (isStepOptional(index)) {
+//             labelProps.optional = (
+//               <Typography variant="caption">Optional</Typography>
+//             );
+//           }
+//           if (isStepSkipped(index)) {
+//             stepProps.completed = false;
+//           }
+//
+//           return (
+//             <Step key={label} {...stepProps}>
+//               <StepLabel {...labelProps}>{label}</StepLabel>
+//             </Step>
+//           );
+//         })}
+//       </Stepper>
+//       </>
+//   );
+// }

src/ui_kit/sidebarCreateQuize.tsx

@@ -14,7 +14,6 @@ import GearIcon from "../components/icons/GearIcon";
 import LayoutIcon from "../components/icons/LayoutIcon";
 import MenuItem from "../components/CreateQuiz/MenuItem";
 
-
 const createQuizMenuItems = [
     [LayoutIcon, "Стартовая страница"],
     [QuestionIcon, "Вопросы"],
@@ -45,6 +44,7 @@ export default function SidebarCreateQuize() {
                     backgroundColor: theme.palette.lightPurple.main,
                     minWidth: isMenuCollapsed ? "80px" : "230px",
                     width: isMenuCollapsed ? "80px" : "230px",
+                    height: '100vh',
                     display: "flex",
                     flexDirection: "column",
                     py: "19px",

src/utils/themes/dark.ts

@@ -31,6 +31,15 @@ const darkTheme = createTheme({
         grey1: {
             main: "#434657",
         },
+        grey2: {
+            main: "#9A9AAF",
+        },
+        grey3: {
+            main: "#4D4D4D",
+        },
+        orange: {
+            main: "#FB5607",
+        },
         navbarbg: {
             main: "#333647",
         },