diff --git a/src/assets/icons/BackArrowIcon.tsx b/src/assets/icons/BackArrowIcon.tsx index 9bfcba4f..b7c6bdf6 100755 --- a/src/assets/icons/BackArrowIcon.tsx +++ b/src/assets/icons/BackArrowIcon.tsx @@ -1,22 +1,26 @@ import { Box } from "@mui/material"; - -export default function BackArrowIcon() { - +export default function BackArrowIcon({ color = "black" }: { color?: string }) { return ( - - - - - - + + + + + + ); -} \ No newline at end of file + } \ No newline at end of file diff --git a/src/assets/icons/Burger.tsx b/src/assets/icons/Burger.tsx new file mode 100644 index 00000000..60748139 --- /dev/null +++ b/src/assets/icons/Burger.tsx @@ -0,0 +1,9 @@ +import { FC, SVGProps } from "react"; + +export const Burger: FC> = (props) => ( + + + + + +); \ No newline at end of file diff --git a/src/assets/icons/EmojiIocns.tsx b/src/assets/icons/EmojiIocns.tsx new file mode 100644 index 00000000..ba654c61 --- /dev/null +++ b/src/assets/icons/EmojiIocns.tsx @@ -0,0 +1,28 @@ +import { FC, SVGProps } from "react"; + +export const EmojiIcons: FC> = (props) => ( + + + + + + +); diff --git a/src/assets/icons/ImageAddIcons.tsx b/src/assets/icons/ImageAddIcons.tsx new file mode 100644 index 00000000..b1664427 --- /dev/null +++ b/src/assets/icons/ImageAddIcons.tsx @@ -0,0 +1,24 @@ +import { FC, SVGProps } from "react"; + +export const ImageAddIcons: FC> = (props) => ( + + + + + +); diff --git a/src/assets/icons/PenaLogoIcon.tsx b/src/assets/icons/PenaLogoIcon.tsx new file mode 100644 index 00000000..0641f00f --- /dev/null +++ b/src/assets/icons/PenaLogoIcon.tsx @@ -0,0 +1,49 @@ +import { FC, SVGProps } from "react"; + +export const PenaLogoIcon: FC> = (props) => ( + + + + + + + + + + + + + + + + + + + +); diff --git a/src/assets/icons/questionsPage/DoubleArrowRight.tsx b/src/assets/icons/questionsPage/DoubleArrowRight.tsx new file mode 100644 index 00000000..a7b73064 --- /dev/null +++ b/src/assets/icons/questionsPage/DoubleArrowRight.tsx @@ -0,0 +1,20 @@ +import { FC, SVGProps } from "react"; + +export const DoubleArrowRight: FC> = (props) => ( + + + + +); diff --git a/src/assets/icons/questionsPage/DoubleTick.tsx b/src/assets/icons/questionsPage/DoubleTick.tsx new file mode 100644 index 00000000..cac66c3e --- /dev/null +++ b/src/assets/icons/questionsPage/DoubleTick.tsx @@ -0,0 +1,13 @@ +import { FC, SVGProps } from "react"; + +export const DoubleTick: FC> = (props) => ( + + + +); diff --git a/src/assets/icons/questionsPage/VectorQuestions.tsx b/src/assets/icons/questionsPage/VectorQuestions.tsx new file mode 100644 index 00000000..98a28492 --- /dev/null +++ b/src/assets/icons/questionsPage/VectorQuestions.tsx @@ -0,0 +1,20 @@ +import { FC, SVGProps } from "react"; + +export const VectorQuestions: FC> = (props) => ( + + + + +); diff --git a/src/pages/Questions/ButtonsOptions.tsx b/src/pages/Questions/ButtonsOptions.tsx index 0f8f19cd..d9406c3a 100644 --- a/src/pages/Questions/ButtonsOptions.tsx +++ b/src/pages/Questions/ButtonsOptions.tsx @@ -9,6 +9,9 @@ import HideIcon from "../../assets/icons/questionsPage/hideIcon"; import CopyIcon from "../../assets/icons/questionsPage/CopyIcon"; import DeleteIcon from "../../assets/icons/questionsPage/deleteIcon"; import { questionStore, resetSomeField, copyQuestion, removeQuestion } from "@root/questions"; +import { DoubleTick } from "@icons/questionsPage/DoubleTick"; +import { DoubleArrowRight } from "@icons/questionsPage/DoubleArrowRight"; +import { VectorQuestions } from "@icons/questionsPage/VectorQuestions"; interface Props { switchState: string; @@ -19,6 +22,8 @@ interface Props { export default function ButtonsOptions({ SSHC, switchState, totalIndex }: Props) { const quizId = Number(useParams().quizId); const { openedModalSettings } = questionStore(); + const [openedReallyChangingModal, setOpenedReallyChangingModal] = React.useState(false); + const openedModal = () => { resetSomeField({ openedModalSettings: "open" }); console.log(openedModalSettings); @@ -26,6 +31,8 @@ export default function ButtonsOptions({ SSHC, switchState, totalIndex }: Props) const theme = useTheme(); const isTablet = useMediaQuery(theme.breakpoints.down(1000)); const isMobile = useMediaQuery(theme.breakpoints.down(790)); + const isWrappMiniButtonSetting = useMediaQuery(theme.breakpoints.down(920)); + const buttonSetting: { icon: JSX.Element; title: string; @@ -108,13 +115,14 @@ export default function ButtonsOptions({ SSHC, switchState, totalIndex }: Props) sx={{ backgroundColor: switchState === value ? theme.palette.brightPurple.main : "transparent", color: switchState === value ? "#ffffff" : theme.palette.grey3.main, - minWidth: isMobile ? "30px" : "64px", + minWidth: isWrappMiniButtonSetting ? "30px" : "64px", + height: "30px", }} > {icon} - {isMobile ? null : title} + {isWrappMiniButtonSetting ? null : title} ) : ( @@ -137,6 +145,37 @@ export default function ButtonsOptions({ SSHC, switchState, totalIndex }: Props) )} ))} + setOpenedReallyChangingModal(true)} + sx={{ + minWidth: "30px", + height: "30px", + backgroundColor: "#FEDFD0", + }} + > + + + setOpenedReallyChangingModal(true)} + sx={{ + minWidth: "30px", + height: "30px", + backgroundColor: "#FEDFD0", + }} + > + + + setOpenedReallyChangingModal(true)} + sx={{ + minWidth: "30px", + height: "30px", + backgroundColor: "#FEDFD0", + }} + > + + + (false); const openedModal = () => { resetSomeField({ openedModalSettings: "open" }); }; @@ -227,6 +233,38 @@ export default function ButtonsOptionsAndPict({ /> {isIconMobile ? null : "Изображение"} + + setOpenedReallyChangingModal(true)} + sx={{ + minWidth: "30px", + height: "30px", + backgroundColor: "#FEDFD0", + }} + > + + + setOpenedReallyChangingModal(true)} + sx={{ + minWidth: "30px", + height: "30px", + backgroundColor: "#FEDFD0", + }} + > + + + setOpenedReallyChangingModal(true)} + sx={{ + minWidth: "30px", + height: "30px", + backgroundColor: "#FEDFD0", + }} + > + + + + setOpenedReallyChangingModal(false)} /> ); } diff --git a/src/pages/Questions/DataOptions/settingData.tsx b/src/pages/Questions/DataOptions/settingData.tsx index 91b966ac..6d5aa7f2 100644 --- a/src/pages/Questions/DataOptions/settingData.tsx +++ b/src/pages/Questions/DataOptions/settingData.tsx @@ -21,6 +21,8 @@ export default function SettingsData({ totalIndex }: SettingsDataProps) { const { listQuestions } = questionStore(); const theme = useTheme(); const isWrappColumn = useMediaQuery(theme.breakpoints.down(980)); + const isMobile = useMediaQuery(theme.breakpoints.down(790)); + const debounced = useDebouncedCallback((value) => { let clonContent = listQuestions[quizId][totalIndex].content; clonContent.innerName = value; @@ -35,9 +37,10 @@ export default function SettingsData({ totalIndex }: SettingsDataProps) { flexDirection: isWrappColumn ? "column" : null, }} > - + Настройки календаря { @@ -68,6 +71,7 @@ export default function SettingsData({ totalIndex }: SettingsDataProps) { > Настройки вопросов { diff --git a/src/pages/Questions/DraggableList/QuestionPageCard.tsx b/src/pages/Questions/DraggableList/QuestionPageCard.tsx index dc4e2995..48ed112b 100644 --- a/src/pages/Questions/DraggableList/QuestionPageCard.tsx +++ b/src/pages/Questions/DraggableList/QuestionPageCard.tsx @@ -245,7 +245,6 @@ export default function QuestionsPageCard({ sx={{ display: "flex", alignItems: "center", - marginLeft: isMobile ? "auto" : "0px", }} > { setSwitchState(data); }; @@ -25,15 +33,79 @@ export default function Emoji({ totalIndex }: Props) { return ( <> - - + + + + + + {!isMobile && } + + ), + endAdornment: ( + + + + + + + + + + + + ), + }} + sx={{ + "& .MuiInputBase-root": { + padding: "13.5px", + borderRadius: "10px", + background: "#ffffff", + }, + "& .MuiOutlinedInput-notchedOutline": { + border: "none", + }, + }} + inputProps={{ + sx: { fontSize: "18px", lineHeight: "21px", py: 0 }, + }} + /> + + {isMobile && ( + + + + + + + - } - /> + )} + - + Настройки ответов { @@ -48,6 +49,7 @@ export default function SettingEmoji({ totalIndex }: SettingEmojiProps) { }} /> { @@ -76,7 +78,7 @@ export default function SettingEmoji({ totalIndex }: SettingEmojiProps) { }); }} /> - + { @@ -30,8 +36,8 @@ export default function OptionsAndPicture({ totalIndex }: Props) { ))} + + + + + + {!isMobile && } + + ), + endAdornment: ( + + + + + + + + + + + + ), + }} + sx={{ + "& .MuiInputBase-root": { + padding: "13.5px", + borderRadius: "10px", + background: "#ffffff", + }, + "& .MuiOutlinedInput-notchedOutline": { + border: "none", + }, + }} + inputProps={{ + sx: { fontSize: "18px", lineHeight: "21px", py: 0 }, + }} + /> + + {isMobile && ( + + + + + + + + + )} + + - + Настройки ответов { @@ -73,7 +74,7 @@ export default function SettingOptionsAndPict({ Текст-заглушка на картинке debounced(target.value)} @@ -93,6 +94,7 @@ export default function SettingOptionsAndPict({ Настройки вопросов { @@ -106,7 +108,7 @@ export default function SettingOptionsAndPict({ /> { diff --git a/src/pages/Questions/OptionsPicture/OptionsPicture.tsx b/src/pages/Questions/OptionsPicture/OptionsPicture.tsx index 3ae34c1a..ec89eef0 100644 --- a/src/pages/Questions/OptionsPicture/OptionsPicture.tsx +++ b/src/pages/Questions/OptionsPicture/OptionsPicture.tsx @@ -1,6 +1,7 @@ import { useState } from "react"; import { useParams } from "react-router-dom"; -import { Box, Link, Typography, Button, useTheme, useMediaQuery } from "@mui/material"; +import { Box, Link, Typography, Button, useTheme, useMediaQuery, InputAdornment, IconButton, TextareaAutosize, Popover, TextField } from "@mui/material"; + import ButtonsOptions from "../ButtonsOptions"; import { questionStore, updateQuestionsList } from "@root/questions"; @@ -10,6 +11,11 @@ import AddImage from "../../../assets/icons/questionsPage/addImage"; import SwitchAnswerOptionsPict from "./switchOptionsPict"; import type { ChangeEvent } from "react"; +import PointsIcon from "@icons/questionsPage/PointsIcon"; +import MessageIcon from "@icons/messagIcon"; +import DeleteIcon from "@icons/questionsPage/deleteIcon"; +import { ImageAddIcons } from "@icons/ImageAddIcons"; + interface Props { totalIndex: number; @@ -41,21 +47,99 @@ export default function OptionsPicture({ totalIndex }: Props) { <> - - + + + + + {!isMobile && } + + ), + endAdornment: ( + + + + + + + + + + + + ), + }} + sx={{ + "& .MuiInputBase-root": { + padding: "13.5px", + borderRadius: "10px", + background: "#ffffff", + }, + "& .MuiOutlinedInput-notchedOutline": { + border: "none", + }, + }} + inputProps={{ + sx: { fontSize: "18px", lineHeight: "21px", py: 0 }, + }} + /> + + {isMobile && ( + + + + + + + + + )} + + diff --git a/src/pages/Questions/OptionsPicture/settingOpytionsPict.tsx b/src/pages/Questions/OptionsPicture/settingOpytionsPict.tsx index ff9d611b..1f4c65cc 100644 --- a/src/pages/Questions/OptionsPicture/settingOpytionsPict.tsx +++ b/src/pages/Questions/OptionsPicture/settingOpytionsPict.tsx @@ -113,10 +113,10 @@ export default function SettingOpytionsPict({ display: "flex", justifyContent: "space-between", flexDirection: isTablet ? "column" : null, - marginRight: "30px", + marginRight: isMobile ? "0px" : "30px", }} > - + Пропорции @@ -155,7 +155,7 @@ export default function SettingOpytionsPict({ } /> @@ -168,7 +168,7 @@ export default function SettingOpytionsPict({ } /> @@ -234,9 +234,8 @@ export default function SettingOpytionsPict({ }) } /> - + diff --git a/src/pages/Questions/OwnTextField/settingTextField.tsx b/src/pages/Questions/OwnTextField/settingTextField.tsx index aa60a23b..ebda3c55 100644 --- a/src/pages/Questions/OwnTextField/settingTextField.tsx +++ b/src/pages/Questions/OwnTextField/settingTextField.tsx @@ -55,7 +55,7 @@ export default function SettingTextField({ display: "flex", justifyContent: "space-between", flexDirection: isWrapperColumn ? "column" : null, - marginRight: "50px", + marginRight: isMobile ? "0px" : "50px", }} > @@ -99,6 +99,7 @@ export default function SettingTextField({ Настройки вопросов { @@ -108,6 +109,7 @@ export default function SettingTextField({ }} /> { @@ -116,8 +118,9 @@ export default function SettingTextField({ }); }} /> - + { diff --git a/src/pages/Questions/PageOptions/SettingPageOptions.tsx b/src/pages/Questions/PageOptions/SettingPageOptions.tsx index 8bde2b78..6808d819 100644 --- a/src/pages/Questions/PageOptions/SettingPageOptions.tsx +++ b/src/pages/Questions/PageOptions/SettingPageOptions.tsx @@ -1,5 +1,5 @@ import { useParams } from "react-router-dom"; -import { Box, Typography, Tooltip } from "@mui/material"; +import { Box, Typography, useMediaQuery, useTheme, Tooltip } from "@mui/material"; import CustomCheckbox from "@ui_kit/CustomCheckbox"; import CustomTextField from "@ui_kit/CustomTextField"; import { useDebouncedCallback } from "use-debounce"; @@ -15,6 +15,9 @@ type SettingPageOptionsProps = { export default function SettingPageOptions({ totalIndex, }: SettingPageOptionsProps) { + const theme = useTheme(); + const isMobile = useMediaQuery(theme.breakpoints.down(790)); + const quizId = Number(useParams().quizId); const { listQuestions } = questionStore(); const debounced = useDebouncedCallback((value) => { @@ -26,10 +29,11 @@ export default function SettingPageOptions({ }, 1000); return ( - + Настройки вопроса - + diff --git a/src/pages/Questions/RatingOptions/RatingOptions.tsx b/src/pages/Questions/RatingOptions/RatingOptions.tsx index 27aa1e34..e353d21a 100644 --- a/src/pages/Questions/RatingOptions/RatingOptions.tsx +++ b/src/pages/Questions/RatingOptions/RatingOptions.tsx @@ -59,7 +59,7 @@ export default function RatingOptions({ totalIndex }: Props) { gap: "20px", }} > - + {Array.from( { length: listQuestions[quizId][totalIndex].content.steps }, (_, index) => index diff --git a/src/pages/Questions/RatingOptions/settingRating.tsx b/src/pages/Questions/RatingOptions/settingRating.tsx index c9651512..7b440392 100644 --- a/src/pages/Questions/RatingOptions/settingRating.tsx +++ b/src/pages/Questions/RatingOptions/settingRating.tsx @@ -62,7 +62,7 @@ export default function SettingSlider({ totalIndex }: SettingSliderProps) { flexDirection: isWrappColumn ? "column" : null, }} > - + Настройки рейтинга @@ -130,6 +130,7 @@ export default function SettingSlider({ totalIndex }: SettingSliderProps) { Настройки вопросов { @@ -138,8 +139,9 @@ export default function SettingSlider({ totalIndex }: SettingSliderProps) { }); }} /> - + { diff --git a/src/pages/Questions/SliderOptions/SliderOptions.tsx b/src/pages/Questions/SliderOptions/SliderOptions.tsx index d9211b58..0706b7a2 100644 --- a/src/pages/Questions/SliderOptions/SliderOptions.tsx +++ b/src/pages/Questions/SliderOptions/SliderOptions.tsx @@ -36,7 +36,9 @@ export default function SliderOptions({ totalIndex }: Props) { }} > - Выбор значения из диапазона + + Выбор значения из диапазона + - Начальное значение + + Начальное значение + - Шаг + Шаг - + + Настройки ползунка { @@ -48,9 +50,10 @@ export default function SettingSlider({ totalIndex }: SettingSliderProps) { }} /> - + Настройки вопросов { @@ -59,8 +62,9 @@ export default function SettingSlider({ totalIndex }: SettingSliderProps) { }); }} /> - + { diff --git a/src/pages/Questions/UploadFile/settingUpload.tsx b/src/pages/Questions/UploadFile/settingUpload.tsx index d7e2ca80..09d8b23a 100644 --- a/src/pages/Questions/UploadFile/settingUpload.tsx +++ b/src/pages/Questions/UploadFile/settingUpload.tsx @@ -1,5 +1,5 @@ import { useParams } from "react-router-dom"; -import { Box, Typography, Tooltip } from "@mui/material"; +import { Box, Typography, useMediaQuery, useTheme, Tooltip } from "@mui/material"; import CustomCheckbox from "@ui_kit/CustomCheckbox"; import CustomTextField from "@ui_kit/CustomTextField"; import { useDebouncedCallback } from "use-debounce"; @@ -13,6 +13,7 @@ type SettingsUploadProps = { }; export default function SettingsUpload({ totalIndex }: SettingsUploadProps) { + const theme = useTheme(); const quizId = Number(useParams().quizId); const { listQuestions } = questionStore(); const debounced = useDebouncedCallback((value) => { @@ -20,11 +21,13 @@ export default function SettingsUpload({ totalIndex }: SettingsUploadProps) { clonContent.innerName = value; updateQuestionsList(quizId, totalIndex, { content: clonContent }); }, 1000); + const isMobile = useMediaQuery(theme.breakpoints.down(790)); return ( - + Настройки вопроса { @@ -34,6 +37,7 @@ export default function SettingsUpload({ totalIndex }: SettingsUploadProps) { }} /> { @@ -42,8 +46,9 @@ export default function SettingsUpload({ totalIndex }: SettingsUploadProps) { }); }} /> - + { diff --git a/src/pages/Questions/answerOptions/responseSettings.tsx b/src/pages/Questions/answerOptions/responseSettings.tsx index 2b8af0e3..55dcc0ee 100644 --- a/src/pages/Questions/answerOptions/responseSettings.tsx +++ b/src/pages/Questions/answerOptions/responseSettings.tsx @@ -34,12 +34,13 @@ export default function ResponseSettings({ totalIndex }: Props) { display: "flex", justifyContent: "space-between", flexDirection: isTablet ? "column" : "none", - marginRight: "30px", + marginRight: isMobile ? "0" : "30px", }} > - + Настройки ответов { @@ -54,6 +55,7 @@ export default function ResponseSettings({ totalIndex }: Props) { }} /> { @@ -63,6 +65,7 @@ export default function ResponseSettings({ totalIndex }: Props) { }} /> { @@ -75,6 +78,7 @@ export default function ResponseSettings({ totalIndex }: Props) { Настройки вопросов { @@ -83,8 +87,9 @@ export default function ResponseSettings({ totalIndex }: Props) { }); }} /> - + { @@ -111,6 +116,7 @@ export default function ResponseSettings({ totalIndex }: Props) { {listQuestions[quizId][totalIndex].content.innerNameCheck && ( debounced(target.value)} diff --git a/src/pages/startPage/Sidebar/SidebarMobile.tsx b/src/pages/startPage/Sidebar/SidebarMobile.tsx new file mode 100644 index 00000000..24271895 --- /dev/null +++ b/src/pages/startPage/Sidebar/SidebarMobile.tsx @@ -0,0 +1,137 @@ +import BackArrowIcon from "@icons/BackArrowIcon"; +import { People } from "@mui/icons-material"; +import { Box, Typography } from "@mui/material"; +import { FC } from "react"; +import { ChartLineUp } from "./icons/ChartLineUp"; +import { ReturnTime } from "./icons/ReturnTime"; +import { Question } from "./icons/Question"; +import { Settings } from "./icons/Settings"; +import { Pencil } from "./icons/Pencil"; +import { ArrowDown } from "./icons/ArrowDown"; + +interface Iprops { + open: boolean; +} + +export const SidebarMobile: FC = ({ open }) => ( + + + + + + + Название + Название проекта + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + +); diff --git a/src/pages/startPage/Sidebar/icons/ArrowDown.tsx b/src/pages/startPage/Sidebar/icons/ArrowDown.tsx new file mode 100644 index 00000000..29ee7918 --- /dev/null +++ b/src/pages/startPage/Sidebar/icons/ArrowDown.tsx @@ -0,0 +1,13 @@ +import { FC, SVGProps } from "react"; + +export const ArrowDown: FC> = (props) => ( + + + +); diff --git a/src/pages/startPage/Sidebar/icons/ChartLineUp.tsx b/src/pages/startPage/Sidebar/icons/ChartLineUp.tsx new file mode 100644 index 00000000..43828861 --- /dev/null +++ b/src/pages/startPage/Sidebar/icons/ChartLineUp.tsx @@ -0,0 +1,15 @@ +import { FC, SVGProps } from "react"; + +export const ChartLineUp: FC> = (props) => ( + + + + + +); \ No newline at end of file diff --git a/src/pages/startPage/Sidebar/icons/Pencil.tsx b/src/pages/startPage/Sidebar/icons/Pencil.tsx new file mode 100644 index 00000000..10d6fa61 --- /dev/null +++ b/src/pages/startPage/Sidebar/icons/Pencil.tsx @@ -0,0 +1,16 @@ +import { FC, SVGProps } from "react"; + +export const Pencil: FC> = (props) => ( + + + + + + + +); \ No newline at end of file diff --git a/src/pages/startPage/Sidebar/icons/People.tsx b/src/pages/startPage/Sidebar/icons/People.tsx new file mode 100644 index 00000000..7a4566a5 --- /dev/null +++ b/src/pages/startPage/Sidebar/icons/People.tsx @@ -0,0 +1,10 @@ +import { FC, SVGProps } from "react"; + +export const People: FC> = (props) => ( + + + +); \ No newline at end of file diff --git a/src/pages/startPage/Sidebar/icons/Question.tsx b/src/pages/startPage/Sidebar/icons/Question.tsx new file mode 100644 index 00000000..5a743b3d --- /dev/null +++ b/src/pages/startPage/Sidebar/icons/Question.tsx @@ -0,0 +1,14 @@ +import { FC, SVGProps } from "react"; + +export const Question: FC> = (props) => ( + + + + + +); \ No newline at end of file diff --git a/src/pages/startPage/Sidebar/icons/ReturnTime.tsx b/src/pages/startPage/Sidebar/icons/ReturnTime.tsx new file mode 100644 index 00000000..a50b89c5 --- /dev/null +++ b/src/pages/startPage/Sidebar/icons/ReturnTime.tsx @@ -0,0 +1,13 @@ +import { FC, SVGProps } from "react"; + +export const ReturnTime: FC> = (props) => ( + + + +); \ No newline at end of file diff --git a/src/pages/startPage/Sidebar/icons/Settings.tsx b/src/pages/startPage/Sidebar/icons/Settings.tsx new file mode 100644 index 00000000..27796802 --- /dev/null +++ b/src/pages/startPage/Sidebar/icons/Settings.tsx @@ -0,0 +1,24 @@ +import { FC, SVGProps } from "react"; + +export const Settings: FC> = (props) => ( + + + + + +); \ No newline at end of file diff --git a/src/pages/startPage/StartPage.tsx b/src/pages/startPage/StartPage.tsx index bca81903..5cd4dd86 100755 --- a/src/pages/startPage/StartPage.tsx +++ b/src/pages/startPage/StartPage.tsx @@ -10,6 +10,10 @@ import CustomAvatar from "@ui_kit/Header/Avatar"; import Sidebar from "@ui_kit/Sidebar"; import { quizStore } from "@root/quizes"; import { useParams } from "react-router-dom"; +import { Burger } from "@icons/Burger"; +import { PenaLogoIcon } from "@icons/PenaLogoIcon"; +import { SidebarMobile } from "./Sidebar/SidebarMobile"; + export default function StartPage() { const { listQuizes, updateQuizesList, removeQuiz, createBlank } = quizStore(); @@ -17,6 +21,10 @@ export default function StartPage() { const activeStep = listQuizes[params].step; const theme = useTheme(); const isTablet = useMediaQuery(theme.breakpoints.down(1000)); + const isMobile = useMediaQuery(theme.breakpoints.down(660)); + + const [mobileSidebar, setMobileSidebar] = React.useState(false); + const handleNext = () => { updateQuizesList(params, { step: listQuizes[params].step + 1 }); @@ -37,17 +45,17 @@ export default function StartPage() { sx={{ px: "16px", display: "flex", - height: "80px", + height: isMobile ? "51px" : "80px", alignItems: "center", - bgcolor: "white", + bgcolor: isMobile ? "#333647" : "white", borderBottom: "1px solid #E3E3E3", zIndex: theme.zIndex.drawer + 1, }} > - + {isMobile ? : } - + {isMobile ? ( + setMobileSidebar(!mobileSidebar)} + style={{ fontSize: "30px", color: "white", cursor: "pointer" }} + /> + ) : ( + + )} ) : ( <> @@ -153,10 +168,10 @@ export default function StartPage() { - + {isMobile ? : } void; +} + +const style: CSSObject = { + position: "absolute", + top: "50%", + left: "50%", + transform: "translate(-50%, -50%)", + width: 620, + minHeight: 251, + bgcolor: "background.paper", + borderRadius: "12px", + boxShadow: "24", +}; + +export const ReallyChangingModal: FC = ({ opened, onClose }) => ( + + + + Точно меняем? + + + + + Если поменять формат этого вопроса + на Варианты ответов , заполненные поля в этом вопросе пропадут, а + условия показа вопросов / результатов, зависимые от него, сбросятся. + + + + + + + + + +);