фк и результаты градиент поверх фотофона

lib/components/ViewPublicationPage/ContactForm.tsx

@@ -3,7 +3,16 @@ import EmailIcon from "@icons/ContactFormIcon/EmailIcon";
 import NameIcon from "@icons/ContactFormIcon/NameIcon";
 import PhoneIcon from "@icons/ContactFormIcon/PhoneIcon";
 import TextIcon from "@icons/ContactFormIcon/TextIcon";
-import { Box, Button, InputAdornment, Link, TextField as MuiTextField, TextFieldProps, Typography, useTheme } from "@mui/material";
+import {
+    Box,
+    Button,
+    InputAdornment,
+    Link,
+    TextField as MuiTextField,
+    TextFieldProps,
+    Typography,
+    useTheme
+} from "@mui/material";
 
 import CustomCheckbox from "@ui_kit/CustomCheckbox";
 import {FC, useRef, useState} from "react";
@@ -156,7 +165,7 @@ export const ContactForm = ({ currentQuestion, onShowResult }: Props) => {
                 msOverflowStyle: "none",
                 backgroundPosition: "center",
                 backgroundSize: "cover",
-                backgroundImage: settings.cfg.design
+                backgroundImage: settings.cfg.design && !isMobile
                     ? `url(${DESIGN_LIST[settings.cfg.theme]})`
                     : null,
             }}
@@ -168,6 +177,11 @@ export const ContactForm = ({ currentQuestion, onShowResult }: Props) => {
                     height: "100%",
                     minHeight: "100vh",
                     display: isWide && !isMobile ? "flex" : undefined,
+                    background: settings.cfg.design && !isMobile
+                        ? quizThemes[settings.cfg.theme].isLight
+                            ? "transparent"
+                            : "linear-gradient(90deg,#272626, transparent)"
+                        : theme.palette.background.default,
                 }}
             >
                 <Box
@@ -456,7 +470,8 @@ const CustomInput = ({ title, desc, Icon, onChange, id }: {
                 InputProps={{
                     startAdornment: (
                         <InputAdornment position="start">
-                            <Icon color="gray" backgroundColor={quizThemes[settings.cfg.theme].isLight ? "#F2F3F7" : "#F2F3F71A"} />
+                            <Icon color="gray"
+                                  backgroundColor={quizThemes[settings.cfg.theme].isLight ? "#F2F3F7" : "#F2F3F71A"}/>
                         </InputAdornment>
                     ),
                 }}

lib/components/ViewPublicationPage/ResultForm.tsx

@@ -36,26 +36,41 @@ export const ResultForm = ({ resultQuestion }: ResultFormProps) => {
                 height: "100%",
                 minHeight: "100vh",
                 width: "100%",
-                pt: "28px",
                 overflow: "auto",
                 backgroundColor: theme.palette.background.default,
                 backgroundPosition: "center",
                 backgroundSize: "cover",
-                backgroundImage: settings.cfg.design
+                backgroundImage: settings.cfg.design && !isMobile
                     ? `url(${DESIGN_LIST[settings.cfg.theme]})`
                     : null,
+
             }}
         >
             <Box
                 sx={{
                     display: "flex",
                     flexDirection: "column",
-                    alignItems: "start",
+                    justifyContent: "space-between",
-                    maxWidth: "844px",
+                    alignItems: "center",
-                    width:  "100%",
+                    pt: "30px",
-                    padding: isMobile ? "0 16px" : isTablet ? "0 78px" : undefined,
+                    width: "inherit",
+                    height: "inherit",
+                    background: settings.cfg.design
+                        ? quizThemes[settings.cfg.theme].isLight
+                            ? "transparent"
+                            : "linear-gradient(90deg,#272626, transparent)"
+                        : theme.palette.background.default,
                 }}
             >
+                <Box
+                    sx={{
+                        display: "flex",
+                        flexDirection: "column",
+                        alignItems: "flex-start",
+                        width: "100%",
+                        maxWidth: "844px",
+                        padding: isMobile ? "0 16px" : isTablet ? "0 78px" : undefined,
+                    }}>
                     {
                         !resultQuestion?.content.useImage && resultQuestion.content.video && (
                             <YoutubeEmbedIframe
@@ -125,6 +140,7 @@ export const ResultForm = ({ resultQuestion }: ResultFormProps) => {
                     }
                 </Box>
 
+
                 <Box width="100%">
                     <Box
                         sx={{
@@ -215,5 +231,6 @@ export const ResultForm = ({ resultQuestion }: ResultFormProps) => {
                     </Box>
                 </Box>
             </Box>
+        </Box>
     );
 };