From c6a73bf749300988011c8b4d7e678be4e6b0ea22 Mon Sep 17 00:00:00 2001
From: aleksandr-raw <104529174+aleksandr-raw@users.noreply.github.com>
Date: Thu, 2 May 2024 17:13:41 +0400
Subject: [PATCH] fixed expanded design of start page

---
 .../StartPageDesktop.tsx                      |  5 +-
 .../StartPageViewPublication/index.tsx        | 96 ++++++++++---------
 2 files changed, 52 insertions(+), 49 deletions(-)

diff --git a/lib/components/ViewPublicationPage/StartPageViewPublication/StartPageDesktop.tsx b/lib/components/ViewPublicationPage/StartPageViewPublication/StartPageDesktop.tsx
index 323ab8d..0915a7d 100644
--- a/lib/components/ViewPublicationPage/StartPageViewPublication/StartPageDesktop.tsx
+++ b/lib/components/ViewPublicationPage/StartPageViewPublication/StartPageDesktop.tsx
@@ -28,7 +28,8 @@ const StandartLayout = ({
     quizMainBlock,
     backgroundBlock,
 }: LayoutProps) => {
-    const isTablet = useRootContainerSize() < 1100;
+    const size = useRootContainerSize();
+    const isTablet = size >= 700 && size < 1100;
     const { settings } = useQuizData();
 
     return (
@@ -100,7 +101,7 @@ const ExpandedLayout = ({
         <Box
             sx={{
                 height: "100%",
-                width: alignType === "center"? "100%": "40%",
+                width: alignType === "center"? "100%": "42%",
                 display: "flex",
                 padding:
                     alignType === "center"
diff --git a/lib/components/ViewPublicationPage/StartPageViewPublication/index.tsx b/lib/components/ViewPublicationPage/StartPageViewPublication/index.tsx
index 37a2700..0db64bc 100644
--- a/lib/components/ViewPublicationPage/StartPageViewPublication/index.tsx
+++ b/lib/components/ViewPublicationPage/StartPageViewPublication/index.tsx
@@ -27,8 +27,9 @@ export const StartPageViewPublication = () => {
     const { isMobileDevice } = useUADevice();
     const setCurrentQuizStep = useQuizViewStore(state => state.setCurrentQuizStep);
 
-    const isMobile = useRootContainerSize() < 700;
-    const isTablet = useRootContainerSize() < 800;
+    const size = useRootContainerSize();
+    const isMobile = size < 700;
+    const isTablet = size >= 700 && size < 1100;
 
     const handleCopyNumber = () => {
         navigator.clipboard.writeText(settings.cfg.info.phonenumber);
@@ -123,6 +124,47 @@ export const StartPageViewPublication = () => {
         </Box>
     </Box>)
 
+    const PenaBadge = (
+            <Box
+                component={Link}
+                target={"_blank"}
+                href={
+                    `https://${window.location.hostname.includes("s") ? "s" : ""}quiz.pena.digital/squiz/quiz/logo?q=${quizId}`
+                }
+                sx={{
+                    display: "flex",
+                    alignItems: "center",
+                    gap: "7px",
+                    textDecoration: "none",
+                }}
+            >
+                <NameplateLogo
+                    style={{
+                        fontSize: "23px",
+                        color:
+                            settings.cfg.startpageType === "expanded"
+                                ? "#FFFFFF"
+                                : quizThemes[settings.cfg.theme].isLight
+                                    ? "#151515"
+                                    : "#FFFFFF",
+                    }}
+                />
+                <Typography
+                    sx={{
+                        fontSize: "13px",
+                        color:
+                            settings.cfg.startpageType === "expanded"
+                                ? "#F5F7FF"
+                                : quizThemes[settings.cfg.theme].isLight
+                                    ? "#4D4D4D"
+                                    : "#F5F7FF",
+                        whiteSpace: "nowrap",
+                    }}
+                >
+                    Сделано на PenaQuiz
+                </Typography>
+            </Box>)
+
     const realQuestionsCount = questions.filter((question) => question.type !== null && question.type !== "result").length;
 
     return (
@@ -135,10 +177,10 @@ export const StartPageViewPublication = () => {
                 background:
                     settings.cfg.startpageType === "expanded"
                         ? settings.cfg.startpage.position === "left"
-                            ? "linear-gradient(90deg,#272626,transparent)"
+                            ?  "linear-gradient(90deg, rgba(39, 38, 38, 0.95) 7.66%, rgba(42, 42, 46, 0.85) 42.12%, rgba(51, 54, 71, 0.4) 100%)"
                             : settings.cfg.startpage.position === "center"
-                                ? "linear-gradient(180deg,transparent,#272626)"
-                                : "linear-gradient(270deg,#272626,transparent)"
+                                ? "linear-gradient(0deg, rgba(39, 38, 38, 0.95) 7.66%, rgba(42, 42, 46, 0.85) 42.12%, rgba(51, 54, 71, 0.4) 100%)"
+                                : "linear-gradient(90deg, rgba(39, 38, 38, 0.95) 7.66%, rgba(42, 42, 46, 0.85) 42.12%, rgba(51, 54, 71, 0.4) 100%)"
                         : theme.palette.background.default,
 
                 color: settings.cfg.startpageType === "expanded" ? "white" : "black",
@@ -164,7 +206,7 @@ export const StartPageViewPublication = () => {
                                                 : "start"
                                             : "start",
                                 marginTop: settings.cfg.startpageType === "centered" ? "30px" : "5px",
-                                width:settings.cfg.startpageType === "expanded" && settings.cfg.startpage.position === "center" && !isMobile? "50%" : settings.cfg.startpageType === "centered" && !isMobile? "50%" : "100%",
+                                maxWidth: isMobile? "100%" : settings.cfg.startpageType === "centered" ? "700px" : isTablet && settings.cfg.startpageType !== "expanded" && settings.cfg.startpage.position !== "center" ? "380px" : "531px",
                             }}
                         >
                             <Typography
@@ -344,47 +386,7 @@ export const StartPageViewPublication = () => {
                                 </Typography>
                             </Box>
 
-                            {show_badge && (
-                                <Box
-                                    component={Link}
-                                    target={"_blank"}
-                                    href={
-                                        `https://${window.location.hostname.includes("s") ? "s" : ""}quiz.pena.digital/squiz/quiz/logo?q=${quizId}`
-                                    }
-                                    sx={{
-                                        display: "flex",
-                                        alignItems: "center",
-                                        gap: "7px",
-                                        textDecoration: "none",
-                                    }}
-                                >
-                                    <NameplateLogo
-                                        style={{
-                                            fontSize: "23px",
-                                            color:
-                                                settings.cfg.startpageType === "expanded"
-                                                    ? "#FFFFFF"
-                                                    : quizThemes[settings.cfg.theme].isLight
-                                                        ? "#151515"
-                                                        : "#FFFFFF",
-                                        }}
-                                    />
-                                    <Typography
-                                        sx={{
-                                            fontSize: "13px",
-                                            color:
-                                                settings.cfg.startpageType === "expanded"
-                                                    ? "#F5F7FF"
-                                                    : quizThemes[settings.cfg.theme].isLight
-                                                        ? "#4D4D4D"
-                                                        : "#F5F7FF",
-                                            whiteSpace: "nowrap",
-                                        }}
-                                    >
-                                        Сделано на PenaQuiz
-                                    </Typography>
-                                </Box>
-                            )}
+                            {show_badge && PenaBadge}
                         </Box>
                     </>
                 }