правки формы контактов по обновленному дизайну и мелочи

lib/assets/icons/ContactFormIcon/AddressIcon.tsx

@@ -9,13 +9,11 @@ export default function AddressIcon({ color, backgroundColor }: Props) {
   return (
     <Box
       sx={{
-        // height: "38px",
-        // width: "24px",
         display: "flex",
         alignItems: "center",
         justifyContent: "center",
         height: "58px",
-        width: "42px",
+        width: "45px",
         backgroundColor: {backgroundColor},
         borderBottomLeftRadius: "12px",
         borderTopLeftRadius: "12px",

lib/assets/icons/ContactFormIcon/EmailIcon.tsx

@@ -9,13 +9,11 @@ export default function EmailIcon({ color, backgroundColor }: Props) {
   return (
     <Box
       sx={{
-        // height: "38px",
-        // width: "24px",
         display: "flex",
         alignItems: "center",
         justifyContent: "center",
         height: "58px",
-        width: "42px",
+        width: "45px",
         backgroundColor: {backgroundColor},
         borderBottomLeftRadius: "12px",
         borderTopLeftRadius: "12px",

lib/assets/icons/ContactFormIcon/NameIcon.tsx

@@ -9,13 +9,11 @@ export default function NameIcon({ color, backgroundColor }: Props) {
   return (
     <Box
       sx={{
-        // height: "38px",
-        // width: "45px",
         display: "flex",
         alignItems: "center",
         justifyContent: "center",
         height: "58px",
-        width: "42px",
+        width: "45px",
         backgroundColor: {backgroundColor},
         borderBottomLeftRadius: "12px",
         borderTopLeftRadius: "12px",

lib/assets/icons/ContactFormIcon/PhoneIcon.tsx

@@ -9,13 +9,11 @@ export default function PhoneIcon({ color, backgroundColor }: Props) {
   return (
     <Box
       sx={{
-        // height: "38px",
-        // width: "24px",
         display: "flex",
         alignItems: "center",
         justifyContent: "center",
         height: "58px",
-        width: "42px",
+        width: "45px",
         backgroundColor: {backgroundColor},
         borderBottomLeftRadius: "12px",
         borderTopLeftRadius: "12px",

lib/assets/icons/ContactFormIcon/TextIcon.tsx

@@ -9,13 +9,11 @@ export default function TextIcon({ color, backgroundColor }: Props) {
   return (
     <Box
       sx={{
-        // height: "38px",
-        // width: "45px",
         display: "flex",
         alignItems: "center",
         justifyContent: "center",
         height: "58px",
-        width: "42px",
+        width: "45px",
         backgroundColor: {backgroundColor},
         borderBottomLeftRadius: "12px",
         borderTopLeftRadius: "12px",

lib/components/ViewPublicationPage/ContactForm.tsx

@@ -247,6 +247,7 @@ export const ContactForm = ({ currentQuestion, onShowResult }: Props) => {
             justifyContent: "center",
             borderRight: isMobile ? undefined : "1px solid #9A9AAF80",
             margin: isMobile ? 0 : "40px 0",
+            padding: isMobile ? "0" : "0 40px"
           }}
         >
           <Box
@@ -257,14 +258,14 @@ export const ContactForm = ({ currentQuestion, onShowResult }: Props) => {
               flexDirection: "column",
               alignItems: "flex-start",
               justifyContent: "center",
-              padding: isMobile ? "20px 20px 0 20px" : "0 0 0 40px",
+              padding: isMobile ? "40px 20px 0 20px" : "0",
+              mt: isMobile ? 0 : isTablet ? "-180px" : "-47px",
             }}
           >
             <Typography
               sx={{
                 textAlign: isTablet ? undefined : "center",
-                m: "20px 0",
+                fontSize: "24px",
-                fontSize: isTablet ? "24px" : "28px",
                 lineHeight: "normal",
                 fontWeight: 501,
                 color: theme.palette.text.primary,
@@ -292,18 +293,19 @@ export const ContactForm = ({ currentQuestion, onShowResult }: Props) => {
         <Box
           sx={{
             display: "flex",
-            alignItems: "center",
+            alignItems: isMobile ? undefined : "center",
             justifyContent: "center",
             flexDirection: "column",
             backgroundColor: theme.palette.background.default,
-            p: isMobile ? "40px" : "125px 60px 30px 60px",
+            p: isMobile ? "0 20px" : isTablet ? "0px 40px 30px 60px" : "125px 60px 30px 60px",
           }}
         >
           <Box
             sx={{
               display: "flex",
               flexDirection: "column",
-              my: "20px",
+              mt: isMobile ? "10px" : "20px",
+              mb: "20px"
             }}
           >
             <Inputs
@@ -319,30 +321,9 @@ export const ContactForm = ({ currentQuestion, onShowResult }: Props) => {
               setAdress={setAdress}
             />
           </Box>
-
-          {
-            // resultQuestion &&
-            // settings.cfg.resultInfo.when === "after" &&
-            <Button
-              disabled={!(ready && !fire)}
-              variant="contained"
-              onClick={handleShowResultsClick}
-              sx={{
-                border: `1px solid ${theme.palette.primary.main}`,
-                "&:disabled": {
-                  border: "1px solid #9A9AAF",
-                  color: "#9A9AAF",
-                },
-              }}
-            >
-              {settings.cfg.formContact?.button || "Получить результаты"}
-            </Button>
-          }
-
           <Box
             sx={{
               display: "flex",
-              mt: "20px",
               width: isMobile ? "300px" : "390px",
             }}
           >
@@ -353,8 +334,9 @@ export const ContactForm = ({ currentQuestion, onShowResult }: Props) => {
               }}
               checked={ready}
               colorIcon={theme.palette.primary.main}
+              sx={{marginRight: "0"}}
             />
-            <Typography sx={{ color: theme.palette.text.primary }}>
+            <Typography sx={{ color: theme.palette.text.primary, lineHeight: "18.96px" }} fontSize={"16px"} >
               С&ensp;
               <Link href={"https://shub.pena.digital/ppdd"} target="_blank">
                 Положением об обработке персональных данных{" "}
@@ -370,6 +352,28 @@ export const ContactForm = ({ currentQuestion, onShowResult }: Props) => {
               &ensp;ознакомлен
             </Typography>
           </Box>
+            {
+                // resultQuestion &&
+                // settings.cfg.resultInfo.when === "after" &&
+                <Button
+                    disabled={!(ready && !fire)}
+                    variant="contained"
+                    onClick={handleShowResultsClick}
+                    sx={{
+                        border: `1px solid ${theme.palette.primary.main}`,
+                        margin: isMobile ? "auto" : undefined,
+                        mt: "20px",
+                        p: "10px 20px",
+                        "&:disabled": {
+                            border: "1px solid #9A9AAF",
+                            color: "#9A9AAF",
+                        },
+
+                    }}
+                >
+                    {settings.cfg.formContact?.button || "Получить результаты"}
+                </Button>
+            }
           {show_badge && (
             <Box
               component={Link}
@@ -381,14 +385,17 @@ export const ContactForm = ({ currentQuestion, onShowResult }: Props) => {
                 display: "flex",
                 alignItems: "center",
                 mt: "55px",
-                mb: "50px",
+                mb: "40px",
-                gap: "15px",
+                gap: "10px",
                 textDecoration: "none",
+                position: "absolute",
+                bottom: 0,
+                left: isMobile ? "28%" : undefined
               }}
             >
               <NameplateLogo
                 style={{
-                  fontSize: "23px",
+                  fontSize: "20px",
                   color: quizThemes[settings.cfg.theme].isLight
                     ? "#151515"
                     : "#FFFFFF",
@@ -507,7 +514,7 @@ const CustomInput = ({ title, desc, Icon, onChange, mask }: InputProps) => {
 
   return (
     <Box m="10px 0">
-      <Typography mb="7px" color={theme.palette.text.primary}>
+      <Typography mb="7px" color={theme.palette.text.primary} fontSize={"16px"}>
         {title}
       </Typography>
 
@@ -515,8 +522,9 @@ const CustomInput = ({ title, desc, Icon, onChange, mask }: InputProps) => {
         inputRef={ref}
         onChange={onChange}
         sx={{
-          width: isMobile ? "300px" : "390px",
+          width: isMobile ? "100%" : "390px",
           backgroundColor: theme.palette.background.default,
+          fontSize: "16px",
           "& .MuiOutlinedInput-notchedOutline": {
             borderColor: "#9A9AAF80",
             borderRadius: "12px",
@@ -524,6 +532,9 @@ const CustomInput = ({ title, desc, Icon, onChange, mask }: InputProps) => {
           "& .MuiInputBase-root": {
             paddingLeft: 0,
           },
+            "& .MuiOutlinedInput-input": {
+                paddingLeft: "10px",
+            },
           "& .MuiOutlinedInput-root": {
             "&:hover fieldset": {
               borderColor: theme.palette.primary.main,

lib/components/ViewPublicationPage/ResultForm.tsx

@@ -75,17 +75,6 @@ export const ResultForm = ({ resultQuestion }: ResultFormProps) => {
             mb: "7px",
           }}
         >
-          {settings.cfg.startpage.logo && (
-            <img
-              src={settings.cfg.startpage.logo}
-              style={{
-                height: "40px",
-                maxWidth: "110px",
-                objectFit: "cover",
-              }}
-              alt=""
-            />
-          )}
           <Typography
             sx={{
               fontSize: "14px",
@@ -93,7 +82,7 @@ export const ResultForm = ({ resultQuestion }: ResultFormProps) => {
               wordBreak: "break-word",
             }}
           >
-            {settings.cfg.info.orgname}
+            Ваш результат:
           </Typography>
         </Box>
         <Box
@@ -138,9 +127,9 @@ export const ResultForm = ({ resultQuestion }: ResultFormProps) => {
             resultQuestion.description !== " " && (
               <Typography
                 sx={{
-                  fontSize: "23px",
+                  fontSize: "24px",
                   fontWeight: 700,
-                  m: "20px 0",
+                  mt: "25px",
                   color: theme.palette.text.primary,
                   wordBreak: "break-word",
                 }}
@@ -151,7 +140,7 @@ export const ResultForm = ({ resultQuestion }: ResultFormProps) => {
 
           <Typography
             sx={{
-              m: "20px 0",
+              mt: "20px",
               color: theme.palette.text.primary,
               wordBreak: "break-word",
             }}
@@ -164,7 +153,7 @@ export const ResultForm = ({ resultQuestion }: ResultFormProps) => {
               <Typography
                 sx={{
                   fontSize: "18px",
-                  m: "20px 0",
+                  mt: "30px ",
                   wordBreak: "break-word",
                   color: theme.palette.text.primary,
                 }}

lib/components/ViewPublicationPage/StartPageViewPublication/StartPageDesktop.tsx

@@ -176,7 +176,7 @@ const CenteredLayout = ({
         <Box
             sx={{
                 overflow: "auto",
-                padding: "10px 25px 25px",
+                padding: "25px 25px 25px",
                 display: "flex",
                 flexDirection: "column",
                 alignItems: "center",

lib/components/ViewPublicationPage/StartPageViewPublication/index.tsx

@@ -94,7 +94,7 @@ export const StartPageViewPublication = () => {
                 alignItems: "center",
                 flexWrap: settings.cfg.startpageType === "expanded" && settings.cfg.startpage.position === "center"? "nowrap" : "wrap",
                 gap:"30px",
-                mb: "7px",
+                mb: settings.cfg.startpageType === "centered" ? "25px" : "7px",
             }}
         >
             {settings.cfg.startpage.logo &&
@@ -163,13 +163,13 @@ export const StartPageViewPublication = () => {
                                                 ? "center"
                                                 : "start"
                                             : "start",
-                                marginTop: "28px",
+                                marginTop: settings.cfg.startpageType === "centered" ? "30px" : "5px",
                                 width:settings.cfg.startpageType === "expanded" && settings.cfg.startpage.position === "center" && !isMobile? "50%" : settings.cfg.startpageType === "centered" && !isMobile? "50%" : "100%",
                             }}
                         >
                             <Typography
                                 sx={{
-                                    fontWeight: "500",
+                                    fontWeight: "700",
                                     fontSize: "26px",
                                     fontStyle: "normal",
                                     fontStretch: "normal",
@@ -244,14 +244,14 @@ export const StartPageViewPublication = () => {
                                         : 0,
                                 gap: "20px",
                                 alignItems: "flex-end",
-                                justifyContent: settings.cfg.startpageType === "centered" && isMobile? "center" :"space-between",
+                                justifyContent: settings.cfg.startpageType === "centered" || settings.cfg.startpageType === "expanded" && settings.cfg.startpage.position === "center" && isMobile? "center" : "space-between",
                                 width: "100%",
-                                flexWrap: settings.cfg.startpageType === "expanded" && settings.cfg.startpage.position === "center"? "nowrap" :"wrap",
+                                flexWrap: settings.cfg.startpageType === "expanded" && settings.cfg.startpage.position === "center" ? isMobile ? "wrap-reverse" : "nowrap" : "wrap",
                             }}
                         >
-                            {settings.cfg.startpageType === "expanded" && settings.cfg.startpage.position === "center"&& !isMobile && quizHeaderBlock}
+                            {settings.cfg.startpageType === "expanded" && settings.cfg.startpage.position === "center" && !isMobile && quizHeaderBlock}
                             <Box sx={{ maxWidth: "300px",
-                                display: settings.cfg.startpageType === "centered" && isMobile? "flex" : "block",
+                                display: settings.cfg.startpageType === "centered" || settings.cfg.startpageType === "expanded" && settings.cfg.startpage.position === "center" && isMobile ? "flex" : "block",
                                 flexDirection: "column",
                                 alignItems: "center",
                                 order: settings.cfg.startpageType === "expanded" && settings.cfg.startpage.position === "center"? "2" : "0"}}>
@@ -346,7 +346,7 @@ export const StartPageViewPublication = () => {
                                     sx={{
                                         display: "flex",
                                         alignItems: "center",
-                                        gap: "15px",
+                                        gap: "7px",
                                         textDecoration: "none",
                                     }}
                                 >
@@ -363,7 +363,7 @@ export const StartPageViewPublication = () => {
                                     />
                                     <Typography
                                         sx={{
-                                            fontSize: "14px",
+                                            fontSize: "13px",
                                             color:
                                                 settings.cfg.startpageType === "expanded"
                                                     ? "#F5F7FF"