diff --git a/src/App.tsx b/src/App.tsx index 783f38cb..79a3a345 100644 --- a/src/App.tsx +++ b/src/App.tsx @@ -5,6 +5,7 @@ import "dayjs/locale/ru"; import SigninDialog from "./pages/auth/Signin"; import SignupDialog from "./pages/auth/Signup"; import { ViewPage } from "./pages/ViewPublicationPage"; +import { DesignPage } from "./pages/startPage/DesignPage"; import { Route, Routes, useLocation, useNavigate, Navigate } from "react-router-dom"; import "./index.css"; import ContactFormPage from "./pages/ContactFormPage/ContactFormPage"; @@ -139,6 +140,7 @@ export default function App() { } /> } /> } /> + } /> diff --git a/src/assets/icons/TreeStructure.tsx b/src/assets/icons/TreeStructure.tsx new file mode 100644 index 00000000..282b22ad --- /dev/null +++ b/src/assets/icons/TreeStructure.tsx @@ -0,0 +1,33 @@ +export const TreeStructure = () => ( + + + + + + + +); diff --git a/src/assets/icons/questionsPage/arrowLeft.tsx b/src/assets/icons/questionsPage/arrowLeft.tsx index 7e4a4489..86abbabb 100755 --- a/src/assets/icons/questionsPage/arrowLeft.tsx +++ b/src/assets/icons/questionsPage/arrowLeft.tsx @@ -1,11 +1,11 @@ import { Box } from "@mui/material"; -// interface Props { -// color: string; -// } +interface Props { + color: string; +} -export default function ArrowLeft() { +export default function ArrowLeft({color = "#7E2AEA"}: Props) { return ( - - + + diff --git a/src/pages/Landing/images/icons/QuizLogo.tsx b/src/pages/Landing/images/icons/QuizLogo.tsx index 0c12503d..76ae536d 100644 --- a/src/pages/Landing/images/icons/QuizLogo.tsx +++ b/src/pages/Landing/images/icons/QuizLogo.tsx @@ -2,19 +2,14 @@ import { useTheme } from "@mui/material"; interface Props { width: number; + color?: string; } -export default function QuizLogo({ width }: Props) { +export default function QuizLogo({ width, color = "#151515" }: Props) { const theme = useTheme(); return ( - + diff --git a/src/pages/Questions/AnswerDraggableList/AnswerItem.tsx b/src/pages/Questions/AnswerDraggableList/AnswerItem.tsx index da351340..8466085e 100644 --- a/src/pages/Questions/AnswerDraggableList/AnswerItem.tsx +++ b/src/pages/Questions/AnswerDraggableList/AnswerItem.tsx @@ -12,8 +12,12 @@ import { useMediaQuery, useTheme, } from "@mui/material"; -import { addQuestionVariant, deleteQuestionVariant, setQuestionVariantField } from "@root/questions/actions"; -import type { KeyboardEvent, ReactNode } from "react"; +import { + addQuestionVariant, + deleteQuestionVariant, + setQuestionVariantField, +} from "@root/questions/actions"; +import type { ChangeEvent, KeyboardEvent, ReactNode } from "react"; import { useState } from "react"; import { Draggable } from "react-beautiful-dnd"; import type { QuestionVariant } from "../../../model/questionTypes/shared"; @@ -78,28 +82,37 @@ export const AnswerItem = ({ focused={false} placeholder={"Добавьте ответ"} multiline={largeCheck} - onChange={({ target }) => { + onChange={({ target }: ChangeEvent) => { setQuestionVariantAnswer(target.value || " "); }} onKeyDown={(event: KeyboardEvent) => { - // if (disableKeyDown) { - // enqueueSnackbar("100 максимальное количество вопросов"); - // } else if (event.code === "Enter" && !largeCheck) { + if (disableKeyDown) { + enqueueSnackbar("100 максимальное количество вопросов"); + } else if (event.code === "Enter" && !largeCheck) { addQuestionVariant(questionId); - // } + } }} InputProps={{ startAdornment: ( <> - - + + {additionalContent} ), endAdornment: ( - + setQuestionVariantAnswer(e.target.value || " ")} - onKeyDown={(event: KeyboardEvent) => event.stopPropagation()} + onChange={(e) => + setQuestionVariantAnswer(e.target.value || " ") + } + onKeyDown={( + event: KeyboardEvent + ) => event.stopPropagation()} /> - deleteQuestionVariant(questionId, variant.id)}> + + deleteQuestionVariant(questionId, variant.id) + } + > { const [activeItem, setActiveItem] = useState( empty ? -1 : activeItemIndex @@ -94,6 +94,7 @@ export const Select = ({ mt: "8px", p: "4px", borderRadius: "8px", + backgroundColor: theme.palette.background.default, border: "1px solid #EEE4FC", boxShadow: "0px 8px 24px rgba(210, 208, 225, 0.4)", }, @@ -120,7 +121,7 @@ export const Select = ({ gap: "20px", }, }} - IconComponent={(props) => } + IconComponent={(props) => } > {items.map((item, index) => ( { let check = true; if ( - resultData.title.length > 0 || - resultData.description.length > 0 || - resultData.content.back.length > 0 || - resultData.content.originalBack.length > 0 || - resultData.content.innerName.length > 0 || - resultData.content.text.length > 0 || - resultData.content.video.length > 0 || - resultData.content.hint.text.length > 0 + resultData.title?.length > 0 || + resultData.description?.length > 0 || + resultData.content.back?.length > 0 || + resultData.content.originalBack?.length > 0 || + resultData.content.innerName?.length > 0 || + resultData.content.text?.length > 0 || + resultData.content.video?.length > 0 || + resultData.content.hint.text?.length > 0 ) check = false; return check; diff --git a/src/pages/ViewPublicationPage/StartPageViewPublication.tsx b/src/pages/ViewPublicationPage/StartPageViewPublication.tsx index cce8c412..03eff02a 100644 --- a/src/pages/ViewPublicationPage/StartPageViewPublication.tsx +++ b/src/pages/ViewPublicationPage/StartPageViewPublication.tsx @@ -429,6 +429,8 @@ function QuizPreviewLayoutByType({ sx={{ width: "60%", overflow: "hidden", + display: "flex", + justifyContent: "center" }} > {backgroundBlock} diff --git a/src/pages/ViewPublicationPage/questions/Page.tsx b/src/pages/ViewPublicationPage/questions/Page.tsx index 5ebdc846..da014eea 100644 --- a/src/pages/ViewPublicationPage/questions/Page.tsx +++ b/src/pages/ViewPublicationPage/questions/Page.tsx @@ -41,7 +41,7 @@ export const Page = ({ currentQuestion }: PageProps) => { ) : ( )} diff --git a/src/pages/ViewPublicationPage/questions/Rating.tsx b/src/pages/ViewPublicationPage/questions/Rating.tsx index 03c3758d..e2129348 100644 --- a/src/pages/ViewPublicationPage/questions/Rating.tsx +++ b/src/pages/ViewPublicationPage/questions/Rating.tsx @@ -73,15 +73,10 @@ export const Rating = ({ currentQuestion }: RatingProps) => { alignItems: "center", gap: "20px", marginTop: "20px", + flexDirection: "column", width: isMobile ? "100%" : undefined }} > - - {currentQuestion.content.ratingNegativeDescription} - { emptyIcon={form?.icon("#9A9AAF")} /> - - {currentQuestion.content.ratingPositiveDescription} - + + {currentQuestion.content.ratingNegativeDescription} + {currentQuestion.content.ratingPositiveDescription} + ); diff --git a/src/pages/startPage/DesignPage.tsx b/src/pages/startPage/DesignPage.tsx new file mode 100644 index 00000000..96d2fb83 --- /dev/null +++ b/src/pages/startPage/DesignPage.tsx @@ -0,0 +1,114 @@ +import { quizApi } from "@api/quiz"; +import { Box, useMediaQuery, useTheme } from "@mui/material"; +import { + resetEditConfig, + setQuizes, + updateQuiz, + setCurrentStep, +} from "@root/quizes/actions"; +import { useCurrentQuiz } from "@root/quizes/hooks"; +import { useQuizStore } from "@root/quizes/store"; +import Sidebar from "@ui_kit/Sidebar"; +import { enqueueSnackbar } from "notistack"; +import { useEffect, useState } from "react"; +import { useNavigate } from "react-router-dom"; +import { useDebouncedCallback } from "use-debounce"; +import { SidebarMobile } from "./Sidebar/SidebarMobile"; +import { + cleanQuestions, + createResult, + setQuestions, +} from "@root/questions/actions"; +import { + updateCanCreatePublic, + updateModalInfoWhyCantCreate, + setShowConfirmLeaveModal, + updateSomeWorkBackend, +} from "@root/uiTools/actions"; +import { useQuestionsStore } from "@root/questions/store"; +import { questionApi } from "@api/question"; +import { useUiTools } from "@root/uiTools/store"; + +import { clearUserData } from "@root/user"; +import { clearAuthToken } from "@frontend/kitui"; +import { logout } from "@api/auth"; +import { AnyTypedQuizQuestion } from "@model/questionTypes/shared"; +import { ModalInfoWhyCantCreate } from "./ModalInfoWhyCantCreate"; +import { ConfirmLeaveModal } from "./ConfirmLeaveModal"; +import { checkQuestionHint } from "@utils/checkQuestionHint"; +import { Header } from "./Header"; + +export const DesignPage = () => { + const quiz = useCurrentQuiz(); + const { editQuizId } = useQuizStore(); + const { questions } = useQuestionsStore(); + + useEffect(() => { + const getData = async () => { + const quizes = await quizApi.getList(); + setQuizes(quizes); + + }; + getData(); + }, []); + + const { showConfirmLeaveModal } = useUiTools(); + const theme = useTheme(); + const navigate = useNavigate(); + const currentStep = useQuizStore((state) => state.currentStep); + const isMobile = useMediaQuery(theme.breakpoints.down(660)); + const [mobileSidebar, setMobileSidebar] = useState(false); + const [nextStep, setNextStep] = useState(0); + + useEffect( + () => () => { + cleanQuestions(); + updateModalInfoWhyCantCreate(false); + updateSomeWorkBackend(false); + }, + [] + ); + + useEffect(() => { + if (editQuizId === null) navigate("/list"); + }, [navigate, editQuizId]); + + const followNewPage = () => { + setShowConfirmLeaveModal(false); + setCurrentStep(nextStep); + }; + + + const changePage = (index: number) => { + if (currentStep === 2) { + setNextStep(index); + setShowConfirmLeaveModal(true); + + return; + } + + setCurrentStep(index); + }; + + console.log(quiz) + if (!quiz) return <>; + return ( + <> +
+ + {isMobile ? ( + + ) : ( + + )} + Страница дизайна + + + setShowConfirmLeaveModal(false)} + /> + + ); +}; diff --git a/src/pages/startPage/EditPage.tsx b/src/pages/startPage/EditPage.tsx index 7092d9ce..922817e9 100755 --- a/src/pages/startPage/EditPage.tsx +++ b/src/pages/startPage/EditPage.tsx @@ -18,7 +18,12 @@ import { useMediaQuery, useTheme, } from "@mui/material"; -import { decrementCurrentStep, resetEditConfig, setQuizes, updateQuiz, setCurrentStep } from "@root/quizes/actions"; +import { + resetEditConfig, + setQuizes, + updateQuiz, + setCurrentStep, +} from "@root/quizes/actions"; import { useCurrentQuiz } from "@root/quizes/hooks"; import { useQuizStore } from "@root/quizes/store"; import CustomAvatar from "@ui_kit/Header/Avatar"; @@ -34,7 +39,11 @@ import { Link, useNavigate } from "react-router-dom"; import useSWR from "swr"; import { useDebouncedCallback } from "use-debounce"; import { SidebarMobile } from "./Sidebar/SidebarMobile"; -import { cleanQuestions, createResult, setQuestions } from "@root/questions/actions"; +import { + cleanQuestions, + createResult, + setQuestions, +} from "@root/questions/actions"; import { updateOpenBranchingPanel, updateCanCreatePublic, @@ -43,6 +52,7 @@ import { updateSomeWorkBackend, } from "@root/uiTools/actions"; import { BranchingPanel } from "../Questions/BranchingPanel"; +import { Header } from "./Header"; import { useQuestionsStore } from "@root/questions/store"; import { useQuizes } from "@root/quizes/hooks"; import { questionApi } from "@api/question"; @@ -60,6 +70,7 @@ import { deleteTimeoutedQuestions } from "@utils/deleteTimeoutedQuestions"; import { toggleQuizPreview } from "@root/quizPreview"; import { LinkSimple } from "@icons/LinkSimple"; import { BackButtonIcon } from "@icons/BackButtonIcon"; +import { TreeStructure } from "@icons/TreeStructure"; let init: () => void; export default function EditPage() { @@ -67,8 +78,6 @@ export default function EditPage() { const { editQuizId } = useQuizStore(); const { questions } = useQuestionsStore(); - console.log("quiz ", quiz); - console.log(questions); useEffect(() => { const getData = async () => { const quizes = await quizApi.getList(); @@ -82,7 +91,9 @@ export default function EditPage() { if ( !questions?.find( - (q) => (q.type === "result" && q.content.includes(':"line"')) || q.content.includes(":'line'") + (q) => + (q.type === "result" && q.content.includes(':"line"')) || + q.content.includes(":'line'") ) ) { createResult(quiz?.backendId, "line"); @@ -93,21 +104,27 @@ export default function EditPage() { getData(); }, []); - const { openBranchingPanel, whyCantCreatePublic, canCreatePublic, showConfirmLeaveModal } = useUiTools(); + const { + openBranchingPanel, + whyCantCreatePublic, + canCreatePublic, + showConfirmLeaveModal, + } = useUiTools(); const theme = useTheme(); const navigate = useNavigate(); const currentStep = useQuizStore((state) => state.currentStep); const isTablet = useMediaQuery(theme.breakpoints.down(1000)); + const isBranchingLogic = useMediaQuery(theme.breakpoints.down(1100)); const isMobile = useMediaQuery(theme.breakpoints.down(660)); + const isLinkButton = useMediaQuery(theme.breakpoints.down(708)); const isMobileSm = useMediaQuery(theme.breakpoints.down(370)); const [mobileSidebar, setMobileSidebar] = useState(false); const [nextStep, setNextStep] = useState(0); const quizConfig = quiz?.config; const disableTest = quiz === undefined ? true : quiz.config.type === null; const [openBranchingPage, setOpenBranchingPage] = useState(false); - const [buttonText, setButtonText] = useState("Опубликовать"); + const [buttonText, setButtonText] = useState(quiz?.status === "stop" ? "Опубликовать" : "Отозвать"); - const openBranchingPageHC = () => { if (!openBranchingPage) { deleteTimeoutedQuestions(questions, quiz); @@ -121,43 +138,34 @@ export default function EditPage() { useEffect( () => () => { - resetEditConfig(); + // resetEditConfig(); cleanQuestions(); updateModalInfoWhyCantCreate(false); - updateSomeWorkBackend(false) + updateSomeWorkBackend(false); }, [] ); - const updateQuestionHint = useDebouncedCallback((questions: AnyTypedQuizQuestion[]) => { - const problems = checkQuestionHint(questions, quiz); - useUiTools.setState({ whyCantCreatePublic: problems }); - if (Object.keys(problems).length > 0) { - updateQuiz(quiz?.id, (state) => { - state.status = "stop"; - }); - updateCanCreatePublic(false); - } else { - updateCanCreatePublic(true); - } - }, 600); + const updateQuestionHint = useDebouncedCallback( + (questions: AnyTypedQuizQuestion[]) => { + const problems = checkQuestionHint(questions, quiz); + useUiTools.setState({ whyCantCreatePublic: problems }); + if (Object.keys(problems).length > 0) { + updateQuiz(quiz?.id, (state) => { + state.status = "stop"; + }); + updateCanCreatePublic(false); + } else { + updateCanCreatePublic(true); + } + }, + 600 + ); useEffect(() => { updateQuestionHint(questions); }, [questions]); - async function handleLogoutClick() { - const [, logoutError] = await logout(); - - if (logoutError) { - return enqueueSnackbar(logoutError); - } - - clearAuthToken(); - clearUserData(); - navigate("/"); - } - const followNewPage = () => { setShowConfirmLeaveModal(false); setCurrentStep(nextStep); @@ -165,16 +173,18 @@ export default function EditPage() { if (!quizConfig) return <>; - const isConditionMet = [1].includes(currentStep) && !openBranchingPanel && quizConfig.type !== "form"; + const isConditionMet = + [1].includes(currentStep) && + !openBranchingPanel && + quizConfig.type !== "form"; - const handleClickStatusQuiz = () => { if (Object.keys(whyCantCreatePublic).length === 0) { if (buttonText === "Опубликовать") { setButtonText("Опубликовано"); setTimeout(() => { setButtonText("Отозвать"); - }, 3000); + }, 1500); } else { setButtonText("Опубликовать"); } @@ -187,141 +197,31 @@ export default function EditPage() { } }; + const changePage = (index: number) => { + if (currentStep === 2) { + setNextStep(index); + setShowConfirmLeaveModal(true); + + return; + } + + setCurrentStep(index); + }; + return ( <> - {/*хедер*/} - - - {isMobile ? : } - - - - - - - - - - updateQuiz(quiz.id, (quiz) => { - quiz.name = e.target.value; - }) - } - 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, - }, - }, - }} - /> - - - {isTablet ? ( - - {isMobile ? ( - setMobileSidebar(!mobileSidebar)} - style={{ fontSize: "30px", color: "white", cursor: "pointer" }} - /> - ) : ( - - - - )} - - ) : ( - <> - - - - - - - - - - - - - )} - - +
- {isMobile ? : } + {isMobile ? ( + + ) : ( + + )} @@ -357,73 +263,152 @@ export default function EditPage() { width: "100%", padding: isMobile ? "20px 16px" : "20px 20px", display: "flex", - justifyContent: isMobile ? (isMobileSm ? "center" : "flex-end") : "flex-start", + justifyContent: isMobile + ? isMobileSm + ? "center" + : "flex-end" + : "flex-start", flexDirection: isMobile ? "row-reverse" : "-moz-initial", alignItems: "center", gap: "15px", background: "#FFF", }} > - {isConditionMet && ( - - - - Логика ветвления + > + } + checkedIcon={} + checked={openBranchingPage} + onChange={openBranchingPageHC} + sx={{ + width: 50, + height: 30, + padding: 0, + "& .MuiSwitch-switchBase": { + padding: 0, + margin: "2px", + width: "26px", + height: "26px", + background: "#fff", + transitionDuration: "300ms", + "&:hover": { + backgroundColor: "#fff !important", + }, + "&:active": { + background: "#fff", + }, + "&.Mui-checked": { + transform: "translateX(20px)", + color: theme.palette.brightPurple.main, + "& + .MuiSwitch-track": { + backgroundColor: "#7E2AEA", + opacity: 1, + border: 0, + }, + "&.Mui-disabled + .MuiSwitch-track": { opacity: 0.5 }, + }, + "&.Mui-disabled .MuiSwitch-thumb": { + color: theme.palette.mode === "light" ? theme.palette.grey[100] : theme.palette.grey[600], + }, + "&.Mui-disabled + .MuiSwitch-track": { + opacity: theme.palette.mode === "light" ? 0.7 : 0.3, + }, + }, + "& .MuiSwitch-thumb": { + boxSizing: "border-box", + width: 25, + height: 25, + }, + "& .MuiSwitch-track": { + backgroundColor: "rgba(217, 188, 255, 0.16)", + borderRadius: 13, + opacity: 1, + transition: theme.transitions.create(["background-color"], { + duration: 500, + }), + }, + }} + /> - - )} + ) : ( + + + + + Логика ветвления + + + + ))} {!canCreatePublic && quiz.config.type !== "form" ? ( @@ -434,23 +419,31 @@ export default function EditPage() { fontSize: "14px", lineHeight: "18px", height: "34px", + whiteSpace: "nowrap", minWidth: "130px", }} onClick={() => - Object.keys(whyCantCreatePublic).length === 0 ? () => {} : updateModalInfoWhyCantCreate(true) + Object.keys(whyCantCreatePublic).length === 0 + ? () => {} + : updateModalInfoWhyCantCreate(true) } > Тестовый просмотр ) : ( - + - {quiz?.status === "start" && ( - - https://hbpn.link/{quiz.qid} - - )} + {quiz?.status === "start" && + (!isLinkButton ? ( + + https://hbpn.link/{quiz.qid} + + ) : ( + + + + ))} {isMobile ? ( - + /> */} )} diff --git a/src/ui_kit/Header/HeaderFull.tsx b/src/ui_kit/Header/HeaderFull.tsx index a9554e2b..27573195 100644 --- a/src/ui_kit/Header/HeaderFull.tsx +++ b/src/ui_kit/Header/HeaderFull.tsx @@ -63,17 +63,17 @@ export default function HeaderFull() { overflow: "hidden", }} > - + {/* - + */} )} - {!isTablet && ( + {/* {!isTablet && ( <> @@ -93,17 +93,17 @@ export default function HeaderFull() { - )} + )} */} {!isMobile && ( <> - + /> */} ; + sxIcon?: SxProps; + sxDate?: SxProps; value?: Dayjs | null; onChange?: (value: Dayjs | null) => void; } -export default function LabeledDatePicker({ label, value, onChange, sx }: Props) { +export default function LabeledDatePicker({ label, value, onChange, sx, sxIcon, sxDate }: Props) { const theme = useTheme(); const upLg = useMediaQuery(theme.breakpoints.up("md")); @@ -38,7 +40,7 @@ export default function LabeledDatePicker({ label, value, onChange, sx }: Props) value={value} onChange={onChange} slots={{ - openPickerIcon: () => , + openPickerIcon: () => , }} slotProps={{ openPickerButton: { @@ -47,6 +49,9 @@ export default function LabeledDatePicker({ label, value, onChange, sx }: Props) }, "data-cy": "open-datepicker", }, + layout: { + sx: {backgroundColor: theme.palette.background.default,} + } }} sx={{ "& .MuiInputBase-root": { @@ -55,13 +60,14 @@ export default function LabeledDatePicker({ label, value, onChange, sx }: Props) pr: "22px", "& input": { py: "11px", - pl: upLg ? "20px" : "13px", + pl: "20px", lineHeight: "19px", }, "& fieldset": { borderColor: "#9A9AAF", }, }, + ...sxDate }} /> diff --git a/src/ui_kit/QuizPreview/QuizPreview.tsx b/src/ui_kit/QuizPreview/QuizPreview.tsx index 342d2f52..dfb9c990 100644 --- a/src/ui_kit/QuizPreview/QuizPreview.tsx +++ b/src/ui_kit/QuizPreview/QuizPreview.tsx @@ -1,10 +1,12 @@ -import { Box, IconButton } from "@mui/material"; +import {Box, IconButton, ThemeProvider} from "@mui/material"; import { toggleQuizPreview, useQuizPreviewStore } from "@root/quizPreview"; import { useLayoutEffect, useRef } from "react"; import { Rnd } from "react-rnd"; import { useWindowSize } from "../../utils/hooks/useWindowSize"; import QuizPreviewLayout from "./QuizPreviewLayout"; import ResizeIcon from "@icons/ResizeIcon"; +import {themesPublication} from "@utils/themes/Publication/themePublication"; +import {useCurrentQuiz} from "@root/quizes/hooks"; const DRAG_PARENT_MARGIN = 0; const NAVBAR_HEIGHT = 0; @@ -20,6 +22,7 @@ interface RndPositionAndSize { export default function QuizPreview() { const isPreviewShown = useQuizPreviewStore((state) => state.isPreviewShown); const rndParentRef = useRef(null); + const quiz = useCurrentQuiz(); const rndRef = useRef(null); const rndPositionAndSizeRef = useRef({ x: 0, @@ -51,66 +54,69 @@ export default function QuizPreview() { ); return ( - - {isPreviewShown && ( - { - rndPositionAndSizeRef.current.x = position.x; - rndPositionAndSizeRef.current.y = position.y; - rndPositionAndSizeRef.current.width = ref.style.width; - rndPositionAndSizeRef.current.height = ref.style.height; - }} - onDragStop={(e, d) => { - rndPositionAndSizeRef.current.x = d.x; - rndPositionAndSizeRef.current.y = d.y; - }} - onDragStart={(e, d) => { - e.preventDefault(); - }} - enableResizing={{ - topLeft: isPreviewShown, - }} - resizeHandleComponent={{ - topLeft: , - }} - resizeHandleStyles={{ - topLeft: { - top: "-1px", - left: "-1px", - }, - }} - style={{ - overflow: "hidden", - pointerEvents: "auto", - }} - > - - - )} - + + + {isPreviewShown && ( + { + rndPositionAndSizeRef.current.x = position.x; + rndPositionAndSizeRef.current.y = position.y; + rndPositionAndSizeRef.current.width = ref.style.width; + rndPositionAndSizeRef.current.height = ref.style.height; + }} + onDragStop={(e, d) => { + rndPositionAndSizeRef.current.x = d.x; + rndPositionAndSizeRef.current.y = d.y; + }} + onDragStart={(e, d) => { + e.preventDefault(); + }} + enableResizing={{ + topLeft: isPreviewShown, + }} + resizeHandleComponent={{ + topLeft: , + }} + resizeHandleStyles={{ + topLeft: { + top: "-1px", + left: "-1px", + }, + }} + style={{ + overflow: "hidden", + pointerEvents: "auto", + }} + > + + + )} + + + ); } diff --git a/src/ui_kit/QuizPreview/QuizPreviewLayout.tsx b/src/ui_kit/QuizPreview/QuizPreviewLayout.tsx index 61241370..965e6110 100644 --- a/src/ui_kit/QuizPreview/QuizPreviewLayout.tsx +++ b/src/ui_kit/QuizPreview/QuizPreviewLayout.tsx @@ -17,7 +17,7 @@ import { setCurrentQuestionIndex, } from "@root/quizPreview"; import { AnyTypedQuizQuestion, UntypedQuizQuestion } from "model/questionTypes/shared"; -import { useEffect } from "react"; +import {useEffect, useRef, useState} from "react"; import ArrowLeft from "../../assets/icons/questionsPage/arrowLeft"; import Date from "./QuizPreviewQuestionTypes/Date"; import Emoji from "./QuizPreviewQuestionTypes/Emoji"; @@ -26,7 +26,7 @@ import Images from "./QuizPreviewQuestionTypes/Images"; import Number from "./QuizPreviewQuestionTypes/Number"; import Page from "./QuizPreviewQuestionTypes/Page"; import Rating from "./QuizPreviewQuestionTypes/Rating"; -import Select from "./QuizPreviewQuestionTypes/Select"; +import Select, {ArrowDownTheme} from "./QuizPreviewQuestionTypes/Select"; import Text from "./QuizPreviewQuestionTypes/Text"; import Variant from "./QuizPreviewQuestionTypes/Variant"; import Varimg from "./QuizPreviewQuestionTypes/Varimg"; @@ -37,13 +37,14 @@ export default function QuizPreviewLayout() { const theme = useTheme(); const questions = useQuestionsStore((state) => state.questions); const currentQuizStep = useQuizPreviewStore((state) => state.currentQuestionIndex); - + const [widthPreview, setWidthPreview] = useState(null) const nonDeletedQuizQuestions = questions.filter((question) => !question.deleted && question.type !== "result" ); const maxCurrentQuizStep = nonDeletedQuizQuestions.length > 0 ? nonDeletedQuizQuestions.length - 1 : 0; const currentProgress = Math.floor((currentQuizStep / maxCurrentQuizStep) * 100); - + const PreviewWin = useRef(0); const currentQuestion = nonDeletedQuizQuestions[currentQuizStep]; + useEffect( function resetCurrentQuizStep() { if (currentQuizStep > maxCurrentQuizStep) { @@ -53,8 +54,22 @@ export default function QuizPreviewLayout() { [currentQuizStep, maxCurrentQuizStep] ); + const observer = useRef( + new ResizeObserver((entries) => { + const { width } = entries[0].contentRect; + setWidthPreview(width) + }) + ); + + useEffect(() => { + observer.current.observe(PreviewWin.current); + }, + [PreviewWin, observer]); + + console.log('current width state: ', widthPreview); return ( - + } + IconComponent={ArrowDownTheme} > {Object.values(questions.filter(q=>q.type!=="result")).map(({ id, title }, index) => ( {`${index + 1}. ${title}`} @@ -196,7 +216,7 @@ export default function QuizPreviewLayout() { disabled={currentQuizStep === 0} sx={{ px: 1, minWidth: 0 }} > - + ; + return ; case "images": - return ; + return ; case "varimg": - return ; + return ; case "emoji": - return ; + return ; case "text": - return ; + return ; case "select": - return ; + return ); } diff --git a/src/ui_kit/QuizPreview/QuizPreviewQuestionTypes/Images.tsx b/src/ui_kit/QuizPreview/QuizPreviewQuestionTypes/Images.tsx index 3fb00fb3..c6c5bf5f 100644 --- a/src/ui_kit/QuizPreview/QuizPreviewQuestionTypes/Images.tsx +++ b/src/ui_kit/QuizPreview/QuizPreviewQuestionTypes/Images.tsx @@ -14,9 +14,10 @@ import type { QuizQuestionImages } from "model/questionTypes/images"; interface Props { question: QuizQuestionImages; + widthPreview: number } -export default function Images({ question }: Props) { +export default function Images({ question, widthPreview }: Props) { const theme = useTheme(); const [selectedVariants, setSelectedVariants] = useState([]); @@ -47,12 +48,13 @@ export default function Images({ question }: Props) { gap: 1, }} > - {question.title} + {question.title} {question.content.variants @@ -70,8 +72,10 @@ export default function Images({ question }: Props) { overflow: "hidden", border: "1px solid", borderColor: selectedVariants.includes(index) - ? theme.palette.brightPurple.main + ? theme.palette.primary.main : "#E3E3E3", + maxWidth: "300px", + maxHeight: "340px" }} > {variant.extendedText ? ( diff --git a/src/ui_kit/QuizPreview/QuizPreviewQuestionTypes/Number.tsx b/src/ui_kit/QuizPreview/QuizPreviewQuestionTypes/Number.tsx index 8ffffb5a..e5aa80a0 100644 --- a/src/ui_kit/QuizPreview/QuizPreviewQuestionTypes/Number.tsx +++ b/src/ui_kit/QuizPreview/QuizPreviewQuestionTypes/Number.tsx @@ -1,9 +1,13 @@ import { useLayoutEffect, useState } from "react"; -import { Box, Typography } from "@mui/material"; +import {Box, Typography, useTheme} from "@mui/material"; import { CustomSlider } from "@ui_kit/CustomSlider"; import type { QuizQuestionNumber } from "model/questionTypes/number"; +import CustomTextField from "@ui_kit/CustomTextField"; +import {updateAnswer} from "@root/quizView"; +import {modes} from "@utils/themes/Publication/themePublication"; +import {useCurrentQuiz} from "@root/quizes/hooks"; interface Props { question: QuizQuestionNumber; @@ -11,7 +15,9 @@ interface Props { export default function Number({ question }: Props) { const [sliderValues, setSliderValues] = useState(0); - + const theme = useTheme(); + const mode = modes; + const quiz = useCurrentQuiz(); const start = question.content.start; const min = parseInt(question.content.range.split("—")[0]); const max = parseInt(question.content.range.split("—")[1]); @@ -50,7 +56,66 @@ export default function Number({ question }: Props) { defaultValue={start} valueLabelDisplay={"on"} step={question.content.step} + sx={{ + color: theme.palette.primary.main, + "& .MuiSlider-valueLabel": { + background: theme.palette.primary.main,} + }} /> + {!question.content.chooseRange && ( + + + + + )} + + {question.content.chooseRange && ( + + + до + + + )} ); diff --git a/src/ui_kit/QuizPreview/QuizPreviewQuestionTypes/Rating.tsx b/src/ui_kit/QuizPreview/QuizPreviewQuestionTypes/Rating.tsx index c5b5e0f1..0815616e 100644 --- a/src/ui_kit/QuizPreview/QuizPreviewQuestionTypes/Rating.tsx +++ b/src/ui_kit/QuizPreview/QuizPreviewQuestionTypes/Rating.tsx @@ -53,7 +53,7 @@ export default function Rating({ question }: Props) { gap: 1, }} > - {question.title} + {question.title} @@ -89,11 +89,7 @@ export default function Rating({ question }: Props) { }} > itemNumber - ? theme.palette.brightPurple.main - : theme.palette.grey2.main - } + color={selectedRating > itemNumber ? theme.palette.primary.main : "#9A9AAF"} /> ))} diff --git a/src/ui_kit/QuizPreview/QuizPreviewQuestionTypes/Select.tsx b/src/ui_kit/QuizPreview/QuizPreviewQuestionTypes/Select.tsx index 37197de4..90529f3f 100644 --- a/src/ui_kit/QuizPreview/QuizPreviewQuestionTypes/Select.tsx +++ b/src/ui_kit/QuizPreview/QuizPreviewQuestionTypes/Select.tsx @@ -19,7 +19,7 @@ interface Props { export default function Text({ question }: Props) { const theme = useTheme(); const [selectValue, setSelectValue] = useState(""); - + const arrowDown = function handleChange(event: SelectChangeEvent) { setSelectValue((event.target as HTMLInputElement).value); } @@ -54,8 +54,11 @@ export default function Text({ question }: Props) { height: "48px", borderRadius: "8px", "& .MuiOutlinedInput-notchedOutline": { - border: `1px solid ${theme.palette.brightPurple.main} !important`, + border: `1px solid ${theme.palette.primary.main} !important`, }, + "& .MuiSelect-icon": { + color: theme.palette.primary.main + } }} MenuProps={{ PaperProps: { @@ -64,6 +67,7 @@ export default function Text({ question }: Props) { p: "4px", borderRadius: "8px", border: "1px solid #EEE4FC", + backgroundColor: theme.palette.background.default, boxShadow: "0px 8px 24px rgba(210, 208, 225, 0.4)", }, }, @@ -75,19 +79,20 @@ export default function Text({ question }: Props) { gap: "8px", "& .Mui-selected": { backgroundColor: theme.palette.background.default, - color: theme.palette.brightPurple.main, + color: theme.palette.primary.main, }, }, }, }} inputProps={{ sx: { - color: theme.palette.brightPurple.main, + color: theme.palette.primary.main, display: "flex", alignItems: "center", px: "9px", gap: "20px", "& + input": !selectValue && { + backgroundColor: theme.palette.background.default, border: "none", transform: "translateY(-50%)", top: "50%", @@ -96,9 +101,10 @@ export default function Text({ question }: Props) { color: "#333", fontSize: "16px", }, + }, }} - IconComponent={(props) => } + IconComponent={ArrowDownTheme} > {question.content.variants .filter(({ answer }) => answer) @@ -113,7 +119,7 @@ export default function Text({ question }: Props) { gap: "20px", p: "4px", borderRadius: "5px", - color: theme.palette.grey2.main, + color: "#9A9AAF", }} > {variant.answer} @@ -124,3 +130,23 @@ export default function Text({ question }: Props) { ); } +export function ArrowDownTheme (props: any) { + return ( + + + + + + + ) +} \ No newline at end of file diff --git a/src/ui_kit/QuizPreview/QuizPreviewQuestionTypes/Variant.tsx b/src/ui_kit/QuizPreview/QuizPreviewQuestionTypes/Variant.tsx index c9d33412..a19aa996 100644 --- a/src/ui_kit/QuizPreview/QuizPreviewQuestionTypes/Variant.tsx +++ b/src/ui_kit/QuizPreview/QuizPreviewQuestionTypes/Variant.tsx @@ -1,14 +1,14 @@ import { ChangeEvent, useState } from "react"; import { - Box, - FormControl, - FormControlLabel, - FormLabel, - Radio, - RadioGroup, - useRadioGroup, - Tooltip, - Typography, + Box, + FormControl, + FormControlLabel, + FormLabel, + Radio, + RadioGroup, + useRadioGroup, + Tooltip, + Typography, useTheme, Checkbox, } from "@mui/material"; import InfoIcon from "@icons/InfoIcon"; @@ -17,6 +17,9 @@ import type { QuizQuestionVariant } from "model/questionTypes/variant"; import CustomRadio from "@ui_kit/CustomRadio"; import RadioCheck from "@ui_kit/RadioCheck"; import RadioIcon from "@ui_kit/RadioIcon"; +import {modes} from "@utils/themes/Publication/themePublication"; +import {useCurrentQuiz} from "@root/quizes/hooks"; +import CheckboxIcon from "@icons/Checkbox"; interface Props { question: QuizQuestionVariant; @@ -24,14 +27,16 @@ interface Props { export default function Variant({ question }: Props) { const [value, setValue] = useState(null); - + const theme = useTheme(); + const mode = modes; + const quiz = useCurrentQuiz(); const handleChange = (event: ChangeEvent) => { setValue((event.target as HTMLInputElement).value); }; return ( - + {question.title} } icon={} - /> + control={question.content.multi ? ( + } + icon={} + /> + ) : ( + } icon={} + /> + ) + } label={ - + {variant.answer} {variant.hints && ( diff --git a/src/ui_kit/QuizPreview/QuizPreviewQuestionTypes/Varimg.tsx b/src/ui_kit/QuizPreview/QuizPreviewQuestionTypes/Varimg.tsx index de202922..483a4451 100644 --- a/src/ui_kit/QuizPreview/QuizPreviewQuestionTypes/Varimg.tsx +++ b/src/ui_kit/QuizPreview/QuizPreviewQuestionTypes/Varimg.tsx @@ -7,7 +7,7 @@ import { Radio, RadioGroup, Tooltip, - Typography, useTheme, + Typography, useMediaQuery, useTheme, } from "@mui/material"; import InfoIcon from "@icons/InfoIcon"; @@ -16,14 +16,20 @@ import type { QuestionVariant } from "model/questionTypes/shared"; import type { QuizQuestionVarImg } from "model/questionTypes/varimg"; import RadioCheck from "@ui_kit/RadioCheck"; import RadioIcon from "@ui_kit/RadioIcon"; +import {modes} from "@utils/themes/Publication/themePublication"; +import {useCurrentQuiz} from "@root/quizes/hooks"; interface Props { question: QuizQuestionVarImg; + widthPreview: number; } -export default function Varimg({ question }: Props) { +export default function Varimg({ question, widthPreview }: Props) { const [selectedVariantIndex, setSelectedVariantIndex] = useState(-1); const theme = useTheme(); + const mode = modes; + const quiz = useCurrentQuiz(); + const isMobile = useMediaQuery(theme.breakpoints.down(650)); const handleChange = (event: ChangeEvent) => { setSelectedVariantIndex( question.content.variants.findIndex( @@ -43,93 +49,113 @@ export default function Varimg({ question }: Props) { gap: "40px", }} > - {question.title} - - {question.content.variants - .filter(({ answer }) => answer) - .map((variant, index) => ( - + + {question.content.variants + .filter(({ answer }) => answer) + .map((variant, index) => ( + } icon={} + /> + } + label={ + + {variant.answer} + {variant.hints && ( + + + + + + )} + + } + /> + ))} + + + {currentVariant?.extendedText ? ( + question variant} icon={} /> - } - label={ - - {variant.answer} - {variant.hints && ( - - - - - - )} - - } - /> - ))} - + ) : ( + + {selectedVariantIndex === -1 + ? widthPreview < 650 ? "Выберите вариант ниже" : "Выберите вариант" + : "Картинка отсутствует"} + + )} + + + - - {currentVariant?.extendedText ? ( - question variant - ) : ( - - {selectedVariantIndex === -1 - ? "Выберите вариант" - : "Картинка отсутствует"} - - )} - + ); } diff --git a/src/ui_kit/Sidebar.tsx b/src/ui_kit/Sidebar.tsx index 9dd6dfe3..8b8ef384 100755 --- a/src/ui_kit/Sidebar.tsx +++ b/src/ui_kit/Sidebar.tsx @@ -5,12 +5,11 @@ import PuzzlePieceIcon from "@icons/PuzzlePieceIcon"; import TagIcon from "@icons/TagIcon"; import { quizSetupSteps } from "@model/quizSettings"; import { Box, IconButton, List, Typography, useTheme } from "@mui/material"; -import { setCurrentStep } from "@root/quizes/actions"; import { useQuizStore } from "@root/quizes/store"; import { useState } from "react"; import MenuItem from "./MenuItem"; import { useCurrentQuiz } from "@root/quizes/hooks"; -import { setShowConfirmLeaveModal } from "@root/uiTools/actions"; +import { useLocation, useNavigate } from "react-router-dom"; const quizSettingsMenuItems = [ [TagIcon, "Дополнения"], @@ -20,28 +19,28 @@ const quizSettingsMenuItems = [ ] as const; type SidebarProps = { - setNextStep: (step: number) => void; + changePage: (step: number) => void; + disableCollapse?: boolean; }; -export default function Sidebar({ setNextStep }: SidebarProps) { +export default function Sidebar({ changePage, disableCollapse }: SidebarProps) { const theme = useTheme(); const [isMenuCollapsed, setIsMenuCollapsed] = useState(false); const currentStep = useQuizStore((state) => state.currentStep); const quiz = useCurrentQuiz(); + const { pathname } = useLocation(); + const navigate = useNavigate(); - const handleMenuCollapseToggle = () => setIsMenuCollapsed((prev) => !prev); - - const changePage = (index: number) => { - if (currentStep === 2) { - setNextStep(index); - setShowConfirmLeaveModal(true); - - return; + const changeMenuItem = (index: number) => { + if (!pathname.startsWith("/edit")) { + navigate("/edit"); } - setCurrentStep(index); + changePage(index); }; + const handleMenuCollapseToggle = () => setIsMenuCollapsed((prev) => !prev); + return ( )} - - - + {!disableCollapse && ( + + + + )} {quizSetupSteps.map((menuItem, index) => { @@ -100,7 +101,7 @@ export default function Sidebar({ setNextStep }: SidebarProps) { return ( changePage(index)} + onClick={() => changeMenuItem(index)} key={index} text={menuItem.sidebarText} isCollapsed={isMenuCollapsed} @@ -129,7 +130,7 @@ export default function Sidebar({ setNextStep }: SidebarProps) { ); })} - {/* {!isMenuCollapsed && ( + {!isMenuCollapsed && ( Настройки квиза - )} */} + )} + navigate("/design")} + text={"Дизайн"} + isCollapsed={isMenuCollapsed} + isActive={currentStep === 6} + disabled={ + currentStep === 6 + ? false + : quiz === undefined + ? true + : quiz?.config.type === null + } + icon={ + + } + /> + + {/* {quizSettingsMenuItems.map((menuItem, index) => { const Icon = menuItem[0]; const totalIndex = index + quizSetupSteps.length; diff --git a/src/ui_kit/StartPagePreview/QuizPreviewLayout.tsx b/src/ui_kit/StartPagePreview/QuizPreviewLayout.tsx index 672e78a4..c1d5e8e8 100644 --- a/src/ui_kit/StartPagePreview/QuizPreviewLayout.tsx +++ b/src/ui_kit/StartPagePreview/QuizPreviewLayout.tsx @@ -4,6 +4,7 @@ import YoutubeEmbedIframe from "./YoutubeEmbedIframe"; import { QuizStartpageAlignType, QuizStartpageType } from "@model/quizSettings"; import { notReachable } from "../../utils/notReachable"; import { useUADevice } from "../../utils/hooks/useUADevice"; +import {useEffect, useRef, useState} from "react"; export default function QuizPreviewLayout() { const theme = useTheme(); @@ -36,7 +37,18 @@ export default function QuizPreviewLayout() { ) : null; return ( - + @@ -94,19 +106,19 @@ export default function QuizPreviewLayout() { {quiz.config.info.clickable ? ( isMobileDevice ? ( - + {quiz.config.info.phonenumber} ) : ( - + {quiz.config.info.phonenumber} ) ) : ( - + {quiz.config.info.phonenumber} )} @@ -138,6 +150,46 @@ function QuizPreviewLayoutByType({ const theme = useTheme(); const isTablet = useMediaQuery(theme.breakpoints.down(630)); + function StartPageMobile() { + return( + <> + + {quizHeaderBlock} + + {quizMainBlock} + + + + {backgroundBlock} + + + + ) + } + switch (startpageType) { case null: case "standard": { @@ -191,7 +243,7 @@ function QuizPreviewLayoutByType({ width: "40%", position: "relative", padding: "16px", - zIndex: 2, + zIndex: 3, display: "flex", flexDirection: "column", justifyContent: "space-between", @@ -208,7 +260,7 @@ function QuizPreviewLayoutByType({ top: 0, height: "100%", width: "100%", - zIndex: 1, + zIndex: -1, }} > {backgroundBlock} @@ -230,7 +282,15 @@ function QuizPreviewLayoutByType({ }} > {quizHeaderBlock} - {backgroundBlock && {backgroundBlock}} + {backgroundBlock && + {backgroundBlock}} {quizMainBlock} ); diff --git a/src/ui_kit/StartPagePreview/index.tsx b/src/ui_kit/StartPagePreview/index.tsx index 6e4b782e..da0bf65a 100644 --- a/src/ui_kit/StartPagePreview/index.tsx +++ b/src/ui_kit/StartPagePreview/index.tsx @@ -1,9 +1,11 @@ -import { Box, IconButton, useTheme, useMediaQuery } from "@mui/material"; +import {Box, IconButton, useTheme, useMediaQuery, ThemeProvider} from "@mui/material"; import { toggleQuizPreview, useQuizPreviewStore } from "@root/quizPreview"; -import { useLayoutEffect, useRef } from "react"; +import {useEffect, useLayoutEffect, useRef, useState} from "react"; import { Rnd } from "react-rnd"; import QuizPreviewLayout from "./QuizPreviewLayout"; import ResizeIcon from "@icons/ResizeIcon"; +import {themesPublication} from "@utils/themes/Publication/themePublication"; +import {useCurrentQuiz} from "@root/quizes/hooks"; const DRAG_PARENT_MARGIN = 0; const NAVBAR_HEIGHT = 0; @@ -21,6 +23,7 @@ export const StartPagePreview = () => { const rndParentRef = useRef(null); const rndRef = useRef(null); const theme = useTheme(); + const quiz = useCurrentQuiz(); const isTablet = useMediaQuery(theme.breakpoints.down(630)); const rndPositionAndSizeRef = useRef({ x: 0, @@ -52,66 +55,69 @@ export const StartPagePreview = () => { ); return ( - - {isPreviewShown && ( - { - rndPositionAndSizeRef.current.x = position.x; - rndPositionAndSizeRef.current.y = position.y; - rndPositionAndSizeRef.current.width = ref.style.width; - rndPositionAndSizeRef.current.height = ref.style.height; - }} - onDragStop={(e, d) => { - rndPositionAndSizeRef.current.x = d.x; - rndPositionAndSizeRef.current.y = d.y; - }} - onDragStart={(e, d) => { - e.preventDefault(); - }} - enableResizing={{ - topLeft: isPreviewShown, - }} - resizeHandleComponent={{ - topLeft: , - }} - resizeHandleStyles={{ - topLeft: { - top: "-1px", - left: "-1px", - zIndex: 100, - }, - }} - style={{ - overflow: "hidden", - pointerEvents: "auto", - borderRadius: "5px", - }} - > - - - )} - + + + {isPreviewShown && ( + { + rndPositionAndSizeRef.current.x = position.x; + rndPositionAndSizeRef.current.y = position.y; + rndPositionAndSizeRef.current.width = ref.style.width; + rndPositionAndSizeRef.current.height = ref.style.height; + }} + onDragStop={(e, d) => { + rndPositionAndSizeRef.current.x = d.x; + rndPositionAndSizeRef.current.y = d.y; + }} + onDragStart={(e, d) => { + e.preventDefault(); + }} + enableResizing={{ + topLeft: isPreviewShown, + }} + resizeHandleComponent={{ + topLeft: , + }} + resizeHandleStyles={{ + topLeft: { + top: "-1px", + left: "-1px", + zIndex: 100, + }, + }} + style={{ + overflow: "hidden", + pointerEvents: "auto", + borderRadius: "5px", + }} + > + + + )} + + + ); }; diff --git a/src/ui_kit/Stepper.tsx b/src/ui_kit/Stepper.tsx index 152d741b..2cc62de5 100755 --- a/src/ui_kit/Stepper.tsx +++ b/src/ui_kit/Stepper.tsx @@ -35,12 +35,12 @@ export default function ProgressMobileStepper({ width: "100%", flexGrow: 1, padding: "8px 0", - "& .css-1ej0n1q-MuiLinearProgress-root-MuiMobileStepper-progress": { + "& .MuiLinearProgress-root": { height: "10px", background: "#ffffff", width: "100%", }, - "& .css-1v0msyf-MuiLinearProgress-bar1": { + "& .MuiLinearProgress-bar": { background: "#7e2aea", }, }} diff --git a/src/utils/themes/Publication/genericPublication.ts b/src/utils/themes/Publication/genericPublication.ts index f6f319e6..849269ec 100644 --- a/src/utils/themes/Publication/genericPublication.ts +++ b/src/utils/themes/Publication/genericPublication.ts @@ -14,10 +14,6 @@ const themePublic = createTheme({ padding: '13px 20px', borderRadius: '8px', boxShadow: "none", - // "&:hover": { - // backgroundColor: "#581CA7" - // } - }, }, { @@ -27,11 +23,6 @@ const themePublic = createTheme({ style: { padding: '10px 20px', borderRadius: '8px', - "&:hover": { - backgroundColor: "#581CA7", - border: '1px solid #581CA7', - } - }, }, ],