feat: Backgrounds

lib/components/ViewPublicationPage/Question.tsx

@@ -20,7 +20,20 @@ import { NameplateLogoFQ } from "@icons/NameplateLogoFQ";
 import { NameplateLogoFQDark } from "@icons/NameplateLogoFQDark";
 import { notReachable } from "@utils/notReachable";
 import { quizThemes } from "@utils/themes/Publication/themePublication";
-import { ReactNode } from "react";
+
+import Desgin1 from "@icons/designs/design1.jpg";
+import Desgin2 from "@icons/designs/design2.jpg";
+import Desgin3 from "@icons/designs/design3.jpg";
+import Desgin4 from "@icons/designs/design4.jpg";
+import Desgin5 from "@icons/designs/design5.jpg";
+import Desgin6 from "@icons/designs/design6.jpg";
+import Desgin7 from "@icons/designs/design7.jpg";
+import Desgin8 from "@icons/designs/design8.jpg";
+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";
 
 type Props = {
   currentQuestion: RealTypedQuizQuestion;
@@ -29,6 +42,20 @@ 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 Question = ({
   currentQuestion,
   currentQuestionStepNumber,
@@ -37,12 +64,21 @@ export const Question = ({
 }: Props) => {
   const theme = useTheme();
   const { settings } = useQuizData();
-  console.log(currentQuestionStepNumber);
+  const design = DESIGN_LIST[settings.cfg.design];
+
   return (
     <Box
       sx={{
-        backgroundColor: theme.palette.background.default,
+        backgroundPosition: "center",
-        height: "100%",
+        backgroundSize: "cover",
+        backgroundImage: `url(${design})`,
+      }}
+    >
+      <Box
+        sx={{
+          background: design
+            ? "linear-gradient(90deg,#272626, transparent)"
+            : theme.palette.background.default,
         }}
       >
         <Box
@@ -84,6 +120,7 @@ export const Question = ({
           nextButton={nextButton}
         />
       </Box>
+    </Box>
   );
 };
 

lib/components/ViewPublicationPage/StartPageViewPublication/index.tsx

@@ -18,6 +18,8 @@ import { setCurrentQuizStep } from "@stores/quizView";
 import { useUADevice } from "@utils/hooks/useUADevice";
 import { quizThemes } from "@utils/themes/Publication/themePublication";
 
+import { DESIGN_LIST } from "../Question";
+
 import { NameplateLogo } from "@icons/NameplateLogo";
 import PenaLogo from "@icons/PenaLogo.png";
 
@@ -36,7 +38,10 @@ export const StartPageViewPublication = () => {
     settings.cfg.startpage.background.type === "image" ? (
       settings.cfg.startpage.background.desktop ? (
         <img
-          src={settings.cfg.startpage.background.desktop}
+          src={
+            DESIGN_LIST[settings.cfg.design] ||
+            settings.cfg.startpage.background.desktop
+          }
           alt=""
           style={{
             width:

lib/model/settingsData.ts

@@ -47,8 +47,21 @@ export type QuizSettings = {
   recentlyCompleted: boolean;
 };
 
+export type Design =
+  | ""
+  | "design1"
+  | "design2"
+  | "design3"
+  | "design4"
+  | "design5"
+  | "design6"
+  | "design7"
+  | "design8"
+  | "design9"
+  | "design10";
+
 export interface QuizConfig {
-    spec: undefined | true,
+  spec: undefined | true;
   type: QuizType;
   noStartPage: boolean;
   startpageType: QuizStartpageType;
@@ -56,6 +69,7 @@ export interface QuizConfig {
   results: QuizResultsType;
   haveRoot: string | null;
   theme: QuizTheme;
+  design: Design;
   resultInfo: {
     when: "email" | "";
     share: boolean;