дизайн модалки

src/pages/Landing/HeaderLanding.tsx

@@ -4,6 +4,7 @@ import Button from '@mui/material/Button';
 import SectionStyled from './SectionStyled';
 import PenaLogo from "../../ui_kit/PenaLogo";
 import NavMenuItem from "@ui_kit/Header/NavMenuItem";
+import { setIsContactFormOpen } from "../../stores/contactForm";
 
 const buttonMenu = ['Меню 1', 'Меню 2', 'Меню 3', 'Меню 4', 'Меню 5', 'Меню 1', 'Меню 2']
 
@@ -49,6 +50,7 @@ export default function Component() {
                 ))}
             </Box>
             <Button variant="outlined"
+                onClick={() => setIsContactFormOpen(true)}
                     sx={{
                         color: 'black',
                         border: '1px solid black',

src/pages/Landing/Hero.tsx

@@ -7,7 +7,6 @@ import abstraction from '../../assets/Quiz-main.png'
 import SectionStyled from './SectionStyled';
 import {styled} from "@mui/material/styles";
 import { Link, redirect } from 'react-router-dom';
-import { setIsContactFormOpen } from "../../stores/contactForm";
 
 export default function Component() {
     return(
@@ -48,7 +47,6 @@ export default function Component() {
                 </Box>
                     <Link to="/list" style={{textDecoration: "none"}}>
                 <Button variant="contained"
-                onClick={() => setIsContactFormOpen(true)}
                 >
                     Попробуйте бесплатно
                     

src/ui_kit/ContactForm.tsx

@@ -48,6 +48,7 @@ export default () => {
           pb: upMd ? "40px" : "30px",
           gap: "15px",
           borderRadius: "12px",
+            boxSizing: "border-box",
           "& .MuiFormHelperText-root.Mui-error, & .MuiFormHelperText-root.Mui-error.MuiFormHelperText-filled":
             {
               position: "absolute",
@@ -71,21 +72,27 @@ export default () => {
         </Box>
         <Typography
           sx={{
-            mt: "5px",
+            mt: "0px",
-            mb: upMd ? "10px" : "33px",
+            mb: upMd ? "13px" : "33px",
           }}
         >
           Предрегистрация
         </Typography>
+          <Typography
+              sx={{textAlign: "left",
+                  width: "100%",
+                  fontWeight: 500
+              }}
+          >E-mail</Typography>
         <TextField
                   value={mail}
                   onChange={(e) => setContactFormMailField(e.target.value)}
-                  placeholder="Имя"
+                  placeholder="username@penahaub.com"
                   name="name"
                   fullWidth
                   sx={{
-                    width: isMobile ? "266px" : "300px",
+                    width: isMobile ? "266px" : "100%",
-                    mt: "25px",
+                    // mt: "25px",
                     mb: "10px",
                     "& .MuiInputBase-root": {
                       backgroundColor: "#F2F3F7",
@@ -103,6 +110,7 @@ export default () => {
                   }}
                 />
         <Button
+            variant='contained'
           fullWidth
           onClick={handleSendForm}
           sx={{
@@ -119,8 +127,10 @@ export default () => {
         </Button>
         <Typography
           sx={{
-            mt: "5px",
+            mt: "16px",
             mb: upMd ? "10px" : "33px",
+              textAlign: "center",
+              maxWidth: "440px"
           }}
         >
         После запуска продукта вам придет сообщение