фк и результаты приближены к макету

lib/assets/icons/ContactFormIcon/AddressIcon.tsx

@@ -2,17 +2,23 @@ import { Box } from "@mui/material";
 
 interface Props {
   color: string;
+  backgroundColor: string
 }
 
-export default function AddressIcon({ color }: Props) {
+export default function AddressIcon({ color, backgroundColor }: Props) {
   return (
     <Box
       sx={{
         // height: "38px",
-        // width: "45px",
+        // width: "24px",
         display: "flex",
         alignItems: "center",
         justifyContent: "center",
+        height: "58px",
+        width: "42px",
+        backgroundColor: {backgroundColor},
+        borderBottomLeftRadius: "12px",
+        borderTopLeftRadius: "12px",
       }}
     >
       <svg

lib/assets/icons/ContactFormIcon/EmailIcon.tsx

@@ -2,17 +2,23 @@ import { Box } from "@mui/material";
 
 interface Props {
   color: string;
+  backgroundColor: string
 }
 
-export default function EmailIcon({ color }: Props) {
+export default function EmailIcon({ color, backgroundColor }: Props) {
   return (
     <Box
       sx={{
         // height: "38px",
-        // width: "45px",
+        // width: "24px",
         display: "flex",
         alignItems: "center",
         justifyContent: "center",
+        height: "58px",
+        width: "42px",
+        backgroundColor: {backgroundColor},
+        borderBottomLeftRadius: "12px",
+        borderTopLeftRadius: "12px",
       }}
     >
       <svg

lib/assets/icons/ContactFormIcon/NameIcon.tsx

@@ -2,9 +2,10 @@ import { Box } from "@mui/material";
 
 interface Props {
   color: string;
+  backgroundColor: string
 }
 
-export default function NameIcon({ color }: Props) {
+export default function NameIcon({ color, backgroundColor }: Props) {
   return (
     <Box
       sx={{
@@ -13,6 +14,11 @@ export default function NameIcon({ color }: Props) {
         display: "flex",
         alignItems: "center",
         justifyContent: "center",
+        height: "58px",
+        width: "42px",
+        backgroundColor: {backgroundColor},
+        borderBottomLeftRadius: "12px",
+        borderTopLeftRadius: "12px",
       }}
     >
       <svg

lib/assets/icons/ContactFormIcon/PhoneIcon.tsx

@@ -2,23 +2,29 @@ import { Box } from "@mui/material";
 
 interface Props {
   color: string;
+  backgroundColor: string
 }
 
-export default function PhoneIcon({ color }: Props) {
+export default function PhoneIcon({ color, backgroundColor }: Props) {
   return (
     <Box
       sx={{
         // height: "38px",
-        // width: "45px",
+        // width: "24px",
         display: "flex",
         alignItems: "center",
         justifyContent: "center",
+        height: "58px",
+        width: "42px",
+        backgroundColor: {backgroundColor},
+        borderBottomLeftRadius: "12px",
+        borderTopLeftRadius: "12px",
       }}
     >
       <svg
-        width="15"
+        width="17"
-        height="15"
+        height="17"
-        viewBox="0 0 15 15"
+        viewBox="0 0 17 17"
         fill="none"
         xmlns="http://www.w3.org/2000/svg"
       >

lib/assets/icons/ContactFormIcon/TextIcon.tsx

@@ -2,9 +2,10 @@ import { Box } from "@mui/material";
 
 interface Props {
   color: string;
+  backgroundColor: string
 }
 
-export default function TextIcon({ color }: Props) {
+export default function TextIcon({ color, backgroundColor }: Props) {
   return (
     <Box
       sx={{
@@ -13,6 +14,11 @@ export default function TextIcon({ color }: Props) {
         display: "flex",
         alignItems: "center",
         justifyContent: "center",
+        height: "58px",
+        width: "42px",
+        backgroundColor: {backgroundColor},
+        borderBottomLeftRadius: "12px",
+        borderTopLeftRadius: "12px",
       }}
     >
       <svg

lib/components/ViewPublicationPage/ContactForm.tsx

@@ -180,31 +180,43 @@ export const ContactForm = ({ currentQuestion, onShowResult }: Props) => {
                         borderRight: isWide && !isMobile ? "1px solid gray" : undefined,
                     }}
                 >
-                    <Typography
+                    <Box
                         sx={{
-                            textAlign: "center",
+                            maxWidth: "630px",
-                            m: "20px 0",
+                            width: "100%",
-                            fontSize: "28px",
+                            display: "flex",
-                            color: theme.palette.text.primary,
+                            flexDirection: "column",
-                            wordBreak: "break-word"
+                            alignItems: "flex-start",
+                            justifyContent: "center",
+                            padding: isMobile ? "20px 20px 0 20px" : "0 0 0 40px"
                         }}
                     >
-                        {settings.cfg.formContact.title ||
-                            "Заполните форму, чтобы получить результаты теста"}
-                    </Typography>
-                    {settings.cfg.formContact.desc && (
                         <Typography
                             sx={{
-                                color: theme.palette.text.primary,
                                 textAlign: "center",
                                 m: "20px 0",
-                                fontSize: "18px",
+                                fontSize: "28px",
+                                color: theme.palette.text.primary,
                                 wordBreak: "break-word"
                             }}
                         >
-                            {settings.cfg.formContact.desc}
+                            {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
@@ -214,7 +226,7 @@ export const ContactForm = ({ currentQuestion, onShowResult }: Props) => {
                         justifyContent: "center",
                         flexDirection: "column",
                         backgroundColor: theme.palette.background.default,
-                        p: "30px",
+                        p: "0px 20px 30px 20px",
                     }}
                 >
                     <Box
@@ -348,7 +360,7 @@ const Inputs = ({
             onChange={({ target }) => setName(target.value)}
             id={name}
             title={FC["name"].innerText || "Введите имя"}
-            desc={FC["name"].text || "имя"}
+            desc={FC["name"].text || "Имя"}
             Icon={NameIcon}
         />
     );
@@ -366,7 +378,7 @@ const Inputs = ({
             onChange={({ target }) => setPhone(target.value)}
             id={phone}
             title={FC["phone"].innerText || "Введите номер телефона"}
-            desc={FC["phone"].text || "номер телефона"}
+            desc={FC["phone"].text || "Номер телефона"}
             Icon={PhoneIcon}
         />
     );
@@ -375,7 +387,7 @@ const Inputs = ({
             onChange={({ target }) => setText(target.value)}
             id={text}
             title={FC["text"].text || "Введите фамилию"}
-            desc={FC["text"].innerText || "фамилию"}
+            desc={FC["text"].innerText || "Фамилия"}
             Icon={TextIcon}
         />
     );
@@ -384,7 +396,7 @@ const Inputs = ({
             onChange={({ target }) => setAdress(target.value)}
             id={adress}
             title={FC["address"].innerText || "Введите адрес"}
-            desc={FC["address"].text || "адрес"}
+            desc={FC["address"].text || "Адрес"}
             Icon={AddressIcon}
         />
     );
@@ -414,12 +426,12 @@ const CustomInput = ({ title, desc, Icon, onChange, id }: {
     id: string;
     title: string;
     desc: string;
-    Icon: FC<{ color: string; }>;
+    Icon: FC<{ color: string; backgroundColor: string }>;
     onChange: TextFieldProps["onChange"];
 }) => {
     const theme = useTheme();
     const isMobile = useRootContainerSize() < 600;
-
+    const { settings } = useQuizData();
     return (
         <Box m="15px 0">
             <Typography mb="7px" color={theme.palette.text.primary}>
@@ -430,15 +442,21 @@ const CustomInput = ({ title, desc, Icon, onChange, id }: {
                 onChange={onChange}
                 sx={{
                     width: isMobile ? "300px" : "350px",
+                    backgroundColor: theme.palette.background.default,
                     "& .MuiOutlinedInput-notchedOutline": {
-                        borderColor: "#9A9AAF"
+                        borderColor: "#9A9AAF80",
+                        borderRadius: "12px"
+                    },
+                    "& .MuiInputBase-root": {
+                        paddingLeft: 0
                     }
+
                 }}
                 placeholder={desc}
                 InputProps={{
                     startAdornment: (
                         <InputAdornment position="start">
-                            <Icon color="gray" />
+                            <Icon color="gray" backgroundColor={quizThemes[settings.cfg.theme].isLight ? "#F2F3F7" : "#F2F3F71A"} />
                         </InputAdornment>
                     ),
                 }}

lib/components/ViewPublicationPage/ResultForm.tsx

@@ -170,12 +170,13 @@ export const ResultForm = ({ resultQuestion }: ResultFormProps) => {
 
                     <Box
                         sx={{
-                            boxShadow: "0 0 15px 0 rgba(0,0,0,.08)",
+                            // boxShadow: "0 0 15px 0 rgba(0,0,0,.08)",
                             width: "100%",
                             flexDirection: "column",
                             display: "flex",
                             justifyContent: "center",
                             alignItems: "center",
+                            border: "1px solid #9A9AAF80",
                             p: 
                             (
                                 settings.cfg.resultInfo.showResultForm === "before" &&

lib/components/ViewPublicationPage/ViewPublicationPage.tsx

@@ -64,7 +64,7 @@ export default function ViewPublicationPage() {
               sx={{
                 fontSize: "16px",
                 padding: "10px 15px",
-                color: "#FFFFFF",
+                color: "#9A9AAF",
                 border: "1px solid #9A9AAF",
                 background: "rgba(154,154,175, 0.2)",
                 "&:disabled": {