From 5a5845788b84c23de7c473df293ee76b8e397ec1 Mon Sep 17 00:00:00 2001
From: Tamara <tamara.zelenko555@yandex.ru>
Date: Fri, 8 Dec 2023 01:34:21 +0300
Subject: [PATCH] =?UTF-8?q?=D0=B4=D0=B8=D0=B7=D0=B0=D0=B9=D0=BD=20=D0=BF?=
 =?UTF-8?q?=D1=80=D0=B5=D0=B4=D0=BF=D1=80=D0=BE=D1=81=D0=BC=D0=BE=D1=82?=
 =?UTF-8?q?=D1=80=D0=B0=20=D0=B8=D0=BF=D1=83=D0=B1=D0=BB=D0=B8=D0=BA=D0=B0?=
 =?UTF-8?q?=D1=86=D0=B8=D0=B9=20=D0=B2=D0=BE=D0=BF=D1=80=D0=BE=D1=81=D0=BE?=
 =?UTF-8?q?=D0=B2?=
MIME-Version: 1.0
Content-Type: text/plain; charset=UTF-8
Content-Transfer-Encoding: 8bit

---
 .../DraggableList/QuestionPageCard.tsx        |  2 +-
 src/pages/ViewPublicationPage/Question.tsx    |  4 +--
 .../ViewPublicationPage/questions/Images.tsx  | 17 ++++++-----
 .../ViewPublicationPage/questions/Page.tsx    | 28 +++++++++++--------
 .../ViewPublicationPage/questions/Variant.tsx | 12 ++++----
 src/ui_kit/QuizPreview/QuizPreviewLayout.tsx  |  2 +-
 .../QuizPreviewQuestionTypes/Page.tsx         | 27 ++++++++++--------
 .../QuizPreviewQuestionTypes/Variant.tsx      | 20 ++++++++++++-
 8 files changed, 69 insertions(+), 43 deletions(-)

diff --git a/src/pages/Questions/DraggableList/QuestionPageCard.tsx b/src/pages/Questions/DraggableList/QuestionPageCard.tsx
index 34de3139..4b43eff5 100644
--- 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",
diff --git a/src/pages/ViewPublicationPage/Question.tsx b/src/pages/ViewPublicationPage/Question.tsx
index a46fc60c..84b3ff98 100644
--- 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",
         }}
       >
diff --git a/src/pages/ViewPublicationPage/questions/Images.tsx b/src/pages/ViewPublicationPage/questions/Images.tsx
index 425eaa87..ed42ffc2 100644
--- 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",
diff --git a/src/pages/ViewPublicationPage/questions/Page.tsx b/src/pages/ViewPublicationPage/questions/Page.tsx
index 3d5728cd..619aea4b 100644
--- 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
diff --git a/src/pages/ViewPublicationPage/questions/Variant.tsx b/src/pages/ViewPublicationPage/questions/Variant.tsx
index 76ec89de..ad98195a 100644
--- 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 />} />
                 }
diff --git a/src/ui_kit/QuizPreview/QuizPreviewLayout.tsx b/src/ui_kit/QuizPreview/QuizPreviewLayout.tsx
index 7e68964d..517234a6 100644
--- 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,
diff --git a/src/ui_kit/QuizPreview/QuizPreviewQuestionTypes/Page.tsx b/src/ui_kit/QuizPreview/QuizPreviewQuestionTypes/Page.tsx
index 6e123349..4567eee6 100644
--- 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>
   );
diff --git a/src/ui_kit/QuizPreview/QuizPreviewQuestionTypes/Variant.tsx b/src/ui_kit/QuizPreview/QuizPreviewQuestionTypes/Variant.tsx
index 3b975186..c9d33412 100644
--- a/src/ui_kit/QuizPreview/QuizPreviewQuestionTypes/Variant.tsx
+++ b/src/ui_kit/QuizPreview/QuizPreviewQuestionTypes/Variant.tsx
@@ -6,6 +6,7 @@ import {
   FormLabel,
   Radio,
   RadioGroup,
+  useRadioGroup,
   Tooltip,
   Typography,
 } from "@mui/material";
@@ -13,6 +14,9 @@ import {
 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;
@@ -27,13 +31,17 @@ export default function Variant({ question }: Props) {
 
   return (
     <FormControl fullWidth>
-      <FormLabel id="quiz-question-radio-group" data-cy="question-title">
+      <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)
@@ -42,11 +50,21 @@ export default function Variant({ question }: Props) {
               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={