правки по дизайну

This commit is contained in:
Tamara 2024-01-06 00:15:59 +03:00
parent 4ce5332045
commit 379ace36e2
3 changed files with 7 additions and 6 deletions

@ -1,5 +1,5 @@
import { useState, useEffect } from "react"; import { useState, useEffect } from "react";
import { Box, useTheme } from "@mui/material"; import {Box, useMediaQuery, useTheme} from "@mui/material";
import { useQuestionsStore } from "@root/quizData/store" import { useQuestionsStore } from "@root/quizData/store"
import { getQuestionById } from "@root/quizData/actions"; import { getQuestionById } from "@root/quizData/actions";
@ -46,6 +46,7 @@ const QUESTIONS_MAP: any = {
export const Question = ({ questions }: QuestionProps) => { export const Question = ({ questions }: QuestionProps) => {
const { settings } = useQuestionsStore() const { settings } = useQuestionsStore()
const theme = useTheme(); const isMobile = useMediaQuery(theme.breakpoints.down(650));
const [currentQuestion, setCurrentQuestion] = useState<AnyTypedQuizQuestion>(); const [currentQuestion, setCurrentQuestion] = useState<AnyTypedQuizQuestion>();
const [showContactForm, setShowContactForm] = useState<boolean>(false); const [showContactForm, setShowContactForm] = useState<boolean>(false);
const [showResultForm, setShowResultForm] = useState<boolean>(false); const [showResultForm, setShowResultForm] = useState<boolean>(false);
@ -71,14 +72,14 @@ export const Question = ({ questions }: QuestionProps) => {
const QuestionComponent = const QuestionComponent =
QUESTIONS_MAP[currentQuestion.type as Exclude<QuestionType, "nonselected">]; QUESTIONS_MAP[currentQuestion.type as Exclude<QuestionType, "nonselected">];
const theme = useTheme();
return ( return (
<Box <Box
sx={{ sx={{
backgroundColor: theme.palette.background.default backgroundColor: theme.palette.background.default,
height: isMobile ? undefined : "100vh"
}} }}
height="100vh"
> >
{!showContactForm && !showResultForm && ( {!showContactForm && !showResultForm && (
<Box <Box

@ -66,7 +66,7 @@ export const ResultForm = ({
flexDirection: "column", flexDirection: "column",
alignItems: "center", alignItems: "center",
justifyContent: "space-between", justifyContent: "space-between",
height: "100vh", height: isMobile ? undefined : "100vh",
width: "100vw", width: "100vw",
pt: "28px", pt: "28px",
}} }}

@ -432,7 +432,7 @@ function QuizPreviewLayoutByType({
padding: "16px", padding: "16px",
display: "flex", display: "flex",
flexDirection: "column", flexDirection: "column",
justifyContent: "center", justifyContent: "space-between",
alignItems: "center", alignItems: "center",
height: "100%", height: "100%",
"&::-webkit-scrollbar": { width: 0 }, "&::-webkit-scrollbar": { width: 0 },