Merge branch 'dev' into result-page

2023-12-08 01:56:31 +03:00 · 2023-12-08 01:56:31 +03:00 · c6c7479182
commit c6c7479182
parent 83610dba8d 5a5845788b
8 changed files with 123 additions and 108 deletions
--- a/src/pages/Questions/DraggableList/QuestionPageCard.tsx
+++ b/src/pages/Questions/DraggableList/QuestionPageCard.tsx
@ -68,7 +68,7 @@ export default function QuestionsPageCard({ question, draggableProps, isDragging
    return (
        <>
            <Paper
-            id={question.content.id}
+            id={question.id}
                data-cy="quiz-question-card"
                sx={{
                    maxWidth: "796px",
--- a/src/pages/ViewPublicationPage/Question.tsx
+++ b/src/pages/ViewPublicationPage/Question.tsx
@ -55,8 +55,8 @@ export const Question = ({
        sx={{
          minHeight: "calc(100vh - 75px)",
          width: "100%",
-          maxWidth: "1000px",
-          padding: "20px 10px 0",
+          maxWidth: "1440px",
+          padding: "40px 25px 20px",
          margin: "0 auto",
        }}
      >
--- a/src/pages/ViewPublicationPage/questions/Images.tsx
+++ b/src/pages/ViewPublicationPage/questions/Images.tsx
@ -1,16 +1,15 @@
 import { useEffect } from "react";
 import {
-  Box,
-  Typography,
-  RadioGroup,
-  FormControlLabel,
-  Radio,
-  useTheme,
-  useMediaQuery,
+    Box,
+    Typography,
+    RadioGroup,
+    FormControlLabel,
+    Radio,
+    useTheme,
+    useMediaQuery, FormControl,
 } from "@mui/material";

 import { useQuizViewStore, updateAnswer } from "@root/quizView";
-
 import RadioCheck from "@ui_kit/RadioCheck";
 import RadioIcon from "@ui_kit/RadioIcon";

@ -92,7 +91,7 @@ export const Images = ({ currentQuestion }: ImagesProps) => {
                    )}
                  </Box>
                </Box>
-                <FormControlLabel
+                <FormControl
                  key={id}
                  sx={{
                    display: "block",
--- a/src/pages/ViewPublicationPage/questions/Page.tsx
+++ b/src/pages/ViewPublicationPage/questions/Page.tsx
@ -14,7 +14,8 @@ export const Page = ({ currentQuestion }: PageProps) => {

  return (
    <Box>
-      <Typography variant="h5">{currentQuestion.title}</Typography>
+      <Typography variant="h5" sx={{ paddingBottom: "25px" }}>{currentQuestion.title}</Typography>
+        <Typography>{currentQuestion.content.text}</Typography>
      <Box
        sx={{
          display: "flex",
@ -24,17 +25,20 @@ export const Page = ({ currentQuestion }: PageProps) => {
        }}
      >
        {currentQuestion.content.picture && (
-          <img
-            src={currentQuestion.content.picture}
-            alt=""
-            style={{
-              display: "block",
-              width: "100%",
-              height: "100%",
-              maxHeight: "80vh",
-              objectFit: "contain",
-            }}
-          />
+            <Box sx={{borderRadius: "12px",
+                border: "1px solid #9A9AAF", overflow: "hidden" }}>
+                <img
+                    src={currentQuestion.content.picture}
+                    alt=""
+                    style={{
+                        display: "block",
+                        width: "100%",
+                        height: "100%",
+                        objectFit: "contain",
+                    }}
+                />
+            </Box>
+
        )}
        {currentQuestion.content.video && (
          <video
--- a/src/pages/ViewPublicationPage/questions/Variant.tsx
+++ b/src/pages/ViewPublicationPage/questions/Variant.tsx
@ -53,20 +53,22 @@ export const Variant = ({ currentQuestion }: VariantProps) => {
            marginTop: "20px",
          }}
        >
-          <Box sx={{ display: "flex", flexDirection: "column", width: "100%" }}>
+          <Box sx={{ display: "flex", flexDirection: "row", flexWrap: "wrap", width: "100%", gap: "20px", }}>
            {currentQuestion.content.variants.map(({ id, answer }, index) => (
              <FormControlLabel
                key={id}
                sx={{
-                  marginBottom: "15px",
-                  borderRadius: "5px",
+                  margin: "0",
+                  borderRadius: "12px",
                  padding: "15px",
-                  color: theme.palette.grey2.main,
                  border: `1px solid ${theme.palette.grey2.main}`,
                  display: "flex",
-                  gap: "10px",
+                  maxWidth: "685px",
+                  justifyContent: "space-between",
+                  width: "100%"
                }}
                value={index}
+                labelPlacement="start"
                control={
                  <Radio checkedIcon={<RadioCheck />} icon={<RadioIcon />} />
                }
--- a/src/ui_kit/QuizPreview/QuizPreviewLayout.tsx
+++ b/src/ui_kit/QuizPreview/QuizPreviewLayout.tsx
@ -65,7 +65,7 @@ export default function QuizPreviewLayout() {
        >
            <Box
                sx={{
-                    p: "16px",
+                    p: "40px 20px 20px",
                    whiteSpace: "break-spaces",
                    overflowY: "auto",
                    flexGrow: 1,
--- a/src/ui_kit/QuizPreview/QuizPreviewQuestionTypes/Page.tsx
+++ b/src/ui_kit/QuizPreview/QuizPreviewQuestionTypes/Page.tsx
@ -16,19 +16,22 @@ export default function Page({ question }: Props) {
        gap: 1,
      }}
    >
-      <Typography variant="h6" data-cy="question-title">{question.title}</Typography>
-      <Typography data-cy="question-text">{question.content.text}</Typography>
+      <Typography variant="h6" data-cy="question-title" sx={{ paddingBottom: "25px" }}>{question.title}</Typography>
+      <Typography data-cy="question-text" sx={{ paddingBottom: "20px" }}>{question.content.text}</Typography>
      {question.content.picture && (
-        <img
-          src={question.content.picture}
-          alt=""
-          style={{
-            width: "100%",
-            display: "block",
-            objectFit: "scale-down",
-            flexGrow: 1,
-          }}
-        />
+          <Box sx={{borderRadius: "12px",
+              border: "1px solid #9A9AAF", width: "100%", overflow: "hidden"}}>
+              <img
+                src={question.content.picture}
+                alt=""
+                style={{
+                    display: "block",
+                    width: "100%",
+                    height: "100%",
+                    objectFit: "contain",
+                }}
+                />
+          </Box>
      )}
    </Box>
  );
--- a/src/ui_kit/QuizPreview/QuizPreviewQuestionTypes/Variant.tsx
+++ b/src/ui_kit/QuizPreview/QuizPreviewQuestionTypes/Variant.tsx
@ -1,82 +1,89 @@
 import { ChangeEvent, useState } from "react";
 import {
-    Box,
-    FormControl,
-    FormControlLabel,
-    FormLabel,
-    Radio,
-    RadioGroup,
-    Tooltip,
-    Typography,
+  Box,
+  FormControl,
+  FormControlLabel,
+  FormLabel,
+  Radio,
+  RadioGroup,
+  useRadioGroup,
+  Tooltip,
+  Typography,
 } from "@mui/material";

 import InfoIcon from "@icons/InfoIcon";

 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";

 interface Props {
-    question: QuizQuestionVariant;
+  question: QuizQuestionVariant;
 }

 export default function Variant({ question }: Props) {
-    const [value, setValue] = useState<string | null>(null);
+  const [value, setValue] = useState<string | null>(null);

-    const handleChange = (event: ChangeEvent<HTMLInputElement>) => {
-        setValue((event.target as HTMLInputElement).value);
-    };
+  const handleChange = (event: ChangeEvent<HTMLInputElement>) => {
+    setValue((event.target as HTMLInputElement).value);
+  };

-    return (
-        <Box sx={{
-            display: "flex",
-            flexDirection: "column",
-            gap: 1,
-        }}>
-            <Typography>{question.title}</Typography>
-            <RadioGroup
-                aria-labelledby="quiz-question-radio-group"
-                value={value}
-                onChange={handleChange}
-            >
-                {question.content.variants
-                    .filter(({ answer }) => answer)
-                    .map((variant, index) => (
-                        <FormControlLabel
-                            key={index}
-                            value={variant.answer}
-                            data-cy="variant-answer"
-                            control={
-                                <Radio
-                                    inputProps={{
-                                        "data-cy": "variant-radio",
-                                    }}
-                                />
-                            }
-                            label={
-                                <Box sx={{ display: "flex", alignItems: "center", gap: 2 }}>
-                                    <Typography>
-                                        {variant.answer}
-                                    </Typography>
-                                    {variant.hints && (
-                                        <Tooltip title={variant.hints} placement="right">
-                                            <Box>
-                                                <InfoIcon />
-                                            </Box>
-                                        </Tooltip>
-                                    )}
-                                </Box>
-                            }
-                        />
-                    ))}
-            </RadioGroup>
-            <img
-                src={question.content.back}
-                style={{
-                    display: "block",
-                    objectFit: "scale-down",
-                    alignSelf: "start",
-                    maxWidth: "100%",
-                }}
+  return (
+    <FormControl fullWidth>
+      <FormLabel id="quiz-question-radio-group" data-cy="question-title" sx={{color: "#000000", marginBottom: "20px", fontSize: "24px", fontWeight: 500}}>
+        {question.title}
+      </FormLabel>
+      <RadioGroup
+        aria-labelledby="quiz-question-radio-group"
+        value={value}
+        onChange={handleChange}
+        sx={{
+            flexDirection: "row",
+            gap: "20px"
+        }}
+      >
+        {question.content.variants
+          .filter(({ answer }) => answer)
+          .map((variant, index) => (
+            <FormControlLabel
+              key={index}
+              value={variant.answer}
+              data-cy="variant-answer"
+              labelPlacement="start"
+              sx={{borderRadius: "12px",
+                  border: value === value ? "1px solid #7E2AEA" : "1px solid #9A9AAF",
+                  padding: "20px",
+                  justifyContent: "space-between",
+                  maxWidth: "685px",
+                  width: "100%",
+                  margin: 0
+              }}
+              control={
+                <Radio
+                  inputProps={{
+                    "data-cy": "variant-radio",
+                  }}
+                  checkedIcon={<RadioCheck />} icon={<RadioIcon />}
+                />
+              }
+              label={
+                <Box sx={{ display: "flex", alignItems: "center", gap: 2 }}>
+                  <Typography>
+                    {variant.answer}
+                  </Typography>
+                  {variant.hints && (
+                    <Tooltip title={variant.hints} placement="right">
+                      <Box>
+                        <InfoIcon />
+                      </Box>
+                    </Tooltip>
+                  )}
+                </Box>
+              }
            />
-        </Box>
-    );
+          ))}
+      </RadioGroup>
+    </FormControl>
+  );
 }