From eb6c0fbd26ab7b0ab4514c2022b4f18f5530fb57 Mon Sep 17 00:00:00 2001
From: IlyaDoronin <ryletd@gmail.com>
Date: Wed, 6 Mar 2024 18:45:45 +0300
Subject: [PATCH] fix: sandart layout background

---
 .../StartPageDesktop.tsx                      | 60 ++++++++-----
 .../StartPageMobile.tsx                       | 90 +++++++++++--------
 tsconfig.json                                 |  3 +
 vite.config.ts                                |  1 +
 4 files changed, 92 insertions(+), 62 deletions(-)

diff --git a/lib/components/ViewPublicationPage/StartPageViewPublication/StartPageDesktop.tsx b/lib/components/ViewPublicationPage/StartPageViewPublication/StartPageDesktop.tsx
index 52d5033..99a2cfc 100644
--- a/lib/components/ViewPublicationPage/StartPageViewPublication/StartPageDesktop.tsx
+++ b/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) => (
-  <Box
-    id="pain"
-    sx={{
-      display: "flex",
-      flexDirection: alignType === "left" ? "row" : "row-reverse",
-      flexGrow: 1,
-      minHeight: "100vh",
-      "&::-webkit-scrollbar": { width: 0 },
-      overflow: "auto",
-    }}
-  >
+}: LayoutProps) => {
+  const { settings } = useQuizData();
+
+  return (
     <Box
+      id="pain"
       sx={{
-        width: "40%",
         display: "flex",
-        flexDirection: "column",
-        justifyContent: "space-between",
-        alignItems: "flex-start",
-        p: "25px",
+        flexDirection: alignType === "left" ? "row" : "row-reverse",
+        minHeight: "100vh",
+        backgroundPosition: "center",
+        backgroundSize: "cover",
+        backgroundImage: settings.cfg.design
+          ? `url(${DESIGN_LIST[settings.cfg.theme]})`
+          : null,
       }}
     >
-      {quizHeaderBlock}
-      {quizMainBlock}
+      <Box
+        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,
diff --git a/lib/components/ViewPublicationPage/StartPageViewPublication/StartPageMobile.tsx b/lib/components/ViewPublicationPage/StartPageViewPublication/StartPageMobile.tsx
index 9a231ae..ac922ee 100644
--- a/lib/components/ViewPublicationPage/StartPageViewPublication/StartPageMobile.tsx
+++ b/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) => (
-  <Box
-    sx={{
-      display: "flex",
-      flexDirection: "column-reverse",
-      flexGrow: 1,
-      justifyContent: "flex-end",
-      minHeight: "100vh",
-      height: "100%",
-      "&::-webkit-scrollbar": { width: 0 },
-    }}
-  >
+}: MobileLayoutProps) => {
+  const { settings } = useQuizData();
+
+  return (
     <Box
       sx={{
-        width: "100%",
         display: "flex",
+        flexDirection: "column-reverse",
         flexGrow: 1,
-        flexDirection: "column",
-        justifyContent: "space-between",
-        alignItems: "flex-start",
-        p: "25px",
+        justifyContent: "flex-end",
+        minHeight: "100vh",
         height: "100%",
-        overflowY: "auto",
-        overflowX: "hidden",
-        "&::-webkit-scrollbar": {
-          width: "4px",
-        },
-        "&::-webkit-scrollbar-thumb": {
-          backgroundColor: "#b8babf",
-        },
+        "&::-webkit-scrollbar": { width: 0 },
+        backgroundPosition: "center",
+        backgroundSize: "cover",
+        backgroundImage: settings.cfg.design
+          ? `url(${DESIGN_LIST[settings.cfg.theme]})`
+          : null,
       }}
     >
-      {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,
diff --git a/tsconfig.json b/tsconfig.json
index 6d55215..c506081 100755
--- a/tsconfig.json
+++ b/tsconfig.json
@@ -20,6 +20,9 @@
         "strict": true,
         "noFallthroughCasesInSwitch": true,
         "paths": {
+            "@/*": [
+                "./lib/*"
+            ],
             "@ui_kit/*": [
                 "./lib/ui_kit/*"
             ],
diff --git a/vite.config.ts b/vite.config.ts
index a3214be..6446f31 100644
--- a/vite.config.ts
+++ b/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"),