fix: sandart layout background

lib/components/ViewPublicationPage/StartPageViewPublication/StartPageDesktop.tsx

@@ -1,8 +1,11 @@
 import { Box } from "@mui/material";
 
 import { useRootContainerSize } from "@contexts/RootContainerWidthContext";
+import { useQuizData } from "@contexts/QuizDataContext";
 
 import { notReachable } from "@utils/notReachable";
+import { quizThemes } from "@utils/themes/Publication/themePublication";
+import { DESIGN_LIST } from "@/components/ViewPublicationPage/Question";
 
 import type {
   QuizStartpageAlignType,
@@ -24,35 +27,46 @@ const StandartLayout = ({
   quizHeaderBlock,
   quizMainBlock,
   backgroundBlock,
-}: LayoutProps) => (
+}: LayoutProps) => {
-  <Box
+  const { settings } = useQuizData();
-    id="pain"
+
-    sx={{
+  return (
-      display: "flex",
-      flexDirection: alignType === "left" ? "row" : "row-reverse",
-      flexGrow: 1,
-      minHeight: "100vh",
-      "&::-webkit-scrollbar": { width: 0 },
-      overflow: "auto",
-    }}
-  >
     <Box
+      id="pain"
       sx={{
-        width: "40%",
         display: "flex",
-        flexDirection: "column",
+        flexDirection: alignType === "left" ? "row" : "row-reverse",
-        justifyContent: "space-between",
+        minHeight: "100vh",
-        alignItems: "flex-start",
+        backgroundPosition: "center",
-        p: "25px",
+        backgroundSize: "cover",
+        backgroundImage: settings.cfg.design
+          ? `url(${DESIGN_LIST[settings.cfg.theme]})`
+          : null,
       }}
     >
-      {quizHeaderBlock}
+      <Box
-      {quizMainBlock}
+        sx={{
+          width: "40%",
+          display: "flex",
+          flexDirection: "column",
+          justifyContent: "space-between",
+          alignItems: "flex-start",
+          p: "25px",
+          background:
+            settings.cfg.design && !quizThemes[settings.cfg.theme].isLight
+              ? "linear-gradient(90deg,#272626,transparent)"
+              : null,
+        }}
+      >
+        {quizHeaderBlock}
+        {quizMainBlock}
+      </Box>
+      {settings.cfg.startpage.background.desktop && (
+        <Box sx={{ width: "60%", overflow: "hidden" }}>{backgroundBlock}</Box>
+      )}
     </Box>
-
+  );
-    <Box sx={{ width: "60%", overflow: "hidden" }}>{backgroundBlock}</Box>
+};
-  </Box>
-);
 
 const ExpandedLayout = ({
   alignType,

lib/components/ViewPublicationPage/StartPageViewPublication/StartPageMobile.tsx

@@ -1,6 +1,10 @@
 import { Box } from "@mui/material";
 
+import { useQuizData } from "@contexts/QuizDataContext";
+
 import { notReachable } from "@utils/notReachable";
+import { quizThemes } from "@utils/themes/Publication/themePublication";
+import { DESIGN_LIST } from "@/components/ViewPublicationPage/Question";
 
 import type { QuizStartpageType } from "@model/settingsData";
 
@@ -17,62 +21,70 @@ const StandartMobileLayout = ({
   quizHeaderBlock,
   quizMainBlock,
   backgroundBlock,
-}: MobileLayoutProps) => (
+}: MobileLayoutProps) => {
-  <Box
+  const { settings } = useQuizData();
-    sx={{
+
-      display: "flex",
+  return (
-      flexDirection: "column-reverse",
-      flexGrow: 1,
-      justifyContent: "flex-end",
-      minHeight: "100vh",
-      height: "100%",
-      "&::-webkit-scrollbar": { width: 0 },
-    }}
-  >
     <Box
       sx={{
-        width: "100%",
         display: "flex",
+        flexDirection: "column-reverse",
         flexGrow: 1,
-        flexDirection: "column",
+        justifyContent: "flex-end",
-        justifyContent: "space-between",
+        minHeight: "100vh",
-        alignItems: "flex-start",
-        p: "25px",
         height: "100%",
-        overflowY: "auto",
+        "&::-webkit-scrollbar": { width: 0 },
-        overflowX: "hidden",
+        backgroundPosition: "center",
-        "&::-webkit-scrollbar": {
+        backgroundSize: "cover",
-          width: "4px",
+        backgroundImage: settings.cfg.design
-        },
+          ? `url(${DESIGN_LIST[settings.cfg.theme]})`
-        "&::-webkit-scrollbar-thumb": {
+          : null,
-          backgroundColor: "#b8babf",
-        },
       }}
     >
-      {quizHeaderBlock}
       <Box
         sx={{
-          height: "80%",
+          width: "100%",
           display: "flex",
           flexGrow: 1,
           flexDirection: "column",
           justifyContent: "space-between",
-          width: "100%",
+          alignItems: "flex-start",
+          p: "25px",
+          height: "100%",
+          overflowY: "auto",
+          overflowX: "hidden",
+          background:
+            settings.cfg.design && !quizThemes[settings.cfg.theme].isLight
+              ? "linear-gradient(90deg,#272626,transparent)"
+              : null,
+          "&::-webkit-scrollbar": {
+            width: "4px",
+          },
+          "&::-webkit-scrollbar-thumb": {
+            backgroundColor: "#b8babf",
+          },
         }}
       >
-        {quizMainBlock}
+        {quizHeaderBlock}
+        <Box
+          sx={{
+            height: "80%",
+            display: "flex",
+            flexGrow: 1,
+            flexDirection: "column",
+            justifyContent: "space-between",
+            width: "100%",
+          }}
+        >
+          {quizMainBlock}
+        </Box>
       </Box>
+      {settings.cfg.startpage.background.desktop && (
+        <Box sx={{ width: "100%", overflow: "hidden" }}>{backgroundBlock}</Box>
+      )}
     </Box>
-    <Box
+  );
-      sx={{
+};
-        width: "100%",
-        overflow: "hidden",
-      }}
-    >
-      {backgroundBlock}
-    </Box>
-  </Box>
-);
 
 const ExpandedMobileLayout = ({
   quizHeaderBlock,

tsconfig.json

@@ -20,6 +20,9 @@
         "strict": true,
         "noFallthroughCasesInSwitch": true,
         "paths": {
+            "@/*": [
+                "./lib/*"
+            ],
             "@ui_kit/*": [
                 "./lib/ui_kit/*"
             ],

vite.config.ts

@@ -3,6 +3,7 @@ import { resolve } from "path";
 import { defineConfig } from "vite";
 
 export const alias = {
+    "@": resolve(__dirname, "./lib/"),
     "@ui_kit": resolve(__dirname, "./lib/ui_kit"),
     "@icons": resolve(__dirname, "./lib/assets/icons"),
     "@stores": resolve(__dirname, "./lib/stores"),