fix: design logic

src/model/quizSettings.ts

@@ -46,7 +46,7 @@ export type QuizType = "quiz" | "form" | null;
 
 export type QuizResultsType = true | null;
 
-export type Theme =
+export type QuizTheme =
   | "StandardTheme"
   | "StandardDarkTheme"
   | "PinkTheme"
@@ -57,20 +57,17 @@ export type Theme =
   | "GoldDarkTheme"
   | "PurpleTheme"
   | "BlueTheme"
-  | "BlueDarkTheme";
+  | "BlueDarkTheme"
-
+  | "Design1"
-export type Design =
+  | "Design2"
-  | ""
+  | "Design3"
-  | "design1"
+  | "Design4"
-  | "design2"
+  | "Design5"
-  | "design3"
+  | "Design6"
-  | "design4"
+  | "Design7"
-  | "design5"
+  | "Design8"
-  | "design6"
+  | "Design9"
-  | "design7"
+  | "Design10";
-  | "design8"
-  | "design9"
-  | "design10";
 
 export interface QuizConfig {
   type: QuizType;
@@ -78,8 +75,8 @@ export interface QuizConfig {
   startpageType: QuizStartpageType;
   results: QuizResultsType;
   haveRoot: string | null;
-  theme: Theme;
+  theme: QuizTheme;
-  design: Design;
+  design: boolean;
   resultInfo: {
     when: "email" | "";
     share: true | false;
@@ -149,6 +146,7 @@ export const defaultQuizConfig: QuizConfig = {
   results: null,
   haveRoot: null,
   theme: "StandardTheme",
+  design: false,
   resultInfo: {
     when: "",
     share: false,

src/pages/DesignPage/DesignFilling.tsx

@@ -21,11 +21,9 @@ import Desgin8 from "@icons/designs/design8.jpg";
 import Desgin9 from "@icons/designs/design9.jpg";
 import Desgin10 from "@icons/designs/design10.jpg";
 
-import type { Theme } from "@model/quizSettings";
-import type { Design } from "@model/quizSettings";
 import type { DesignItem } from "./DesignGroup";
 
-const LIGHT_THEME_BUTTONS: DesignItem<Theme>[] = [
+const LIGHT_THEME_BUTTONS: DesignItem[] = [
   {
     label: "Стандартный",
     name: "StandardTheme",
@@ -51,7 +49,7 @@ const LIGHT_THEME_BUTTONS: DesignItem<Theme>[] = [
   { label: "Розовый", name: "PinkTheme", colors: ["#D34085", "#333647", ""] },
 ];
 
-const DARK_THEME_BUTTONS: DesignItem<Theme>[] = [
+const DARK_THEME_BUTTONS: DesignItem[] = [
   {
     label: "Стандартный",
     name: "StandardDarkTheme",
@@ -74,19 +72,19 @@ const DARK_THEME_BUTTONS: DesignItem<Theme>[] = [
   },
 ];
 
-const DESIGNG_LIST_FIRST: DesignItem<Design>[] = [
+const DESIGNG_LIST_FIRST: DesignItem[] = [
-  { label: "Дизайн 1", name: "design1", picture: Desgin1 },
+  { label: "Дизайн 1", name: "Design1", picture: Desgin1 },
-  { label: "Дизайн 2", name: "design2", picture: Desgin2 },
+  { label: "Дизайн 2", name: "Design2", picture: Desgin2 },
-  { label: "Дизайн 3", name: "design3", picture: Desgin3 },
+  { label: "Дизайн 3", name: "Design3", picture: Desgin3 },
-  { label: "Дизайн 4", name: "design4", picture: Desgin4 },
+  { label: "Дизайн 4", name: "Design4", picture: Desgin4 },
-  { label: "Дизайн 5", name: "design5", picture: Desgin5 },
+  { label: "Дизайн 5", name: "Design5", picture: Desgin5 },
 ];
-const DESIGNG_LIST_SECOND: DesignItem<Design>[] = [
+const DESIGNG_LIST_SECOND: DesignItem[] = [
-  { label: "Дизайн 6", name: "design6", picture: Desgin6 },
+  { label: "Дизайн 6", name: "Design6", picture: Desgin6 },
-  { label: "Дизайн 7", name: "design7", picture: Desgin7 },
+  { label: "Дизайн 7", name: "Design7", picture: Desgin7 },
-  { label: "Дизайн 8", name: "design8", picture: Desgin8 },
+  { label: "Дизайн 8", name: "Design8", picture: Desgin8 },
-  { label: "Дизайн 9", name: "design9", picture: Desgin9 },
+  { label: "Дизайн 9", name: "Design9", picture: Desgin9 },
-  { label: "Дизайн 10", name: "design10", picture: Desgin10 },
+  { label: "Дизайн 10", name: "Design10", picture: Desgin10 },
 ];
 
 interface DesignFillingProps {
@@ -129,24 +127,24 @@ export const DesignFilling = ({
         }}
       >
         <Box sx={{ display: "flex", gap: "20px", flexWrap: "wrap" }}>
-          <DesignGroup<Theme>
+          <DesignGroup
             title="Со светлым фоном"
             value={quiz?.config.design ? "" : quiz?.config.theme || ""}
             list={LIGHT_THEME_BUTTONS}
             onChange={(name) =>
               updateQuiz(quiz?.id, (quiz) => {
-                quiz.config.design = "";
+                quiz.config.design = false;
                 quiz.config.theme = name;
               })
             }
           />
-          <DesignGroup<Theme>
+          <DesignGroup
             title="С тёмным фоном"
             value={quiz?.config.design ? "" : quiz?.config.theme || ""}
             list={DARK_THEME_BUTTONS}
             onChange={(name) =>
               updateQuiz(quiz?.id, (quiz) => {
-                quiz.config.design = "";
+                quiz.config.design = false;
                 quiz.config.theme = name;
               })
             }
@@ -156,24 +154,24 @@ export const DesignFilling = ({
           <Divider sx={{ margin: "20px 0", background: "#7E2AEA33" }} />
         </Box>
         <Box sx={{ display: "flex", gap: "20px", flexWrap: "wrap" }}>
-          <DesignGroup<Design>
+          <DesignGroup
             title="С картинкой"
-            value={quiz?.config.design || ""}
+            value={quiz?.config.theme || ""}
             list={DESIGNG_LIST_FIRST}
             onChange={(name) =>
               updateQuiz(quiz?.id, (quiz) => {
-                quiz.config.theme = "StandardTheme";
+                quiz.config.design = true;
-                quiz.config.design = name;
+                quiz.config.theme = name;
               })
             }
           />
-          <DesignGroup<Design>
+          <DesignGroup
-            value={quiz?.config.design || ""}
+            value={quiz?.config.theme || ""}
             list={DESIGNG_LIST_SECOND}
             onChange={(name) =>
               updateQuiz(quiz?.id, (quiz) => {
-                quiz.config.theme = "StandardTheme";
+                quiz.config.design = true;
-                quiz.config.design = name;
+                quiz.config.theme = name;
               })
             }
           />

src/pages/DesignPage/DesignGroup.tsx

@@ -8,26 +8,28 @@ import {
 
 import ColorRingIcon from "./ColorRingIcon";
 
-export type DesignItem<T = string> = {
+import type { QuizTheme } from "@model/quizSettings";
-  name: T;
+
+export type DesignItem = {
+  name: QuizTheme;
   label: string;
   colors?: string[];
   picture?: string;
 };
 
-type DesignGroupProps<T> = {
+type DesignGroupProps = {
   title?: string;
-  list: DesignItem<T>[];
+  list: DesignItem[];
   value: string;
-  onChange: (name: T) => void;
+  onChange: (name: QuizTheme) => void;
 };
 
-export const DesignGroup = <T extends string>({
+export const DesignGroup = ({
   title,
   list,
   value,
   onChange,
-}: DesignGroupProps<T>) => {
+}: DesignGroupProps) => {
   const theme = useTheme();
   const isMobile = useMediaQuery(theme.breakpoints.down(830));
 

src/ui_kit/StartPagePreview/QuizPreviewLayout.tsx

@@ -13,7 +13,6 @@ import YoutubeEmbedIframe from "./YoutubeEmbedIframe";
 import { QuizStartpageAlignType, QuizStartpageType } from "@model/quizSettings";
 import { notReachable } from "../../utils/notReachable";
 import { useUADevice } from "../../utils/hooks/useUADevice";
-import { useEffect, useRef, useState } from "react";
 import { NameplateLogo } from "@icons/NameplateLogo";
 import { modes } from "@utils/themes/Publication/themePublication";
 

src/utils/themes/Publication/themePublication.ts

@@ -2,6 +2,8 @@ import { createTheme } from "@mui/material";
 import themePublic from "./genericPublication";
 import theme from "../generic";
 
+import type { QuizTheme } from "@model/quizSettings";
+
 const StandardTheme = createTheme({
   ...themePublic,
   palette: {
@@ -222,6 +224,206 @@ const BlueDarkTheme = createTheme({
   },
 });
 
+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 modes = {
   StandardTheme: true,
   StandardDarkTheme: false,
@@ -234,9 +436,19 @@ export const modes = {
   PurpleTheme: true,
   BlueTheme: true,
   BlueDarkTheme: false,
+  Design1: false,
+  Design2: false,
+  Design3: true,
+  Design4: false,
+  Design5: false,
+  Design6: false,
+  Design7: false,
+  Design8: false,
+  Design9: false,
+  Design10: false,
 };
 
-export const themesPublication = {
+export const themesPublication: Record<QuizTheme, any> = {
   StandardTheme,
   StandardDarkTheme,
   PinkTheme,
@@ -248,4 +460,14 @@ export const themesPublication = {
   PurpleTheme,
   BlueTheme,
   BlueDarkTheme,
+  Design1,
+  Design2,
+  Design3,
+  Design4,
+  Design5,
+  Design6,
+  Design7,
+  Design8,
+  Design9,
+  Design10,
 };