feat: new design

lib/components/ViewPublicationPage/StartPageViewPublication.tsx

@@ -1,4 +1,12 @@
-import { Box, Button, ButtonBase, Link, Paper, Typography, useTheme } from "@mui/material";
+import {
+  Box,
+  Button,
+  ButtonBase,
+  Link,
+  Paper,
+  Typography,
+  useTheme,
+} from "@mui/material";
 import { useUADevice } from "../../utils/hooks/useUADevice";
 import { notReachable } from "../../utils/notReachable";
 import YoutubeEmbedIframe from "./tools/YoutubeEmbedIframe";
@@ -10,6 +18,7 @@ import { quizThemes } from "@utils/themes/Publication/themePublication";
 import { useRootContainerSize } from "../../contexts/RootContainerWidthContext";
 import { setCurrentQuizStep } from "@stores/quizView";
 
+import PenaLogo from "@icons/PenaLogo.png";
 
 export const StartPageViewPublication = () => {
   const theme = useTheme();
@@ -30,7 +39,10 @@ export const StartPageViewPublication = () => {
           src={settings.cfg.startpage.background.desktop}
           alt=""
           style={{
-                        width: (isMobile || settings.cfg.startpageType === "expanded") ? "100%" : undefined,
+            width:
+              isMobile || settings.cfg.startpageType === "expanded"
+                ? "100%"
+                : undefined,
             height: "100%",
             objectFit: "cover",
             overflow: "hidden",
@@ -42,15 +54,11 @@ export const StartPageViewPublication = () => {
         <YoutubeEmbedIframe
           videoUrl={settings.cfg.startpage.background.video}
           containerSX={{
-                        width:
+            width: settings.cfg.startpageType === "centered" ? "550px" : "100%",
-                            settings.cfg.startpageType === "centered"
-                                ? "550px"
-                                : "100%",
             height:
-                            settings.cfg.startpageType === "centered"
+              settings.cfg.startpageType === "centered" ? "275px" : "100%",
-                                ? "275px"
+            borderRadius:
-                                : "100%",
+              settings.cfg.startpageType === "centered" ? "10px" : "0",
-                        borderRadius: settings.cfg.startpageType === "centered" ? "10px" : "0",
             overflow: "hidden",
             "& iframe": {
               width: "100%",
@@ -73,6 +81,7 @@ export const StartPageViewPublication = () => {
       sx={{
         borderRadius: 0,
         height: "100%",
+        minHeight: "100vh",
         width: "100%",
         background:
           settings.cfg.startpageType === "expanded" && !isMobile
@@ -93,43 +102,32 @@ export const StartPageViewPublication = () => {
               sx={{
                 display: "flex",
                 alignItems: "center",
-                                gap: "20px",
+                gap: "30px",
                 mb: "7px",
               }}
             >
-                            {settings.cfg.startpage.logo && (
               <img
-                                    src={settings.cfg.startpage.logo}
+                src={settings.cfg.startpage.logo || PenaLogo}
                 style={{
-                                        height: "37px",
+                  height: "40px",
-                                        maxWidth: "43px",
+                  maxWidth: "110px",
                   objectFit: "cover",
                 }}
                 alt=""
               />
-                            )}
               <Typography
                 sx={{
                   fontSize: "14px",
-                                    color: settings.cfg.startpageType === "expanded"
+                  color:
-                                        && !isMobile ? "white" : theme.palette.text.primary,
+                    settings.cfg.startpageType === "expanded" && !isMobile
-                                    wordBreak: "break-word"
+                      ? "white"
+                      : theme.palette.text.primary,
+                  wordBreak: "break-word",
                 }}
-                            >{settings.cfg.info.orgname}</Typography>
+              >
-                        </Box>
+                {settings.cfg.info.orgname}
-                        <Link mb="16px" href={settings.cfg.info.site}>
-                            <Typography
-                                sx={{
-                                    fontSize: "16px",
-                                    color: theme.palette.primary.main,
-                                    overflow: "hidden",
-                                    textOverflow: "ellipsis",
-                                    whiteSpace: "nowrap",
-                                    maxWidth: isTablet ? "200px" : "300px"
-                                }}>
-                                {settings.cfg.info.site}
               </Typography>
-                        </Link>
+            </Box>
           </Box>
         }
         quizMainBlock={
@@ -160,8 +158,15 @@ export const StartPageViewPublication = () => {
                   lineHeight: "1.2",
                   overflowWrap: "break-word",
                   width: "100%",
-                                    textAlign: settings.cfg.startpageType === "centered" || settings.cfg.startpage.position === "center" ? "center" : "-moz-initial",
+                  textAlign:
-                                    color: settings.cfg.startpageType === "expanded" && !isMobile ? "white" : theme.palette.text.primary
+                    settings.cfg.startpageType === "centered" ||
+                    settings.cfg.startpage.position === "center"
+                      ? "center"
+                      : "-moz-initial",
+                  color:
+                    settings.cfg.startpageType === "expanded" && !isMobile
+                      ? "white"
+                      : theme.palette.text.primary,
                 }}
               >
                 {settings.name}
@@ -169,26 +174,40 @@ export const StartPageViewPublication = () => {
               <Typography
                 sx={{
                   fontSize: "16px",
-                                    m: "16px 0",
+                  margin: "16px 0 30px",
                   overflowWrap: "break-word",
                   width: "100%",
-                                    textAlign: settings.cfg.startpageType === "centered" || settings.cfg.startpage.position === "center" ? "center" : "-moz-initial",
+                  textAlign:
-                                    color: settings.cfg.startpageType === "expanded" && !isMobile ? "white" : theme.palette.text.primary
+                    settings.cfg.startpageType === "centered" ||
+                    settings.cfg.startpage.position === "center"
+                      ? "center"
+                      : "-moz-initial",
+                  color:
+                    settings.cfg.startpageType === "expanded" && !isMobile
+                      ? "white"
+                      : theme.palette.text.primary,
                 }}
               >
                 {settings.cfg.startpage.description}
               </Typography>
-                            <Box width={settings.cfg.startpageType === "standard" ? "100%" : "auto"}>
+              <Box
+                width={
+                  settings.cfg.startpageType === "standard" ? "100%" : "auto"
+                }
+              >
                 <Button
                   variant="contained"
                   sx={{
-                                        fontSize: "16px",
+                    fontSize: "18px",
-                                        padding: "10px 15px",
+                    padding: "10px 30px",
-                                        width: settings.cfg.startpageType === "standard" ? "100%" : "auto",
+                    width: "auto",
+                    background: "#7E2AEA",
                   }}
                   onClick={() => setCurrentQuizStep("question")}
                 >
-                                    {settings.cfg.startpage.button.trim() ? settings.cfg.startpage.button : "Пройти тест"}
+                  {settings.cfg.startpage.button.trim()
+                    ? settings.cfg.startpage.button
+                    : "Пройти тест"}
                 </Button>
               </Box>
             </Box>
@@ -197,45 +216,85 @@ export const StartPageViewPublication = () => {
               sx={{
                 mt: "46px",
                 display: "flex",
-                                alignItems: "center",
+                gap: "20px",
+                alignItems: "flex-end",
                 justifyContent: "space-between",
                 width: "100%",
-                                flexDirection: "column"
+                flexWrap: "wrap",
               }}
             >
-                            <Box sx={{ maxWidth: isTablet ? "240px" : "300px", marginBottom: "10px", }}>
+              <Box
+                sx={{
+                  maxWidth: isTablet ? "240px" : "300px",
+                  marginBottom: "10px",
+                }}
+              >
+                {settings.cfg.info.site && (
+                  <Link mb="16px" href={settings.cfg.info.site}>
+                    <Typography
+                      sx={{
+                        fontSize: "16px",
+                        color: "#7E2AEA",
+                        overflow: "hidden",
+                        textOverflow: "ellipsis",
+                        whiteSpace: "nowrap",
+                        maxWidth: isTablet ? "200px" : "300px",
+                      }}
+                    >
+                      {settings.cfg.info.site}
+                    </Typography>
+                  </Link>
+                )}
                 {settings.cfg.info.clickable ? (
                   isMobileDevice ? (
                     <Link href={`tel:${settings.cfg.info.phonenumber}`}>
-                                            <Typography sx={{ fontSize: "16px", color: theme.palette.primary.main }}>
+                      <Typography
+                        sx={{
+                          fontSize: "16px",
+                          color: theme.palette.primary.main,
+                        }}
+                      >
                         {settings.cfg.info.phonenumber}
                       </Typography>
                     </Link>
                   ) : (
                     <ButtonBase onClick={handleCopyNumber}>
-                                            <Typography sx={{ fontSize: "16px", color: theme.palette.primary.main }}>
+                      <Typography
+                        sx={{
+                          fontSize: "16px",
+                          color: theme.palette.primary.main,
+                        }}
+                      >
                         {settings.cfg.info.phonenumber}
                       </Typography>
                     </ButtonBase>
                   )
                 ) : (
-                                    <Typography sx={{ fontSize: "16px", color: theme.palette.primary.main }}>
+                  <Typography
+                    sx={{
+                      fontSize: "16px",
+                      color: theme.palette.primary.main,
+                      marginTop: "5px",
+                    }}
+                  >
                     {settings.cfg.info.phonenumber}
                   </Typography>
                 )}
-                                <Typography sx={{
+                <Typography
+                  sx={{
                     width: "100%",
                     overflowWrap: "break-word",
                     fontSize: "12px",
-                                    textAlign: "end",
                     maxHeight: "120px",
                     overflow: "auto",
+                    marginTop: "5px",
                     "&::-webkit-scrollbar": { width: 0 },
                     color:
                       settings.cfg.startpageType === "expanded" && !isMobile
                         ? "white"
                         : theme.palette.text.primary,
-                                }}>
+                  }}
+                >
                   {settings.cfg.info.law}
                 </Typography>
               </Box>
@@ -248,11 +307,32 @@ export const StartPageViewPublication = () => {
                   display: "flex",
                   alignItems: "center",
                   gap: "15px",
-                                    textDecoration: "none"
+                  textDecoration: "none",
+                }}
+              >
+                <NameplateLogo
+                  style={{
+                    fontSize: "34px",
+                    color:
+                      settings.cfg.startpageType === "expanded" && !isMobile
+                        ? "#FFFFFF"
+                        : quizThemes[settings.cfg.theme].isLight
+                        ? "#151515"
+                        : "#FFFFFF",
+                  }}
+                />
+                <Typography
+                  sx={{
+                    fontSize: "20px",
+                    color:
+                      settings.cfg.startpageType === "expanded" && !isMobile
+                        ? "#F5F7FF"
+                        : quizThemes[settings.cfg.theme].isLight
+                        ? "#4D4D4D"
+                        : "#F5F7FF",
+                    whiteSpace: "nowrap",
                   }}
                 >
-                                <NameplateLogo style={{ fontSize: "34px", color: settings.cfg.startpageType === "expanded" && !isMobile ? "#FFFFFF" : (quizThemes[settings.cfg.theme].isLight ? "#151515" : "#FFFFFF") }} />
-                                <Typography sx={{ fontSize: "20px", color: settings.cfg.startpageType === "expanded" && !isMobile ? "#F5F7FF" : (quizThemes[settings.cfg.theme].isLight ? "#4D4D4D" : "#F5F7FF"), whiteSpace: "nowrap", }}>
                   Сделано на PenaQuiz
                 </Typography>
               </Box>
@@ -267,7 +347,6 @@ export const StartPageViewPublication = () => {
   );
 };
 
-
 function QuizPreviewLayoutByType({
   quizHeaderBlock,
   quizMainBlock,
@@ -291,6 +370,7 @@ function QuizPreviewLayoutByType({
           flexDirection: "column-reverse",
           flexGrow: 1,
           justifyContent: "flex-end",
+          minHeight: "100vh",
           height: "100%",
           "&::-webkit-scrollbar": { width: 0 },
         }}
@@ -311,7 +391,7 @@ function QuizPreviewLayoutByType({
             },
             "&::-webkit-scrollbar-thumb": {
               backgroundColor: "#b8babf",
-                        }
+            },
           }}
         >
           {quizHeaderBlock}
@@ -321,7 +401,7 @@ function QuizPreviewLayoutByType({
               display: "flex",
               flexDirection: "column",
               justifyContent: "space-between",
-                            width: "100%"
+              width: "100%",
             }}
           >
             {quizMainBlock}
@@ -351,12 +431,18 @@ function QuizPreviewLayoutByType({
               id="pain"
               sx={{
                 display: "flex",
-                                flexDirection: alignType === "left" ? (isMobile ? "column-reverse" : "row") : "row-reverse",
+                flexDirection:
+                  alignType === "left"
+                    ? isMobile
+                      ? "column-reverse"
+                      : "row"
+                    : "row-reverse",
                 flexGrow: 1,
                 justifyContent: isMobile ? "flex-end" : undefined,
                 height: "100%",
+                minHeight: "100vh",
                 "&::-webkit-scrollbar": { width: 0 },
-                                overflow: "auto"
+                overflow: "auto",
               }}
             >
               <Box
@@ -367,7 +453,7 @@ function QuizPreviewLayoutByType({
                   justifyContent: "space-between",
                   alignItems: "flex-start",
                   p: "25px",
-                                    height: isMobile ? "80%" : undefined
+                  height: isMobile ? "80%" : undefined,
                 }}
               >
                 {quizHeaderBlock}
@@ -384,9 +470,7 @@ function QuizPreviewLayoutByType({
               </Box>
             </Box>
           )}
-
         </>
-
       );
     }
     case "expanded": {
@@ -435,10 +519,8 @@ function QuizPreviewLayoutByType({
                 {backgroundBlock}
               </Box>
             </Box>
-                    )
+          )}
-                    }
         </>
-
       );
     }
     case "centered": {
@@ -467,7 +549,7 @@ function QuizPreviewLayoutByType({
                     height: "275px",
                     // overflow: "hidden",
                     display: "flex",
-                                        justifyContent: "center"
+                    justifyContent: "center",
                   }}
                 >
                   {backgroundBlock}
@@ -475,10 +557,8 @@ function QuizPreviewLayoutByType({
               )}
               {quizMainBlock}
             </Box>
-                    )
+          )}
-                    }
         </>
-
       );
     }
     default:
@@ -486,8 +566,10 @@ function QuizPreviewLayoutByType({
   }
 }
 
-
+const startpageAlignTypeToJustifyContent: Record<
-const startpageAlignTypeToJustifyContent: Record<QuizStartpageAlignType, "start" | "center" | "end"> = {
+  QuizStartpageAlignType,
+  "start" | "center" | "end"
+> = {
   left: "start",
   center: "center",
   right: "end",