refactored ContactForm design

lib/components/ViewPublicationPage/ContactForm/ContactForm.tsx

@@ -1,17 +1,17 @@
-import { useEffect, useRef, useState, } from "react";
+import {useEffect, useRef, useState,} from "react";
-import { Box, Button, Link, Typography, useTheme, } from "@mui/material";
+import {Box, Button, Link, Typography, useTheme,} from "@mui/material";
 
 import CustomCheckbox from "@ui_kit/CustomCheckbox.tsx";
 
-import { DESIGN_LIST } from "@utils/designList.ts";
+import {DESIGN_LIST} from "@utils/designList.ts";
-import { sendFC, SendFCParams } from "@api/quizRelase.ts";
+import {sendFC, SendFCParams} from "@api/quizRelase.ts";
-import { useQuizData } from "@contexts/QuizDataContext.ts";
+import {useQuizData} from "@contexts/QuizDataContext.ts";
-import { NameplateLogo } from "@icons/NameplateLogo.tsx";
+import {NameplateLogo} from "@icons/NameplateLogo.tsx";
-import { QuizQuestionResult } from "@model/questionTypes/result.ts";
+import {QuizQuestionResult} from "@model/questionTypes/result.ts";
-import { AnyTypedQuizQuestion } from "@model/questionTypes/shared.ts";
+import {AnyTypedQuizQuestion} from "@model/questionTypes/shared.ts";
-import { quizThemes } from "@utils/themes/Publication/themePublication.ts";
+import {quizThemes} from "@utils/themes/Publication/themePublication.ts";
-import { enqueueSnackbar } from "notistack";
+import {enqueueSnackbar} from "notistack";
-import { useRootContainerSize } from "@contexts/RootContainerWidthContext.ts";
+import {useRootContainerSize} from "@contexts/RootContainerWidthContext.ts";
 import {
   FormContactFieldData,
   FormContactFieldName,
@@ -19,7 +19,10 @@ import {
 import {
   Inputs
 } from "@/components/ViewPublicationPage/ContactForm/Inputs/Inputs.tsx";
-import { EMAIL_REGEXP } from "@utils/emailRegexp.tsx";
+import {EMAIL_REGEXP} from "@utils/emailRegexp.tsx";
+import {
+  ContactTextBlock
+} from "@/components/ViewPublicationPage/ContactForm/ContactTextBlock/ContactTextBlock.tsx";
 
 
 type Props = {
@@ -143,23 +146,23 @@ export const ContactForm = ({ currentQuestion, onShowResult }: Props) => {
         localStorage.setItem("sessions", JSON.stringify(sessions));
 
         //@ts-ignore
-        let YM = window?.ym;
+        const YM = window?.ym;
         //@ts-ignore
-        let VP = window?._tmr;
+        const VP = window?._tmr;
         if (YM !== undefined && settings.cfg.yandexMetricNumber !== undefined) {
           YM(
             settings.cfg.yandexMetricNumber,
             "reachGoal",
             "penaquiz-contacts"
           );
-        };
+        }
         if (VP !== undefined && settings.cfg.vkMetricNumber !== undefined) {
           VP.push({
             type: "reachGoal",
             id: settings.cfg.vkMetricNumber,
             goal: "penaquiz-contacts"
           });
-        };
+        }
       } catch (e) {
         enqueueSnackbar("повторите попытку позже");
       }
@@ -172,23 +175,23 @@ export const ContactForm = ({ currentQuestion, onShowResult }: Props) => {
   }
   useEffect(() => {
     //@ts-ignore
-    let YM = window?.ym;
+    const YM = window?.ym;
     //@ts-ignore
-    let VP = window?._tmr;
+    const VP = window?._tmr;
     if (YM !== undefined && settings.cfg.yandexMetricNumber !== undefined) {
       YM(
         settings.cfg.yandexMetricNumber,
         "reachGoal",
         "penaquiz-form"
       );
-    };
+    }
     if (VP !== undefined && settings.cfg.vkMetricNumber !== undefined) {
       VP.push({
         type: "reachGoal",
         id: settings.cfg.vkMetricNumber,
         goal: "penaquiz-form"
       });
-    };
+    }
   }, [])
 
   return (
@@ -213,7 +216,7 @@ export const ContactForm = ({ currentQuestion, onShowResult }: Props) => {
           settings.cfg.design && !isMobile
             ? quizThemes[settings.cfg.theme].isLight
               ? `url(${DESIGN_LIST[settings.cfg.theme]})`
-              : `linear-gradient(90deg, #272626, transparent), url(${DESIGN_LIST[settings.cfg.theme]
+                  : `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%), url(${DESIGN_LIST[settings.cfg.theme]
               })`
             : null,
       }}
@@ -231,65 +234,22 @@ export const ContactForm = ({ currentQuestion, onShowResult }: Props) => {
               : theme.palette.background.default,
         }}
       >
-        <Box
+          <ContactTextBlock settings={settings} />
-          sx={{
+        <Box sx={{
-            width: isMobile ? undefined : "100%",
+          flexGrow: 0,
-            display: "flex",
+          display: "flex",
-            flexDirection: "column",
+          alignItems: "center",
-            alignItems: "center",
+          justifyContent: "space-between",
-            justifyContent: "center",
+          flexDirection: "column",
-            borderRight: isMobile ? undefined : "1px solid #9A9AAF80",
+          backgroundColor: theme.palette.background.default,
-            margin: isMobile ? 0 : "40px 0",
+          height:  "auto",
-            padding: isMobile ? "0" : "0 40px"
+        }}>
-          }}
-        >
           <Box
-            sx={{
-              maxWidth: "630px",
-              width: "100%",
-              display: "flex",
-              flexDirection: "column",
-              alignItems: "flex-start",
-              justifyContent: "center",
-              padding: isMobile ? "40px 20px 0 20px" : "0",
-              mt: isMobile ? 0 : isTablet ? "-180px" : "-47px",
-            }}
-          >
-            <Typography
-              sx={{
-                textAlign: isTablet ? undefined : "center",
-                fontSize: "24px",
-                lineHeight: "normal",
-                fontWeight: 501,
-                color: theme.palette.text.primary,
-                wordBreak: "break-word",
-              }}
-            >
-              {settings.cfg.formContact.title ||
-                "Заполните форму, чтобы получить результаты теста"}
-            </Typography>
-            {settings.cfg.formContact.desc && (
-              <Typography
-                sx={{
-                  color: theme.palette.text.primary,
-                  m: "20px 0",
-                  fontSize: "18px",
-                  wordBreak: "break-word",
-                }}
-              >
-                {settings.cfg.formContact.desc}
-              </Typography>
-            )}
-          </Box>
-        </Box>
-
-        <Box
           sx={{
             display: "flex",
             alignItems: isMobile ? undefined : "center",
             justifyContent: "center",
             flexDirection: "column",
-            backgroundColor: theme.palette.background.default,
             p: isMobile ? "0 20px" : isTablet ? "0px 40px 30px 60px" : "125px 60px 30px 60px",
           }}
         >
@@ -345,9 +305,7 @@ export const ContactForm = ({ currentQuestion, onShowResult }: Props) => {
               &ensp;ознакомлен
             </Typography>
           </Box>
-          {
+
-            // resultQuestion &&
-            // settings.cfg.resultInfo.when === "after" &&
             <Button
               disabled={!(ready && !fire)}
               variant="contained"
@@ -366,45 +324,31 @@ export const ContactForm = ({ currentQuestion, onShowResult }: Props) => {
             >
               {settings.cfg.formContact?.button || "Получить результаты"}
             </Button>
-          }
+          </Box>
           {show_badge && (
-            <Box
+              <Box
-              component={Link}
+                  component={Link}
-              target={"_blank"}
+                  target={"_blank"}
-              href={`https://${window.location.hostname.includes("s") ? "s" : ""
+                  href={`https://${window.location.hostname.includes("s") ? "s" : ""
-                }quiz.pena.digital/squiz/quiz/logo?q=${quizId}`}
+                  }quiz.pena.digital/squiz/quiz/logo?q=${quizId}`}
-              sx={{
+                  sx={{
-                display: "flex",
+                    display: "flex",
-                alignItems: "center",
+                    alignItems: "center",
-                mt: "55px",
+                    mt: "55px",
-                mb: "40px",
+                    mb: isMobile? "30px": isTablet? "40px" :"50px",
-                gap: "10px",
+                    gap: "10px",
-                textDecoration: "none",
+                    textDecoration: "none",
-                position: "absolute",
+                  }}
-                bottom: 0,
+              >
-                left: isMobile ? "28%" : undefined
+                <NameplateLogo
-              }}
+                    style={{
-            >
+                      fontSize: "20px",
-              <NameplateLogo
+                      color: quizThemes[settings.cfg.theme].isLight
-                style={{
+                          ? "#151515"
-                  fontSize: "20px",
+                          : "#FFFFFF",
-                  color: quizThemes[settings.cfg.theme].isLight
+                    }}
-                    ? "#151515"
+                />
-                    : "#FFFFFF",
+              </Box>
-                }}
-              />
-              {/*<Typography*/}
-              {/*  sx={{*/}
-              {/*    fontSize: "14px",*/}
-              {/*    color: quizThemes[settings.cfg.theme].isLight*/}
-              {/*      ? "#4D4D4D"*/}
-              {/*      : "#F5F7FF",*/}
-              {/*    whiteSpace: "nowrap",*/}
-              {/*  }}*/}
-              {/*>*/}
-              {/*  Сделано на PenaQuiz*/}
-              {/*</Typography>*/}
-            </Box>
           )}
         </Box>
       </Box>

lib/components/ViewPublicationPage/ContactForm/ContactTextBlock/ContactTextBlock.tsx

@@ -0,0 +1,66 @@
+import {Box, Typography, useTheme} from "@mui/material";
+import {useRootContainerSize} from "@contexts/RootContainerWidthContext.ts";
+import {QuizSettingsConfig} from "@model/settingsData.ts";
+import {FC} from "react";
+
+type ContactTextBlockProps = {
+    settings: QuizSettingsConfig;
+}
+
+export const ContactTextBlock: FC<ContactTextBlockProps> = ({settings}) => {
+    const theme = useTheme();
+    const isMobile = useRootContainerSize() < 850;
+    const isTablet = useRootContainerSize() < 1000;
+    return (
+        <Box
+            sx={{
+                flexGrow: 1,
+                display: "flex",
+                flexDirection: "column",
+                alignItems: "center",
+                justifyContent: "center",
+                borderRight: isMobile ? undefined : "1px solid #9A9AAF80",
+                margin: isMobile ? 0 : "40px 0",
+                padding: isMobile ? "0" : "0 40px"
+            }}
+        >
+            <Box
+                sx={{
+                    maxWidth: isMobile? "100%" : isTablet? "410px" : "630px",
+                    display: "flex",
+                    flexDirection: "column",
+                    alignItems: "flex-start",
+                    justifyContent: "center",
+                    padding: isMobile ? "40px 20px 0 20px" : "0",
+                    mt: isMobile ? 0 : isTablet ? "-180px" : "-47px",
+                }}
+            >
+                <Typography
+                    sx={{
+                        textAlign: isTablet ? undefined : "center",
+                        fontSize: "24px",
+                        lineHeight: "normal",
+                        fontWeight: 501,
+                        color: theme.palette.text.primary,
+                        wordBreak: "break-word",
+                    }}
+                >
+                    {settings.cfg.formContact.title ||
+                        "Заполните форму, чтобы получить результаты теста"}
+                </Typography>
+                {settings.cfg.formContact.desc && (
+                    <Typography
+                        sx={{
+                            color: theme.palette.text.primary,
+                            m: "20px 0",
+                            fontSize: "18px",
+                            wordBreak: "break-word",
+                        }}
+                    >
+                        {settings.cfg.formContact.desc}
+                    </Typography>
+                )}
+            </Box>
+        </Box>
+    )
+}

lib/model/settingsData.ts

@@ -1,4 +1,4 @@
-import { AnyTypedQuizQuestion } from "./questionTypes/shared";
+import {AnyTypedQuizQuestion} from "./questionTypes/shared";
 
 export type QuizStartpageType = "standard" | "expanded" | "centered" | null;
 
@@ -41,18 +41,20 @@ export type FCField = {
   used: boolean;
 };
 
+export type QuizSettingsConfig = {
+  fp: boolean;
+  rep: boolean;
+  name: string;
+  lim: number;
+  due: number;
+  delay: number;
+  pausable: boolean;
+  cfg: QuizConfig;
+}
+
 export type QuizSettings = {
   questions: AnyTypedQuizQuestion[];
-  settings: {
+  settings: QuizSettingsConfig;
-    fp: boolean;
-    rep: boolean;
-    name: string;
-    lim: number;
-    due: number;
-    delay: number;
-    pausable: boolean;
-    cfg: QuizConfig;
-  };
   cnt: number;
   recentlyCompleted: boolean;
   show_badge: boolean;