SQuiz/frontPanel
2
0
Fork 0
Code Issues 10 Pull Requests Actions Packages Projects Releases Wiki Activity

готов хедер и сайдбар, провела небольшой рефакторинг

Browse Source
This commit is contained in:
Tamara 2023-05-10 20:35:30 +03:00
parent 00bb68671b
commit ba26c6f5a1
50 changed files with 155 additions and 771 deletions
Show Stats Download Patch File Download Diff File Expand all files Collapse all files

37
src/App.tsx
View File

@ -1,37 +0,0 @@
import { CssBaseline } from "@mui/material";
import { styled } from "@mui/material/styles";
import CreateQuiz from "./components/CreateQuiz/CreateQuiz";
import FirstQuiz from "./pages/createQuize/FirstQuiz";
import MyQuizzes from "./pages/createQuize/MyQuizzes";
import Navbar from "@ui_kit/Header/Navbar";
import NavbarCreateQuiz from "@ui_kit/Header/NavbarCreateQuiz";
import QuizGallery from "./pages/createQuize/QuizGallery";
import lightTheme from "./utils/themes/light";
import darkTheme from "./utils/themes/dark";
const Divider = styled("div")(() => ({
height: "30px",
backgroundColor: "black",
}));
function App() {
return (
<>
<CssBaseline />
<Navbar isLoggedIn={true} />
<FirstQuiz />
<Divider />
<MyQuizzes />
<Divider />
<QuizGallery />
<Divider />
<NavbarCreateQuiz />
<CreateQuiz />
</>
);
}
export default App;

31
src/components/ComplexHeader.tsx
View File

@ -1,31 +0,0 @@
import { SxProps, Theme, Typography, useTheme } from "@mui/material";
interface Props {
text1: string;
text2?: string;
sx?: SxProps<Theme>;
}
export default function ComplexHeader({ text1, text2, sx }: Props) {
const theme = useTheme();
return (
<Typography variant="h4" sx={sx}>
{text1}
{text2 &&
<Typography
component="span"
sx={{
fontWeight: "inherit",
fontSize: "inherit",
lineHeight: "inherit",
color: theme.palette.brightPurple.main,
}}
>
{text2}
</Typography>
}
</Typography>
);
}

186
src/components/CreateQuiz/CreateQuiz.tsx
View File

@ -1,186 +0,0 @@
import { useState } from "react";
import { Container, Box, useTheme, List, Typography, IconButton } from "@mui/material";
import MenuItem from "./MenuItem";
import MegaphoneIcon from "../../assets/icons/MegaphoneIcon";
import QuestionIcon from "../../assets/icons/QuestionIcon";
import ChartPieIcon from "../../assets/icons/ChartPieIcon";
import ContactBookIcon from "../../assets/icons/ContactBookIcon";
import FlowArrowIcon from "../../assets/icons/FlowArrowIcon";
import CollapseMenuIcon from "../../assets/icons/CollapseMenuIcon";
import TagIcon from "../../assets/icons/TagIcon";
import PencilCircleIcon from "../../assets/icons/PencilCircleIcon";
import PuzzlePieceIcon from "../../assets/icons/PuzzlePieceIcon";
import GearIcon from "../../assets/icons/GearIcon";
import LayoutIcon from "../../assets/icons/LayoutIcon";
import CardWithImage from "./CardWithImage";
import CreationCard from "@ui_kit/CreationCard";
import quizCreationImage1 from "../../assets/quiz-creation-1.png";
import quizCreationImage2 from "../../assets/quiz-creation-2.png";
import cardImage1 from "../../assets/card-1.png";
import cardImage2 from "../../assets/card-2.png";
import cardImage3 from "../../assets/card-3.png";
import StartPageSettings from "../../pages/startPage/StartPageSettings";
import CustomButton from "../CustomButton";
import Sidebar from "@ui_kit/Sidebar";
const createQuizMenuItems = [
[LayoutIcon, "Стартовая страница"],
[QuestionIcon, "Вопросы"],
[ChartPieIcon, "Результаты"],
[ContactBookIcon, "Форма контактов"],
[FlowArrowIcon, "Установка квиза"],
[MegaphoneIcon, "Запуск рекламы"],
] as const;
const quizSettingsMenuItems = [
[TagIcon, "Дополнения"],
[PencilCircleIcon, "Дизайн"],
[PuzzlePieceIcon, "Интеграции"],
[GearIcon, "Настройки"],
] as const;
export default function CreateQuiz() {
const theme = useTheme();
const [isMenuCollapsed, setIsMenuCollapsed] = useState(false);
const [activeMenuItemIndex, setActiveMenuItemIndex] = useState<number>(0);
const [progress, setProgress] = useState<number>(1 / 6);
const handleMenuCollapseToggle = () => setIsMenuCollapsed(prev => !prev);
return (
<Container
maxWidth={false}
disableGutters
sx={{
display: "flex",
minHeight: "calc(100vh - 80px)",
}}
>
<Sidebar></Sidebar>
<Container
maxWidth="lg"
disableGutters
sx={{
p: "25px",
[theme.breakpoints.up("lg")]: {
maxWidth: "1210px",
}
}}
>
<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
header="Создание квиз-опроса"
text="У стартовой страницы одна ключевая задача - заинтересовать посетителя пройти квиз. С ней сложно ошибиться, сформулируйте суть предложения и подберите живую фотографию, остальное мы сделаем за вас"
image={quizCreationImage1}
/>
<CreationCard
header="Создание анкеты"
text="У стартовой страницы одна ключевая задача - заинтересовать посетителя пройти квиз. С ней сложно ошибиться, сформулируйте суть предложения и подберите живую фотографию, остальное мы сделаем за вас"
image={quizCreationImage2}
/>
</Box>
<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>
<Box sx={{
mt: "60px",
}}>
<Typography variant="h5" mb="40px">Стартовая страница</Typography>
<StartPageSettings />
<Box sx={{
mt: "30px",
width: "100%",
display: "flex",
gap: "20px",
}}>
<CustomButton
variant="outlined"
sx={{
border: `1px solid ${theme.palette.brightPurple.main}`,
color: theme.palette.brightPurple.main,
width: "auto",
ml: "auto",
px: "20px",
py: "9px",
}}
>Отключить стартовую страницу</CustomButton>
<CustomButton
variant="contained"
sx={{
backgroundColor: theme.palette.brightPurple.main,
color: "white",
width: "auto",
px: "20px",
py: "9px",
}}
>Настроить вопросы</CustomButton>
</Box>
</Box>
</Container>
</Container>
);
}

15
src/components/CustomButton.tsx
View File

@ -1,15 +0,0 @@
import { Button, styled } from "@mui/material";
import { ButtonProps } from "@mui/material/Button";
interface Props {
py?: string;
}
export default styled(Button)<ButtonProps & Props>(props => ({
width: "180px",
paddingTop: props.py || "10px",
paddingBottom: props.py || "10px",
borderRadius: "8px",
boxShadow: "none",
}));

19
src/index.tsx
View File

@ -1,14 +1,9 @@
import React from 'react'; import React from 'react';
import ReactDOM from 'react-dom/client'; import ReactDOM from 'react-dom/client';
import './index.css'; import './index.css';
import App from './App';
import { BrowserRouter, Route, Routes } from 'react-router-dom'; import { BrowserRouter, Route, Routes } from 'react-router-dom';
import lightTheme from "./utils/themes/light"; import lightTheme from "./utils/themes/light";
import { ThemeProvider } from '@mui/material'; import { ThemeProvider } from '@mui/material';
import CreateQuiz from './components/CreateQuiz/CreateQuiz';
import NavbarCreateQuiz from '@ui_kit/Header/NavbarCreateQuiz';
import darkTheme from "./utils/themes/dark";
import HorizontalLinearStepper from './ui_kit/Stepper'; import HorizontalLinearStepper from './ui_kit/Stepper';
import StartPage from "./pages/startPage/StartPage"; import StartPage from "./pages/startPage/StartPage";
@ -27,7 +22,6 @@ const root = ReactDOM.createRoot(
); );
const routeslink: {path: string; page: JSX.Element; header: boolean; sidebar: boolean} [] = [ const routeslink: {path: string; page: JSX.Element; header: boolean; sidebar: boolean} [] = [
{path: "/", page: <Main/>, header: false, sidebar: false},
{path: "/list", page: <FirstQuiz/>, header: false, sidebar: false}, {path: "/list", page: <FirstQuiz/>, header: false, sidebar: false},
{path: "/list-empty", page: <FirstQuiz/>, header: false, sidebar: false}, {path: "/list-empty", page: <FirstQuiz/>, header: false, sidebar: false},
{path: "/list-full", page: <MyQuizzesFull/>, header: false, sidebar: false}, {path: "/list-full", page: <MyQuizzesFull/>, header: false, sidebar: false},
@ -48,19 +42,6 @@ root.render(
{routeslink.map((e,i) =>( {routeslink.map((e,i) =>(
<Route key={i} path={e.path} element={<Main page={e.page} header={e.header} sidebar={e.sidebar}/>} /> <Route key={i} path={e.path} element={<Main page={e.page} header={e.header} sidebar={e.sidebar}/>} />
))} ))}
{/*<Route path="/" element={ <Main /> }/>*/}
{/*<Route path="/list" element={<FirstQuiz/>} />*/}
{/*<Route path="/list-empty" element={<FirstQuiz/>} />*/}
{/*<Route path="/list-full" element={<MyQuizzesFull/>} />*/}
{/*<Route path="/list-short" element={<MyQuizzes/>} />*/}
{/*<Route path="/create" element={<StartPage/>} />*/}
{/*<Route path="/questions" element={<QuestionsPage/>} />*/}
{/*<Route path='/contacts' element={<ContactFormPage/>} />*/}
{/*<Route path='/result' element={<Result/>} />*/}
{/*<Route path="/settings" element={<Setting />} />*/}
{/*<Route path='/install' element={<InstallQuiz/>} />*/}
</Routes> </Routes>
</BrowserRouter> </BrowserRouter>
</ThemeProvider> </ThemeProvider>

28
src/pages/ContactFormPage/BranchingForm.tsx
View File

@ -2,16 +2,13 @@ import {
Box, Box,
Button, Button,
FormControl, FormControlLabel, Link, FormControl, FormControlLabel, Link,
MenuItem,
Modal, Radio, RadioGroup, Modal, Radio, RadioGroup,
Select,
SelectChangeEvent, SelectChangeEvent,
Typography, Typography,
useTheme useTheme
} from "@mui/material"; } from "@mui/material";
import * as React from "react"; import * as React from "react";
import CustomButton from "../../components/CustomButton"; import SelectableButton from "@ui_kit/SelectableButton";
import SelectableButton from "../../components/CreateQuiz/SelectableButton";
import {useState} from "react"; import {useState} from "react";
import RadioCheck from "@ui_kit/RadioCheck"; import RadioCheck from "@ui_kit/RadioCheck";
import RadioIcon from "@ui_kit/RadioIcon"; import RadioIcon from "@ui_kit/RadioIcon";
@ -127,28 +124,13 @@ export default function BranchingForm() {
</Box> </Box>
<Box sx={{display: 'flex', justifyContent: 'end', gap: '10px'}}> <Box sx={{display: 'flex', justifyContent: 'end', gap: '10px'}}>
<CustomButton <Button
variant="outlined" variant="outlined"
onClick={handleClose} onClick={handleClose}
sx={{ >Отмена</Button>
border: `1px solid ${theme.palette.brightPurple.main}`, <Button
color: theme.palette.brightPurple.main,
width: "auto",
ml: "auto",
px: "20px",
py: "9px",
}}
>Отмена</CustomButton>
<CustomButton
variant="contained" variant="contained"
sx={{ >Готово</Button>
backgroundColor: theme.palette.brightPurple.main,
color: "white",
width: "auto",
px: "20px",
py: "9px",
}}
>Готово</CustomButton>
</Box> </Box>
</Box> </Box>
</Box> </Box>

2
src/pages/ContactFormPage/Massengers/WindowMessengers.tsx
View File

@ -5,7 +5,7 @@ import {Typography, useTheme} from "@mui/material";
import CloseIcon from '@mui/icons-material/Close'; import CloseIcon from '@mui/icons-material/Close';
import CustomTextField from "@ui_kit/CustomTextField"; import CustomTextField from "@ui_kit/CustomTextField";
import CustomCheckbox from "@ui_kit/CustomCheckbox"; import CustomCheckbox from "@ui_kit/CustomCheckbox";
import SelectableButton from "../../../components/CreateQuiz/SelectableButton"; import SelectableButton from "@ui_kit/SelectableButton";
import {useState} from "react"; import {useState} from "react";
import SelectMask from "../SelectMask"; import SelectMask from "../SelectMask";

13
src/pages/ContactFormPage/NewField/ButtonsNewField.tsx
View File

@ -1,14 +1,11 @@
import MiniButtonSetting from "@ui_kit/MiniButtonSetting"; import MiniButtonSetting from "@ui_kit/MiniButtonSetting";
import React from "react"; import React from "react";
import SettingIcon from "../../../assets/icons/questionsPage/settingIcon";
import Branching from "../../../assets/icons/questionsPage/branching";
import {Box, IconButton, useTheme} from "@mui/material"; import {Box, IconButton, useTheme} from "@mui/material";
import SupplementIcon from "../../../assets/icons/ContactFormIcon/supplementIcon"; import NameIcon from "@icons/ContactFormIcon/NameIcon";
import NameIcon from "../../../assets/icons/ContactFormIcon/NameIcon"; import EmailIcon from "@icons/ContactFormIcon/EmailIcon";
import EmailIcon from "../../../assets/icons/ContactFormIcon/EmailIcon"; import PhoneIcon from "@icons/ContactFormIcon/PhoneIcon";
import PhoneIcon from "../../../assets/icons/ContactFormIcon/PhoneIcon"; import TextIcon from "@icons/ContactFormIcon/TextIcon";
import TextIcon from "../../../assets/icons/ContactFormIcon/TextIcon"; import AddressIcon from "@icons/ContactFormIcon/AddressIcon";
import AddressIcon from "../../../assets/icons/ContactFormIcon/AddressIcon";
interface Props { interface Props {
switchState: string switchState: string

1
src/pages/ContactFormPage/NewField/WindowNewField.tsx
View File

@ -5,7 +5,6 @@ import {Typography, useTheme} from "@mui/material";
import CloseIcon from '@mui/icons-material/Close'; import CloseIcon from '@mui/icons-material/Close';
import ButtonsNewField from "./ButtonsNewField"; import ButtonsNewField from "./ButtonsNewField";
import SwitchNewField from "./SwitchNewField"; import SwitchNewField from "./SwitchNewField";
import {useState} from "react";
export default function WindowNewField() { export default function WindowNewField() {

2
src/pages/ContactFormPage/SelectMask.tsx
View File

@ -1,5 +1,5 @@
import {Box, Link, Typography, useTheme} from "@mui/material"; import {Box, Link, Typography, useTheme} from "@mui/material";
import SelectableButton from "../../components/CreateQuiz/SelectableButton"; import SelectableButton from "@ui_kit/SelectableButton";
import CustomTextField from "@ui_kit/CustomTextField"; import CustomTextField from "@ui_kit/CustomTextField";
import * as React from "react"; import * as React from "react";
import {useState} from "react"; import {useState} from "react";

53
src/pages/InstallQuiz/ButtonSocial.tsx
View File

@ -15,8 +15,7 @@ import TelegramIcon from "../../assets/icons/telegramIcon";
import QRIcon from "../../assets/icons/qrIcon"; import QRIcon from "../../assets/icons/qrIcon";
import React from "react"; import React from "react";
import CustomTextField from "@ui_kit/CustomTextField"; import CustomTextField from "@ui_kit/CustomTextField";
import CustomButton from "../../components/CustomButton"; import UploadBox from "@ui_kit/UploadBox";
import UploadBox from "../../components/CreateQuiz/UploadBox";
import UploadIcon from "../../assets/icons/UploadIcon"; import UploadIcon from "../../assets/icons/UploadIcon";
import CopyIcon from "../../assets/icons/CopyIcon"; import CopyIcon from "../../assets/icons/CopyIcon";
import Qr from "../../assets/Qr.png" import Qr from "../../assets/Qr.png"
@ -125,28 +124,13 @@ export default function ButtonSocial () {
<UploadBox sx ={{maxWidth: "325px"}} icon={<UploadIcon />} text="5 MB максимум" /> <UploadBox sx ={{maxWidth: "325px"}} icon={<UploadIcon />} text="5 MB максимум" />
</Box> </Box>
<Box sx={{display: 'flex', justifyContent: 'end', gap: '10px'}}> <Box sx={{display: 'flex', justifyContent: 'end', gap: '10px'}}>
<CustomButton <Button
variant="outlined" variant="outlined"
onClick={handleCloseGraph} onClick={handleCloseGraph}
sx={{ >Отмена</Button>
border: `1px solid ${theme.palette.brightPurple.main}`, <Button
color: theme.palette.brightPurple.main,
width: "auto",
ml: "auto",
px: "20px",
py: "9px",
}}
>Отмена</CustomButton>
<CustomButton
variant="contained" variant="contained"
sx={{ >Готово</Button>
backgroundColor: theme.palette.brightPurple.main,
color: "white",
width: "auto",
px: "20px",
py: "9px",
}}
>Готово</CustomButton>
</Box> </Box>
</Box> </Box>
</Box> </Box>
@ -244,28 +228,13 @@ export default function ButtonSocial () {
</Box> </Box>
<Box sx={{display: 'flex', justifyContent: 'end', gap: '10px'}}> <Box sx={{display: 'flex', justifyContent: 'end', gap: '10px'}}>
<CustomButton <Button
variant="outlined" variant="outlined"
onClick={handleCloseTiktok} onClick={handleCloseTiktok}
sx={{ >Отмена</Button>
border: `1px solid ${theme.palette.brightPurple.main}`, <Button
color: theme.palette.brightPurple.main,
width: "auto",
ml: "auto",
px: "20px",
py: "9px",
}}
>Отмена</CustomButton>
<CustomButton
variant="contained" variant="contained"
sx={{ >Готово</Button>
backgroundColor: theme.palette.brightPurple.main,
color: "white",
width: "auto",
px: "20px",
py: "9px",
}}
>Готово</CustomButton>
</Box> </Box>
</Box> </Box>
</Box> </Box>
@ -322,8 +291,8 @@ export default function ButtonSocial () {
</Box> </Box>
<Box sx={{display: 'flex', justifyContent: 'center', gap: '10px'}}> <Box sx={{display: 'flex', justifyContent: 'center', gap: '10px'}}>
<Button variant='outlined' sx={{color: theme.palette.brightPurple.main, background: '#EEE4FC', borderColor: theme.palette.brightPurple.main}}>Скачать PNG</Button> <Button variant='outlined' sx={{color: theme.palette.brightPurple.main, background: '#EEE4FC'}}>Скачать PNG</Button>
<Button variant='outlined' sx={{color: theme.palette.brightPurple.main, background: '#EEE4FC', borderColor: theme.palette.brightPurple.main}}>Скачать PNG</Button> <Button variant='outlined' sx={{color: theme.palette.brightPurple.main, background: '#EEE4FC'}}>Скачать PNG</Button>
</Box> </Box>
</Box> </Box>
</Box> </Box>

49
src/pages/InstallQuiz/InstallQuiz.tsx
View File

@ -24,10 +24,9 @@ import AutoOpen from '../../assets/AutoOpen.png';
import WidgetImg from '../../assets/Widget.png'; import WidgetImg from '../../assets/Widget.png';
import OneIconBorder from "../../assets/icons/OneIconBorder"; import OneIconBorder from "../../assets/icons/OneIconBorder";
import ArrowLeft from "../../assets/icons/questionsPage/arrowLeft"; import ArrowLeft from "../../assets/icons/questionsPage/arrowLeft";
import CustomButton from "../../components/CustomButton";
import CustomTextField from "@ui_kit/CustomTextField"; import CustomTextField from "@ui_kit/CustomTextField";
import VkIconButton from "../../assets/icons/VkIconButton"; import VkIconButton from "../../assets/icons/VkIconButton";
import SelectableButton from "../../components/CreateQuiz/SelectableButton"; import SelectableButton from "@ui_kit/SelectableButton";
import ButtonSocial from "./ButtonSocial"; import ButtonSocial from "./ButtonSocial";
import OnButtonInstall from "./OnButtonInstall"; import OnButtonInstall from "./OnButtonInstall";
import BannerInstall from "./BannerInstall"; import BannerInstall from "./BannerInstall";
@ -394,28 +393,13 @@ export default function InstallQuiz() {
</Box> </Box>
<Box sx={{display: 'flex', justifyContent: 'end', gap: '10px'}}> <Box sx={{display: 'flex', justifyContent: 'end', gap: '10px'}}>
<CustomButton <Button
variant="outlined" variant="outlined"
onClick={handleCloseVk} onClick={handleCloseVk}
sx={{ >Отмена</Button>
border: `1px solid ${theme.palette.brightPurple.main}`, <Button
color: theme.palette.brightPurple.main,
width: "auto",
ml: "auto",
px: "20px",
py: "9px",
}}
>Отмена</CustomButton>
<CustomButton
variant="contained" variant="contained"
sx={{ >Готово</Button>
backgroundColor: theme.palette.brightPurple.main,
color: "white",
width: "auto",
px: "20px",
py: "9px",
}}
>Готово</CustomButton>
</Box> </Box>
</Box> </Box>
</Box> </Box>
@ -546,28 +530,13 @@ export default function InstallQuiz() {
<Typography sx={{fontSize: '14px', color: theme.palette.grey2.main}}> <Typography sx={{fontSize: '14px', color: theme.palette.grey2.main}}>
Привязка домена и обновление DNS записей может занять до 48 часов Привязка домена и обновление DNS записей может занять до 48 часов
</Typography> </Typography>
<CustomButton <Button
variant="outlined" variant="outlined"
onClick={handleCloseDom} onClick={handleCloseDom}
sx={{ >Отмена</Button>
border: `1px solid ${theme.palette.brightPurple.main}`, <Button
color: theme.palette.brightPurple.main,
width: "auto",
ml: "auto",
px: "20px",
py: "9px",
}}
>Отмена</CustomButton>
<CustomButton
variant="contained" variant="contained"
sx={{ >Готово</Button>
backgroundColor: theme.palette.brightPurple.main,
color: "white",
width: "auto",
px: "20px",
py: "9px",
}}
>Готово</CustomButton>
</Box> </Box>
</Box> </Box>
</Box> </Box>

2
src/pages/Questions/DataOptions/DataOptions.tsx
View File

@ -3,7 +3,7 @@ import ButtonsOptions from "../ButtonsOptions";
import SwitchData from "./switchData"; import SwitchData from "./switchData";
import React, {useState} from "react"; import React, {useState} from "react";
import InfoIcon from "../../../assets/icons/InfoIcon"; import InfoIcon from "../../../assets/icons/InfoIcon";
import SelectableButton from "../../../components/CreateQuiz/SelectableButton"; import SelectableButton from "@ui_kit/SelectableButton";
type dataType = "calendar" | "mask"; type dataType = "calendar" | "mask";

5
src/pages/Questions/OptionsPicture/settingOpytionsPict.tsx
View File

@ -1,10 +1,9 @@
import { Box, Typography, useTheme } from "@mui/material"; import {Box, Button, Typography, useTheme} from "@mui/material";
import CustomCheckbox from "@ui_kit/CustomCheckbox"; import CustomCheckbox from "@ui_kit/CustomCheckbox";
import InfoIcon from "../../../assets/icons/InfoIcon"; import InfoIcon from "../../../assets/icons/InfoIcon";
import { useState } from "react"; import { useState } from "react";
import FormatIcon2 from "../../../assets/icons/questionsPage/FormatIcon2"; import FormatIcon2 from "../../../assets/icons/questionsPage/FormatIcon2";
import FormatIcon1 from "../../../assets/icons/questionsPage/FormatIcon1"; import FormatIcon1 from "../../../assets/icons/questionsPage/FormatIcon1";
import CustomButton from "../../../components/CustomButton";
import ProportionsIcon11 from "../../../assets/icons/questionsPage/ProportionsIcon11"; import ProportionsIcon11 from "../../../assets/icons/questionsPage/ProportionsIcon11";
import ProportionsIcon21 from "../../../assets/icons/questionsPage/ProportionsIcon21"; import ProportionsIcon21 from "../../../assets/icons/questionsPage/ProportionsIcon21";
import ProportionsIcon12 from "../../../assets/icons/questionsPage/ProportionsIcon12"; import ProportionsIcon12 from "../../../assets/icons/questionsPage/ProportionsIcon12";
@ -18,7 +17,7 @@ interface Props {
export function SelectIconButton({ Icon, isActive = false, onClick }: Props) { export function SelectIconButton({ Icon, isActive = false, onClick }: Props) {
const theme = useTheme(); const theme = useTheme();
return ( return (
<CustomButton <Button
onClick={onClick} onClick={onClick}
variant="outlined" variant="outlined"
startIcon={<Icon color={isActive ? theme.palette.navbarbg.main : theme.palette.brightPurple.main} />} startIcon={<Icon color={isActive ? theme.palette.navbarbg.main : theme.palette.brightPurple.main} />}

2
src/pages/Questions/UploadImage.tsx
View File

@ -1,5 +1,5 @@
import {Typography, Box, useTheme, ButtonBase, Modal} from "@mui/material"; import {Typography, Box, useTheme, ButtonBase, Modal} from "@mui/material";
import UploadBox from "../../components/CreateQuiz/UploadBox"; import UploadBox from "@ui_kit/UploadBox";
import UploadIcon from "../../assets/icons/UploadIcon"; import UploadIcon from "../../assets/icons/UploadIcon";
import * as React from "react"; import * as React from "react";

33
src/pages/Questions/branchingQuestions.tsx
View File

@ -16,11 +16,9 @@ import {
useTheme, useTheme,
} from "@mui/material"; } from "@mui/material";
import * as React from "react"; import * as React from "react";
import InfoIcon from "../../assets/icons/InfoIcon"; import ArrowDown from "@icons/ArrowDownIcon";
import ArrowDown from "../../assets/icons/ArrowDownIcon";
import CustomButton from "../../components/CustomButton";
import { useState } from "react"; import { useState } from "react";
import DeleteIcon from "../../assets/icons/questionsPage/deleteIcon"; import DeleteIcon from "@icons/questionsPage/deleteIcon";
import RadioCheck from "@ui_kit/RadioCheck"; import RadioCheck from "@ui_kit/RadioCheck";
import RadioIcon from "@ui_kit/RadioIcon"; import RadioIcon from "@ui_kit/RadioIcon";
@ -60,7 +58,6 @@ export default function BranchingQuestions() {
width: "100%", width: "100%",
bgcolor: "background.paper", bgcolor: "background.paper",
borderRadius: "12px", borderRadius: "12px",
boxShadow: 24, boxShadow: 24,
p: 0, p: 0,
}} }}
@ -261,32 +258,16 @@ export default function BranchingQuestions() {
</FormControl> </FormControl>
</Box> </Box>
<Box sx={{ display: "flex", justifyContent: "end", gap: "10px" }}> <Box sx={{ display: "flex", justifyContent: "end", gap: "10px" }}>
<CustomButton <Button
variant="outlined" variant="outlined"
onClick={handleClose} onClick={handleClose}
sx={{
border: `1px solid ${theme.palette.brightPurple.main}`,
color: theme.palette.brightPurple.main,
width: "auto",
ml: "auto",
px: "20px",
py: "9px",
}}
> >
Отмена Отмена
</CustomButton> </Button>
<CustomButton <Button
variant="contained" variant="contained">
sx={{
backgroundColor: theme.palette.brightPurple.main,
color: "white",
width: "auto",
px: "20px",
py: "9px",
}}
>
Готово Готово
</CustomButton> </Button>
</Box> </Box>
</Box> </Box>
</Box> </Box>

18
src/pages/Questions/helpQuestions.tsx
View File

@ -1,11 +1,10 @@
import {Box, ButtonBase, Modal, Typography, useTheme} from "@mui/material"; import {Box, Button, ButtonBase, Modal, Typography, useTheme} from "@mui/material";
import * as React from 'react'; import * as React from 'react';
import SelectableButton from "../../components/CreateQuiz/SelectableButton"; import SelectableButton from "@ui_kit/SelectableButton";
import CustomTextField from "@ui_kit/CustomTextField"; import CustomTextField from "@ui_kit/CustomTextField";
import {useState} from "react"; import {useState} from "react";
import UploadIcon from "../../assets/icons/UploadIcon"; import UploadIcon from "../../assets/icons/UploadIcon";
import UploadBox from "../../components/CreateQuiz/UploadBox"; import UploadBox from "@ui_kit/UploadBox";
import CustomButton from "../../components/CustomButton";
type BackgroundType = "text" | "video"; type BackgroundType = "text" | "video";
type BackgroundTypeModal = "linkVideo" | "ownVideo" type BackgroundTypeModal = "linkVideo" | "ownVideo"
@ -84,16 +83,9 @@ export default function HelpQuestions() {
> >
<Typography>Видео можно вставить с любого хостинга: <Typography>Видео можно вставить с любого хостинга:
YouTube, Vimeo или загрузить собственное</Typography> YouTube, Vimeo или загрузить собственное</Typography>
<CustomButton <Button
variant="contained" variant="contained"
sx={{ >Готово</Button>
backgroundColor: theme.palette.brightPurple.main,
color: "white",
width: "auto",
px: "20px",
py: "9px",
}}
>Готово</CustomButton>
</Box> </Box>
<Box sx={{padding: '20px', gap: '10px', display: 'flex'}}> <Box sx={{padding: '20px', gap: '10px', display: 'flex'}}>
<SelectableButton isSelected={backgroundTypeModal === "linkVideo"} onClick={() => setBackgroundTypeModal("linkVideo")}> <SelectableButton isSelected={backgroundTypeModal === "linkVideo"} onClick={() => setBackgroundTypeModal("linkVideo")}>

0
src/components/CreationFullCard.tsx → src/pages/Result/CreationFullCard.tsx
View File

5
src/pages/Result/DescriptionForm/ButtinsOptionsForm.tsx
View File

@ -1,14 +1,11 @@
import React from "react"; import React from "react";
import { Box, IconButton, useTheme } from "@mui/material"; import { Box, IconButton, useTheme } from "@mui/material";
import MiniButtonSetting from "@ui_kit/MiniButtonSetting"; import MiniButtonSetting from "@ui_kit/MiniButtonSetting";
import SettingIcon from "@icons/questionsPage/settingIcon"; import SettingIcon from "@icons/questionsPage/settingIcon";
import Branching from "@icons/questionsPage/branching"; import Branching from "@icons/questionsPage/branching";
import HideIcon from "@icons/questionsPage/hideIcon"; import HideIcon from "@icons/questionsPage/hideIcon";
import CopyIcon from "@icons/questionsPage/CopyIcon"; import CopyIcon from "@icons/questionsPage/CopyIcon";
import DeleteIcon from "@icons/questionsPage/deleteIcon"; import DeleteIcon from "@icons/questionsPage/deleteIcon";
import StarIconPoints from "./StarIconsPoints"; import StarIconPoints from "./StarIconsPoints";
interface Props { interface Props {
@ -31,7 +28,7 @@ export default function ButtonsOptionsForm({ SSHC, switchState }: Props) {
value: "branching", value: "branching",
}, },
{ {
icon: <StarIconPoints color={switchState === "Points" ? "#ffffff" : theme.palette.grey3.main} />, icon: <StarIconPoints color={switchState === "points" ? "#ffffff" : theme.palette.grey3.main} />,
title: "Баллы", title: "Баллы",
value: "points", value: "points",
}, },

10
src/pages/Result/DescriptionForm/DescriptionForm.tsx
View File

@ -2,21 +2,15 @@ import React from "react";
import { useState } from "react"; import { useState } from "react";
import {Box, Button, IconButton, TextField, Typography} from "@mui/material"; import {Box, Button, IconButton, TextField, Typography} from "@mui/material";
import ExpandMoreIcon from "@mui/icons-material/ExpandMore"; import ExpandMoreIcon from "@mui/icons-material/ExpandMore";
import SwitchResult from "./SwitchResult";
import CustomButton from "../../../components/CustomButton";
import SwitchAnswerOptions from "./SwitchAnswerOptions";
import ButtonsOptionsForm from "./ButtinsOptionsForm"; import ButtonsOptionsForm from "./ButtinsOptionsForm";
import PriceButtons from "./PriceButton"; import PriceButtons from "./PriceButton";
import DiscountButtons from "./DiscountButtons"; import DiscountButtons from "./DiscountButtons";
import CustomTextField from "@ui_kit/CustomTextField"; import CustomTextField from "@ui_kit/CustomTextField";
import OneIcon from "@icons/questionsPage/OneIcon"; import OneIcon from "@icons/questionsPage/OneIcon";
import DeleteIcon from "@icons/questionsPage/deleteIcon"; import DeleteIcon from "@icons/questionsPage/deleteIcon";
import PointsIcon from "@icons/questionsPage/PointsIcon"; import PointsIcon from "@icons/questionsPage/PointsIcon";
import Info from "@icons/Info"; import Info from "@icons/Info";
import ImageAndVideoButtons from "./ImageAndVideoButtons"; import ImageAndVideoButtons from "./ImageAndVideoButtons";
export const DescriptionForm = () => { export const DescriptionForm = () => {
@ -172,7 +166,7 @@ export const DescriptionForm = () => {
)} )}
</Box> </Box>
<ButtonsOptionsForm switchState={switchState} SSHC={SSHC} /> <ButtonsOptionsForm switchState={switchState} SSHC={SSHC} />
<SwitchAnswerOptions switchState={switchState} /> <SwitchResult switchState={switchState} />
</Box> </Box>
); );
}; };

23
src/pages/Result/DescriptionForm/DiscountButtons.tsx
View File

@ -1,6 +1,5 @@
import DeleteIcon from "@icons/questionsPage/deleteIcon"; import DeleteIcon from "@icons/questionsPage/deleteIcon";
import {Box, IconButton, Typography, useTheme} from "@mui/material"; import {Box, Button, IconButton, Typography, useTheme} from "@mui/material";
import CustomButton from "../../../components/CustomButton";
export default function DiscountButtons() { export default function DiscountButtons() {
const theme = useTheme(); const theme = useTheme();
@ -15,44 +14,36 @@ export default function DiscountButtons() {
</IconButton> </IconButton>
</Box> </Box>
<Box component="div" sx={{ mb: "20px" }}> <Box component="div" sx={{ mb: "20px" }}>
<CustomButton <Button
variant="contained" variant="contained"
sx={{ sx={{
color: "#9A9AAF", color: "#9A9AAF",
backgroundColor: "#F2F3F7", backgroundColor: "#F2F3F7",
width: "86px",
height: "48px",
border: "1px solid #9A9AAF", border: "1px solid #9A9AAF",
}} }}
> >
10000 10000
</CustomButton> </Button>
<CustomButton <Button
variant="contained" variant="contained"
sx={{ sx={{
color: "#FFFFFF", color: "#FFFFFF",
backgroundColor: theme.palette.brightPurple.main, backgroundColor: theme.palette.brightPurple.main,
width: "53px",
height: "48px",
ml: "8px",
border: "1px solid #9A9AAF", border: "1px solid #9A9AAF",
}} }}
> >
₽ ₽
</CustomButton> </Button>
<CustomButton <Button
variant="contained" variant="contained"
sx={{ sx={{
color: theme.palette.grey2.main, color: theme.palette.grey2.main,
backgroundColor: theme.palette.background.default, backgroundColor: theme.palette.background.default,
width: "53px",
height: "48px",
ml: "8px",
border: "1px solid #9A9AAF", border: "1px solid #9A9AAF",
}} }}
> >
% %
</CustomButton> </Button>
</Box> </Box>
</Box> </Box>
); );

23
src/pages/Result/DescriptionForm/PointsQuestions.tsx
View File

@ -12,13 +12,11 @@ import {
} from "@mui/material"; } from "@mui/material";
import * as React from "react"; import * as React from "react";
import ArrowDown from "@icons/ArrowDownIcon"; import ArrowDown from "@icons/ArrowDownIcon";
import CustomButton from "../../../components/CustomButton";
import { useState } from "react"; import { useState } from "react";
export default function PointsQuestions() { export default function PointsQuestions() {
const theme = useTheme(); const theme = useTheme();
const [open, setOpen] = useState(false); const [open, setOpen] = useState(false);
const [condition, setCondition] = useState<boolean>(false);
const handleOpen = () => setOpen(true); const handleOpen = () => setOpen(true);
const handleClose = () => setOpen(false); const handleClose = () => setOpen(false);
@ -27,11 +25,6 @@ export default function PointsQuestions() {
setDisplay(event.target.value); setDisplay(event.target.value);
}; };
const [value, setValue] = React.useState("1");
const handleChangeRadio = (event: React.ChangeEvent<HTMLInputElement>) => {
setValue((event.target as HTMLInputElement).value);
};
return ( return (
<> <>
<Button onClick={handleOpen}>открыть</Button> <Button onClick={handleOpen}>открыть</Button>
@ -51,7 +44,6 @@ export default function PointsQuestions() {
width: "100%", width: "100%",
bgcolor: "background.paper", bgcolor: "background.paper",
borderRadius: "12px", borderRadius: "12px",
boxShadow: 24, boxShadow: 24,
p: 0, p: 0,
}} }}
@ -184,7 +176,6 @@ export default function PointsQuestions() {
</Select> </Select>
</FormControl> </FormControl>
<TextField <TextField
// value={text}
placeholder="100" placeholder="100"
fullWidth fullWidth
sx={{ sx={{
@ -208,19 +199,11 @@ export default function PointsQuestions() {
</Box> </Box>
</Box> </Box>
<Box sx={{ display: "flex", justifyContent: "end", gap: "10px" }}> <Box sx={{ display: "flex", justifyContent: "end", gap: "10px" }}>
<CustomButton <Button
onClick={() => handleClose()} onClick={() => handleClose()}
variant="contained" variant="contained">
sx={{
backgroundColor: theme.palette.brightPurple.main,
color: "white",
width: "auto",
px: "20px",
py: "9px",
}}
>
Готово Готово
</CustomButton> </Button>
</Box> </Box>
</Box> </Box>
</Box> </Box>

9
src/pages/Result/DescriptionForm/PriceButton.tsx
View File

@ -1,7 +1,4 @@
import { Box, IconButton, SxProps, Theme, Typography } from "@mui/material"; import {Box, Button, IconButton, SxProps, Theme, Typography} from "@mui/material";
import CustomButton from "../../../components/CustomButton";
import DeleteIcon from "@icons/questionsPage/deleteIcon"; import DeleteIcon from "@icons/questionsPage/deleteIcon";
const priceButtonsArray: { title: string; type: string; sx: SxProps<Theme> }[] = [ const priceButtonsArray: { title: string; type: string; sx: SxProps<Theme> }[] = [
@ -75,7 +72,7 @@ export default function PriceButtons({ ButtonsActive, priceButtonsActive }: Prop
</Box> </Box>
<Box component="div" sx={{ mb: "20px" }}> <Box component="div" sx={{ mb: "20px" }}>
{priceButtonsArray.map(({ title, type, sx }, index) => ( {priceButtonsArray.map(({ title, type, sx }, index) => (
<CustomButton <Button
onClick={() => ButtonsActive(index, type)} onClick={() => ButtonsActive(index, type)}
key={title} key={title}
sx={{ sx={{
@ -85,7 +82,7 @@ export default function PriceButtons({ ButtonsActive, priceButtonsActive }: Prop
}} }}
> >
{title} {title}
</CustomButton> </Button>
))} ))}
</Box> </Box>
</Box> </Box>

8
src/pages/Result/DescriptionForm/StarIconsPoints.tsx
View File

@ -10,14 +10,14 @@ export default function StarIconPoints({ color }: Props) {
<path <path
d="M7 9.24452L5.1458 10.2695L5.5 8.09854L4 6.56119L6.0729 6.24468L7 4.26953L7.9271 6.24468L10 6.56119L8.5 8.09854L8.8542 10.2695L7 9.24452Z" d="M7 9.24452L5.1458 10.2695L5.5 8.09854L4 6.56119L6.0729 6.24468L7 4.26953L7.9271 6.24468L10 6.56119L8.5 8.09854L8.8542 10.2695L7 9.24452Z"
stroke={color} stroke={color}
stroke-linecap="round" strokeLinecap="round"
stroke-linejoin="round" strokeLinejoin="round"
/> />
<path <path
d="M1 7.26953C1 10.5832 3.68629 13.2695 7 13.2695C10.3137 13.2695 13 10.5832 13 7.26953C13 3.95582 10.3137 1.26953 7 1.26953C3.68629 1.26953 1 3.95582 1 7.26953Z" d="M1 7.26953C1 10.5832 3.68629 13.2695 7 13.2695C10.3137 13.2695 13 10.5832 13 7.26953C13 3.95582 10.3137 1.26953 7 1.26953C3.68629 1.26953 1 3.95582 1 7.26953Z"
stroke={color} stroke={color}
stroke-linecap="round" strokeLinecap="round"
stroke-linejoin="round" strokeLinejoin="round"
/> />
</svg> </svg>
); );

2
src/pages/Result/DescriptionForm/SwitchAnswerOptions.tsx → src/pages/Result/DescriptionForm/SwitchResult.tsx
View File

@ -36,7 +36,7 @@ function ResponseSettings() {
); );
} }
export default function SwitchAnswerOptions({ switchState = "setting" }: Props) { export default function SwitchResult({ switchState = "setting" }: Props) {
switch (switchState) { switch (switchState) {
case "setting": case "setting":
return <ResponseSettings />; return <ResponseSettings />;

11
src/pages/Result/Result.tsx
View File

@ -1,8 +1,6 @@
import { Link } from "react-router-dom"; import { Link } from "react-router-dom";
import { Box, useTheme } from "@mui/material"; import {Box, Button, useTheme} from "@mui/material";
import CreationFullCard from "./CreationFullCard";
import CustomButton from "../../components/CustomButton";
import CreationFullCard from "../../components/CreationFullCard";
import Info from "../../assets/icons/Info"; import Info from "../../assets/icons/Info";
@ -19,16 +17,15 @@ export const Result = () => {
/> />
<Box sx={{ mt: "30px", alignItems: "center" }}> <Box sx={{ mt: "30px", alignItems: "center" }}>
<Link to="/settings"> <Link to="/settings">
<CustomButton <Button
variant="contained" variant="contained"
sx={{ sx={{
backgroundColor: theme.palette.brightPurple.main,
mr: "23px", mr: "23px",
minWidth: "258px", minWidth: "258px",
}} }}
> >
Создать результаты Создать результаты
</CustomButton> </Button>
</Link> </Link>
<Info /> <Info />

2
src/pages/Result/Setting.tsx
View File

@ -2,7 +2,7 @@ import { Box, Button, Typography, useTheme } from "@mui/material";
import { SettingForm } from "./SettingForm"; import { SettingForm } from "./SettingForm";
import { DescriptionForm } from "./DescriptionForm/DescriptionForm"; import { DescriptionForm } from "./DescriptionForm/DescriptionForm";
import { ResultListForm } from "./ResultListForm"; import { ResultListForm } from "./ResultListForm";
import CustomWrapper from "../../components/CustomWrapper"; import CustomWrapper from "@ui_kit/CustomWrapper";
import Plus from "@icons/Plus"; import Plus from "@icons/Plus";
import Info from "@icons/Info"; import Info from "@icons/Info";
import IconPlus from "@icons/IconPlus"; import IconPlus from "@icons/IconPlus";

6
src/pages/Result/SettingForm.tsx
View File

@ -1,7 +1,5 @@
import { useState } from "react"; import { useState } from "react";
import { Box, Button, IconButton, SxProps, Theme, Typography } from "@mui/material"; import { Box, Button, IconButton, SxProps, Theme, Typography } from "@mui/material";
import CustomButton from "../../components/CustomButton";
import { SwitchSetting } from "./SwichResult"; import { SwitchSetting } from "./SwichResult";
import Info from "@icons/Info"; import Info from "@icons/Info";
@ -79,7 +77,7 @@ export const SettingForm = () => {
</Box> </Box>
<Box sx={{ display: "flex", justifyContent: "space-between", mb: "20px" }}> <Box sx={{ display: "flex", justifyContent: "space-between", mb: "20px" }}>
{buttonSetting.map(({ sx, title, type }, index) => ( {buttonSetting.map(({ sx, title, type }, index) => (
<CustomButton <Button
disableRipple disableRipple
onClick={() => active(index, type)} onClick={() => active(index, type)}
key={title} key={title}
@ -90,7 +88,7 @@ export const SettingForm = () => {
}} }}
> >
{title} {title}
</CustomButton> </Button>
))} ))}
</Box> </Box>
{typeActive === "e-mail" ? ( {typeActive === "e-mail" ? (

0
src/components/ComplexNavText.tsx → src/pages/createQuize/ComplexNavText.tsx
View File

0
src/components/CustomTab.tsx → src/pages/createQuize/CustomTab.tsx
View File

17
src/components/ExpandableQuizBlock.tsx → src/pages/createQuize/ExpandableQuizBlock.tsx
View File

@ -1,7 +1,6 @@
import { Box, IconButton, Typography, useTheme } from "@mui/material"; import {Box, Button, IconButton, Typography, useTheme} from "@mui/material";
import ExpandIcon from "../assets/icons/ExpandIcon"; import ExpandIcon from "@icons/ExpandIcon";
import MoreHorizIcon from "@mui/icons-material/MoreHoriz"; import MoreHorizIcon from "@mui/icons-material/MoreHoriz";
import CustomButton from "./CustomButton";
interface Props { interface Props {
@ -58,17 +57,15 @@ export default function ExpandableQuizBlock({ name }: Props) {
mt: "25px", mt: "25px",
}} }}
> >
<CustomButton <Button
variant="outlined" variant="outlined"
sx={{ sx={{
p: "9px",
flexGrow: 1,
borderColor: theme.palette.brightPurple.main,
backgroundColor: "#EEE4FC", backgroundColor: "#EEE4FC",
color: theme.palette.grey3.main, color: theme.palette.grey3.main,
width: "100%"
}} }}
>Квизов нет</CustomButton> >Квизов нет</Button>
<CustomButton <Button
variant="contained" variant="contained"
sx={{ sx={{
backgroundColor: theme.palette.brightPurple.main, backgroundColor: theme.palette.brightPurple.main,
@ -76,7 +73,7 @@ export default function ExpandableQuizBlock({ name }: Props) {
width: "44px", width: "44px",
minWidth: "44px", minWidth: "44px",
}} }}
>+</CustomButton> >+</Button>
</Box> </Box>
</Box> </Box>
); );

17
src/pages/createQuize/FirstQuiz.tsx
View File

@ -1,11 +1,8 @@
import { Typography, useTheme } from "@mui/material"; import {Button, Typography, useTheme} from "@mui/material";
import ComplexNavText from "../../components/ComplexNavText"; import ComplexNavText from "./ComplexNavText";
import CustomButton from "../../components/CustomButton";
import SectionWrapper from "@ui_kit/SectionWrapper"; import SectionWrapper from "@ui_kit/SectionWrapper";
export default function FirstQuiz() { export default function FirstQuiz() {
const theme = useTheme();
return ( return (
<SectionWrapper <SectionWrapper
maxWidth="lg" maxWidth="lg"
@ -24,14 +21,10 @@ export default function FirstQuiz() {
> >
Создайте свой первый квиз Создайте свой первый квиз
</Typography> </Typography>
<CustomButton <Button
variant="contained" variant="contained">
sx={{
backgroundColor: theme.palette.brightPurple.main,
}}
>
Создать + Создать +
</CustomButton> </Button>
</SectionWrapper> </SectionWrapper>
); );
} }

2
src/pages/createQuize/MyQuizzes.tsx
View File

@ -1,5 +1,5 @@
import {useTheme, Box,} from "@mui/material"; import {useTheme, Box,} from "@mui/material";
import ExpandableQuizBlock from "../../components/ExpandableQuizBlock"; import ExpandableQuizBlock from "./ExpandableQuizBlock";
import MyQuizzesFull from "./MyQuizzesFull"; import MyQuizzesFull from "./MyQuizzesFull";

4
src/pages/createQuize/MyQuizzesFull.tsx
View File

@ -1,6 +1,6 @@
import {Typography, useTheme, Box, Button, SxProps, Theme} from "@mui/material"; import {Typography, useTheme, Box, Button, SxProps, Theme} from "@mui/material";
import ComplexNavText from "../../components/ComplexNavText"; import ComplexNavText from "./ComplexNavText";
import QuizCard from "../../components/QuizCard"; import QuizCard from "./QuizCard";
import SectionWrapper from "@ui_kit/SectionWrapper"; import SectionWrapper from "@ui_kit/SectionWrapper";
import React from "react"; import React from "react";

29
src/components/QuizCard.tsx → src/pages/createQuize/QuizCard.tsx
View File

@ -1,8 +1,7 @@
import { Box, IconButton, Typography, useTheme } from "@mui/material"; import {Box, Button, IconButton, Typography, useTheme} from "@mui/material";
import ChartIcon from "../assets/icons/ChartIcon"; import ChartIcon from "@icons/ChartIcon";
import CustomButton from "./CustomButton"; import LinkIcon from "@icons/LinkIcon";
import LinkIcon from "../assets/icons/LinkIcon"; import PencilIcon from "@icons/PencilIcon";
import PencilIcon from "../assets/icons/PencilIcon";
import MoreHorizIcon from "@mui/icons-material/MoreHoriz"; import MoreHorizIcon from "@mui/icons-material/MoreHoriz";
@ -73,40 +72,30 @@ export default function QuizCard({ name, openCount = 0, applicationCount = 0, co
gap: "20px", gap: "20px",
}} }}
> >
<CustomButton <Button
variant="contained" variant="contained"
sx={{ sx={{
backgroundColor: theme.palette.brightPurple.main,
width: "140px", width: "140px",
}} }}
> >
Заявки Заявки
</CustomButton> </Button>
<CustomButton <Button
variant="outlined" variant="outlined"
startIcon={<PencilIcon />} startIcon={<PencilIcon />}
sx={{ sx={{
borderColor: theme.palette.brightPurple.main,
color: theme.palette.brightPurple.main, color: theme.palette.brightPurple.main,
px: "21px",
py: "9px",
width: "auto",
"& .MuiButton-startIcon": { "& .MuiButton-startIcon": {
mr: "4px", mr: "4px",
} }
}} }}
> >
Редактировать Редактировать
</CustomButton> </Button>
<CustomButton <Button
variant="outlined" variant="outlined"
startIcon={<ChartIcon />} startIcon={<ChartIcon />}
sx={{ sx={{
borderColor: theme.palette.brightPurple.main,
color: theme.palette.brightPurple.main,
p: "9px",
width: "auto",
minWidth: 0,
"& .MuiButton-startIcon": { "& .MuiButton-startIcon": {
mr: 0, mr: 0,
ml: 0, ml: 0,

31
src/pages/createQuize/QuizGallery.tsx
View File

@ -1,13 +1,24 @@
import { Box, FormControl, InputAdornment, InputLabel, MenuItem, Select, Tabs, TextField, Typography, useTheme } from "@mui/material"; import {
import ComplexNavText from "../../components/ComplexNavText"; Box,
import CustomButton from "../../components/CustomButton"; Button,
FormControl,
InputAdornment,
InputLabel,
MenuItem,
Select,
Tabs,
TextField,
Typography,
useTheme
} from "@mui/material";
import ComplexNavText from "./ComplexNavText";
import LayoutIconOld from "@icons/LayoutIcon"; import LayoutIconOld from "@icons/LayoutIcon";
import SearchIcon from "@icons/SearchIcon"; import SearchIcon from "@icons/SearchIcon";
import SectionWrapper from "@ui_kit/SectionWrapper"; import SectionWrapper from "@ui_kit/SectionWrapper";
import ArrowDown from "@icons/ArrowDownIcon"; import ArrowDown from "@icons/ArrowDownIcon";
import { useState } from "react"; import { useState } from "react";
import { CustomTab } from "../../components/CustomTab"; import { CustomTab } from "./CustomTab";
import QuizTemplateCard from "../../components/QuizTemplateCard"; import QuizTemplateCard from "./QuizTemplateCard";
import quizTemplateImage1 from "../../assets/quiz-template-1.png"; import quizTemplateImage1 from "../../assets/quiz-template-1.png";
import quizTemplateImage2 from "../../assets/quiz-template-2.png"; import quizTemplateImage2 from "../../assets/quiz-template-2.png";
import quizTemplateImage3 from "../../assets/quiz-template-3.png"; import quizTemplateImage3 from "../../assets/quiz-template-3.png";
@ -62,7 +73,7 @@ export default function QuizGallery() {
<Typography variant="h4" sx={{ color: "white" }}>Пустой шаблон</Typography> <Typography variant="h4" sx={{ color: "white" }}>Пустой шаблон</Typography>
<Typography sx={{ color: "white" }}>Широкий инструментарий создания квизов с нуля</Typography> <Typography sx={{ color: "white" }}>Широкий инструментарий создания квизов с нуля</Typography>
</Box> </Box>
<CustomButton <Button
variant="contained" variant="contained"
sx={{ sx={{
ml: "auto", ml: "auto",
@ -71,7 +82,7 @@ export default function QuizGallery() {
px: "30.5px", px: "30.5px",
width: "auto", width: "auto",
}} }}
>Начать</CustomButton> >Начать</Button>
</Box> </Box>
<Box <Box
sx={{ sx={{
@ -248,15 +259,13 @@ export default function QuizGallery() {
}} }}
/> />
<Typography mt="30px" variant="h4">Нет подходящего шаблона?</Typography> <Typography mt="30px" variant="h4">Нет подходящего шаблона?</Typography>
<CustomButton <Button
variant="contained" variant="contained"
sx={{ sx={{
px: "20px", px: "20px",
width: "auto",
backgroundColor: theme.palette.brightPurple.main,
mt: "30px", mt: "30px",
}} }}
>Создать квиз с нуля</CustomButton> >Создать квиз с нуля</Button>
</SectionWrapper> </SectionWrapper>
); );
} }

0
src/components/QuizTemplateCard.tsx → src/pages/createQuize/QuizTemplateCard.tsx
View File

18
src/pages/main.tsx
View File

@ -1,20 +1,20 @@
import Header from '@ui_kit/Header/Header'; import Header from '@ui_kit/Header/Header';
import Sidebar from '@ui_kit/Sidebar'; import Sidebar from '@ui_kit/Sidebar';
import Box from '@mui/material/Box'; import Box from '@mui/material/Box';
import {Outlet} from "react-router-dom";
import {useTheme} from "@mui/material"; import {useTheme} from "@mui/material";
import HeaderFull from "@ui_kit/Header/HeaderFull";
interface Props{
sidebar: boolean,
header: boolean,
page: JSX.Element
}
export default function Main ({ export default function Main ({sidebar, header, page}: Props) {
sidebar: boolean,
header: boolean,
page: react.csx
}) {
const theme = useTheme(); const theme = useTheme();
return ( return (
<> <>
{header ? <CleverHeader/> : <></>} {header ? <Header/> : <HeaderFull/>}
<Box sx={{ <Box sx={{
display: 'flex' display: 'flex'
}} }}
@ -30,7 +30,7 @@ export default function Main ({
boxSizing: "border-box" boxSizing: "border-box"
}} }}
> >
<Outlet /> {page}
</Box> </Box>
</Box> </Box>
</> </>

0
src/components/CreateQuiz/CardWithImage.tsx → src/pages/startPage/CardWithImage.tsx
View File

6
src/components/CreateQuiz/SelectableIconButton.tsx → src/pages/startPage/SelectableIconButton.tsx
View File

@ -1,6 +1,4 @@
import { useTheme } from "@mui/material"; import {Button, useTheme} from "@mui/material";
import CustomButton from "../CustomButton";
interface Props { interface Props {
Icon: React.ElementType; Icon: React.ElementType;
@ -12,7 +10,7 @@ export default function SelectableIconButton({ Icon, isActive = false, onClick }
const theme = useTheme(); const theme = useTheme();
return ( return (
<CustomButton <Button
onClick={onClick} onClick={onClick}
variant="outlined" variant="outlined"
startIcon={<Icon color={isActive ? theme.palette.brightPurple.main : theme.palette.grey2.main} />} startIcon={<Icon color={isActive ? theme.palette.brightPurple.main : theme.palette.grey2.main} />}

6
src/pages/startPage/StartPageSettings.tsx
View File

@ -10,9 +10,9 @@ import LayoutExpandedIcon from "../../assets/icons/LayoutExpandedIcon";
import LayoutStandartIcon from "../../assets/icons/LayoutStandartIcon"; import LayoutStandartIcon from "../../assets/icons/LayoutStandartIcon";
import MobilePhoneIcon from "../../assets/icons/MobilePhoneIcon"; import MobilePhoneIcon from "../../assets/icons/MobilePhoneIcon";
import UploadIcon from "../../assets/icons/UploadIcon"; import UploadIcon from "../../assets/icons/UploadIcon";
import SelectableButton from "../../components/CreateQuiz/SelectableButton"; import SelectableButton from "@ui_kit/SelectableButton";
import SelectableIconButton from "../../components/CreateQuiz/SelectableIconButton"; import SelectableIconButton from "./SelectableIconButton";
import UploadBox from "../../components/CreateQuiz/UploadBox"; import UploadBox from "@ui_kit/UploadBox";
import CustomTextField from "@ui_kit/CustomTextField"; import CustomTextField from "@ui_kit/CustomTextField";

2
src/pages/startPage/steptwo.tsx
View File

@ -1,5 +1,5 @@
import {Box, Button, Typography} from "@mui/material"; import {Box, Button, Typography} from "@mui/material";
import CardWithImage from "../../components/CreateQuiz/CardWithImage"; import CardWithImage from "./CardWithImage";
import cardImage1 from "../../assets/card-1.png"; import cardImage1 from "../../assets/card-1.png";
import cardImage2 from "../../assets/card-2.png"; import cardImage2 from "../../assets/card-2.png";
import cardImage3 from "../../assets/card-3.png"; import cardImage3 from "../../assets/card-3.png";

22
src/components/CustomWrapper.tsx → src/ui_kit/CustomWrapper.tsx
View File

@ -1,11 +1,11 @@
import { useState } from "react"; import { useState } from "react";
import { Box, IconButton, SxProps, Theme, Typography, useMediaQuery, useTheme } from "@mui/material"; import { Box, IconButton, SxProps, Theme, Typography, useMediaQuery, useTheme } from "@mui/material";
import CrossedEyeIcon from "../assets/icons/CrossedEyeIcon"; import CrossedEyeIcon from "@icons/CrossedEyeIcon";
import CopyIcon from "../assets/icons/CopyIcon"; import CopyIcon from "@icons/CopyIcon";
import TrashIcon from "../assets/icons/TrashIcon"; import TrashIcon from "@icons/TrashIcon";
import CountIcon from "../assets/icons/CountIcon"; import CountIcon from "@icons/CountIcon";
import MenuIcon from "../assets/icons/MenuIcon"; import MenuIcon from "@icons/MenuIcon";
interface Props { interface Props {
text: string; text: string;
@ -97,9 +97,9 @@ export default function CustomWrapper({ text, sx, result }: Props) {
<path <path
d="M7.5 19.5625L15 12.0625L22.5 19.5625" d="M7.5 19.5625L15 12.0625L22.5 19.5625"
stroke="#7E2AEA" stroke="#7E2AEA"
stroke-width="1.5" strokeWidth="1.5"
stroke-linecap="round" strokeLinecap="round"
stroke-linejoin="round" strokeLinejoin="round"
/> />
</svg> </svg>
<IconButton> <IconButton>
@ -137,9 +137,9 @@ export default function CustomWrapper({ text, sx, result }: Props) {
<path <path
d="M7.5 19.5625L15 12.0625L22.5 19.5625" d="M7.5 19.5625L15 12.0625L22.5 19.5625"
stroke="#7E2AEA" stroke="#7E2AEA"
stroke-width="1.5" strokeWidth="1.5"
stroke-linecap="round" strokeLinecap="round"
stroke-linejoin="round" strokeLinejoin="round"
/> />
</svg> </svg>
)} )}

25
src/ui_kit/Header/Header.tsx
View File

@ -1,16 +1,12 @@
import { Box, Container, FormControl, IconButton, TextField, useTheme } from "@mui/material"; import {Box, Button, Container, FormControl, IconButton, TextField, useTheme} from "@mui/material";
import CustomButton from "../../components/CustomButton";
import BackArrowIcon from "@icons/BackArrowIcon"; import BackArrowIcon from "@icons/BackArrowIcon";
import EyeIcon from "@icons/EyeIcon"; import EyeIcon from "@icons/EyeIcon";
import CustomAvatar from "./Avatar"; import CustomAvatar from "./Avatar";
import NavMenuItem from "./NavMenuItem"; import NavMenuItem from "./NavMenuItem";
import PenaLogo from "../PenaLogo"; import PenaLogo from "../PenaLogo";
interface Props {
isLoggedIn: boolean;
}
export default function Header({ isLoggedIn }: Props) { export default function Header() {
const theme = useTheme(); const theme = useTheme();
return ( return (
@ -92,36 +88,27 @@ export default function Header({ isLoggedIn }: Props) {
gap: "15px", gap: "15px",
}} }}
> >
<CustomButton <Button
variant="outlined" variant="outlined"
startIcon={<EyeIcon />} startIcon={<EyeIcon />}
sx={{ sx={{
color: theme.palette.brightPurple.main, color: theme.palette.brightPurple.main,
borderColor: theme.palette.brightPurple.main,
fontSize: "14px", fontSize: "14px",
lineHeight: "18px", lineHeight: "18px",
px: "14px",
py: "8px",
width: "auto",
height: "34px", height: "34px",
"& .MuiButton-startIcon": { "& .MuiButton-startIcon": {
mr: "3px", mr: "3px",
} }
}} }}
>Предпросмотр</CustomButton> >Предпросмотр</Button>
<CustomButton <Button
variant="contained" variant="contained"
sx={{ sx={{
backgroundColor: theme.palette.brightPurple.main,
borderColor: theme.palette.brightPurple.main,
fontSize: "14px", fontSize: "14px",
lineHeight: "18px", lineHeight: "18px",
px: "17px",
py: "8px",
width: "auto",
height: "34px", height: "34px",
}} }}
>Опубликовать</CustomButton> >Опубликовать</Button>
<CustomAvatar sx={{ ml: "11px", backgroundColor: theme.palette.orange.main, height: "36px", width: "36px" }} /> <CustomAvatar sx={{ ml: "11px", backgroundColor: theme.palette.orange.main, height: "36px", width: "36px" }} />
</Box> </Box>
</Container> </Container>

20
src/ui_kit/Header/Navbar.tsx
View File

@ -1,20 +0,0 @@
import NavbarCollapsed from "./NavbarCollapsed";
import NavbarCreateQuiz from "./NavbarCreateQuiz";
import Header from "@ui_kit/Header/Header";
import HeaderFull from "@ui_kit/Header/HeaderFull";
interface Props {
isLoggedIn: boolean;
isCollapsed?: boolean;
mode?: "createQuiz" | "default";
}
export default function Navbar({ isLoggedIn, isCollapsed = false, mode = "default" }: Props) {
return isLoggedIn ? (
<Header isLoggedIn={true}/>
):(
<HeaderFull/>
)
}

126
src/ui_kit/Header/NavbarCreateQuiz.tsx
View File

@ -1,126 +0,0 @@
import { Box, Container, FormControl, IconButton, TextField, useTheme } from "@mui/material";
import CustomButton from "../../components/CustomButton";
import BackArrowIcon from "@icons/BackArrowIcon";
import EyeIcon from "@icons/EyeIcon";
import NavMenuItem from "./NavMenuItem";
import PenaLogo from "@ui_kit/PenaLogo";
import CustomAvatar from "./Avatar";
export default function NavbarCreateQuiz() {
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>
);
}

0
src/components/CreateQuiz/MenuItem.tsx → src/ui_kit/MenuItem.tsx
View File

0
src/components/CreateQuiz/SelectableButton.tsx → src/ui_kit/SelectableButton.tsx
View File

6
src/ui_kit/Sidebar.tsx
View File

@ -12,7 +12,7 @@ import PencilCircleIcon from "../assets/icons/PencilCircleIcon";
import PuzzlePieceIcon from "../assets/icons/PuzzlePieceIcon"; import PuzzlePieceIcon from "../assets/icons/PuzzlePieceIcon";
import GearIcon from "../assets/icons/GearIcon"; import GearIcon from "../assets/icons/GearIcon";
import LayoutIcon from "../assets/icons/LayoutIcon"; import LayoutIcon from "../assets/icons/LayoutIcon";
import MenuItem from "../components/CreateQuiz/MenuItem"; import MenuItem from "./MenuItem";
const createQuizMenuItems = [ const createQuizMenuItems = [
[LayoutIcon, "Стартовая страница"], [LayoutIcon, "Стартовая страница"],
@ -31,7 +31,7 @@ const quizSettingsMenuItems = [
] as const; ] as const;
export default function Sidebar(sidebar: boolean) { export default function Sidebar() {
const theme = useTheme(); const theme = useTheme();
const [isMenuCollapsed, setIsMenuCollapsed] = useState(false); const [isMenuCollapsed, setIsMenuCollapsed] = useState(false);
const [activeMenuItemIndex, setActiveMenuItemIndex] = useState<number>(0); const [activeMenuItemIndex, setActiveMenuItemIndex] = useState<number>(0);
@ -46,7 +46,7 @@ export default function Sidebar(sidebar: boolean) {
minWidth: isMenuCollapsed ? "80px" : "230px", minWidth: isMenuCollapsed ? "80px" : "230px",
width: isMenuCollapsed ? "80px" : "230px", width: isMenuCollapsed ? "80px" : "230px",
height: 'calc(100vh - 80px)', height: 'calc(100vh - 80px)',
display: sidebar ? "flex" : "none", display: "flex",
flexDirection: "column", flexDirection: "column",
py: "19px", py: "19px",
transitionProperty: "width, min-width", transitionProperty: "width, min-width",

0
src/components/CreateQuiz/UploadBox.tsx → src/ui_kit/UploadBox.tsx
View File