From 593059f2e21a0d4a88efce9b242ceb30dc203d46 Mon Sep 17 00:00:00 2001
From: IlyaDoronin <ryletd@gmail.com>
Date: Tue, 5 Mar 2024 17:29:52 +0300
Subject: [PATCH] fix: designs

---
 .../ViewPublicationPage/Question.tsx          |   4 +-
 .../StartPageViewPublication/index.tsx        |  15 +-
 .../ViewPublicationPage/questions/Date.tsx    |   4 +-
 .../ViewPublicationPage/questions/Emoji.tsx   | 340 +++++++++---------
 .../ViewPublicationPage/questions/Images.tsx  | 305 ++++++++--------
 .../ViewPublicationPage/questions/Number.tsx  |  13 +-
 .../ViewPublicationPage/questions/Select.tsx  | 135 +++----
 .../ViewPublicationPage/questions/Text.tsx    |  18 +-
 .../ViewPublicationPage/questions/Variant.tsx |   4 +-
 .../ViewPublicationPage/questions/Varimg.tsx  |   6 +-
 .../themes/Publication/themePublication.ts    |   4 +-
 11 files changed, 462 insertions(+), 386 deletions(-)

diff --git a/lib/components/ViewPublicationPage/Question.tsx b/lib/components/ViewPublicationPage/Question.tsx
index 1fa6caf..51c24cf 100644
--- a/lib/components/ViewPublicationPage/Question.tsx
+++ b/lib/components/ViewPublicationPage/Question.tsx
@@ -88,7 +88,9 @@ export const Question = ({
       <Box
         sx={{
           background: settings.cfg.design
-            ? "linear-gradient(90deg,#272626, transparent)"
+            ? quizThemes[settings.cfg.theme].isLight
+              ? "transparent"
+              : "linear-gradient(90deg,#272626, transparent)"
             : theme.palette.background.default,
         }}
       >
diff --git a/lib/components/ViewPublicationPage/StartPageViewPublication/index.tsx b/lib/components/ViewPublicationPage/StartPageViewPublication/index.tsx
index 8788612..eb5cd28 100644
--- a/lib/components/ViewPublicationPage/StartPageViewPublication/index.tsx
+++ b/lib/components/ViewPublicationPage/StartPageViewPublication/index.tsx
@@ -267,7 +267,10 @@ export const StartPageViewPublication = () => {
                       <Typography
                         sx={{
                           fontSize: "16px",
-                          color: theme.palette.text.primary,
+                          color:
+                            settings.cfg.startpageType === "expanded"
+                              ? "#FFFFFF"
+                              : theme.palette.text.primary,
                         }}
                       >
                         {settings.cfg.info.phonenumber}
@@ -278,7 +281,10 @@ export const StartPageViewPublication = () => {
                       <Typography
                         sx={{
                           fontSize: "16px",
-                          color: theme.palette.text.primary,
+                          color:
+                            settings.cfg.startpageType === "expanded"
+                              ? "#FFFFFF"
+                              : theme.palette.text.primary,
                         }}
                       >
                         {settings.cfg.info.phonenumber}
@@ -290,7 +296,10 @@ export const StartPageViewPublication = () => {
                     sx={{
                       fontSize: "16px",
                       marginTop: "5px",
-                      color: theme.palette.text.primary,
+                      color:
+                        settings.cfg.startpageType === "expanded"
+                          ? "#FFFFFF"
+                          : theme.palette.text.primary,
                     }}
                   >
                     {settings.cfg.info.phonenumber}
diff --git a/lib/components/ViewPublicationPage/questions/Date.tsx b/lib/components/ViewPublicationPage/questions/Date.tsx
index 2cfb246..b7a2438 100644
--- a/lib/components/ViewPublicationPage/questions/Date.tsx
+++ b/lib/components/ViewPublicationPage/questions/Date.tsx
@@ -88,7 +88,9 @@ export const Date = ({ currentQuestion }: DateProps) => {
           sx={{
             "& .MuiInputBase-root": {
               backgroundColor: settings.cfg.design
-                ? "rgba(154,154,175, 0.2)"
+                ? quizThemes[settings.cfg.theme].isLight
+                  ? "#F2F3F7"
+                  : "rgba(154,154,175, 0.2)"
                 : quizThemes[settings.cfg.theme].isLight
                 ? "white"
                 : theme.palette.background.default,
diff --git a/lib/components/ViewPublicationPage/questions/Emoji.tsx b/lib/components/ViewPublicationPage/questions/Emoji.tsx
index d6f7d29..5ba4990 100644
--- a/lib/components/ViewPublicationPage/questions/Emoji.tsx
+++ b/lib/components/ViewPublicationPage/questions/Emoji.tsx
@@ -1,11 +1,11 @@
 import {
-    Box,
-    FormControl,
-    FormControlLabel,
-    Radio,
-    RadioGroup,
-    Typography,
-    useTheme
+  Box,
+  FormControl,
+  FormControlLabel,
+  Radio,
+  RadioGroup,
+  Typography,
+  useTheme,
 } from "@mui/material";
 
 import { deleteAnswer, updateAnswer, useQuizViewStore } from "@stores/quizView";
@@ -19,169 +19,189 @@ import { enqueueSnackbar } from "notistack";
 import type { QuizQuestionEmoji } from "../../../model/questionTypes/emoji";
 import { useQuizData } from "@contexts/QuizDataContext";
 import { polyfillCountryFlagEmojis } from "country-flag-emoji-polyfill";
-
+import { quizThemes } from "@utils/themes/Publication/themePublication";
 
 polyfillCountryFlagEmojis();
 import { useState } from "react";
 
 type EmojiProps = {
-    currentQuestion: QuizQuestionEmoji;
+  currentQuestion: QuizQuestionEmoji;
 };
 
 export const Emoji = ({ currentQuestion }: EmojiProps) => {
-    const theme = useTheme();
-    const { quizId } = useQuizData();
-    const { answers } = useQuizViewStore();
-    const { answer } =
-        answers.find(
-            ({ questionId }) => questionId === currentQuestion.id
-        ) ?? {};
-    const [isSending, setIsSending] = useState<boolean>(false);
+  const theme = useTheme();
+  const { quizId, settings } = useQuizData();
+  const { answers } = useQuizViewStore();
+  const { answer } =
+    answers.find(({ questionId }) => questionId === currentQuestion.id) ?? {};
+  const [isSending, setIsSending] = useState<boolean>(false);
 
-    return (
-        <Box>
-            <Typography
-                variant="h5"
-                color={theme.palette.text.primary}
-                sx={{ wordBreak: "break-word" }}
-            >{currentQuestion.title}</Typography>
-            <RadioGroup
-                name={currentQuestion.id}
-                value={currentQuestion.content.variants.findIndex(
-                    ({ id }) => answer === id
-                )}
-                onChange={({ target }) => {
-                    updateAnswer(
-                        currentQuestion.id,
-                        currentQuestion.content.variants[Number(target.value)].answer,
-                        currentQuestion.content.variants[Number(target.value)].points || 0
-                    );
-                }
-                }
-                sx={{
-                    display: "flex",
-                    flexWrap: "wrap",
-                    flexDirection: "row",
-                    justifyContent: "space-between",
-                    marginTop: "20px",
-                }}
+  return (
+    <Box>
+      <Typography
+        variant="h5"
+        color={theme.palette.text.primary}
+        sx={{ wordBreak: "break-word" }}
+      >
+        {currentQuestion.title}
+      </Typography>
+      <RadioGroup
+        name={currentQuestion.id}
+        value={currentQuestion.content.variants.findIndex(
+          ({ id }) => answer === id
+        )}
+        onChange={({ target }) => {
+          updateAnswer(
+            currentQuestion.id,
+            currentQuestion.content.variants[Number(target.value)].answer,
+            currentQuestion.content.variants[Number(target.value)].points || 0
+          );
+        }}
+        sx={{
+          display: "flex",
+          flexWrap: "wrap",
+          flexDirection: "row",
+          justifyContent: "space-between",
+          marginTop: "20px",
+        }}
+      >
+        <Box
+          sx={{ display: "flex", width: "100%", gap: "42px", flexWrap: "wrap" }}
+        >
+          {currentQuestion.content.variants.map((variant, index) => (
+            <FormControl
+              key={variant.id}
+              disabled={isSending}
+              sx={{
+                borderRadius: "12px",
+                border: `1px solid`,
+                borderColor:
+                  answer === variant.id
+                    ? theme.palette.primary.main
+                    : "#9A9AAF",
+                overflow: "hidden",
+                maxWidth: "317px",
+                width: "100%",
+                height: "255px",
+                background: settings.cfg.design
+                  ? quizThemes[settings.cfg.theme].isLight
+                    ? "#F2F3F7"
+                    : "rgba(154,154,175, 0.2)"
+                  : "transparent",
+              }}
             >
-                <Box sx={{ display: "flex", width: "100%", gap: "42px", flexWrap: "wrap" }}>
-                    {currentQuestion.content.variants.map((variant, index) => (
-                        <FormControl
-                            key={variant.id}
-                            disabled={isSending}
-                            sx={{
-                                borderRadius: "12px",
-                                border: `1px solid`,
-                                borderColor: answer === variant.id ? theme.palette.primary.main : "#9A9AAF",
-                                overflow: "hidden",
-                                maxWidth: "317px",
-                                width: "100%",
-                                height: "255px",
-                            }}
-                        >
-                            <Box
-                                sx={{
-                                    display: "flex",
-                                    alignItems: "center",
-                                    height: "193px",
-                                    background: "#ffffff",
-                                }}
-                            >
-                                <Box
-                                    sx={{
-                                        width: "100%",
-                                        display: "flex",
-                                        justifyContent: "center",
-                                    }}
-                                >
-                                    {variant.extendedText && (
-                                        <Typography fontSize={"100px"}>
-                                            {variant.extendedText}
-                                        </Typography>
-                                    )}
-                                </Box>
-                            </Box>
-                            <FormControlLabel
-                                key={variant.id}
-                                sx={{
-                                    margin: 0,
-                                    padding: "15px",
-                                    color: theme.palette.text.primary,
-                                    display: "flex",
-                                    gap: "10px",
-                                    alignItems:
-                                        variant.answer.length <= 60 ? "center" : "flex-start",
-                                    position: "relative",
-                                    height: "80px",
-                                    "& .MuiFormControlLabel-label": {
-                                        wordBreak: "break-word",
-                                        height: variant.answer.length <= 60 ? undefined : "60px",
-                                        overflow: "auto",
-                                        paddingLeft: "45px",
-                                        "&::-webkit-scrollbar": {
-                                            width: "4px",
-                                        },
-                                        "&::-webkit-scrollbar-thumb": {
-                                            backgroundColor: "#b8babf",
-                                        }
-                                    },
-                                }}
-                                value={index}
-                                onClick={async (event) => {
-                                    event.preventDefault();
-                                    if (isSending) return;
-
-                                    setIsSending(true);
-                                    try {
-                                        await sendAnswer({
-                                            questionId: currentQuestion.id,
-                                            body: currentQuestion.content.variants[index].extendedText + " " + currentQuestion.content.variants[index].answer,
-                                            qid: quizId,
-                                        });
-
-                                        updateAnswer(
-                                            currentQuestion.id,
-                                            currentQuestion.content.variants[index].id,
-                                            currentQuestion.content.variants[index].points || 0
-                                        );
-                                    } catch (e) {
-                                        enqueueSnackbar("ответ не был засчитан");
-                                    }
-
-                                    if (answer === currentQuestion.content.variants[index].id) {
-                                        deleteAnswer(currentQuestion.id);
-                                        try {
-                                            await sendAnswer({
-                                                questionId: currentQuestion.id,
-                                                body: "",
-                                                qid: quizId,
-                                            });
-                                        } catch (e) {
-                                            enqueueSnackbar("ответ не был засчитан");
-                                        }
-                                    }
-
-                                    setIsSending(false);
-                                }}
-
-                                control={
-                                    <Radio checkedIcon={<RadioCheck color={theme.palette.primary.main} />} icon={<RadioIcon />} />
-                                }
-                                label={
-                                    <Box sx={{ display: "flex", gap: "10px" }}>
-                                        <Typography sx={{
-                                            wordBreak: "break-word",
-                                            lineHeight: "normal",
-                                        }}>{variant.answer}</Typography>
-                                    </Box>
-                                }
-                            />
-                        </FormControl>
-                    ))}
+              <Box
+                sx={{
+                  display: "flex",
+                  alignItems: "center",
+                  height: "193px",
+                  background: "#ffffff",
+                }}
+              >
+                <Box
+                  sx={{
+                    width: "100%",
+                    display: "flex",
+                    justifyContent: "center",
+                  }}
+                >
+                  {variant.extendedText && (
+                    <Typography fontSize={"100px"}>
+                      {variant.extendedText}
+                    </Typography>
+                  )}
                 </Box>
-            </RadioGroup>
+              </Box>
+              <FormControlLabel
+                key={variant.id}
+                sx={{
+                  margin: 0,
+                  padding: "15px",
+                  color: theme.palette.text.primary,
+                  display: "flex",
+                  gap: "10px",
+                  alignItems:
+                    variant.answer.length <= 60 ? "center" : "flex-start",
+                  position: "relative",
+                  height: "80px",
+                  "& .MuiFormControlLabel-label": {
+                    wordBreak: "break-word",
+                    height: variant.answer.length <= 60 ? undefined : "60px",
+                    overflow: "auto",
+                    paddingLeft: "45px",
+                    "&::-webkit-scrollbar": {
+                      width: "4px",
+                    },
+                    "&::-webkit-scrollbar-thumb": {
+                      backgroundColor: "#b8babf",
+                    },
+                  },
+                }}
+                value={index}
+                onClick={async (event) => {
+                  event.preventDefault();
+                  if (isSending) return;
+
+                  setIsSending(true);
+                  try {
+                    await sendAnswer({
+                      questionId: currentQuestion.id,
+                      body:
+                        currentQuestion.content.variants[index].extendedText +
+                        " " +
+                        currentQuestion.content.variants[index].answer,
+                      qid: quizId,
+                    });
+
+                    updateAnswer(
+                      currentQuestion.id,
+                      currentQuestion.content.variants[index].id,
+                      currentQuestion.content.variants[index].points || 0
+                    );
+                  } catch (e) {
+                    enqueueSnackbar("ответ не был засчитан");
+                  }
+
+                  if (answer === currentQuestion.content.variants[index].id) {
+                    deleteAnswer(currentQuestion.id);
+                    try {
+                      await sendAnswer({
+                        questionId: currentQuestion.id,
+                        body: "",
+                        qid: quizId,
+                      });
+                    } catch (e) {
+                      enqueueSnackbar("ответ не был засчитан");
+                    }
+                  }
+
+                  setIsSending(false);
+                }}
+                control={
+                  <Radio
+                    checkedIcon={
+                      <RadioCheck color={theme.palette.primary.main} />
+                    }
+                    icon={<RadioIcon />}
+                  />
+                }
+                label={
+                  <Box sx={{ display: "flex", gap: "10px" }}>
+                    <Typography
+                      sx={{
+                        wordBreak: "break-word",
+                        lineHeight: "normal",
+                      }}
+                    >
+                      {variant.answer}
+                    </Typography>
+                  </Box>
+                }
+              />
+            </FormControl>
+          ))}
         </Box>
-    );
+      </RadioGroup>
+    </Box>
+  );
 };
diff --git a/lib/components/ViewPublicationPage/questions/Images.tsx b/lib/components/ViewPublicationPage/questions/Images.tsx
index a4e0481..51f9023 100644
--- a/lib/components/ViewPublicationPage/questions/Images.tsx
+++ b/lib/components/ViewPublicationPage/questions/Images.tsx
@@ -1,10 +1,10 @@
 import {
-    Box,
-    FormControlLabel,
-    Radio,
-    RadioGroup,
-    Typography,
-    useTheme
+  Box,
+  FormControlLabel,
+  Radio,
+  RadioGroup,
+  Typography,
+  useTheme,
 } from "@mui/material";
 
 import { deleteAnswer, updateAnswer, useQuizViewStore } from "@stores/quizView";
@@ -17,149 +17,172 @@ import { useRootContainerSize } from "../../../contexts/RootContainerWidthContex
 import type { QuizQuestionImages } from "../../../model/questionTypes/images";
 import { useQuizData } from "@contexts/QuizDataContext";
 import { useState } from "react";
+import { quizThemes } from "@utils/themes/Publication/themePublication";
 
 type ImagesProps = {
-    currentQuestion: QuizQuestionImages;
+  currentQuestion: QuizQuestionImages;
 };
 
 export const Images = ({ currentQuestion }: ImagesProps) => {
-    const { quizId } = useQuizData();
-    const { answers } = useQuizViewStore();
-    const theme = useTheme();
-    const answer = answers.find(({ questionId }) => questionId === currentQuestion.id)?.answer;
-    const [isSending, setIsSending] = useState<boolean>(false);
-    const isTablet = useRootContainerSize() < 1000;
-    const isMobile = useRootContainerSize() < 500;
+  const { quizId } = useQuizData();
+  const { answers } = useQuizViewStore();
+  const theme = useTheme();
+  const answer = answers.find(
+    ({ questionId }) => questionId === currentQuestion.id
+  )?.answer;
+  const { settings } = useQuizData();
+  const [isSending, setIsSending] = useState<boolean>(false);
+  const isTablet = useRootContainerSize() < 1000;
+  const isMobile = useRootContainerSize() < 500;
 
-    return (
-        <Box>
-            <Typography variant="h5" color={theme.palette.text.primary} sx={{ wordBreak: "break-word" }}>{currentQuestion.title}</Typography>
-            <RadioGroup
-                name={currentQuestion.id}
-                value={currentQuestion.content.variants.findIndex(
-                    ({ id }) => answer === id
-                )}
-                sx={{
-                    display: "flex",
-                    flexWrap: "wrap",
-                    flexDirection: "row",
-                    justifyContent: "space-between",
-                    marginTop: "20px",
-                }}
+  return (
+    <Box>
+      <Typography
+        variant="h5"
+        color={theme.palette.text.primary}
+        sx={{ wordBreak: "break-word" }}
+      >
+        {currentQuestion.title}
+      </Typography>
+      <RadioGroup
+        name={currentQuestion.id}
+        value={currentQuestion.content.variants.findIndex(
+          ({ id }) => answer === id
+        )}
+        sx={{
+          display: "flex",
+          flexWrap: "wrap",
+          flexDirection: "row",
+          justifyContent: "space-between",
+          marginTop: "20px",
+        }}
+      >
+        <Box
+          sx={{
+            display: "grid",
+            gap: "15px",
+            gridTemplateColumns: isTablet
+              ? isMobile
+                ? "repeat(1, 1fr)"
+                : "repeat(2, 1fr)"
+              : "repeat(3, 1fr)",
+            width: "100%",
+          }}
+        >
+          {currentQuestion.content.variants.map((variant, index) => (
+            <Box
+              key={index}
+              sx={{
+                cursor: "pointer",
+                borderRadius: "5px",
+                border: `1px solid`,
+                borderColor:
+                  answer === variant.id
+                    ? theme.palette.primary.main
+                    : "#9A9AAF",
+                background: settings.cfg.design
+                  ? quizThemes[settings.cfg.theme].isLight
+                    ? "#FFFFFF"
+                    : "rgba(154,154,175, 0.2)"
+                  : "transparent",
+                transition: "opacity 0.5s ease",
+                opacity: isSending ? 0.5 : 1,
+                pointerEvents: isSending ? "none" : "auto",
+              }}
+              onClick={async (event) => {
+                event.preventDefault();
+                if (isSending) return;
+
+                setIsSending(true);
+                try {
+                  await sendAnswer({
+                    questionId: currentQuestion.id,
+                    body: `${currentQuestion.content.variants[index].answer} <img style="width:100%; max-width:250px; max-height:250px" src="${currentQuestion.content.variants[index].extendedText}"/>`,
+                    qid: quizId,
+                  });
+                  updateAnswer(
+                    currentQuestion.id,
+                    currentQuestion.content.variants[index].id,
+                    currentQuestion.content.variants[index].points || 0
+                  );
+                } catch (e) {
+                  enqueueSnackbar("ответ не был засчитан");
+                }
+
+                if (answer === currentQuestion.content.variants[index].id) {
+                  deleteAnswer(currentQuestion.id);
+                  try {
+                    await sendAnswer({
+                      questionId: currentQuestion.id,
+                      body: "",
+                      qid: quizId,
+                    });
+                  } catch (e) {
+                    enqueueSnackbar("ответ не был засчитан");
+                  }
+                }
+
+                setIsSending(false);
+              }}
             >
-                <Box
-                    sx={{
-                        display: "grid",
-                        gap: "15px",
-                        gridTemplateColumns: isTablet
-                            ? isMobile
-                                ? "repeat(1, 1fr)"
-                                : "repeat(2, 1fr)"
-                            : "repeat(3, 1fr)",
+              <Box sx={{ display: "flex", alignItems: "center", gap: "10px" }}>
+                <Box sx={{ width: "100%", height: "300px" }}>
+                  {variant.extendedText && (
+                    <img
+                      src={variant.extendedText}
+                      alt=""
+                      style={{
+                        display: "block",
                         width: "100%",
-                    }}
-                >
-                    {currentQuestion.content.variants.map((variant, index) => (
-                        <Box
-                            key={index}
-                            sx={{
-                                cursor: "pointer",
-                                borderRadius: "5px",
-                                border: `1px solid`,
-                                borderColor: answer === variant.id ? theme.palette.primary.main : "#9A9AAF",
-                                transition: "opacity 0.5s ease",
-                                opacity: isSending ? 0.5 : 1,
-                                pointerEvents: isSending ? "none" : "auto",
-                            }}
-                            onClick={async (event) => {
-                                event.preventDefault();
-                                if (isSending) return;
-
-                                setIsSending(true);
-                                try {
-                                    await sendAnswer({
-                                        questionId: currentQuestion.id,
-                                        body: `${currentQuestion.content.variants[index].answer} <img style="width:100%; max-width:250px; max-height:250px" src="${currentQuestion.content.variants[index].extendedText}"/>`,
-                                        qid: quizId,
-                                    });
-                                    updateAnswer(
-                                        currentQuestion.id,
-                                        currentQuestion.content.variants[index].id,
-                                        currentQuestion.content.variants[index].points || 0
-                                    );
-                                } catch (e) {
-                                    enqueueSnackbar("ответ не был засчитан");
-                                }
-
-                                if (answer === currentQuestion.content.variants[index].id) {
-                                    deleteAnswer(currentQuestion.id);
-                                    try {
-                                        await sendAnswer({
-                                            questionId: currentQuestion.id,
-                                            body: "",
-                                            qid: quizId,
-                                        });
-                                    } catch (e) {
-                                        enqueueSnackbar("ответ не был засчитан");
-                                    }
-                                }
-
-                                setIsSending(false);
-                            }}
-                        >
-                            <Box sx={{ display: "flex", alignItems: "center", gap: "10px" }}>
-                                <Box sx={{ width: "100%", height: "300px" }}>
-                                    {variant.extendedText && (
-                                        <img
-                                            src={variant.extendedText}
-                                            alt=""
-                                            style={{
-                                                display: "block",
-                                                width: "100%",
-                                                height: "100%",
-                                                objectFit: "cover",
-                                            }}
-                                        />
-                                    )}
-                                </Box>
-                            </Box>
-                            <FormControlLabel
-                                key={variant.id}
-                                sx={{
-                                    textAlign: "center",
-                                    color: theme.palette.text.primary,
-                                    marginTop: "10px",
-                                    marginLeft: 0,
-                                    padding: "10px",
-                                    display: "flex",
-                                    alignItems:
-                                        variant.answer.length <= 60 ? "center" : "flex-start",
-                                    position: "relative",
-                                    height: "80px",
-                                    "& .MuiFormControlLabel-label": {
-                                        wordBreak: "break-word",
-                                        height: variant.answer.length <= 60 ? undefined : "60px",
-                                        overflow: "auto",
-                                        lineHeight: "normal",
-                                        paddingLeft: "45px",
-                                        "&::-webkit-scrollbar": {
-                                            width: "4px",
-                                        },
-                                        "&::-webkit-scrollbar-thumb": {
-                                            backgroundColor: "#b8babf",
-                                        }
-                                    },
-                                }}
-                                value={index}
-                                control={
-                                    <Radio checkedIcon={<RadioCheck color={theme.palette.primary.main} />} icon={<RadioIcon />} />
-                                }
-                                label={variant.answer}
-                            />
-                        </Box>
-                    ))}
+                        height: "100%",
+                        objectFit: "cover",
+                      }}
+                    />
+                  )}
                 </Box>
-            </RadioGroup>
+              </Box>
+              <FormControlLabel
+                key={variant.id}
+                sx={{
+                  textAlign: "center",
+                  color: theme.palette.text.primary,
+                  marginTop: "10px",
+                  marginLeft: 0,
+                  padding: "10px",
+                  display: "flex",
+                  alignItems:
+                    variant.answer.length <= 60 ? "center" : "flex-start",
+                  position: "relative",
+                  height: "80px",
+                  "& .MuiFormControlLabel-label": {
+                    wordBreak: "break-word",
+                    height: variant.answer.length <= 60 ? undefined : "60px",
+                    overflow: "auto",
+                    lineHeight: "normal",
+                    paddingLeft: "45px",
+                    "&::-webkit-scrollbar": {
+                      width: "4px",
+                    },
+                    "&::-webkit-scrollbar-thumb": {
+                      backgroundColor: "#b8babf",
+                    },
+                  },
+                }}
+                value={index}
+                control={
+                  <Radio
+                    checkedIcon={
+                      <RadioCheck color={theme.palette.primary.main} />
+                    }
+                    icon={<RadioIcon />}
+                  />
+                }
+                label={variant.answer}
+              />
+            </Box>
+          ))}
         </Box>
-    );
+      </RadioGroup>
+    </Box>
+  );
 };
diff --git a/lib/components/ViewPublicationPage/questions/Number.tsx b/lib/components/ViewPublicationPage/questions/Number.tsx
index c880f2f..0df07f7 100644
--- a/lib/components/ViewPublicationPage/questions/Number.tsx
+++ b/lib/components/ViewPublicationPage/questions/Number.tsx
@@ -411,9 +411,7 @@ export const Number = ({ currentQuestion }: NumberProps) => {
               "& .MuiOutlinedInput-root": { background: "transparent" },
               "& .MuiInputBase-input": { textAlign: "center", zIndex: 1 },
               "& .MuiOutlinedInput-notchedOutline": {
-                backgroundColor: settings.cfg.design
-                  ? "rgba(154,154,175, 0.2)"
-                  : quizThemes[settings.cfg.theme].isLight
+                backgroundColor: quizThemes[settings.cfg.theme].isLight
                   ? "white"
                   : theme.palette.background.default,
               },
@@ -440,9 +438,7 @@ export const Number = ({ currentQuestion }: NumberProps) => {
                 "& .MuiOutlinedInput-root": { background: "transparent" },
                 "& .MuiInputBase-input": { textAlign: "center", zIndex: 1 },
                 "& .MuiOutlinedInput-notchedOutline": {
-                  backgroundColor: settings.cfg.design
-                    ? "rgba(154,154,175, 0.2)"
-                    : quizThemes[settings.cfg.theme].isLight
+                  backgroundColor: quizThemes[settings.cfg.theme].isLight
                     ? "white"
                     : theme.palette.background.default,
                 },
@@ -455,13 +451,10 @@ export const Number = ({ currentQuestion }: NumberProps) => {
               onChange={onMaxInputChange}
               sx={{
                 maxWidth: "80px",
-                borderColor: theme.palette.text.primary,
                 "& .MuiOutlinedInput-root": { background: "transparent" },
                 "& .MuiInputBase-input": { textAlign: "center", zIndex: 1 },
                 "& .MuiOutlinedInput-notchedOutline": {
-                  backgroundColor: settings.cfg.design
-                    ? "rgba(154,154,175, 0.2)"
-                    : quizThemes[settings.cfg.theme].isLight
+                  backgroundColor: quizThemes[settings.cfg.theme].isLight
                     ? "white"
                     : theme.palette.background.default,
                 },
diff --git a/lib/components/ViewPublicationPage/questions/Select.tsx b/lib/components/ViewPublicationPage/questions/Select.tsx
index e6d8115..4fb3b53 100644
--- a/lib/components/ViewPublicationPage/questions/Select.tsx
+++ b/lib/components/ViewPublicationPage/questions/Select.tsx
@@ -9,74 +9,87 @@ import { enqueueSnackbar } from "notistack";
 import type { QuizQuestionSelect } from "../../../model/questionTypes/select";
 import { useQuizData } from "@contexts/QuizDataContext";
 import { useState } from "react";
+import { quizThemes } from "@utils/themes/Publication/themePublication";
 
 type SelectProps = {
-    currentQuestion: QuizQuestionSelect;
+  currentQuestion: QuizQuestionSelect;
 };
 
 export const Select = ({ currentQuestion }: SelectProps) => {
-    const theme = useTheme();
-    const { quizId } = useQuizData();
-    const [isSending, setIsSending] = useState<boolean>(false);
-    const { answers } = useQuizViewStore();
-    const { answer } =
-        answers.find(
-            ({ questionId }) => questionId === currentQuestion.id
-        ) ?? {};
+  const theme = useTheme();
+  const { quizId, settings } = useQuizData();
+  const [isSending, setIsSending] = useState<boolean>(false);
+  const { answers } = useQuizViewStore();
+  const { answer } =
+    answers.find(({ questionId }) => questionId === currentQuestion.id) ?? {};
 
-    return (
-        <Box>
-            <Typography variant="h5" color={theme.palette.text.primary} sx={{ wordBreak: "break-word" }}>{currentQuestion.title}</Typography>
-            <Box
-                sx={{
-                    display: "flex",
-                    flexDirection: "column",
-                    width: "100%",
-                    marginTop: "20px",
-                }}
-            >
-                <SelectComponent
-                    disabled={isSending}
-                    placeholder={currentQuestion.content.default}
-                    activeItemIndex={answer ? Number(answer) : -1}
-                    items={currentQuestion.content.variants.map(({ answer }) => answer)}
-                    colorMain={theme.palette.primary.main}
-                    onChange={async (_, value) => {
-                        setIsSending(true);
-                        if (value < 0) {
-                            deleteAnswer(currentQuestion.id);
-                            try {
+  return (
+    <Box>
+      <Typography
+        variant="h5"
+        color={theme.palette.text.primary}
+        sx={{ wordBreak: "break-word" }}
+      >
+        {currentQuestion.title}
+      </Typography>
+      <Box
+        sx={{
+          display: "flex",
+          flexDirection: "column",
+          width: "100%",
+          marginTop: "20px",
+        }}
+      >
+        <SelectComponent
+          disabled={isSending}
+          placeholder={currentQuestion.content.default}
+          activeItemIndex={answer ? Number(answer) : -1}
+          items={currentQuestion.content.variants.map(({ answer }) => answer)}
+          colorMain={theme.palette.primary.main}
+          sx={{
+            "& .MuiSelect-select.MuiSelect-outlined": { zIndex: 1 },
+            "& .MuiOutlinedInput-notchedOutline": {
+              background: settings.cfg.design
+                ? quizThemes[settings.cfg.theme].isLight
+                  ? "#F2F3F7"
+                  : "rgba(154,154,175, 0.2)"
+                : "transparent",
+            },
+          }}
+          onChange={async (_, value) => {
+            setIsSending(true);
+            if (value < 0) {
+              deleteAnswer(currentQuestion.id);
+              try {
+                await sendAnswer({
+                  questionId: currentQuestion.id,
+                  body: "",
+                  qid: quizId,
+                });
+              } catch (e) {
+                enqueueSnackbar("ответ не был засчитан");
+              }
+              return setIsSending(false);
+            }
 
-                                await sendAnswer({
-                                    questionId: currentQuestion.id,
-                                    body: "",
-                                    qid: quizId,
-                                });
+            try {
+              await sendAnswer({
+                questionId: currentQuestion.id,
+                body: String(
+                  currentQuestion.content.variants[Number(value)].answer
+                ),
+                qid: quizId,
+              });
 
-                            } catch (e) {
-                                enqueueSnackbar("ответ не был засчитан");
-                            }
-                            return setIsSending(false);
-                        }
+              updateAnswer(currentQuestion.id, String(value), 0);
+            } catch (e) {
+              enqueueSnackbar("ответ не был засчитан");
+            }
 
-                        try {
-
-                            await sendAnswer({
-                                questionId: currentQuestion.id,
-                                body: String(currentQuestion.content.variants[Number(value)].answer),
-                                qid: quizId,
-                            });
-
-                            updateAnswer(currentQuestion.id, String(value), 0);
-
-                        } catch (e) {
-                            enqueueSnackbar("ответ не был засчитан");
-                        }
-
-                        setIsSending(false);
-                    }}
-                />
-            </Box>
-        </Box>
-    );
+            setIsSending(false);
+          }}
+        />
+      </Box>
+    </Box>
+  );
 };
diff --git a/lib/components/ViewPublicationPage/questions/Text.tsx b/lib/components/ViewPublicationPage/questions/Text.tsx
index 039a904..7fcd687 100644
--- a/lib/components/ViewPublicationPage/questions/Text.tsx
+++ b/lib/components/ViewPublicationPage/questions/Text.tsx
@@ -16,6 +16,7 @@ import { useRootContainerSize } from "@contexts/RootContainerWidthContext";
 import { enqueueSnackbar } from "notistack";
 import { ChangeEvent, FC, useEffect, useState } from "react";
 import { useDebouncedCallback } from "use-debounce";
+import { quizThemes } from "@utils/themes/Publication/themePublication";
 import type { QuizQuestionText } from "../../../model/questionTypes/text";
 
 const TextField = MuiTextField as unknown as FC<TextFieldProps>; // temporary fix ts(2590)
@@ -151,9 +152,11 @@ const TextNormal = ({ currentQuestion, answer, inputHC }: Props) => {
           }}
           sx={{
             "& .MuiOutlinedInput-root": {
-              backgroundColor: settings.cfg.design
-                ? "rgba(154,154,175, 0.2)"
-                : "#FFFFFF",
+              background: settings.cfg.design
+                ? quizThemes[settings.cfg.theme].isLight
+                  ? "#F2F3F7"
+                  : "rgba(154,154,175, 0.2)"
+                : "transparent",
             },
             "&:focus-visible": { borderColor: theme.palette.primary.main },
           }}
@@ -240,7 +243,14 @@ const TextSpecial = ({
               updateAnswer(currentQuestion.id, target.value, 0);
               inputHC(target.value);
             }}
-            inputProps={{ maxLength: 400 }}
+            inputProps={{
+              maxLength: 400,
+              background: settings.cfg.design
+                ? quizThemes[settings.cfg.theme].isLight
+                  ? "#F2F3F7"
+                  : "rgba(154,154,175, 0.2)"
+                : "transparent",
+            }}
             sx={{
               width: "100%",
               "& .MuiOutlinedInput-root": {
diff --git a/lib/components/ViewPublicationPage/questions/Variant.tsx b/lib/components/ViewPublicationPage/questions/Variant.tsx
index 457d829..a4278cc 100644
--- a/lib/components/ViewPublicationPage/questions/Variant.tsx
+++ b/lib/components/ViewPublicationPage/questions/Variant.tsx
@@ -176,7 +176,9 @@ const VariantItem = ({
         borderColor:
           answer === variant.id ? theme.palette.primary.main : "#9A9AAF",
         backgroundColor: settings.cfg.design
-          ? "rgba(154,154,175, 0.2)"
+          ? quizThemes[settings.cfg.theme].isLight
+            ? "#FFFFFF"
+            : "rgba(154,154,175, 0.2)"
           : quizThemes[settings.cfg.theme].isLight
           ? "white"
           : theme.palette.background.default,
diff --git a/lib/components/ViewPublicationPage/questions/Varimg.tsx b/lib/components/ViewPublicationPage/questions/Varimg.tsx
index e8af899..858434a 100644
--- a/lib/components/ViewPublicationPage/questions/Varimg.tsx
+++ b/lib/components/ViewPublicationPage/questions/Varimg.tsx
@@ -87,7 +87,9 @@ export const Varimg = ({ currentQuestion }: VarimgProps) => {
                   padding: "15px",
                   color: theme.palette.text.primary,
                   backgroundColor: settings.cfg.design
-                    ? "rgba(154,154,175, 0.2)"
+                    ? quizThemes[settings.cfg.theme].isLight
+                      ? "#FFFFFF"
+                      : "rgba(154,154,175, 0.2)"
                     : quizThemes[settings.cfg.theme].isLight
                     ? "white"
                     : theme.palette.background.default,
@@ -174,7 +176,7 @@ export const Varimg = ({ currentQuestion }: VarimgProps) => {
             alignItems: "center",
             justifyContent: "center",
             backgroundColor: "#9A9AAF12",
-            color: "#9A9AAF",
+            color: theme.palette.text.primary,
             textAlign: "center",
           }}
         >
diff --git a/lib/utils/themes/Publication/themePublication.ts b/lib/utils/themes/Publication/themePublication.ts
index 4686ce3..0080ffa 100644
--- a/lib/utils/themes/Publication/themePublication.ts
+++ b/lib/utils/themes/Publication/themePublication.ts
@@ -274,12 +274,12 @@ const Design3 = createTheme({
       main: "#252734",
     },
     text: {
-      primary: "#333647",
+      primary: "#252734",
       secondary: "#4B6A99",
     },
 
     background: {
-      default: "#FFFFFF",
+      default: "#F5F7FF",
     },
   },
 });