fix: designs

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,
         }}
       >

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}

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,

lib/components/ViewPublicationPage/questions/Emoji.tsx

@@ -5,7 +5,7 @@ import {
   Radio,
   RadioGroup,
   Typography,
-    useTheme
+  useTheme,
 } from "@mui/material";
 
 import { deleteAnswer, updateAnswer, useQuizViewStore } from "@stores/quizView";
@@ -19,7 +19,7 @@ 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";
@@ -30,12 +30,10 @@ type EmojiProps = {
 
 export const Emoji = ({ currentQuestion }: EmojiProps) => {
   const theme = useTheme();
-    const { quizId } = useQuizData();
+  const { quizId, settings } = useQuizData();
   const { answers } = useQuizViewStore();
   const { answer } =
-        answers.find(
+    answers.find(({ questionId }) => questionId === currentQuestion.id) ?? {};
-            ({ questionId }) => questionId === currentQuestion.id
-        ) ?? {};
   const [isSending, setIsSending] = useState<boolean>(false);
 
   return (
@@ -44,7 +42,9 @@ export const Emoji = ({ currentQuestion }: EmojiProps) => {
         variant="h5"
         color={theme.palette.text.primary}
         sx={{ wordBreak: "break-word" }}
-            >{currentQuestion.title}</Typography>
+      >
+        {currentQuestion.title}
+      </Typography>
       <RadioGroup
         name={currentQuestion.id}
         value={currentQuestion.content.variants.findIndex(
@@ -56,8 +56,7 @@ export const Emoji = ({ currentQuestion }: EmojiProps) => {
             currentQuestion.content.variants[Number(target.value)].answer,
             currentQuestion.content.variants[Number(target.value)].points || 0
           );
-                }
+        }}
-                }
         sx={{
           display: "flex",
           flexWrap: "wrap",
@@ -66,7 +65,9 @@ export const Emoji = ({ currentQuestion }: EmojiProps) => {
           marginTop: "20px",
         }}
       >
-                <Box sx={{ display: "flex", width: "100%", gap: "42px", flexWrap: "wrap" }}>
+        <Box
+          sx={{ display: "flex", width: "100%", gap: "42px", flexWrap: "wrap" }}
+        >
           {currentQuestion.content.variants.map((variant, index) => (
             <FormControl
               key={variant.id}
@@ -74,11 +75,19 @@ export const Emoji = ({ currentQuestion }: EmojiProps) => {
               sx={{
                 borderRadius: "12px",
                 border: `1px solid`,
-                                borderColor: answer === variant.id ? theme.palette.primary.main : "#9A9AAF",
+                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
@@ -125,7 +134,7 @@ export const Emoji = ({ currentQuestion }: EmojiProps) => {
                     },
                     "&::-webkit-scrollbar-thumb": {
                       backgroundColor: "#b8babf",
-                                        }
+                    },
                   },
                 }}
                 value={index}
@@ -137,7 +146,10 @@ export const Emoji = ({ currentQuestion }: EmojiProps) => {
                   try {
                     await sendAnswer({
                       questionId: currentQuestion.id,
-                                            body: currentQuestion.content.variants[index].extendedText + " " + currentQuestion.content.variants[index].answer,
+                      body:
+                        currentQuestion.content.variants[index].extendedText +
+                        " " +
+                        currentQuestion.content.variants[index].answer,
                       qid: quizId,
                     });
 
@@ -165,16 +177,24 @@ export const Emoji = ({ currentQuestion }: EmojiProps) => {
 
                   setIsSending(false);
                 }}
-
                 control={
-                                    <Radio checkedIcon={<RadioCheck color={theme.palette.primary.main} />} icon={<RadioIcon />} />
+                  <Radio
+                    checkedIcon={
+                      <RadioCheck color={theme.palette.primary.main} />
+                    }
+                    icon={<RadioIcon />}
+                  />
                 }
                 label={
                   <Box sx={{ display: "flex", gap: "10px" }}>
-                                        <Typography sx={{
+                    <Typography
+                      sx={{
                         wordBreak: "break-word",
                         lineHeight: "normal",
-                                        }}>{variant.answer}</Typography>
+                      }}
+                    >
+                      {variant.answer}
+                    </Typography>
                   </Box>
                 }
               />

lib/components/ViewPublicationPage/questions/Images.tsx

@@ -4,7 +4,7 @@ import {
   Radio,
   RadioGroup,
   Typography,
-    useTheme
+  useTheme,
 } from "@mui/material";
 
 import { deleteAnswer, updateAnswer, useQuizViewStore } from "@stores/quizView";
@@ -17,6 +17,7 @@ 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;
@@ -26,14 +27,23 @@ export const Images = ({ currentQuestion }: ImagesProps) => {
   const { quizId } = useQuizData();
   const { answers } = useQuizViewStore();
   const theme = useTheme();
-    const answer = answers.find(({ questionId }) => questionId === currentQuestion.id)?.answer;
+  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>
+      <Typography
+        variant="h5"
+        color={theme.palette.text.primary}
+        sx={{ wordBreak: "break-word" }}
+      >
+        {currentQuestion.title}
+      </Typography>
       <RadioGroup
         name={currentQuestion.id}
         value={currentQuestion.content.variants.findIndex(
@@ -66,7 +76,15 @@ export const Images = ({ currentQuestion }: ImagesProps) => {
                 cursor: "pointer",
                 borderRadius: "5px",
                 border: `1px solid`,
-                                borderColor: answer === variant.id ? theme.palette.primary.main : "#9A9AAF",
+                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",
@@ -147,12 +165,17 @@ export const Images = ({ currentQuestion }: ImagesProps) => {
                     },
                     "&::-webkit-scrollbar-thumb": {
                       backgroundColor: "#b8babf",
-                                        }
+                    },
                   },
                 }}
                 value={index}
                 control={
-                                    <Radio checkedIcon={<RadioCheck color={theme.palette.primary.main} />} icon={<RadioIcon />} />
+                  <Radio
+                    checkedIcon={
+                      <RadioCheck color={theme.palette.primary.main} />
+                    }
+                    icon={<RadioIcon />}
+                  />
                 }
                 label={variant.answer}
               />

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
+                backgroundColor: quizThemes[settings.cfg.theme].isLight
-                  ? "rgba(154,154,175, 0.2)"
-                  : 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
+                  backgroundColor: quizThemes[settings.cfg.theme].isLight
-                    ? "rgba(154,154,175, 0.2)"
-                    : 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
+                  backgroundColor: quizThemes[settings.cfg.theme].isLight
-                    ? "rgba(154,154,175, 0.2)"
-                    : quizThemes[settings.cfg.theme].isLight
                     ? "white"
                     : theme.palette.background.default,
                 },

lib/components/ViewPublicationPage/questions/Select.tsx

@@ -9,6 +9,7 @@ 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;
@@ -16,17 +17,21 @@ type SelectProps = {
 
 export const Select = ({ currentQuestion }: SelectProps) => {
   const theme = useTheme();
-    const { quizId } = useQuizData();
+  const { quizId, settings } = useQuizData();
   const [isSending, setIsSending] = useState<boolean>(false);
   const { answers } = useQuizViewStore();
   const { answer } =
-        answers.find(
+    answers.find(({ questionId }) => questionId === currentQuestion.id) ?? {};
-            ({ questionId }) => questionId === currentQuestion.id
-        ) ?? {};
 
   return (
     <Box>
-            <Typography variant="h5" color={theme.palette.text.primary} sx={{ wordBreak: "break-word" }}>{currentQuestion.title}</Typography>
+      <Typography
+        variant="h5"
+        color={theme.palette.text.primary}
+        sx={{ wordBreak: "break-word" }}
+      >
+        {currentQuestion.title}
+      </Typography>
       <Box
         sx={{
           display: "flex",
@@ -41,18 +46,26 @@ export const Select = ({ currentQuestion }: SelectProps) => {
           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("ответ не был засчитан");
               }
@@ -60,15 +73,15 @@ export const Select = ({ currentQuestion }: SelectProps) => {
             }
 
             try {
-
               await sendAnswer({
                 questionId: currentQuestion.id,
-                                body: String(currentQuestion.content.variants[Number(value)].answer),
+                body: String(
+                  currentQuestion.content.variants[Number(value)].answer
+                ),
                 qid: quizId,
               });
 
               updateAnswer(currentQuestion.id, String(value), 0);
-
             } catch (e) {
               enqueueSnackbar("ответ не был засчитан");
             }

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
+              background: settings.cfg.design
-                ? "rgba(154,154,175, 0.2)"
+                ? quizThemes[settings.cfg.theme].isLight
-                : "#FFFFFF",
+                  ? "#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": {

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,

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",
           }}
         >

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",
     },
   },
 });