добавил шильдики на стартовую страницу

src/pages/ViewPublicationPage/StartPageViewPublication.tsx

@@ -1,24 +1,16 @@
-import {
+import { Box, Button, ButtonBase, Link, Paper, Typography, useMediaQuery, useTheme } from "@mui/material";
-  Box,
-  Button,
-  ButtonBase,
-  Link,
-  Paper,
-  Typography,
-  useMediaQuery,
-  useTheme,
-} from "@mui/material";
 import { useCurrentQuiz } from "@root/quizes/hooks";
 import YoutubeEmbedIframe from "../../ui_kit/StartPagePreview/YoutubeEmbedIframe";
 import { QuizStartpageAlignType, QuizStartpageType } from "@model/quizSettings";
 import { notReachable } from "../../utils/notReachable";
 import { useUADevice } from "../../utils/hooks/useUADevice";
+import { NameplateLogo } from "@icons/NameplateLogo";
 
 interface Props {
-  setVisualStartPage: (a:boolean) => void
+  setVisualStartPage: (a: boolean) => void;
 }
 
-export const StartPageViewPublication = ({setVisualStartPage}:Props) => {
+export const StartPageViewPublication = ({ setVisualStartPage }: Props) => {
   const theme = useTheme();
   const quiz = useCurrentQuiz();
   const { isMobileDevice } = useUADevice();
@@ -29,9 +21,9 @@ export const StartPageViewPublication = ({setVisualStartPage}:Props) => {
     navigator.clipboard.writeText(quiz.config.info.phonenumber);
   };
 
-  const background = quiz.config.startpage.background.type === "image"
+  const background =
-    ? quiz.config.startpage.background.desktop
+    quiz.config.startpage.background.type === "image" ? (
-      ? (
+      quiz.config.startpage.background.desktop ? (
         <img
           src={quiz.config.startpage.background.desktop}
           alt=""
@@ -39,56 +31,71 @@ export const StartPageViewPublication = ({setVisualStartPage}:Props) => {
             width: "100%",
             height: "100%",
             objectFit: "cover",
-            overflow: "hidden"
+            overflow: "hidden",
           }}
         />
-      )
+      ) : null
-      : null
+    ) : quiz.config.startpage.background.type === "video" ? (
-    : quiz.config.startpage.background.type === "video"
+      quiz.config.startpage.background.video ? (
-      ? quiz.config.startpage.background.video
+        <YoutubeEmbedIframe
-        ? (
+          videoUrl={quiz.config.startpage.background.video}
-          <YoutubeEmbedIframe videoUrl={quiz.config.startpage.background.video}
           containerSX={{
-              width: quiz.config.startpageType === "centered" ? "550px" : quiz.config.startpageType === "expanded" ? "100vw" : "100%",
+            width:
-              height: quiz.config.startpageType === "centered" ? "275px" : quiz.config.startpageType === "expanded" ? "100vh" : "100%",
+              quiz.config.startpageType === "centered"
+                ? "550px"
+                : quiz.config.startpageType === "expanded"
+                ? "100vw"
+                : "100%",
+            height:
+              quiz.config.startpageType === "centered"
+                ? "275px"
+                : quiz.config.startpageType === "expanded"
+                ? "100vh"
+                : "100%",
             borderRadius: quiz.config.startpageType === "centered" ? "10px" : "0",
             overflow: "hidden",
             "& iframe": {
               width: "100%",
               height: "100%",
-                transform: quiz.config.startpageType === "centered" ? "" : quiz.config.startpageType === "expanded" ? "scale(1.5)" : "scale(2.4)",
+              transform:
-
+                quiz.config.startpageType === "centered"
-              }
+                  ? ""
-
+                  : quiz.config.startpageType === "expanded"
+                  ? "scale(1.5)"
+                  : "scale(2.4)",
+            },
           }}
         />
-        )
+      ) : null
-        : null
+    ) : null;
-      : null;
 
   return (
-    <Paper className="quiz-preview-draghandle"
+    <Paper
+      className="quiz-preview-draghandle"
       sx={{
         height: "100vh",
-        background: quiz.config.startpageType === "expanded" ?
+        background:
-          quiz.config.startpage.position === "left" ? "linear-gradient(90deg,#272626,transparent)" :
+          quiz.config.startpageType === "expanded"
-          quiz.config.startpage.position === "center" ? "linear-gradient(180deg,transparent,#272626)" :
+            ? quiz.config.startpage.position === "left"
-          "linear-gradient(270deg,#272626,transparent)" 
+              ? "linear-gradient(90deg,#272626,transparent)"
+              : quiz.config.startpage.position === "center"
+              ? "linear-gradient(180deg,transparent,#272626)"
+              : "linear-gradient(270deg,#272626,transparent)"
             : "",
-        color: quiz.config.startpageType === "expanded" ? "white" : "black"
+        color: quiz.config.startpageType === "expanded" ? "white" : "black",
-      
+      }}
-
-      }}>
-      <QuizPreviewLayoutByType
-        quizHeaderBlock={<Box 
-        p={quiz.config.startpageType === "standard" ? "" : "16px"}
     >
-          <Box sx={{
+      <QuizPreviewLayoutByType
+        quizHeaderBlock={
+          <Box p={quiz.config.startpageType === "standard" ? "" : "16px"}>
+            <Box
+              sx={{
                 display: "flex",
                 alignItems: "center",
                 gap: "20px",
-            mb: "7px"
+                mb: "7px",
-          }}>
+              }}
+            >
               {quiz.config.startpage.logo && (
                 <img
                   src={quiz.config.startpage.logo}
@@ -100,49 +107,60 @@ export const StartPageViewPublication = ({setVisualStartPage}:Props) => {
                   alt=""
                 />
               )}
-            <Typography sx={{ fontSize: "14px" }}>
+              <Typography sx={{ fontSize: "14px" }}>{quiz.config.info.orgname}</Typography>
-              {quiz.config.info.orgname}
-            </Typography>
             </Box>
             <Link mb="16px" href={quiz.config.info.site}>
               <Typography sx={{ fontSize: "16px", color: theme.palette.brightPurple.main }}>
                 {quiz.config.info.site}
               </Typography>
             </Link>
-        </Box>}
+          </Box>
-        quizMainBlock={<>
+        }
-          <Box sx={{
+        quizMainBlock={
+          <>
+            <Box
+              sx={{
                 display: "flex",
                 flexDirection: "column",
                 justifyContent: "center",
-            alignItems: quiz.config.startpageType === "centered" ? "center" :
+                alignItems:
-              quiz.config.startpageType === "expanded"
+                  quiz.config.startpageType === "centered"
-                ? quiz.config.startpage.position === "center" ?
+                    ? "center"
-                "center"
+                    : quiz.config.startpageType === "expanded"
-                : "start": "start",
+                    ? quiz.config.startpage.position === "center"
+                      ? "center"
+                      : "start"
+                    : "start",
                 mt: "28px",
-            width: "100%"
+                width: "100%",
-          }}>
+              }}
-            <Typography sx={{
+            >
+              <Typography
+                sx={{
                   fontWeight: "bold",
                   fontSize: "26px",
                   fontStyle: "normal",
                   fontStretch: "normal",
                   lineHeight: "1.2",
-            }}>{quiz.name}</Typography>
+                }}
-            <Typography sx={{
+              >
+                {quiz.name}
+              </Typography>
+              <Typography
+                sx={{
                   fontSize: "16px",
-              m: "16px 0"
+                  m: "16px 0",
-            }}>
+                }}
+              >
                 {quiz.config.startpage.description}
               </Typography>
-            <Box width={ quiz.config.startpageType === "standard" ? "100%" : "auto"}>
+              <Box width={quiz.config.startpageType === "standard" ? "100%" : "auto"}>
                 <Button
                   variant="contained"
                   sx={{
                     fontSize: "16px",
                     padding: "10px 15px",
-                  width: quiz.config.startpageType === "standard" ? "100%" : "auto"
+                    width: quiz.config.startpageType === "standard" ? "100%" : "auto",
                   }}
                   onClick={() => setVisualStartPage(true)}
                 >
@@ -150,11 +168,11 @@ export const StartPageViewPublication = ({setVisualStartPage}:Props) => {
                 </Button>
               </Box>
             </Box>
+
             <Box
-            sx={{
+              sx={{ mt: "46px", display: "flex", alignItems: "center", justifyContent: "space-between", width: "100%" }}
-              mt: "46px"
-            }}
             >
+              <Box>
                 {quiz.config.info.clickable ? (
                   isMobileDevice ? (
                     <Link href={`tel:${quiz.config.info.phonenumber}`}>
@@ -174,20 +192,38 @@ export const StartPageViewPublication = ({setVisualStartPage}:Props) => {
                     {quiz.config.info.phonenumber}
                   </Typography>
                 )}
-            <Typography sx={{ fontSize: "12px", textAlign: "end" }}>
+                <Typography sx={{ fontSize: "12px", textAlign: "end" }}>{quiz.config.info.law}</Typography>
-              {quiz.config.info.law}
+              </Box>
+
+              <Box
+                sx={{
+                  display: "flex",
+                  alignItems: "center",
+                }}
+              >
+                <NameplateLogo style={{ fontSize: "34px" }} />
+                <Typography sx={{ fontSize: "20px", color: "#4D4D4D", whiteSpace: "nowrap" }}>
+                  Сделано на PenaQuiz
                 </Typography>
               </Box>
-        </>}
+            </Box>
+          </>
+        }
         backgroundBlock={background}
         startpageType={quiz.config.startpageType}
         alignType={quiz.config.startpage.position}
       />
     </Paper>
   );
-}
+};
 
-function QuizPreviewLayoutByType({ quizHeaderBlock, quizMainBlock, backgroundBlock, startpageType, alignType }: {
+function QuizPreviewLayoutByType({
+  quizHeaderBlock,
+  quizMainBlock,
+  backgroundBlock,
+  startpageType,
+  alignType,
+}: {
   quizHeaderBlock: JSX.Element;
   quizMainBlock: JSX.Element;
   backgroundBlock: JSX.Element | null;
@@ -201,28 +237,35 @@ function QuizPreviewLayoutByType({ quizHeaderBlock, quizMainBlock, backgroundBlo
     case null:
     case "standard": {
       return (
-        <Box sx={{
+        <Box
+          sx={{
             display: "flex",
             flexDirection: alignType === "left" ? "row" : "row-reverse",
             flexGrow: 1,
             height: "100vh",
             "&::-webkit-scrollbar": { width: 0 },
-        }}>
+          }}
-          <Box sx={{
+        >
+          <Box
+            sx={{
               width: !isTablet ? "40%" : "100%",
               display: "flex",
               flexDirection: "column",
               justifyContent: "space-between",
               alignItems: !isTablet ? "flex-start" : "center",
-            p: "25px"
+              p: "25px",
-          }}>
+            }}
+          >
             {quizHeaderBlock}
             {quizMainBlock}
           </Box>
-          <Box sx={{
+
+          <Box
+            sx={{
               width: "60%",
-            overflow: "hidden"
+              overflow: "hidden",
-          }}>
+            }}
+          >
             {backgroundBlock}
           </Box>
         </Box>
@@ -230,15 +273,18 @@ function QuizPreviewLayoutByType({ quizHeaderBlock, quizMainBlock, backgroundBlo
     }
     case "expanded": {
       return (
-        <Box sx={{
+        <Box
+          sx={{
             position: "relative",
             display: "flex",
             justifyContent: startpageAlignTypeToJustifyContent[alignType],
             flexGrow: 1,
             height: "100%",
             "&::-webkit-scrollbar": { width: 0 },
-        }}>
+          }}
-          <Box sx={{
+        >
+          <Box
+            sx={{
               width: "40%",
               position: "relative",
               padding: "16px",
@@ -247,19 +293,22 @@ function QuizPreviewLayoutByType({ quizHeaderBlock, quizMainBlock, backgroundBlo
               flexDirection: "column",
               justifyContent: "space-between",
               alignItems: alignType === "center" ? "center" : "start",
-          }}>
+            }}
+          >
             {quizHeaderBlock}
             {quizMainBlock}
           </Box>
-          <Box sx={{
+          <Box
+            sx={{
               position: "absolute",
               left: 0,
               top: 0,
               height: "100%",
               width: "100%",
               zIndex: 1,
-            overflow: "hidden"
+              overflow: "hidden",
-          }}>
+            }}
+          >
             {backgroundBlock}
           </Box>
         </Box>
@@ -267,7 +316,8 @@ function QuizPreviewLayoutByType({ quizHeaderBlock, quizMainBlock, backgroundBlo
     }
     case "centered": {
       return (
-        <Box sx={{
+        <Box
+          sx={{
             padding: "16px",
             display: "flex",
             flexDirection: "column",
@@ -275,19 +325,17 @@ function QuizPreviewLayoutByType({ quizHeaderBlock, quizMainBlock, backgroundBlo
             alignItems: "center",
             height: "100%",
             "&::-webkit-scrollbar": { width: 0 },
-          overflow: "hidden"
+            overflow: "hidden",
-        }}>
+          }}
+        >
           {quizHeaderBlock}
-          {backgroundBlock &&
+          {backgroundBlock && <Box>{backgroundBlock}</Box>}
-            <Box>
-              {backgroundBlock}
-            </Box>
-          }
           {quizMainBlock}
         </Box>
       );
     }
-    default: notReachable(startpageType);
+    default:
+      notReachable(startpageType);
   }
 }