From 584db3eec2c85f3f3f95aaa98d1c95814d402a21 Mon Sep 17 00:00:00 2001
From: Nastya <nastyab015@yandex.ru>
Date: Thu, 26 Sep 2024 22:51:46 +0300
Subject: [PATCH] =?UTF-8?q?=D0=BF=D0=BE=D0=BC=D0=B5=D1=82=D0=BA=D0=B8=20?=
 =?UTF-8?q?=D0=B2=D0=B2=D0=B5=D1=81=D1=82=D0=B8=20=D1=81=D0=B2=D0=BE=D0=B9?=
 =?UTF-8?q?=20=D0=BE=D1=82=D0=B2=D0=B5=D1=82?=
MIME-Version: 1.0
Content-Type: text/plain; charset=UTF-8
Content-Transfer-Encoding: 8bit

---
 .../questions/Emoji/EmojiVariant.tsx          |  16 +-
 .../questions/Images/ImageVariant.tsx         |  14 +-
 .../questions/Variant/VariantItem.tsx         |  35 ++-
 .../questions/Varimg/VarimgVariant.tsx        | 215 +++++++++++++-----
 4 files changed, 201 insertions(+), 79 deletions(-)

diff --git a/lib/components/ViewPublicationPage/questions/Emoji/EmojiVariant.tsx b/lib/components/ViewPublicationPage/questions/Emoji/EmojiVariant.tsx
index b6f9e72..525b0e8 100644
--- a/lib/components/ViewPublicationPage/questions/Emoji/EmojiVariant.tsx
+++ b/lib/components/ViewPublicationPage/questions/Emoji/EmojiVariant.tsx
@@ -66,6 +66,7 @@ const OwnInput = ({ questionId, variant, largeCheck, ownPlaceholder }: OwnInputP
             backgroundColor: theme.palette.primary.main,
           },
           scrollbarColor: theme.palette.primary.main,
+          overflow: "auto",
         }}
         value={ownAnswer}
         onClick={(e: React.MouseEvent<HTMLTextAreaElement>) => e.stopPropagation()}
@@ -171,6 +172,17 @@ export const EmojiVariant = ({
           {variant.extendedText && <Typography fontSize="100px">{variant.extendedText}</Typography>}
         </Box>
       </Box>
+      {own && (
+        <Typography
+          sx={{
+            color: theme.palette.grey[800],
+            fontSize: "14px",
+            pl: "15px",
+          }}
+        >
+          Введите свой ответ
+        </Typography>
+      )}
       <FormControlLabel
         key={variant.id}
         sx={{
@@ -188,9 +200,7 @@ export const EmojiVariant = ({
             wordBreak: "break-word",
             height: variant.answer.length <= 60 ? undefined : "60px",
             overflow: "auto",
-            "&::-webkit-scrollbar": {
-              width: "4px",
-            },
+            "&::-webkit-scrollbar": { width: "4px" },
             "&::-webkit-scrollbar-thumb": {
               backgroundColor: theme.palette.primary.main,
             },
diff --git a/lib/components/ViewPublicationPage/questions/Images/ImageVariant.tsx b/lib/components/ViewPublicationPage/questions/Images/ImageVariant.tsx
index 72eba2c..6673fa9 100644
--- a/lib/components/ViewPublicationPage/questions/Images/ImageVariant.tsx
+++ b/lib/components/ViewPublicationPage/questions/Images/ImageVariant.tsx
@@ -1,7 +1,7 @@
 import { CheckboxIcon } from "@/assets/icons/Checkbox";
 import type { QuestionVariant } from "@/model/questionTypes/shared";
 import { useQuizSettings } from "@contexts/QuizDataContext";
-import { Box, Checkbox, FormControlLabel, Input, Radio, TextareaAutosize, useTheme } from "@mui/material";
+import { Box, Checkbox, FormControlLabel, Input, Radio, TextareaAutosize, Typography, useTheme } from "@mui/material";
 import { useQuizViewStore } from "@stores/quizView";
 import RadioCheck from "@ui_kit/RadioCheck";
 import RadioIcon from "@ui_kit/RadioIcon";
@@ -120,6 +120,7 @@ export const ImageVariant = ({
   return (
     <Box
       sx={{
+        position: "relative",
         cursor: "pointer",
         borderRadius: "12px",
         border: `1px solid`,
@@ -151,6 +152,17 @@ export const ImageVariant = ({
           )}
         </Box>
       </Box>
+      {own && (
+        <Typography
+          sx={{
+            color: theme.palette.grey[800],
+            fontSize: "14px",
+            pl: "15px",
+          }}
+        >
+          Введите свой ответ
+        </Typography>
+      )}
       <FormControlLabel
         key={variant.id}
         sx={{
diff --git a/lib/components/ViewPublicationPage/questions/Variant/VariantItem.tsx b/lib/components/ViewPublicationPage/questions/Variant/VariantItem.tsx
index 8164ac7..f8745e3 100644
--- a/lib/components/ViewPublicationPage/questions/Variant/VariantItem.tsx
+++ b/lib/components/ViewPublicationPage/questions/Variant/VariantItem.tsx
@@ -9,6 +9,7 @@ import {
   Radio,
   TextFieldProps,
   TextareaAutosize,
+  Typography,
   useTheme,
 } from "@mui/material";
 import { useQuizViewStore } from "@stores/quizView";
@@ -128,7 +129,9 @@ export const VariantItem = ({
     <FormControlLabel
       key={variant.id}
       sx={{
+        position: "relative",
         margin: "0",
+        mt: own ? "10px" : "0",
         borderRadius: "12px",
         color: theme.palette.text.primary,
         padding: "15px",
@@ -155,12 +158,8 @@ export const VariantItem = ({
           height: variant.answer.length <= 60 ? undefined : "60px",
           overflow: "auto",
           lineHeight: "normal",
-          "&::-webkit-scrollbar": {
-            width: "4px",
-          },
-          "&::-webkit-scrollbar-thumb": {
-            backgroundColor: theme.palette.primary.main,
-          },
+          "&::-webkit-scrollbar": { width: "4px" },
+          "&::-webkit-scrollbar-thumb": { backgroundColor: theme.palette.primary.main },
           scrollbarColor: theme.palette.primary.main,
         },
         "& .MuiFormControlLabel-label.Mui-disabled": {
@@ -185,12 +184,24 @@ export const VariantItem = ({
       }
       label={
         own ? (
-          <OwnInput
-            questionId={questionId}
-            variant={variant}
-            largeCheck={questionLargeCheck}
-            ownPlaceholder={ownPlaceholder}
-          />
+          <>
+            <Typography
+              sx={{
+                color: theme.palette.grey[800],
+                fontSize: "14px",
+                position: "absolute",
+                top: "-23px",
+              }}
+            >
+              Введите свой ответ
+            </Typography>
+            <OwnInput
+              questionId={questionId}
+              variant={variant}
+              largeCheck={questionLargeCheck}
+              ownPlaceholder={ownPlaceholder}
+            />
+          </>
         ) : (
           variant.answer
         )
diff --git a/lib/components/ViewPublicationPage/questions/Varimg/VarimgVariant.tsx b/lib/components/ViewPublicationPage/questions/Varimg/VarimgVariant.tsx
index 6269dbd..90f2029 100644
--- a/lib/components/ViewPublicationPage/questions/Varimg/VarimgVariant.tsx
+++ b/lib/components/ViewPublicationPage/questions/Varimg/VarimgVariant.tsx
@@ -1,6 +1,16 @@
 import type { QuestionVariant } from "@/model/questionTypes/shared";
 import { useQuizSettings } from "@contexts/QuizDataContext";
-import { FormControlLabel, TextareaAutosize, Radio, useTheme, Box, Input } from "@mui/material";
+import {
+  FormControlLabel,
+  TextareaAutosize,
+  Radio,
+  useTheme,
+  Box,
+  Input,
+  FormControl,
+  InputLabel,
+  Typography,
+} from "@mui/material";
 import { useQuizViewStore } from "@stores/quizView";
 import RadioCheck from "@ui_kit/RadioCheck";
 import RadioIcon from "@ui_kit/RadioIcon";
@@ -54,6 +64,7 @@ const OwnInput = ({ questionId, variant, largeCheck, ownPlaceholder }: OwnInputP
         },
         scrollbarColor: theme.palette.primary.main,
         maxHeight: "44px",
+        overflow: "auto",
       }}
       value={ownAnswer}
       onClick={(e: React.MouseEvent<HTMLTextAreaElement>) => e.stopPropagation()}
@@ -104,67 +115,145 @@ export const VarimgVariant = ({
     }
   };
 
-  return (
-    <FormControlLabel
-      key={variant.id}
-      disabled={isSending}
-      sx={{
-        marginBottom: "15px",
-        borderRadius: "12px",
-        padding: "20px",
-        color: theme.palette.text.primary,
-        backgroundColor: settings.cfg.design
-          ? quizThemes[settings.cfg.theme].isLight
-            ? "#FFFFFF"
-            : "rgba(255,255,255, 0.3)"
-          : quizThemes[settings.cfg.theme].isLight
-            ? "white"
-            : theme.palette.background.default,
-        border: `1px solid`,
-        borderColor: answer === variant.id ? theme.palette.primary.main : "#9A9AAF",
-        display: "flex",
-        margin: 0,
-        justifyContent: "space-between",
-        "&:hover": { borderColor: theme.palette.primary.main },
-        "& .MuiFormControlLabel-label": {
-          wordBreak: "break-word",
-          height: variant.answer.length <= 60 ? undefined : "60px",
-          overflow: "auto",
-          lineHeight: "normal",
-          width: "100%",
-          "&::-webkit-scrollbar": {
-            width: "4px",
-          },
-          "&::-webkit-scrollbar-thumb": {
-            backgroundColor: theme.palette.primary.main,
-          },
-          scrollbarColor: theme.palette.primary.main,
-        },
-        "& .MuiFormControlLabel-label.Mui-disabled": {
-          color: theme.palette.text.primary,
-        },
-      }}
-      labelPlacement="start"
-      value={index}
-      onClick={sendVariant}
-      label={
-        variant?.isOwn ? (
-          <OwnInput
-            questionId={questionId}
-            variant={variant}
-            largeCheck={questionLargeCheck}
-            ownPlaceholder={ownPlaceholder}
-          />
-        ) : (
-          variant.answer
-        )
-      }
-      control={
-        <Radio
-          checkedIcon={<RadioCheck color={theme.palette.primary.main} />}
-          icon={<RadioIcon />}
+  if (variant?.isOwn) {
+    return (
+      <Box>
+        <Typography
+          sx={{
+            color: theme.palette.grey[800],
+            fontSize: "14px",
+            pl: "15px",
+          }}
+        >
+          Введите свой ответ
+        </Typography>
+
+        <FormControlLabel
+          key={variant.id}
+          disabled={isSending}
+          sx={{
+            marginBottom: "15px",
+            borderRadius: "12px",
+            padding: "20px",
+            color: theme.palette.text.primary,
+            backgroundColor: settings.cfg.design
+              ? quizThemes[settings.cfg.theme].isLight
+                ? "#FFFFFF"
+                : "rgba(255,255,255, 0.3)"
+              : quizThemes[settings.cfg.theme].isLight
+                ? "white"
+                : theme.palette.background.default,
+            border: `1px solid`,
+            borderColor: answer === variant.id ? theme.palette.primary.main : "#9A9AAF",
+            display: "flex",
+            margin: 0,
+            justifyContent: "space-between",
+            "&:hover": { borderColor: theme.palette.primary.main },
+            "& .MuiFormControlLabel-label": {
+              wordBreak: "break-word",
+              height: variant.answer.length <= 60 ? undefined : "60px",
+              overflow: "auto",
+              lineHeight: "normal",
+              width: "100%",
+              "&::-webkit-scrollbar": {
+                width: "4px",
+              },
+              "&::-webkit-scrollbar-thumb": {
+                backgroundColor: theme.palette.primary.main,
+              },
+              scrollbarColor: theme.palette.primary.main,
+            },
+            "& .MuiFormControlLabel-label.Mui-disabled": {
+              color: theme.palette.text.primary,
+            },
+          }}
+          labelPlacement="start"
+          value={index}
+          onClick={sendVariant}
+          label={
+            variant?.isOwn ? (
+              <OwnInput
+                questionId={questionId}
+                variant={variant}
+                largeCheck={questionLargeCheck}
+                ownPlaceholder={ownPlaceholder}
+              />
+            ) : (
+              variant.answer
+            )
+          }
+          control={
+            <Radio
+              checkedIcon={<RadioCheck color={theme.palette.primary.main} />}
+              icon={<RadioIcon />}
+            />
+          }
         />
-      }
-    />
-  );
+      </Box>
+    );
+  } else {
+    return (
+      <FormControlLabel
+        key={variant.id}
+        disabled={isSending}
+        sx={{
+          marginBottom: "15px",
+          borderRadius: "12px",
+          padding: "20px",
+          color: theme.palette.text.primary,
+          backgroundColor: settings.cfg.design
+            ? quizThemes[settings.cfg.theme].isLight
+              ? "#FFFFFF"
+              : "rgba(255,255,255, 0.3)"
+            : quizThemes[settings.cfg.theme].isLight
+              ? "white"
+              : theme.palette.background.default,
+          border: `1px solid`,
+          borderColor: answer === variant.id ? theme.palette.primary.main : "#9A9AAF",
+          display: "flex",
+          margin: 0,
+          justifyContent: "space-between",
+          "&:hover": { borderColor: theme.palette.primary.main },
+          "& .MuiFormControlLabel-label": {
+            wordBreak: "break-word",
+            height: variant.answer.length <= 60 ? undefined : "60px",
+            overflow: "auto",
+            lineHeight: "normal",
+            width: "100%",
+            "&::-webkit-scrollbar": {
+              width: "4px",
+            },
+            "&::-webkit-scrollbar-thumb": {
+              backgroundColor: theme.palette.primary.main,
+            },
+            scrollbarColor: theme.palette.primary.main,
+          },
+          "& .MuiFormControlLabel-label.Mui-disabled": {
+            color: theme.palette.text.primary,
+          },
+        }}
+        labelPlacement="start"
+        value={index}
+        onClick={sendVariant}
+        label={
+          variant?.isOwn ? (
+            <OwnInput
+              questionId={questionId}
+              variant={variant}
+              largeCheck={questionLargeCheck}
+              ownPlaceholder={ownPlaceholder}
+            />
+          ) : (
+            variant.answer
+          )
+        }
+        control={
+          <Radio
+            checkedIcon={<RadioCheck color={theme.palette.primary.main} />}
+            icon={<RadioIcon />}
+          />
+        }
+      />
+    );
+  }
 };