feat: design logic

lib/components/ViewPublicationPage/Footer.tsx

@@ -1,6 +1,9 @@
-import { useQuizData } from "@contexts/QuizDataContext";
-import { Box, Typography, useTheme } from "@mui/material";
 import { ReactNode } from "react";
+import { Box, Typography, useTheme } from "@mui/material";
+
+import { useQuizData } from "@contexts/QuizDataContext";
+
+import Stepper from "@ui_kit/Stepper";
 
 type FooterProps = {
   stepNumber: number | null;
@@ -10,8 +13,10 @@ type FooterProps = {
 
 export const Footer = ({ stepNumber, nextButton, prevButton }: FooterProps) => {
   const theme = useTheme();
-  const { questions } = useQuizData();
+  const { questions, settings } = useQuizData();
-  console.log(questions);
+  const questionsAmount = questions.filter(
+    ({ type }) => type !== "result"
+  ).length;
 
   return (
     <Box
@@ -21,13 +26,16 @@ export const Footer = ({ stepNumber, nextButton, prevButton }: FooterProps) => {
         borderTop: `1px solid ${theme.palette.grey[400]}`,
         height: "75px",
         display: "flex",
+        background: settings.cfg.design
+          ? "rgba(154,154,175, 0.2)"
+          : "transparent",
       }}
     >
       <Box
         sx={{
           width: "100%",
-          maxWidth: "1000px",
+          maxWidth: "1410px",
-          padding: "0 10px",
+          padding: "10px",
           margin: "0 auto",
           display: "flex",
           alignItems: "center",
@@ -40,35 +48,11 @@ export const Footer = ({ stepNumber, nextButton, prevButton }: FooterProps) => {
         {/*    <NameplateLogoFQDark style={{ fontSize: "34px", width:"200px", height:"auto" }} />*/}
         {/*)}*/}
         {stepNumber !== null && (
-          <Box
+          <Box sx={{ flexGrow: 1 }}>
-            sx={{
+            <Typography sx={{ color: theme.palette.text.primary }}>
-              display: "flex",
+              Вопрос {stepNumber} из {questionsAmount}
-              alignItems: "center",
-              gap: "10px",
-              marginRight: "auto",
-              color: theme.palette.text.primary,
-            }}
-          >
-            <Typography>Шаг</Typography>
-            <Typography
-              sx={{
-                display: "flex",
-                justifyContent: "center",
-                alignItems: "center",
-                fontWeight: "bold",
-                borderRadius: "50%",
-                width: "30px",
-                height: "30px",
-                color: "#FFF",
-                background: theme.palette.primary.main,
-              }}
-            >
-              {stepNumber}
-            </Typography>
-            <Typography>Из</Typography>
-            <Typography sx={{ fontWeight: "bold" }}>
-              {questions.filter((q) => q.type !== "result").length}
             </Typography>
+            <Stepper activeStep={stepNumber} steps={questionsAmount} />
           </Box>
         )}
 

lib/components/ViewPublicationPage/Question.tsx

@@ -33,7 +33,7 @@ import Desgin9 from "@icons/designs/design9.jpg";
 import Desgin10 from "@icons/designs/design10.jpg";
 
 import type { ReactNode } from "react";
-import type { Design } from "@model/settingsData";
+import type { QuizTheme } from "@model/settingsData";
 
 type Props = {
   currentQuestion: RealTypedQuizQuestion;
@@ -42,18 +42,28 @@ type Props = {
   prevButton: ReactNode;
 };
 
-export const DESIGN_LIST: Record<Design, string> = {
+export const DESIGN_LIST: Record<QuizTheme, string> = {
-  "": "",
+  Design1: Desgin1,
-  design1: Desgin1,
+  Design2: Desgin2,
-  design2: Desgin2,
+  Design3: Desgin3,
-  design3: Desgin3,
+  Design4: Desgin4,
-  design4: Desgin4,
+  Design5: Desgin5,
-  design5: Desgin5,
+  Design6: Desgin6,
-  design6: Desgin6,
+  Design7: Desgin7,
-  design7: Desgin7,
+  Design8: Desgin8,
-  design8: Desgin8,
+  Design9: Desgin9,
-  design9: Desgin9,
+  Design10: Desgin10,
-  design10: Desgin10,
+  StandardTheme: "",
+  StandardDarkTheme: "",
+  PinkTheme: "",
+  PinkDarkTheme: "",
+  BlackWhiteTheme: "",
+  OliveTheme: "",
+  YellowTheme: "",
+  GoldDarkTheme: "",
+  PurpleTheme: "",
+  BlueTheme: "",
+  BlueDarkTheme: "",
 };
 
 export const Question = ({
@@ -64,19 +74,20 @@ export const Question = ({
 }: Props) => {
   const theme = useTheme();
   const { settings } = useQuizData();
-  const design = DESIGN_LIST[settings.cfg.design];
 
   return (
     <Box
       sx={{
         backgroundPosition: "center",
         backgroundSize: "cover",
-        backgroundImage: `url(${design})`,
+        backgroundImage: settings.cfg.design
+          ? `url(${DESIGN_LIST[settings.cfg.theme]})`
+          : null,
       }}
     >
       <Box
         sx={{
-          background: design
+          background: settings.cfg.design
             ? "linear-gradient(90deg,#272626, transparent)"
             : theme.palette.background.default,
         }}
@@ -100,6 +111,7 @@ export const Question = ({
             question={currentQuestion}
             stepNumber={currentQuestionStepNumber}
           />
+          <Box sx={{ marginLeft: "auto" }}>
             {quizThemes[settings.cfg.theme].isLight ? (
               <Link target={"_blank"} href={"https://quiz.pena.digital"}>
                 <NameplateLogoFQ
@@ -114,6 +126,7 @@ export const Question = ({
               </Link>
             )}
           </Box>
+        </Box>
         <Footer
           stepNumber={currentQuestionStepNumber}
           prevButton={prevButton}

lib/components/ViewPublicationPage/StartPageViewPublication/index.tsx

@@ -44,11 +44,13 @@ export const StartPageViewPublication = () => {
           }
           alt=""
           style={{
+            display: "block",
             width:
               isMobile || settings.cfg.startpageType === "expanded"
                 ? "100%"
                 : undefined,
             height: "100%",
+            maxHeight: "100vh",
             objectFit: "cover",
             overflow: "hidden",
           }}
@@ -214,7 +216,7 @@ export const StartPageViewPublication = () => {
                     fontSize: "18px",
                     padding: "10px 30px",
                     width: "auto",
-                    background: "#7E2AEA",
+                    background: theme.palette.primary.main,
                   }}
                   onClick={() => setCurrentQuizStep("question")}
                 >
@@ -248,7 +250,7 @@ export const StartPageViewPublication = () => {
                     <Typography
                       sx={{
                         fontSize: "16px",
-                        color: "#7E2AEA",
+                        color: theme.palette.primary.main,
                         overflow: "hidden",
                         textOverflow: "ellipsis",
                         whiteSpace: "nowrap",
@@ -262,19 +264,35 @@ export const StartPageViewPublication = () => {
                 {settings.cfg.info.clickable ? (
                   isMobileDevice ? (
                     <Link href={`tel:${settings.cfg.info.phonenumber}`}>
-                      <Typography sx={{ fontSize: "16px" }}>
+                      <Typography
+                        sx={{
+                          fontSize: "16px",
+                          color: theme.palette.text.primary,
+                        }}
+                      >
                         {settings.cfg.info.phonenumber}
                       </Typography>
                     </Link>
                   ) : (
                     <ButtonBase onClick={handleCopyNumber}>
-                      <Typography sx={{ fontSize: "16px" }}>
+                      <Typography
+                        sx={{
+                          fontSize: "16px",
+                          color: theme.palette.text.primary,
+                        }}
+                      >
                         {settings.cfg.info.phonenumber}
                       </Typography>
                     </ButtonBase>
                   )
                 ) : (
-                  <Typography sx={{ fontSize: "16px", marginTop: "5px" }}>
+                  <Typography
+                    sx={{
+                      fontSize: "16px",
+                      marginTop: "5px",
+                      color: theme.palette.text.primary,
+                    }}
+                  >
                     {settings.cfg.info.phonenumber}
                   </Typography>
                 )}

lib/components/ViewPublicationPage/ViewPublicationPage.tsx

@@ -61,7 +61,16 @@ export default function ViewPublicationPage() {
             <Button
               disabled={!isPreviousButtonEnabled}
               variant="contained"
-              sx={{ fontSize: "16px", padding: "10px 15px" }}
+              sx={{
+                fontSize: "16px",
+                padding: "10px 15px",
+                color: "#FFFFFF",
+                border: "1px solid #9A9AAF",
+                background: "rgba(154,154,175, 0.2)",
+                "&:disabled": {
+                  color: "#9A9AAF",
+                },
+              }}
               onClick={moveToPrevQuestion}
             >
               {isMobileMini ? "←" : "← Назад"}

lib/components/ViewPublicationPage/questions/Date.tsx

@@ -29,7 +29,11 @@ export const Date = ({ currentQuestion }: DateProps) => {
 
   return (
     <Box>
-            <Typography variant="h5" color={theme.palette.text.primary} sx={{ wordBreak: "break-word" }}>
+      <Typography
+        variant="h5"
+        color={theme.palette.text.primary}
+        sx={{ wordBreak: "break-word" }}
+      >
         {currentQuestion.title}
       </Typography>
       <Box
@@ -63,11 +67,7 @@ export const Date = ({ currentQuestion }: DateProps) => {
                 qid: quizId,
               });
 
-                            updateAnswer(
+              updateAnswer(currentQuestion.id, date, 0);
-                                currentQuestion.id,
-                                date,
-                                0
-                            );
             } catch (e) {
               enqueueSnackbar("ответ не был засчитан");
             }
@@ -87,7 +87,9 @@ export const Date = ({ currentQuestion }: DateProps) => {
           }}
           sx={{
             "& .MuiInputBase-root": {
-                            backgroundColor: quizThemes[settings.cfg.theme].isLight
+              backgroundColor: settings.cfg.design
+                ? "rgba(154,154,175, 0.2)"
+                : quizThemes[settings.cfg.theme].isLight
                 ? "white"
                 : theme.palette.background.default,
               borderRadius: "10px",

lib/components/ViewPublicationPage/questions/File.tsx

@@ -189,7 +189,7 @@ export const File = ({ currentQuestion }: FileProps) => {
                                         justifyContent: "flex-start",
                                         alignItems: "center",
                                         padding: "33px 44px 33px 55px",
-                                        backgroundColor: theme.palette.background.default,
+                                        backgroundColor: "#F2F3F7",
                                         border: `1px solid ${isDropzoneHighlighted ? "red" : "#9A9AAF"}`,
                                         borderRadius: "8px",
                                     }}

lib/components/ViewPublicationPage/questions/Number.tsx

@@ -43,8 +43,8 @@ export const Number = ({ currentQuestion }: NumberProps) => {
   const reversed = minBorder > maxBorder;
 
   useEffect(() => {
-        console.log("reversed:", reversed)
+    console.log("reversed:", reversed);
-    }, [reversed])
+  }, [reversed]);
 
   const sendAnswerToBackend = async (value: string, noUpdate = false) => {
     setIsSending(true);
@@ -361,7 +361,11 @@ export const Number = ({ currentQuestion }: NumberProps) => {
 
   return (
     <Box>
-            <Typography variant="h5" color={theme.palette.text.primary} sx={{ wordBreak: "break-word" }}>
+      <Typography
+        variant="h5"
+        color={theme.palette.text.primary}
+        sx={{ wordBreak: "break-word" }}
+      >
         {currentQuestion.title}
       </Typography>
       <Box
@@ -404,9 +408,12 @@ export const Number = ({ currentQuestion }: NumberProps) => {
             sx={{
               maxWidth: "80px",
               borderColor: theme.palette.text.primary,
-                            "& .MuiInputBase-input": {
+              "& .MuiOutlinedInput-root": { background: "transparent" },
-                                textAlign: "center",
+              "& .MuiInputBase-input": { textAlign: "center", zIndex: 1 },
-                                backgroundColor: quizThemes[settings.cfg.theme].isLight
+              "& .MuiOutlinedInput-notchedOutline": {
+                backgroundColor: settings.cfg.design
+                  ? "rgba(154,154,175, 0.2)"
+                  : quizThemes[settings.cfg.theme].isLight
                   ? "white"
                   : theme.palette.background.default,
               },
@@ -430,9 +437,12 @@ export const Number = ({ currentQuestion }: NumberProps) => {
               sx={{
                 maxWidth: "80px",
                 borderColor: theme.palette.text.primary,
-                                "& .MuiInputBase-input": {
+                "& .MuiOutlinedInput-root": { background: "transparent" },
-                                    textAlign: "center",
+                "& .MuiInputBase-input": { textAlign: "center", zIndex: 1 },
-                                    backgroundColor: quizThemes[settings.cfg.theme].isLight
+                "& .MuiOutlinedInput-notchedOutline": {
+                  backgroundColor: settings.cfg.design
+                    ? "rgba(154,154,175, 0.2)"
+                    : quizThemes[settings.cfg.theme].isLight
                     ? "white"
                     : theme.palette.background.default,
                 },
@@ -446,9 +456,12 @@ export const Number = ({ currentQuestion }: NumberProps) => {
               sx={{
                 maxWidth: "80px",
                 borderColor: theme.palette.text.primary,
-                                "& .MuiInputBase-input": {
+                "& .MuiOutlinedInput-root": { background: "transparent" },
-                                    textAlign: "center",
+                "& .MuiInputBase-input": { textAlign: "center", zIndex: 1 },
-                                    backgroundColor: quizThemes[settings.cfg.theme].isLight
+                "& .MuiOutlinedInput-notchedOutline": {
+                  backgroundColor: settings.cfg.design
+                    ? "rgba(154,154,175, 0.2)"
+                    : quizThemes[settings.cfg.theme].isLight
                     ? "white"
                     : theme.palette.background.default,
                 },

lib/components/ViewPublicationPage/questions/Text.tsx

@@ -1,4 +1,10 @@
-import {Box, TextField as MuiTextField, TextFieldProps, Typography, useTheme} from "@mui/material";
+import {
+  Box,
+  TextField as MuiTextField,
+  TextFieldProps,
+  Typography,
+  useTheme,
+} from "@mui/material";
 
 import CustomTextField from "@ui_kit/CustomTextField";
 
@@ -8,7 +14,7 @@ import { sendAnswer } from "@api/quizRelase";
 import { useQuizData } from "@contexts/QuizDataContext";
 import { useRootContainerSize } from "@contexts/RootContainerWidthContext";
 import { enqueueSnackbar } from "notistack";
-import {ChangeEvent, FC, useEffect, useState} from "react";
+import { ChangeEvent, FC, useEffect, useState } from "react";
 import { useDebouncedCallback } from "use-debounce";
 import type { QuizQuestionText } from "../../../model/questionTypes/text";
 
@@ -20,40 +26,41 @@ type TextProps = {
 };
 
 const Orientation = [
-    {horizontal: true},
+  { horizontal: true },
-    {horizontal: false},
+  { horizontal: false },
-    {horizontal: true},
+  { horizontal: true },
-    {horizontal: true},
+  { horizontal: true },
-    {horizontal: false},
+  { horizontal: false },
-    {horizontal: true},
+  { horizontal: true },
-    {horizontal: true},
+  { horizontal: true },
-    {horizontal: true},
+  { horizontal: true },
-    {horizontal: true},
+  { horizontal: true },
-    {horizontal: true},
+  { horizontal: true },
-    {horizontal: true},
+  { horizontal: true },
-    {horizontal: false},
+  { horizontal: false },
-    {horizontal: true},
+  { horizontal: true },
-    {horizontal: false},
+  { horizontal: false },
-    {horizontal: true},
+  { horizontal: true },
-    {horizontal: true},
+  { horizontal: true },
-    {horizontal: true},
+  { horizontal: true },
-    {horizontal: true},
+  { horizontal: true },
-    {horizontal: false},
+  { horizontal: false },
-    {horizontal: false},
+  { horizontal: false },
-    {horizontal: true},
+  { horizontal: true },
-    {horizontal: true},
+  { horizontal: true },
-    {horizontal: true},
+  { horizontal: true },
-    {horizontal: true},
+  { horizontal: true },
-]
+];
 
 export const Text = ({ currentQuestion, stepNumber }: TextProps) => {
   const theme = useTheme();
   const { settings } = useQuizData();
-    const spec = settings.cfg.spec
+  const spec = settings.cfg.spec;
   const { quizId } = useQuizData();
   const { answers } = useQuizViewStore();
   const isMobile = useRootContainerSize() < 650;
-    const { answer } = answers.find(({ questionId }) => questionId === currentQuestion.id) ?? {};
+  const { answer } =
+    answers.find(({ questionId }) => questionId === currentQuestion.id) ?? {};
   const [isSending, setIsSending] = useState<boolean>(false);
 
   const inputHC = useDebouncedCallback(async (text) => {
@@ -78,34 +85,61 @@ export const Text = ({ currentQuestion, stepNumber }: TextProps) => {
   );
   switch (spec) {
     case true:
-            return <TextSpecial currentQuestion={currentQuestion} answer={answer} inputHC={inputHC} stepNumber={stepNumber}/>;
+      return (
+        <TextSpecial
+          currentQuestion={currentQuestion}
+          answer={answer}
+          inputHC={inputHC}
+          stepNumber={stepNumber}
+        />
+      );
     case undefined:
-            return <TextNormal currentQuestion={currentQuestion} answer={answer} inputHC={inputHC} />;
+      return (
+        <TextNormal
+          currentQuestion={currentQuestion}
+          answer={answer}
+          inputHC={inputHC}
+        />
+      );
     default:
-            return <TextNormal currentQuestion={currentQuestion} answer={answer} inputHC={inputHC} />;
+      return (
+        <TextNormal
+          currentQuestion={currentQuestion}
+          answer={answer}
+          inputHC={inputHC}
+        />
+      );
   }
 };
 
 interface Props {
   currentQuestion: QuizQuestionText;
-    answer: any,
+  answer: any;
   inputHC: (a: string) => void;
   stepNumber?: number | null;
 }
 
-const TextNormal = ({currentQuestion, answer, inputHC}: Props) => {
+const TextNormal = ({ currentQuestion, answer, inputHC }: Props) => {
   const isMobile = useRootContainerSize() < 650;
   const theme = useTheme();
-    return(
+  const { settings } = useQuizData();
+
+  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",
           width: "100%",
           marginTop: "20px",
           flexDirection: isMobile ? "column-reverse" : undefined,
-                    alignItems: "center"
+          alignItems: "center",
         }}
       >
         <CustomTextField
@@ -116,13 +150,24 @@ const TextNormal = ({currentQuestion, answer, inputHC}: Props) => {
             inputHC(target.value);
           }}
           sx={{
-                            "&:focus-visible": {
+            "& .MuiOutlinedInput-root": {
-                                borderColor: theme.palette.primary.main
+              backgroundColor: settings.cfg.design
-                            }
+                ? "rgba(154,154,175, 0.2)"
+                : "#FFFFFF",
+            },
+            "&:focus-visible": { borderColor: theme.palette.primary.main },
           }}
         />
-                {currentQuestion.content.back && currentQuestion.content.back !== " " && (
+        {currentQuestion.content.back &&
-                    <Box sx={{ maxWidth: "400px", width: "100%", height: "300px", margin: "15px" }}>
+          currentQuestion.content.back !== " " && (
+            <Box
+              sx={{
+                maxWidth: "400px",
+                width: "100%",
+                height: "300px",
+                margin: "15px",
+              }}
+            >
               <img
                 key={currentQuestion.id}
                 src={currentQuestion.content.back}
@@ -133,15 +178,28 @@ const TextNormal = ({currentQuestion, answer, inputHC}: Props) => {
           )}
       </Box>
     </Box>
-    )
+  );
 };
 
- const TextSpecial = ({currentQuestion, answer, inputHC, stepNumber}: Props) => {
+const TextSpecial = ({
+  currentQuestion,
+  answer,
+  inputHC,
+  stepNumber,
+}: Props) => {
   const theme = useTheme();
   const isMobile = useRootContainerSize() < 650;
-     const isHorizontal = Orientation[Number(stepNumber) -1].horizontal
+  const isHorizontal = Orientation[Number(stepNumber) - 1].horizontal;
-    return(
+  const { settings } = useQuizData();
-        <Box sx={{display: "flex", flexDirection: isMobile? "column" : undefined, alignItems: isMobile ? "center" : undefined,}}>
+
+  return (
+    <Box
+      sx={{
+        display: "flex",
+        flexDirection: isMobile ? "column" : undefined,
+        alignItems: isMobile ? "center" : undefined,
+      }}
+    >
       <Box
         sx={{
           display: "flex",
@@ -149,12 +207,20 @@ const TextNormal = ({currentQuestion, answer, inputHC}: Props) => {
           marginTop: "20px",
           flexDirection: "column",
           alignItems: "center",
-                    gap: "20px"
+          gap: "20px",
         }}
       >
-                <Typography variant="h5" color={theme.palette.text.primary} sx={{ wordBreak: "break-word" }}>{currentQuestion.title}</Typography>
+        <Typography
-                {isHorizontal && currentQuestion.content.back && currentQuestion.content.back !== " " && (
+          variant="h5"
-                    <Box sx={{margin: "30px", width: "50vw", maxHeight: "550px" }}>
+          color={theme.palette.text.primary}
+          sx={{ wordBreak: "break-word" }}
+        >
+          {currentQuestion.title}
+        </Typography>
+        {isHorizontal &&
+          currentQuestion.content.back &&
+          currentQuestion.content.back !== " " && (
+            <Box sx={{ margin: "30px", width: "50vw", maxHeight: "550px" }}>
               <img
                 key={currentQuestion.id}
                 src={currentQuestion.content.back}
@@ -164,30 +230,35 @@ const TextNormal = ({currentQuestion, answer, inputHC}: Props) => {
             </Box>
           )}
         {
-                    (<TextField
+          <TextField
             autoFocus={true}
             multiline
             maxRows={4}
             placeholder={currentQuestion.content.placeholder}
             value={answer || ""}
-                            onChange={async ({ target }:ChangeEvent<HTMLInputElement>) => {
+            onChange={async ({ target }: ChangeEvent<HTMLInputElement>) => {
               updateAnswer(currentQuestion.id, target.value, 0);
               inputHC(target.value);
-                            }
+            }}
-                            }
+            inputProps={{ maxLength: 400 }}
-                            inputProps={{maxLength:400}}
             sx={{
               width: "100%",
+              "& .MuiOutlinedInput-root": {
+                backgroundColor: settings.cfg.design
+                  ? "rgba(154,154,175, 0.2)"
+                  : "#FFFFFF",
+              },
               "&:focus-visible": {
-                                    borderColor: theme.palette.primary.main
+                borderColor: theme.palette.primary.main,
-                                }
+              },
             }}
-                        />)
+          />
         }
-                
       </Box>
-            {!isHorizontal && currentQuestion.content.back && currentQuestion.content.back !== " " && (
+      {!isHorizontal &&
-                <Box sx={{margin: "15px", width: "40vw" }}>
+        currentQuestion.content.back &&
+        currentQuestion.content.back !== " " && (
+          <Box sx={{ margin: "15px", width: "40vw" }}>
             <img
               key={currentQuestion.id}
               src={currentQuestion.content.back}
@@ -197,5 +268,5 @@ const TextNormal = ({currentQuestion, answer, inputHC}: Props) => {
           </Box>
         )}
     </Box>
-    )
+  );
- }
+};

lib/components/ViewPublicationPage/questions/Variant.tsx

@@ -8,7 +8,7 @@ import {
   RadioGroup,
   TextFieldProps,
   Typography,
-    useTheme
+  useTheme,
 } from "@mui/material";
 import { FC, useEffect, useState } from "react";
 
@@ -16,7 +16,7 @@ import {
   deleteAnswer,
   updateAnswer,
   updateOwnVariant,
-    useQuizViewStore
+  useQuizViewStore,
 } from "@stores/quizView";
 
 import { CheckboxIcon } from "@icons/Checkbox";
@@ -44,9 +44,7 @@ export const Variant = ({ currentQuestion }: VariantProps) => {
   const isMobile = useRootContainerSize() < 650;
   const { answers, ownVariants } = useQuizViewStore();
   const { answer } =
-        answers.find(
+    answers.find(({ questionId }) => questionId === currentQuestion.id) ?? {};
-            ({ questionId }) => questionId === currentQuestion.id
-        ) ?? {};
   const ownVariant = ownVariants.find(
     (variant) => variant.id === currentQuestion.id
   );
@@ -61,15 +59,26 @@ export const Variant = ({ currentQuestion }: VariantProps) => {
     }
   }, []);
 
-    if (moment.isMoment(answer)) throw new Error("Answer is Moment in Variant question");
+  if (moment.isMoment(answer))
+    throw new Error("Answer is Moment in Variant question");
 
   return (
     <Box>
-            <Typography variant="h5" color={theme.palette.text.primary} sx={{ wordBreak: "break-word" }}>{currentQuestion.title}</Typography>
+      <Typography
-            <Box sx={{
+        variant="h5"
-                display: "flex", gap: "20px",
+        color={theme.palette.text.primary}
-                flexDirection: isMobile ? "column-reverse" : undefined, alignItems: isMobile ? "center" : undefined
+        sx={{ wordBreak: "break-word" }}
-            }}>
+      >
+        {currentQuestion.title}
+      </Typography>
+      <Box
+        sx={{
+          display: "flex",
+          gap: "20px",
+          flexDirection: isMobile ? "column-reverse" : undefined,
+          alignItems: isMobile ? "center" : undefined,
+        }}
+      >
         <Group
           name={currentQuestion.id.toString()}
           value={currentQuestion.content.variants.findIndex(
@@ -82,7 +91,7 @@ export const Variant = ({ currentQuestion }: VariantProps) => {
             justifyContent: "space-between",
             flexBasis: "100%",
             marginTop: "20px",
-                        width: isMobile ? "100%" : undefined
+            width: isMobile ? "100%" : undefined,
           }}
         >
           <Box
@@ -118,7 +127,8 @@ export const Variant = ({ currentQuestion }: VariantProps) => {
             )}
           </Box>
         </Group>
-                {currentQuestion.content.back && currentQuestion.content.back !== " " && (
+        {currentQuestion.content.back &&
+          currentQuestion.content.back !== " " && (
             <Box sx={{ maxWidth: "400px", width: "100%", height: "300px" }}>
               <img
                 key={currentQuestion.id}
@@ -163,10 +173,11 @@ const VariantItem = ({
         color: theme.palette.text.primary,
         padding: "15px",
         border: `1px solid`,
-                borderColor: answer === variant.id
+        borderColor:
-                    ? theme.palette.primary.main
+          answer === variant.id ? theme.palette.primary.main : "#9A9AAF",
-                    : "#9A9AAF",
+        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,
         display: "flex",
@@ -187,20 +198,26 @@ const VariantItem = ({
           },
           "&::-webkit-scrollbar-thumb": {
             backgroundColor: "#b8babf",
-                    }
+          },
-                }
+        },
       }}
       value={index}
       labelPlacement="start"
       control={
-                currentQuestion.content.multi ?
+        currentQuestion.content.multi ? (
           <Checkbox
             checked={!!answer?.includes(variant.id)}
-                        checkedIcon={<CheckboxIcon checked color={theme.palette.primary.main} />}
+            checkedIcon={
+              <CheckboxIcon checked color={theme.palette.primary.main} />
+            }
             icon={<CheckboxIcon />}
           />
-                    :
+        ) : (
-                    <Radio checkedIcon={<RadioCheck color={theme.palette.primary.main} />} icon={<RadioIcon />} />
+          <Radio
+            checkedIcon={<RadioCheck color={theme.palette.primary.main} />}
+            icon={<RadioIcon />}
+          />
+        )
       }
       label={own ? <TextField label="Другое..." /> : variant.answer}
       onClick={async (event) => {
@@ -246,12 +263,13 @@ const VariantItem = ({
             qid: quizId,
           });
 
-                    updateAnswer(currentQuestion.id, variantId,
+          updateAnswer(
-                        answer === variantId ? 0
+            currentQuestion.id,
-                            :
+            variantId,
-                            currentQuestion.content.variants[index].points || 0
+            answer === variantId
+              ? 0
+              : currentQuestion.content.variants[index].points || 0
           );
-
         } catch (e) {
           console.log(e);
           enqueueSnackbar("ответ не был засчитан");
@@ -259,13 +277,11 @@ const VariantItem = ({
 
         if (answer === variantId) {
           try {
-
             await sendAnswer({
               questionId: currentQuestion.id,
               body: "",
               qid: quizId,
             });
-
           } catch (e) {
             console.log(e);
             enqueueSnackbar("ответ не был засчитан");

lib/components/ViewPublicationPage/questions/Varimg.tsx

@@ -4,7 +4,7 @@ import {
   Radio,
   RadioGroup,
   Typography,
-    useTheme
+  useTheme,
 } from "@mui/material";
 import { deleteAnswer, updateAnswer, useQuizViewStore } from "@stores/quizView";
 
@@ -32,24 +32,29 @@ export const Varimg = ({ currentQuestion }: VarimgProps) => {
   const [isSending, setIsSending] = useState<boolean>(false);
 
   const { answer } =
-        answers.find(
+    answers.find(({ questionId }) => questionId === currentQuestion.id) ?? {};
-            ({ questionId }) => questionId === currentQuestion.id
-        ) ?? {};
   const variant = currentQuestion.content.variants.find(
     ({ id }) => answer === id
   );
 
   return (
     <Box>
-            <Typography variant="h5" color={theme.palette.text.primary} sx={{ wordBreak: "break-word" }}>{currentQuestion.title}</Typography>
+      <Typography
-            <Box sx={{
+        variant="h5"
+        color={theme.palette.text.primary}
+        sx={{ wordBreak: "break-word" }}
+      >
+        {currentQuestion.title}
+      </Typography>
+      <Box
+        sx={{
           display: "flex",
           marginTop: "20px",
           flexDirection: isMobile ? "column-reverse" : undefined,
           gap: isMobile ? "30px" : undefined,
-                alignItems: isMobile ? "center" : undefined
+          alignItems: isMobile ? "center" : undefined,
-
+        }}
-            }}>
+      >
         <RadioGroup
           name={currentQuestion.id}
           value={currentQuestion.content.variants.findIndex(
@@ -61,10 +66,17 @@ export const Varimg = ({ currentQuestion }: VarimgProps) => {
             flexDirection: "row",
             justifyContent: "space-between",
             flexBasis: "100%",
-                        width: isMobile ? "100%" : undefined
+            width: isMobile ? "100%" : undefined,
+          }}
+        >
+          <Box
+            sx={{
+              display: "flex",
+              flexDirection: "column",
+              width: "100%",
+              gap: isMobile ? "20px" : undefined,
             }}
           >
-                    <Box sx={{ display: "flex", flexDirection: "column", width: "100%", gap: isMobile ? "20px" : undefined }}>
             {currentQuestion.content.variants.map((variant, index) => (
               <FormControlLabel
                 key={variant.id}
@@ -74,9 +86,16 @@ export const Varimg = ({ currentQuestion }: VarimgProps) => {
                   borderRadius: "5px",
                   padding: "15px",
                   color: theme.palette.text.primary,
-                                    backgroundColor: quizThemes[settings.cfg.theme].isLight ? "white" : theme.palette.background.default,
+                  backgroundColor: settings.cfg.design
+                    ? "rgba(154,154,175, 0.2)"
+                    : quizThemes[settings.cfg.theme].isLight
+                    ? "white"
+                    : theme.palette.background.default,
                   border: `1px solid`,
-                                    borderColor: answer === variant.id ? theme.palette.primary.main : "#9A9AAF",
+                  borderColor:
+                    answer === variant.id
+                      ? theme.palette.primary.main
+                      : "#9A9AAF",
                   display: "flex",
                   margin: isMobile ? 0 : undefined,
                   "& .MuiFormControlLabel-label": {
@@ -90,7 +109,7 @@ export const Varimg = ({ currentQuestion }: VarimgProps) => {
                     },
                     "&::-webkit-scrollbar-thumb": {
                       backgroundColor: "#b8babf",
-                                        }
+                    },
                   },
                 }}
                 value={index}
@@ -99,7 +118,6 @@ export const Varimg = ({ currentQuestion }: VarimgProps) => {
 
                   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}"/>`,
@@ -111,21 +129,17 @@ export const Varimg = ({ currentQuestion }: VarimgProps) => {
                       currentQuestion.content.variants[index].id,
                       currentQuestion.content.variants[index].points || 0
                     );
-
                   } catch (e) {
                     enqueueSnackbar("ответ не был засчитан");
                   }
 
-
                   if (answer === currentQuestion.content.variants[index].id) {
                     try {
-
                       await sendAnswer({
                         questionId: currentQuestion.id,
                         body: "",
                         qid: quizId,
                       });
-
                     } catch (e) {
                       enqueueSnackbar("ответ не был засчитан");
                     }
@@ -135,7 +149,12 @@ export const Varimg = ({ currentQuestion }: VarimgProps) => {
                   setIsSending(false);
                 }}
                 control={
-                                    <Radio checkedIcon={<RadioCheck color={theme.palette.primary.main} />} icon={<RadioIcon />} />
+                  <Radio
+                    checkedIcon={
+                      <RadioCheck color={theme.palette.primary.main} />
+                    }
+                    icon={<RadioIcon />}
+                  />
                 }
                 label={variant.answer}
               />
@@ -156,7 +175,7 @@ export const Varimg = ({ currentQuestion }: VarimgProps) => {
             justifyContent: "center",
             backgroundColor: "#9A9AAF12",
             color: "#9A9AAF",
-                        textAlign: "center"
+            textAlign: "center",
           }}
         >
           {answer ? (
@@ -169,25 +188,25 @@ export const Varimg = ({ currentQuestion }: VarimgProps) => {
             ) : (
               <BlankImage />
             )
-                    ) : currentQuestion.content.back !== " "
+          ) : currentQuestion.content.back !== " " &&
-                        && currentQuestion.content.back !== null
+            currentQuestion.content.back !== null &&
-                        && currentQuestion.content.back.length > 0
+            currentQuestion.content.back.length > 0 ? (
-                        ? (
             <img
               src={currentQuestion.content.back}
               style={{ width: "100%", height: "100%", objectFit: "cover" }}
               alt=""
             />
-                        ) : (currentQuestion.content.replText !== " " && currentQuestion.content.replText.length > 0) ? currentQuestion.content.replText : variant?.extendedText || isMobile ? (
+          ) : currentQuestion.content.replText !== " " &&
+            currentQuestion.content.replText.length > 0 ? (
+            currentQuestion.content.replText
+          ) : variant?.extendedText || isMobile ? (
             "Выберите вариант ответа ниже"
           ) : (
             "Выберите вариант ответа слева"
           )}
-
         </Box>
         {/* )} */}
       </Box>
     </Box>
   );
-
 };

lib/components/ViewPublicationPage/tools/Select.tsx

@@ -121,8 +121,7 @@ export const Select = ({
             "& .MuiTypography-root": {
               overflow: "hidden",
               textOverflow: "ellipsis",
-            }
+            },
-
           },
         }}
         IconComponent={(props) => <ArrowDown {...props} />}
@@ -139,7 +138,7 @@ export const Select = ({
               borderRadius: "5px",
               color: colorPlaceholder,
               whiteSpace: "normal",
-              wordBreak: "break-word"
+              wordBreak: "break-word",
             }}
           >
             {item}

lib/model/settingsData.ts

@@ -21,7 +21,17 @@ export type QuizTheme =
   | "GoldDarkTheme"
   | "PurpleTheme"
   | "BlueTheme"
-  | "BlueDarkTheme";
+  | "BlueDarkTheme"
+  | "Design1"
+  | "Design2"
+  | "Design3"
+  | "Design4"
+  | "Design5"
+  | "Design6"
+  | "Design7"
+  | "Design8"
+  | "Design9"
+  | "Design10";
 
 export type FCField = {
   text: string;
@@ -47,18 +57,6 @@ export type QuizSettings = {
   recentlyCompleted: boolean;
 };
 
-export type Design =
-  | ""
-  | "design1"
-  | "design2"
-  | "design3"
-  | "design4"
-  | "design5"
-  | "design6"
-  | "design7"
-  | "design8"
-  | "design9"
-  | "design10";
 
 export interface QuizConfig {
   spec: undefined | true;
@@ -69,7 +67,7 @@ export interface QuizConfig {
   results: QuizResultsType;
   haveRoot: string | null;
   theme: QuizTheme;
-  design: Design;
+  design: boolean;
   resultInfo: {
     when: "email" | "";
     share: boolean;

lib/ui_kit/Stepper.tsx

@@ -0,0 +1,37 @@
+import { useTheme } from "@mui/material";
+import MobileStepper from "@mui/material/MobileStepper";
+
+interface Props {
+  activeStep: number;
+  steps: number;
+}
+
+export default function ProgressMobileStepper({ activeStep, steps }: Props) {
+  const theme = useTheme();
+
+  return (
+    <MobileStepper
+      variant="progress"
+      steps={steps + 1}
+      position="static"
+      activeStep={activeStep}
+      sx={{
+        width: "100%",
+        padding: "10px 0 0",
+        background: "transparent",
+        "& .MuiLinearProgress-root": {
+          height: "4px",
+          background: theme.palette.primary.light,
+          width: "100%",
+          opacity: 0.5,
+        },
+        "& .MuiLinearProgress-bar": {
+          background: theme.palette.primary.main,
+          opacity: 1,
+        },
+      }}
+      nextButton={<></>}
+      backButton={<></>}
+    />
+  );
+}

lib/utils/themes/Publication/themePublication.ts

@@ -1,7 +1,8 @@
-import { QuizTheme } from "@model/settingsData";
+import { createTheme } from "@mui/material";
-import { Theme, createTheme } from "@mui/material";
 import themePublic from "./genericPublication";
 
+import type { Theme } from "@mui/material";
+import type { QuizTheme } from "@model/settingsData";
 
 const StandardTheme = createTheme({
   ...themePublic,
@@ -10,7 +11,7 @@ const StandardTheme = createTheme({
       main: "#7E2AEA",
     },
     secondary: {
-            main: "#252734"
+      main: "#252734",
     },
     text: {
       primary: "#333647",
@@ -20,8 +21,8 @@ const StandardTheme = createTheme({
     background: {
       default: "#FFFFFF",
     },
-    }
+  },
-})
+});
 
 const StandardDarkTheme = createTheme({
   ...themePublic,
@@ -30,7 +31,7 @@ const StandardDarkTheme = createTheme({
       main: "#7E2AEA",
     },
     secondary: {
-            main: "#252734"
+      main: "#252734",
     },
     text: {
       primary: "#FFFFFF",
@@ -40,8 +41,8 @@ const StandardDarkTheme = createTheme({
     background: {
       default: "#333647",
     },
-    }
+  },
-})
+});
 
 const PinkTheme = createTheme({
   ...themePublic,
@@ -50,7 +51,7 @@ const PinkTheme = createTheme({
       main: "#D34085",
     },
     secondary: {
-            main: "#252734"
+      main: "#252734",
     },
     text: {
       primary: "#333647",
@@ -60,8 +61,8 @@ const PinkTheme = createTheme({
     background: {
       default: "#FFF9FC",
     },
-    }
+  },
-})
+});
 
 const PinkDarkTheme = createTheme({
   ...themePublic,
@@ -70,7 +71,7 @@ const PinkDarkTheme = createTheme({
       main: "#D34085",
     },
     secondary: {
-            main: "#252734"
+      main: "#252734",
     },
     text: {
       primary: "#FFFFFF",
@@ -80,8 +81,8 @@ const PinkDarkTheme = createTheme({
     background: {
       default: "#333647",
     },
-    }
+  },
-})
+});
 
 const BlackWhiteTheme = createTheme({
   ...themePublic,
@@ -90,7 +91,7 @@ const BlackWhiteTheme = createTheme({
       main: "#4E4D51",
     },
     secondary: {
-            main: "#252734"
+      main: "#252734",
     },
     text: {
       primary: "#333647",
@@ -100,8 +101,8 @@ const BlackWhiteTheme = createTheme({
     background: {
       default: "#FFFFFF",
     },
-    }
+  },
-})
+});
 
 const OliveTheme = createTheme({
   ...themePublic,
@@ -110,7 +111,7 @@ const OliveTheme = createTheme({
       main: "#758E4F",
     },
     secondary: {
-            main: "#252734"
+      main: "#252734",
     },
     text: {
       primary: "#333647",
@@ -120,8 +121,8 @@ const OliveTheme = createTheme({
     background: {
       default: "#F9FBF1",
     },
-    }
+  },
-})
+});
 
 const PurpleTheme = createTheme({
   ...themePublic,
@@ -130,7 +131,7 @@ const PurpleTheme = createTheme({
       main: "#7E2AEA",
     },
     secondary: {
-            main: "#252734"
+      main: "#252734",
     },
     text: {
       primary: "#333647",
@@ -140,8 +141,8 @@ const PurpleTheme = createTheme({
     background: {
       default: "#FBF8FF",
     },
-    }
+  },
-})
+});
 
 const YellowTheme = createTheme({
   ...themePublic,
@@ -150,7 +151,7 @@ const YellowTheme = createTheme({
       main: "#F2B133",
     },
     secondary: {
-            main: "#252734"
+      main: "#252734",
     },
     text: {
       primary: "#333647",
@@ -160,8 +161,8 @@ const YellowTheme = createTheme({
     background: {
       default: "#FFFCF6",
     },
-    }
+  },
-})
+});
 
 const GoldDarkTheme = createTheme({
   ...themePublic,
@@ -180,8 +181,8 @@ const GoldDarkTheme = createTheme({
     background: {
       default: "#333647",
     },
-    }
+  },
-})
+});
 
 const BlueTheme = createTheme({
   ...themePublic,
@@ -190,7 +191,7 @@ const BlueTheme = createTheme({
       main: "#4964ED",
     },
     secondary: {
-            main: "#252734"
+      main: "#252734",
     },
     text: {
       primary: "#333647",
@@ -200,8 +201,8 @@ const BlueTheme = createTheme({
     background: {
       default: "#F5F7FF",
     },
-    }
+  },
-})
+});
 
 const BlueDarkTheme = createTheme({
   ...themePublic,
@@ -210,7 +211,7 @@ const BlueDarkTheme = createTheme({
       main: "#07A0C3",
     },
     secondary: {
-            main: "#252734"
+      main: "#252734",
     },
     text: {
       primary: "#FFFFFF",
@@ -220,10 +221,211 @@ const BlueDarkTheme = createTheme({
     background: {
       default: "#333647",
     },
-    }
+  },
-})
+});
 
-export const quizThemes: Record<QuizTheme, { theme: Theme; isLight: boolean; }> = {
+const Design1 = createTheme({
+  ...themePublic,
+  palette: {
+    primary: {
+      main: "#F2B133",
+    },
+    secondary: {
+      main: "#252734",
+    },
+    text: {
+      primary: "#333647",
+      secondary: "#F2B133",
+    },
+
+    background: {
+      default: "#FFFCF6",
+    },
+  },
+});
+
+const Design2 = createTheme({
+  ...themePublic,
+  palette: {
+    primary: {
+      main: "#758E4F",
+    },
+    secondary: {
+      main: "#252734",
+    },
+    text: {
+      primary: "#333647",
+      secondary: "#758E4F",
+    },
+
+    background: {
+      default: "#F9FBF1",
+    },
+  },
+});
+
+const Design3 = createTheme({
+  ...themePublic,
+  palette: {
+    primary: {
+      main: "#07A0C3",
+    },
+    secondary: {
+      main: "#252734",
+    },
+    text: {
+      primary: "#FFFFFF",
+      secondary: "#07A0C3",
+    },
+
+    background: {
+      default: "#333647",
+    },
+  },
+});
+
+const Design4 = createTheme({
+  ...themePublic,
+  palette: {
+    primary: {
+      main: "#F2B133",
+    },
+    secondary: {
+      main: "#252734",
+    },
+    text: {
+      primary: "#333647",
+      secondary: "#F2B133",
+    },
+
+    background: {
+      default: "#FFFCF6",
+    },
+  },
+});
+
+const Design5 = createTheme({
+  ...themePublic,
+  palette: {
+    primary: {
+      main: "#07A0C3",
+    },
+    secondary: {
+      main: "#252734",
+    },
+    text: {
+      primary: "#FFFFFF",
+      secondary: "#07A0C3",
+    },
+
+    background: {
+      default: "#333647",
+    },
+  },
+});
+
+const Design6 = createTheme({
+  ...themePublic,
+  palette: {
+    primary: {
+      main: "#D34085",
+    },
+    secondary: {
+      main: "#252734",
+    },
+    text: {
+      primary: "#FFFFFF",
+      secondary: "#D34085",
+    },
+
+    background: {
+      default: "#333647",
+    },
+  },
+});
+
+const Design8 = createTheme({
+  ...themePublic,
+  palette: {
+    primary: {
+      main: "#D34085",
+    },
+    secondary: {
+      main: "#252734",
+    },
+    text: {
+      primary: "#FFFFFF",
+      secondary: "#D34085",
+    },
+
+    background: {
+      default: "#333647",
+    },
+  },
+});
+
+const Design7 = createTheme({
+  ...themePublic,
+  palette: {
+    primary: {
+      main: "#F2B133",
+    },
+    secondary: {
+      main: "#252734",
+    },
+    text: {
+      primary: "#333647",
+      secondary: "#F2B133",
+    },
+
+    background: {
+      default: "#FFFCF6",
+    },
+  },
+});
+
+const Design9 = createTheme({
+  ...themePublic,
+  palette: {
+    primary: {
+      main: "#758E4F",
+    },
+    secondary: {
+      main: "#252734",
+    },
+    text: {
+      primary: "#333647",
+      secondary: "#758E4F",
+    },
+
+    background: {
+      default: "#F9FBF1",
+    },
+  },
+});
+
+const Design10 = createTheme({
+  ...themePublic,
+  palette: {
+    primary: {
+      main: "#07A0C3",
+    },
+    secondary: {
+      main: "#252734",
+    },
+    text: {
+      primary: "#FFFFFF",
+      secondary: "#07A0C3",
+    },
+
+    background: {
+      default: "#333647",
+    },
+  },
+});
+
+export const quizThemes: Record<QuizTheme, { theme: Theme; isLight: boolean }> =
+  {
     StandardTheme: { theme: StandardTheme, isLight: true },
     StandardDarkTheme: { theme: StandardDarkTheme, isLight: false },
     PinkTheme: { theme: PinkTheme, isLight: true },
@@ -235,4 +437,14 @@ export const quizThemes: Record<QuizTheme, { theme: Theme; isLight: boolean; }>
     PurpleTheme: { theme: PurpleTheme, isLight: true },
     BlueTheme: { theme: BlueTheme, isLight: true },
     BlueDarkTheme: { theme: BlueDarkTheme, isLight: false },
-};
+    Design1: { theme: Design1, isLight: false },
+    Design2: { theme: Design2, isLight: false },
+    Design3: { theme: Design3, isLight: true },
+    Design4: { theme: Design4, isLight: false },
+    Design5: { theme: Design5, isLight: false },
+    Design6: { theme: Design6, isLight: false },
+    Design7: { theme: Design7, isLight: false },
+    Design8: { theme: Design8, isLight: false },
+    Design9: { theme: Design9, isLight: false },
+    Design10: { theme: Design10, isLight: false },
+  };