feat: design logic

2024-03-04 19:40:53 +03:00 · 2024-03-04 19:40:53 +03:00 · 69ea201ddc
commit 69ea201ddc
parent 284472c5bb
14 changed files with 1719 additions and 1328 deletions
--- a/lib/components/ViewPublicationPage/Footer.tsx
+++ b/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();
-  console.log(questions);
+  const { questions, settings } = useQuizData();
+  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",
-          padding: "0 10px",
+          maxWidth: "1410px",
+          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
-            sx={{
-              display: "flex",
-              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}
+          <Box sx={{ flexGrow: 1 }}>
+            <Typography sx={{ color: theme.palette.text.primary }}>
+              Вопрос {stepNumber} из {questionsAmount}
            </Typography>
+            <Stepper activeStep={stepNumber} steps={questionsAmount} />
          </Box>
        )}

--- a/lib/components/ViewPublicationPage/Question.tsx
+++ b/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> = {
-  "": "",
-  design1: Desgin1,
-  design2: Desgin2,
-  design3: Desgin3,
-  design4: Desgin4,
-  design5: Desgin5,
-  design6: Desgin6,
-  design7: Desgin7,
-  design8: Desgin8,
-  design9: Desgin9,
-  design10: Desgin10,
+export const DESIGN_LIST: Record<QuizTheme, string> = {
+  Design1: Desgin1,
+  Design2: Desgin2,
+  Design3: Desgin3,
+  Design4: Desgin4,
+  Design5: Desgin5,
+  Design6: Desgin6,
+  Design7: Desgin7,
+  Design8: Desgin8,
+  Design9: Desgin9,
+  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}
--- a/lib/components/ViewPublicationPage/StartPageViewPublication/index.tsx
+++ b/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>
                )}
--- a/lib/components/ViewPublicationPage/ViewPublicationPage.tsx
+++ b/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 ? "←" : "← Назад"}
--- a/lib/components/ViewPublicationPage/questions/Date.tsx
+++ b/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(
-                                currentQuestion.id,
-                                date,
-                                0
-                            );
+              updateAnswer(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",
--- a/lib/components/ViewPublicationPage/questions/File.tsx
+++ b/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",
                                    }}
--- a/lib/components/ViewPublicationPage/questions/Number.tsx
+++ b/lib/components/ViewPublicationPage/questions/Number.tsx
@ -43,8 +43,8 @@ export const Number = ({ currentQuestion }: NumberProps) => {
  const reversed = minBorder > maxBorder;

  useEffect(() => {
-        console.log("reversed:", reversed)
-    }, [reversed])
+    console.log("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": {
-                                textAlign: "center",
-                                backgroundColor: quizThemes[settings.cfg.theme].isLight
+              "& .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
                  ? "white"
                  : theme.palette.background.default,
              },
@ -430,9 +437,12 @@ export const Number = ({ currentQuestion }: NumberProps) => {
              sx={{
                maxWidth: "80px",
                borderColor: theme.palette.text.primary,
-                                "& .MuiInputBase-input": {
-                                    textAlign: "center",
-                                    backgroundColor: quizThemes[settings.cfg.theme].isLight
+                "& .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
                    ? "white"
                    : theme.palette.background.default,
                },
@ -446,9 +456,12 @@ export const Number = ({ currentQuestion }: NumberProps) => {
              sx={{
                maxWidth: "80px",
                borderColor: theme.palette.text.primary,
-                                "& .MuiInputBase-input": {
-                                    textAlign: "center",
-                                    backgroundColor: quizThemes[settings.cfg.theme].isLight
+                "& .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
                    ? "white"
                    : theme.palette.background.default,
                },
--- a/lib/components/ViewPublicationPage/questions/Text.tsx
+++ b/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";

@ -44,16 +50,17 @@ const Orientation = [
  { 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,17 +85,36 @@ 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;
 }
@ -96,16 +122,24 @@ interface Props {
 const TextNormal = ({ currentQuestion, answer, inputHC }: Props) => {
  const isMobile = useRootContainerSize() < 650;
  const theme = useTheme();
+  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": {
-                                borderColor: theme.palette.primary.main
-                            }
+            "& .MuiOutlinedInput-root": {
+              backgroundColor: settings.cfg.design
+                ? "rgba(154,154,175, 0.2)"
+                : "#FFFFFF",
+            },
+            "&:focus-visible": { borderColor: theme.palette.primary.main },
          }}
        />
-                {currentQuestion.content.back && currentQuestion.content.back !== " " && (
-                    <Box sx={{ maxWidth: "400px", width: "100%", height: "300px", margin: "15px" }}>
+        {currentQuestion.content.back &&
+          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;
+  const { settings } = useQuizData();
+
  return (
-        <Box sx={{display: "flex", flexDirection: isMobile? "column" : undefined, alignItems: isMobile ? "center" : undefined,}}>
+    <Box
+      sx={{
+        display: "flex",
+        flexDirection: isMobile ? "column" : undefined,
+        alignItems: isMobile ? "center" : undefined,
+      }}
+    >
      <Box
        sx={{
          display: "flex",
@ -149,11 +207,19 @@ 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>
-                {isHorizontal && currentQuestion.content.back && currentQuestion.content.back !== " " && (
+        <Typography
+          variant="h5"
+          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}
@ -164,7 +230,7 @@ const TextNormal = ({currentQuestion, answer, inputHC}: Props) => {
            </Box>
          )}
        {
-                    (<TextField
+          <TextField
            autoFocus={true}
            multiline
            maxRows={4}
@ -173,20 +239,25 @@ const TextNormal = ({currentQuestion, answer, inputHC}: Props) => {
            onChange={async ({ target }: ChangeEvent<HTMLInputElement>) => {
              updateAnswer(currentQuestion.id, target.value, 0);
              inputHC(target.value);
-                            }
-                            }
+            }}
            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 &&
+        currentQuestion.content.back &&
+        currentQuestion.content.back !== " " && (
          <Box sx={{ margin: "15px", width: "40vw" }}>
            <img
              key={currentQuestion.id}
@ -197,5 +268,5 @@ const TextNormal = ({currentQuestion, answer, inputHC}: Props) => {
          </Box>
        )}
    </Box>
-    )
- }
+  );
+};
--- a/lib/components/ViewPublicationPage/questions/Variant.tsx
+++ b/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(
-            ({ questionId }) => questionId === currentQuestion.id
-        ) ?? {};
+    answers.find(({ 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>
-            <Box sx={{
-                display: "flex", gap: "20px",
-                flexDirection: isMobile ? "column-reverse" : undefined, alignItems: isMobile ? "center" : undefined
-            }}>
+      <Typography
+        variant="h5"
+        color={theme.palette.text.primary}
+        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
-                    ? theme.palette.primary.main
-                    : "#9A9AAF",
-                backgroundColor: quizThemes[settings.cfg.theme].isLight
+        borderColor:
+          answer === variant.id ? theme.palette.primary.main : "#9A9AAF",
+        backgroundColor: settings.cfg.design
+          ? "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,
-                        answer === variantId ? 0
-                            :
-                            currentQuestion.content.variants[index].points || 0
+          updateAnswer(
+            currentQuestion.id,
+            variantId,
+            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("ответ не был засчитан");
--- a/lib/components/ViewPublicationPage/questions/Varimg.tsx
+++ b/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(
-            ({ questionId }) => questionId === currentQuestion.id
-        ) ?? {};
+    answers.find(({ 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>
-            <Box sx={{
+      <Typography
+        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 !== null
-                        && currentQuestion.content.back.length > 0
-                        ? (
+          ) : currentQuestion.content.back !== " " &&
+            currentQuestion.content.back !== null &&
+            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>
  );
-
 };
--- a/lib/components/ViewPublicationPage/tools/Select.tsx
+++ b/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}
--- a/lib/model/settingsData.ts
+++ b/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;
--- a/lib/ui_kit/Stepper.tsx
+++ b/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={<></>}
+    />
+  );
+}
--- a/lib/utils/themes/Publication/themePublication.ts
+++ b/lib/utils/themes/Publication/themePublication.ts
@ -1,7 +1,8 @@
-import { QuizTheme } from "@model/settingsData";
-import { Theme, createTheme } from "@mui/material";
+import { 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 },
  };