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,16 +27,21 @@ const StandartLayout = ({
   quizHeaderBlock,
   quizMainBlock,
   backgroundBlock,
-}: LayoutProps) => (
+}: LayoutProps) => {
+  const { settings } = useQuizData();
+
+  return (
     <Box
       id="pain"
       sx={{
         display: "flex",
         flexDirection: alignType === "left" ? "row" : "row-reverse",
-      flexGrow: 1,
         minHeight: "100vh",
-      "&::-webkit-scrollbar": { width: 0 },
+        backgroundPosition: "center",
-      overflow: "auto",
+        backgroundSize: "cover",
+        backgroundImage: settings.cfg.design
+          ? `url(${DESIGN_LIST[settings.cfg.theme]})`
+          : null,
       }}
     >
       <Box
@@ -44,15 +52,21 @@ const StandartLayout = ({
           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>
   );
+};
 
 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,7 +21,10 @@ const StandartMobileLayout = ({
   quizHeaderBlock,
   quizMainBlock,
   backgroundBlock,
-}: MobileLayoutProps) => (
+}: MobileLayoutProps) => {
+  const { settings } = useQuizData();
+
+  return (
     <Box
       sx={{
         display: "flex",
@@ -27,6 +34,11 @@ const StandartMobileLayout = ({
         minHeight: "100vh",
         height: "100%",
         "&::-webkit-scrollbar": { width: 0 },
+        backgroundPosition: "center",
+        backgroundSize: "cover",
+        backgroundImage: settings.cfg.design
+          ? `url(${DESIGN_LIST[settings.cfg.theme]})`
+          : null,
       }}
     >
       <Box
@@ -41,6 +53,10 @@ const StandartMobileLayout = ({
           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",
           },
@@ -63,16 +79,12 @@ const StandartMobileLayout = ({
           {quizMainBlock}
         </Box>
       </Box>
-    <Box
+      {settings.cfg.startpage.background.desktop && (
-      sx={{
+        <Box sx={{ width: "100%", overflow: "hidden" }}>{backgroundBlock}</Box>
-        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"),