правки от дизайнера

lib/assets/icons/ContactFormIcon/EmailIcon.tsx

@@ -21,26 +21,11 @@ export default function EmailIcon({ color, backgroundColor }: Props) {
         borderTopLeftRadius: "12px",
       }}
     >
-      <svg
+        <svg width="17" height="18" viewBox="0 0 17 18" fill="none" xmlns="http://www.w3.org/2000/svg">
-        width="15"
+            <rect x="1" y="3" width="15" height="12" rx="3" stroke="#9A9AAF" strokeWidth="1.5"/>
-        height="15"
+            <path d="M4 6.75L7.3 9.225C8.01111 9.75833 8.98889 9.75833 9.7 9.225L13 6.75" stroke="#9A9AAF" strokeWidth="1.5" strokeLinecap="round" strokeLinejoin="round"/>
-        viewBox="0 0 15 15"
+        </svg>
-        fill="none"
+
-        xmlns="http://www.w3.org/2000/svg"
-      >
-        <path
-          d="M1.875 3.28125H13.125V11.25C13.125 11.3743 13.0756 11.4935 12.9877 11.5815C12.8998 11.6694 12.7806 11.7188 12.6562 11.7188H2.34375C2.21943 11.7188 2.1002 11.6694 2.01229 11.5815C1.92439 11.4935 1.875 11.3743 1.875 11.25V3.28125Z"
-          stroke={color}
-          strokeLinecap="round"
-          strokeLinejoin="round"
-        />
-        <path
-          d="M13.125 3.28125L7.5 8.4375L1.875 3.28125"
-          stroke={color}
-          strokeLinecap="round"
-          strokeLinejoin="round"
-        />
-      </svg>
     </Box>
   );
 }

lib/assets/icons/ContactFormIcon/NameIcon.tsx

@@ -21,31 +21,10 @@ export default function NameIcon({ color, backgroundColor }: Props) {
         borderTopLeftRadius: "12px",
       }}
     >
-      <svg
+        <svg width="17" height="18" viewBox="0 0 17 18" fill="none" xmlns="http://www.w3.org/2000/svg">
-        width="13"
+            <circle cx="2.97143" cy="2.97143" r="2.97143" transform="matrix(-1 0 0 1 11.4688 2.5)" stroke="#9A9AAF" strokeWidth="1.5"/>
-        height="13"
+            <path d="M3.29688 12.8526C3.29688 12.2135 3.69865 11.6433 4.30054 11.4284V11.4284C7.01416 10.4592 9.97959 10.4592 12.6932 11.4284V11.4284C13.2951 11.6433 13.6969 12.2135 13.6969 12.8526V13.8298C13.6969 14.7119 12.9156 15.3895 12.0424 15.2648L11.7512 15.2232C9.59262 14.9148 7.40113 14.9148 5.24252 15.2232L4.95137 15.2648C4.07814 15.3895 3.29688 14.7119 3.29688 13.8298V12.8526Z" stroke="#9A9AAF" strokeWidth="1.5"/>
-        viewBox="0 0 13 13"
+        </svg>
-        fill="none"
-        xmlns="http://www.w3.org/2000/svg"
-      >
-        <path
-          d="M6.5 8.375C8.57107 8.375 10.25 6.69607 10.25 4.625C10.25 2.55393 8.57107 0.875 6.5 0.875C4.42893 0.875 2.75 2.55393 2.75 4.625C2.75 6.69607 4.42893 8.375 6.5 8.375Z"
-          stroke={color}
-          strokeMiterlimit="10"
-        />
-        <path
-          d="M0.8125 11.6568C1.38844 10.659 2.21689 9.83044 3.21458 9.25436C4.21227 8.67828 5.34403 8.375 6.49609 8.375C7.64816 8.375 8.77992 8.67828 9.77761 9.25436C10.7753 9.83044 11.6037 10.659 12.1797 11.6568"
-          stroke={color}
-          strokeLinecap="round"
-          strokeLinejoin="round"
-        />
-        <path
-          d="M0.765625 11.6914H11.9866"
-          stroke={color}
-          strokeLinecap="round"
-          strokeLinejoin="round"
-        />
-      </svg>
     </Box>
   );
 }

lib/assets/icons/ContactFormIcon/PhoneIcon.tsx

@@ -21,20 +21,9 @@ export default function PhoneIcon({ color, backgroundColor }: Props) {
         borderTopLeftRadius: "12px",
       }}
     >
-      <svg
+        <svg width="17" height="18" viewBox="0 0 17 18" fill="none" xmlns="http://www.w3.org/2000/svg">
-        width="17"
+            <path d="M13.6893 15.0369C12.2537 16.4725 8.57727 15.1236 5.47772 12.024C2.37818 8.9245 1.02926 5.24806 2.46484 3.81247L3.41006 2.86725C4.06259 2.21472 5.13781 2.23197 5.81163 2.90578L7.27569 4.36984C7.9495 5.04365 7.96675 6.11888 7.31421 6.77141L7.11119 6.97443C6.75888 7.32675 6.72441 7.8951 7.05178 8.29181C7.36754 8.67446 7.70796 9.0556 8.07707 9.4247C8.44617 9.7938 8.82731 10.1342 9.20996 10.45C9.60666 10.7774 10.175 10.7429 10.5273 10.3906L10.7304 10.1875C11.3829 9.53501 12.4581 9.55226 13.1319 10.2261L14.596 11.6901C15.2698 12.364 15.287 13.4392 14.6345 14.0917L13.6893 15.0369Z" stroke="#9A9AAF" strokeWidth="1.5"/>
-        height="17"
+        </svg>
-        viewBox="0 0 17 17"
-        fill="none"
-        xmlns="http://www.w3.org/2000/svg"
-      >
-        <path
-          d="M5.41992 7.31237C5.90228 8.30847 6.70774 9.11187 7.70508 9.59166C7.77865 9.6265 7.86002 9.64157 7.94118 9.63541C8.02235 9.62925 8.10051 9.60205 8.16797 9.55651L9.63281 8.57799C9.69753 8.5341 9.77232 8.50731 9.85019 8.50014C9.92806 8.49297 10.0065 8.50564 10.0781 8.53698L12.8203 9.71471C12.914 9.75372 12.9923 9.82245 13.0432 9.91033C13.094 9.9982 13.1145 10.1004 13.1016 10.201C13.0146 10.8794 12.6835 11.5029 12.1702 11.9547C11.6568 12.4066 10.9964 12.656 10.3125 12.6561C8.19906 12.6561 6.17217 11.8166 4.67774 10.3221C3.18331 8.82769 2.34375 6.80081 2.34375 4.68737C2.3439 4.00346 2.59325 3.34304 3.04513 2.82968C3.49701 2.31633 4.12047 1.98522 4.79883 1.8983C4.89951 1.88537 5.00166 1.90589 5.08954 1.95671C5.17741 2.00754 5.24615 2.08583 5.28516 2.17955L6.46289 4.9276C6.49352 4.99812 6.50633 5.07508 6.5002 5.15172C6.49407 5.22835 6.46918 5.3023 6.42773 5.36705L5.44922 6.85534C5.40565 6.92265 5.38009 7.00001 5.37496 7.08003C5.36983 7.16005 5.38531 7.24004 5.41992 7.31237V7.31237Z"
-          stroke={color}
-          strokeLinecap="round"
-          strokeLinejoin="round"
-        />
-      </svg>
     </Box>
   );
 }

lib/assets/icons/questionsPage/FlagIcon.tsx

@@ -2,22 +2,23 @@ import { Box } from "@mui/material";
 
 interface Props {
   color: string;
+  width?: number;
 }
 
-export default function FlagIcon({ color }: Props) {
+export default function FlagIcon({ color, width = 30 }: Props) {
   return (
     <Box
       sx={{
         height: "30px",
-        width: "30px",
+        width: width + "px",
         display: "flex",
         alignItems: "center",
         justifyContent: "center",
       }}
     >
       <svg
-        width="32"
+        width={width}
-        height="32"
+        height={width}
         viewBox="0 0 32 32"
         fill="none"
         xmlns="http://www.w3.org/2000/svg"

lib/assets/icons/questionsPage/hashtagIcon.tsx

@@ -2,22 +2,23 @@ import { Box } from "@mui/material";
 
 interface Props {
   color: string;
+  width?: number;
 }
 
-export default function HashtagIcon({ color }: Props) {
+export default function HashtagIcon({ color, width = 30, }: Props) {
   return (
     <Box
       sx={{
         height: "30px",
-        width: "30px",
+        width: width + "px",
         display: "flex",
         alignItems: "center",
         justifyContent: "center",
       }}
     >
       <svg
-        width="32"
+        width={width}
-        height="32"
+        height={width}
         viewBox="0 0 32 32"
         fill="none"
         xmlns="http://www.w3.org/2000/svg"

lib/assets/icons/questionsPage/heartIcon.tsx

@@ -2,22 +2,23 @@ import { Box } from "@mui/material";
 
 interface Props {
   color: string;
+  width: number
 }
 
-export default function HeartIcon({ color }: Props) {
+export default function HeartIcon({ color, width }: Props) {
   return (
     <Box
       sx={{
         height: "30px",
-        width: "30px",
+        width: width + "px",
         display: "flex",
         alignItems: "center",
         justifyContent: "center",
       }}
     >
       <svg
-        width="32"
+        width={width}
-        height="32"
+        height={width}
         viewBox="0 0 32 32"
         fill="none"
         xmlns="http://www.w3.org/2000/svg"

lib/assets/icons/questionsPage/lightbulbIcon.tsx

@@ -2,22 +2,23 @@ import { Box } from "@mui/material";
 
 interface Props {
   color: string;
+  width: number
 }
 
-export default function LightbulbIcon({ color }: Props) {
+export default function LightbulbIcon({ color , width }: Props) {
   return (
     <Box
       sx={{
         height: "30px",
-        width: "30px",
+        width: width + "px",
         display: "flex",
         alignItems: "center",
         justifyContent: "center",
       }}
     >
       <svg
-        width="32"
+        width={width}
-        height="32"
+        height={width}
         viewBox="0 0 32 32"
         fill="none"
         xmlns="http://www.w3.org/2000/svg"

lib/assets/icons/questionsPage/likeIcon.tsx

@@ -2,22 +2,23 @@ import { Box } from "@mui/material";
 
 interface Props {
   color: string;
+  width: number
 }
 
-export default function LikeIcon({ color }: Props) {
+export default function LikeIcon({ color, width }: Props) {
   return (
     <Box
       sx={{
         height: "30px",
-        width: "30px",
+        width: width + "px",
         display: "flex",
         alignItems: "center",
         justifyContent: "center",
       }}
     >
       <svg
-        width="40"
+        width={width}
-        height="40"
+        height={width}
         viewBox="0 0 40 40"
         fill="none"
         xmlns="http://www.w3.org/2000/svg"

lib/assets/icons/questionsPage/tropfyIcon.tsx

@@ -2,22 +2,23 @@ import { Box } from "@mui/material";
 
 interface Props {
   color: string;
+  width: number
 }
 
-export default function TropfyIcon({ color }: Props) {
+export default function TropfyIcon({ color, width }: Props) {
   return (
     <Box
       sx={{
         height: "30px",
-        width: "30px",
+        width: width + "px",
         display: "flex",
         alignItems: "center",
         justifyContent: "center",
       }}
     >
       <svg
-        width="32"
+        width={width}
-        height="32"
+        height={width}
         viewBox="0 0 32 32"
         fill="none"
         xmlns="http://www.w3.org/2000/svg"

lib/components/ViewPublicationPage/ContactForm.tsx

@@ -50,6 +50,7 @@ export const ContactForm = ({currentQuestion, onShowResult}: Props) => {
     const fireOnce = useRef(true);
     const [fire, setFire] = useState(false);
     const isMobile = useRootContainerSize() < 850;
+    const isTablet = useRootContainerSize() < 1000;
 
     const resultQuestion = currentQuestion.type === "result"
         ? currentQuestion
@@ -191,7 +192,8 @@ export const ContactForm = ({currentQuestion, onShowResult}: Props) => {
                         flexDirection: "column",
                         alignItems: "center",
                         justifyContent: "center",
-                        borderRight: isWide && !isMobile ? "1px solid gray" : undefined,
+                        borderRight: isWide && !isMobile ? "1px solid #9A9AAF80" : undefined,
+                        margin: isMobile ? 0 : "40px 0"
                     }}
                 >
                     <Box
@@ -207,9 +209,11 @@ export const ContactForm = ({currentQuestion, onShowResult}: Props) => {
                     >
                         <Typography
                             sx={{
-                                textAlign: "center",
+                                textAlign: isTablet ? undefined : "center",
                                 m: "20px 0",
-                                fontSize: "28px",
+                                fontSize: isTablet ? "24px" : "28px",
+                                lineHeight: "normal",
+                                fontWeight: 501,
                                 color: theme.palette.text.primary,
                                 wordBreak: "break-word"
                             }}
@@ -240,7 +244,7 @@ export const ContactForm = ({currentQuestion, onShowResult}: Props) => {
                         justifyContent: "center",
                         flexDirection: "column",
                         backgroundColor: theme.palette.background.default,
-                        p: "0px 20px 30px 20px",
+                        p: isMobile ? "40px" : "125px 60px 30px 60px",
                     }}
                 >
                     <Box
@@ -287,7 +291,7 @@ export const ContactForm = ({currentQuestion, onShowResult}: Props) => {
                         sx={{
                             display: "flex",
                             mt: "20px",
-                            width: isMobile ? "300px" : "450px",
+                            width: isMobile ? "300px" : "390px",
                         }}
                     >
                         <CustomCheckbox
@@ -322,7 +326,8 @@ export const ContactForm = ({currentQuestion, onShowResult}: Props) => {
                         sx={{
                             display: "flex",
                             alignItems: "center",
-                            mt: "20px",
+                            mt: "55px",
+                            mb: "50px",
                             gap: "15px",
                             textDecoration: "none",
                         }}
@@ -368,7 +373,7 @@ const Inputs = ({
     const FC = settings.cfg.formContact.fields;
 
     if (!FC) return null;
-
+    console.log(email)
     const Name = (
         <CustomInput
             onChange={({target}) => setName(target.value)}
@@ -380,7 +385,7 @@ const Inputs = ({
     );
     const Email = (
         <CustomInput
-            onChange={({target}) => setEmail(target.value)}
+            onChange={({target}) => setEmail(target.value.replaceAll(/\s/g, ''))}
             id={email}
             title={FC["email"].innerText || "Введите Email"}
             desc={FC["email"].text || "Email"}
@@ -447,7 +452,7 @@ const CustomInput = ({title, desc, Icon, onChange, id}: {
     const isMobile = useRootContainerSize() < 600;
     const {settings} = useQuizData();
     return (
-        <Box m="15px 0">
+        <Box m="10px 0">
             <Typography mb="7px" color={theme.palette.text.primary}>
                 {title}
             </Typography>
@@ -455,7 +460,7 @@ const CustomInput = ({title, desc, Icon, onChange, id}: {
             <TextField
                 onChange={onChange}
                 sx={{
-                    width: isMobile ? "300px" : "350px",
+                    width: isMobile ? "300px" : "390px",
                     backgroundColor: theme.palette.background.default,
                     "& .MuiOutlinedInput-notchedOutline": {
                         borderColor: "#9A9AAF80",
@@ -463,6 +468,11 @@ const CustomInput = ({title, desc, Icon, onChange, id}: {
                     },
                     "& .MuiInputBase-root": {
                         paddingLeft: 0
+                    },
+                    '& .MuiOutlinedInput-root': {
+                        '&:hover fieldset': {
+                            borderColor: theme.palette.primary.main,
+                        },
                     }
 
                 }}

lib/components/ViewPublicationPage/Footer.tsx

@@ -23,7 +23,7 @@ export const Footer = ({ stepNumber, nextButton, prevButton }: FooterProps) => {
       sx={{
         position: "relative",
         padding: "15px 0",
-        borderTop: `1px solid ${theme.palette.grey[400]}`,
+        borderTop: `1px solid #9A9AAF80`,
         height: "75px",
         display: "flex",
         background: settings.cfg.design

lib/components/ViewPublicationPage/Question.tsx

@@ -92,40 +92,49 @@ export const Question = ({
               ? "transparent"
               : "linear-gradient(90deg,#272626, transparent)"
             : theme.palette.background.default,
+          overflow: "hidden"
         }}
       >
         <Box
-          sx={{
+            sx={{
-            height: "calc(100% - 75px)",
+              height: "calc(100vh - 75px)",
-            width: "100%",
+              overflow: "auto",
-            minHeight: "calc(100vh - 75px)",
+              width: "100%"
-            maxWidth: "1440px",
+            }}
-            padding: "40px 25px 20px",
-            margin: "0 auto",
-            overflow: "auto",
-            display: "flex",
-            flexDirection: "column",
-            justifyContent: "space-between",
-          }}
         >
-          <QuestionByType
+          <Box
-            key={currentQuestion.id}
+              sx={{
-            question={currentQuestion}
+                // height: "calc(100% - 75px)",
-            stepNumber={currentQuestionStepNumber}
+                width: "100%",
-          />
+                minHeight: "calc(100vh - 75px)",
-          {show_badge && (
+                maxWidth: "1440px",
-            <Link target="_blank" href="https://quiz.pena.digital" sx={{mt: "20px"}}>
+                padding: "40px 25px 20px",
-              {quizThemes[settings.cfg.theme].isLight ? (
+                margin: "0 auto",
-                <NameplateLogoFQ
+                //overflow: "auto",
-                  style={{ fontSize: "34px", width: "200px", height: "auto" }}
+                display: "flex",
-                />
+                flexDirection: "column",
-              ) : (
+                justifyContent: "space-between",
-                <NameplateLogoFQDark
+              }}
-                  style={{ fontSize: "34px", width: "200px", height: "auto" }}
+          >
-                />
+            <QuestionByType
-              )}
+                key={currentQuestion.id}
-            </Link>
+                question={currentQuestion}
-          )}
+                stepNumber={currentQuestionStepNumber}
+            />
+            {show_badge && (
+                <Link target="_blank" href="https://quiz.pena.digital" sx={{mt: "20px", textAlign: "end"}}>
+                  {quizThemes[settings.cfg.theme].isLight ? (
+                      <NameplateLogoFQ
+                          style={{ fontSize: "34px", width: "200px", height: "auto" }}
+                      />
+                  ) : (
+                      <NameplateLogoFQDark
+                          style={{ fontSize: "34px", width: "200px", height: "auto" }}
+                      />
+                  )}
+                </Link>
+            )}
+          </Box>
         </Box>
         <Footer
           stepNumber={currentQuestionStepNumber}

lib/components/ViewPublicationPage/ResultForm.tsx

@@ -125,10 +125,11 @@ export const ResultForm = ({resultQuestion}: ResultFormProps) => {
                                 sx={{
                                     width: "100%",
                                     maxWidth: "844px",
-                                    height: spec ? "auto" : isMobile ? "100%" : "306px",
+                                    height: spec ? "auto" : isMobile ? "236px" : "306px",
-                                    borderRadius: "8px"
+                                    borderRadius: "8px",
+                                    objectFit: "contain",
                                 }}
-                            ></Box>
+                            />
                         )
                     }
                     {resultQuestion.description !== "" &&
@@ -196,7 +197,7 @@ export const ResultForm = ({resultQuestion}: ResultFormProps) => {
                                 mt: "15px",
                                 gap: "10px",
                                 textDecoration: "none",
-                                mb: "5px"
+                                mb: "15px"
                             }}
                         >
                             <NameplateLogo

lib/components/ViewPublicationPage/ViewPublicationPage.tsx

@@ -1,4 +1,4 @@
-import { Button, ThemeProvider } from "@mui/material";
+import {Button, ThemeProvider, useTheme} from "@mui/material";
 import { useQuizViewStore } from "@stores/quizView";
 import { useQuestionFlowControl } from "@utils/hooks/useQuestionFlowControl";
 import { useQuizData } from "@contexts/QuizDataContext";
@@ -10,6 +10,8 @@ import { ContactForm } from "./ContactForm";
 import { Question } from "./Question";
 import { ResultForm } from "./ResultForm";
 import { StartPageViewPublication } from "./StartPageViewPublication";
+import PrevButton from "./tools/PrevButton";
+import NextButton from "./tools/NextButton";
 
 export default function ViewPublicationPage() {
   const { settings, recentlyCompleted } = useQuizData();
@@ -57,35 +59,8 @@ export default function ViewPublicationPage() {
         <Question
           currentQuestion={currentQuestion}
           currentQuestionStepNumber={currentQuestionStepNumber}
-          prevButton={
+          prevButton={ <PrevButton isPreviousButtonEnabled={isPreviousButtonEnabled} moveToPrevQuestion={moveToPrevQuestion}/>}
-            <Button
+          nextButton={<NextButton isNextButtonEnabled={isNextButtonEnabled} moveToNextQuestion={moveToNextQuestion}/>}
-              disabled={!isPreviousButtonEnabled}
-              variant="contained"
-              sx={{
-                fontSize: "16px",
-                padding: "10px 15px",
-                color: "#9A9AAF",
-                border: "1px solid #9A9AAF",
-                background: "rgba(154,154,175, 0.2)",
-                "&:disabled": {
-                  color: "#9A9AAF",
-                },
-              }}
-              onClick={moveToPrevQuestion}
-            >
-              {isMobileMini ? "←" : "← Назад"}
-            </Button>
-          }
-          nextButton={
-            <Button
-              disabled={!isNextButtonEnabled}
-              variant="contained"
-              sx={{ fontSize: "16px", padding: "10px 15px" }}
-              onClick={moveToNextQuestion}
-            >
-              Далее →
-            </Button>
-          }
         />
       );
       break;

lib/components/ViewPublicationPage/questions/Date.tsx

@@ -96,7 +96,7 @@ export const Date = ({ currentQuestion }: DateProps) => {
                 : theme.palette.background.default,
               borderRadius: "10px",
               maxWidth: "250px",
-              pr: "22px",
+              pr: "30px",
               "& input": {
                 py: "11px",
                 pl: "20px",

lib/components/ViewPublicationPage/questions/Emoji.tsx

@@ -70,7 +70,7 @@ export const Emoji = ({ currentQuestion }: EmojiProps) => {
         >
           {currentQuestion.content.variants.map((variant, index) => (
             <FormControl
-              key={variant.id}
+              key={index}
               disabled={isSending}
               sx={{
                 borderRadius: "12px",
@@ -83,11 +83,51 @@ export const Emoji = ({ currentQuestion }: EmojiProps) => {
                 maxWidth: "317px",
                 width: "100%",
                 height: "255px",
-                background: settings.cfg.design
+                background: settings.cfg.design && !quizThemes[settings.cfg.theme].isLight
-                  ? quizThemes[settings.cfg.theme].isLight
+                    ? "rgba(255,255,255, 0.3)" : settings.cfg.design && quizThemes[settings.cfg.theme].isLight || quizThemes[settings.cfg.theme].isLight
-                    ? "#F2F3F7"
+                        ? "#FFFFFF"
-                    : "rgba(154,154,175, 0.2)"
+                        : "transparent",
-                  : "transparent",
+                "&:hover": {borderColor: theme.palette.primary.main},
+              }}
+              // value={index}
+              onClick={async (event) => {
+                event.preventDefault();
+                if (isSending) return;
+
+                setIsSending(true);
+                try {
+                  await sendAnswer({
+                    questionId: currentQuestion.id,
+                    body:
+                        currentQuestion.content.variants[index].extendedText +
+                        " " +
+                        currentQuestion.content.variants[index].answer,
+                    qid: quizId,
+                  });
+
+                  updateAnswer(
+                      currentQuestion.id,
+                      currentQuestion.content.variants[index].id,
+                      currentQuestion.content.variants[index].points || 0
+                  );
+                } catch (e) {
+                  enqueueSnackbar("ответ не был засчитан");
+                }
+
+                if (answer === currentQuestion.content.variants[index].id) {
+                  deleteAnswer(currentQuestion.id);
+                  try {
+                    await sendAnswer({
+                      questionId: currentQuestion.id,
+                      body: "",
+                      qid: quizId,
+                    });
+                  } catch (e) {
+                    enqueueSnackbar("ответ не был засчитан");
+                  }
+                }
+
+                setIsSending(false);
               }}
             >
               <Box
@@ -96,6 +136,7 @@ export const Emoji = ({ currentQuestion }: EmojiProps) => {
                   alignItems: "center",
                   height: "193px",
                   background: "#ffffff",
+                  cursor: "pointer"
                 }}
               >
                 <Box
@@ -141,51 +182,17 @@ export const Emoji = ({ currentQuestion }: EmojiProps) => {
                   }
                 }}
                 value={index}
-                 onClick={async (event) => {
-                  event.preventDefault();
-                  if (isSending) return;
-
-                  setIsSending(true);
-                  try {
-                    await sendAnswer({
-                      questionId: currentQuestion.id,
-                      body:
-                        currentQuestion.content.variants[index].extendedText +
-                        " " +
-                        currentQuestion.content.variants[index].answer,
-                      qid: quizId,
-                    });
-
-                    updateAnswer(
-                      currentQuestion.id,
-                      currentQuestion.content.variants[index].id,
-                      currentQuestion.content.variants[index].points || 0
-                    );
-                  } catch (e) {
-                    enqueueSnackbar("ответ не был засчитан");
-                  }
-
-                  if (answer === currentQuestion.content.variants[index].id) {
-                    deleteAnswer(currentQuestion.id);
-                    try {
-                      await sendAnswer({
-                        questionId: currentQuestion.id,
-                        body: "",
-                        qid: quizId,
-                      });
-                    } catch (e) {
-                      enqueueSnackbar("ответ не был засчитан");
-                    }
-                  }
-
-                  setIsSending(false);
-                }}
                 control={
                   <Radio
                     checkedIcon={
                       <RadioCheck color={theme.palette.primary.main} />
                     }
                     icon={<RadioIcon />}
+                    sx={{
+                      position: "absolute",
+                      top: "-162px",
+                      right: "12px",
+                    }}
                   />
                 }
                 label={

lib/components/ViewPublicationPage/questions/Images.tsx

@@ -74,16 +74,16 @@ export const Images = ({ currentQuestion }: ImagesProps) => {
               key={index}
               sx={{
                 cursor: "pointer",
-                borderRadius: "5px",
+                borderRadius: "12px",
                 border: `1px solid`,
                 borderColor:
                   answer === variant.id
                     ? theme.palette.primary.main
                     : "#9A9AAF",
-                background: settings.cfg.design
+                  "&:hover": {borderColor: theme.palette.primary.main},
-                  ? quizThemes[settings.cfg.theme].isLight
+                  background: settings.cfg.design && !quizThemes[settings.cfg.theme].isLight
+                  ? "rgba(255,255,255, 0.3)" : settings.cfg.design && quizThemes[settings.cfg.theme].isLight || quizThemes[settings.cfg.theme].isLight
                     ? "#FFFFFF"
-                    : "rgba(154,154,175, 0.2)"
                   : "transparent",
               }}
               onClick={async (event) => {
@@ -133,6 +133,7 @@ export const Images = ({ currentQuestion }: ImagesProps) => {
                         width: "100%",
                         height: "100%",
                         objectFit: "cover",
+                        borderRadius: "12px 12px 0 0"
                       }}
                     />
                   )}
@@ -149,6 +150,7 @@ export const Images = ({ currentQuestion }: ImagesProps) => {
                   display: "flex",
                   alignItems:
                     variant.answer.length <= 60 ? "center" : "flex-start",
+                  justifyContent: "center",
                   position: "relative",
                   height: "80px",
                   "& .MuiFormControlLabel-label": {
@@ -156,7 +158,6 @@ export const Images = ({ currentQuestion }: ImagesProps) => {
                     height: variant.answer.length <= 60 ? undefined : "60px",
                     overflow: "auto",
                     lineHeight: "normal",
-                    paddingLeft: "45px",
                     "&::-webkit-scrollbar": {
                       width: "4px",
                     },
@@ -172,6 +173,11 @@ export const Images = ({ currentQuestion }: ImagesProps) => {
                       <RadioCheck color={theme.palette.primary.main} />
                     }
                     icon={<RadioIcon />}
+                    sx={{
+                        position: "absolute",
+                        top: "-297px",
+                        right: 0
+                    }}
                   />
                 }
                 label={variant.answer}

lib/components/ViewPublicationPage/questions/Number.tsx

@@ -375,7 +375,7 @@ export const Number = ({ currentQuestion }: NumberProps) => {
           width: "100%",
           marginTop: "20px",
           gap: "30px",
-          paddingRight: isMobile ? "10px" : undefined,
+          padding:  "0 30px",
         }}
       >
         <CustomSlider
@@ -396,6 +396,9 @@ export const Number = ({ currentQuestion }: NumberProps) => {
             color: theme.palette.primary.main,
             "& .MuiSlider-valueLabel": {
               background: theme.palette.primary.main,
+              borderRadius: "8px",
+              minWidth: "60px",
+              height: "36px"
             },
           }}
         />

lib/components/ViewPublicationPage/questions/Rating.tsx

@@ -29,31 +29,31 @@ type RatingProps = {
 const buttonRatingForm = [
     {
         name: "star",
-        icon: (color: string) => <StarIconMini width={50} color={color} />,
+        icon: (color: string, width: number) => <StarIconMini width={width} color={color} />,
     },
     {
         name: "trophie",
-        icon: (color: string) => <TropfyIcon color={color} />,
+        icon: (color: string, width: number) => <TropfyIcon width={width} color={color} />,
     },
     {
         name: "flag",
-        icon: (color: string) => <FlagIcon color={color} />,
+        icon: (color: string, width: number) => <FlagIcon width={width} color={color} />,
     },
     {
         name: "heart",
-        icon: (color: string) => <HeartIcon color={color} />,
+        icon: (color: string, width: number) => <HeartIcon width={width} color={color} />,
     },
     {
         name: "like",
-        icon: (color: string) => <LikeIcon color={color} />,
+        icon: (color: string, width: number) => <LikeIcon width={width} color={color} />,
     },
     {
         name: "bubble",
-        icon: (color: string) => <LightbulbIcon color={color} />,
+        icon: (color: string, width: number) => <LightbulbIcon width={width} color={color} />,
     },
     {
         name: "hashtag",
-        icon: (color: string) => <HashtagIcon color={color} />,
+        icon: (color: string, width: number) => <HashtagIcon width={width} color={color} />,
     },
 ];
 
@@ -62,6 +62,7 @@ export const Rating = ({ currentQuestion }: RatingProps) => {
     const { answers } = useQuizViewStore();
     const theme = useTheme();
     const isMobile = useRootContainerSize() < 650;
+    const isTablet = useRootContainerSize() < 750;
     const [isSending, setIsSending] = useState<boolean>(false);
     const { answer } =
         answers.find(
@@ -118,8 +119,8 @@ export const Rating = ({ currentQuestion }: RatingProps) => {
                             "& .MuiRating-root.Mui-disabled": {opacity: "1!important"}
                         }}
                         max={currentQuestion.content.steps}
-                        icon={form?.icon(theme.palette.primary.main)}
+                        icon={form?.icon(theme.palette.primary.main, isMobile ? 30 : isTablet ? 40 : 50)}
-                        emptyIcon={form?.icon("#9A9AAF")}
+                        emptyIcon={form?.icon("#9A9AAF", isMobile ? 30 : isTablet ? 40 : 50)}
                     />
                 </Box>
                 <Box

lib/components/ViewPublicationPage/questions/Select.tsx

@@ -52,7 +52,7 @@ export const Select = ({ currentQuestion }: SelectProps) => {
               background: settings.cfg.design
                 ? quizThemes[settings.cfg.theme].isLight
                   ? "#F2F3F7"
-                  : "rgba(154,154,175, 0.2)"
+                  : "rgba(255,255,255, 0.3)"
                 : "transparent",
             },
           }}

lib/components/ViewPublicationPage/questions/Text.tsx

@@ -155,7 +155,7 @@ const TextNormal = ({ currentQuestion, answer, inputHC }: Props) => {
               background: settings.cfg.design
                 ? quizThemes[settings.cfg.theme].isLight
                   ? "#F2F3F7"
-                  : "rgba(154,154,175, 0.2)"
+                  : "rgba(255,255,255, 0.3)"
                 : "transparent",
             },
             "& .MuiOutlinedInput-notchedOutline": {

lib/components/ViewPublicationPage/questions/Variant.tsx

@@ -178,7 +178,7 @@ const VariantItem = ({
         backgroundColor: settings.cfg.design
           ? quizThemes[settings.cfg.theme].isLight
             ? "#FFFFFF"
-            : "rgba(154,154,175, 0.2)"
+            : "rgba(255,255,255, 0.3)"
           : quizThemes[settings.cfg.theme].isLight
           ? "white"
           : theme.palette.background.default,
@@ -187,6 +187,7 @@ const VariantItem = ({
         maxHeight: "85px",
         justifyContent: "space-between",
         width: "100%",
+        "&:hover": {borderColor: theme.palette.primary.main},
         "&.MuiFormControl-root": {
           width: "100%",
         },

lib/components/ViewPublicationPage/questions/Varimg.tsx

@@ -51,7 +51,7 @@ export const Varimg = ({ currentQuestion }: VarimgProps) => {
           display: "flex",
           marginTop: "20px",
           flexDirection: isMobile ? "column-reverse" : undefined,
-          gap: isMobile ? "30px" : undefined,
+          gap: "30px",
           alignItems: isMobile ? "center" : undefined,
         }}
       >
@@ -67,8 +67,6 @@ export const Varimg = ({ currentQuestion }: VarimgProps) => {
             justifyContent: "space-between",
             flexBasis: "100%",
             width: isMobile ? "100%" : undefined,
-
-              //"&:focus": {color: theme.palette.text.primary }
           }}
         >
           <Box
@@ -76,7 +74,7 @@ export const Varimg = ({ currentQuestion }: VarimgProps) => {
               display: "flex",
               flexDirection: "column",
               width: "100%",
-              gap: isMobile ? "20px" : undefined,
+              gap: "20px",
                 "&:focus": {color: theme.palette.text.primary },
                 "&:active": {color: theme.palette.text.primary }
             }}
@@ -87,13 +85,13 @@ export const Varimg = ({ currentQuestion }: VarimgProps) => {
                 disabled={isSending}
                 sx={{
                   marginBottom: "15px",
-                  borderRadius: "5px",
+                  borderRadius: "12px",
-                  padding: "15px",
+                  padding: "20px",
                   color: theme.palette.text.primary,
                   backgroundColor: settings.cfg.design
                     ? quizThemes[settings.cfg.theme].isLight
                       ? "#FFFFFF"
-                      : "rgba(154,154,175, 0.2)"
+                      : "rgba(255,255,255, 0.3)"
                     : quizThemes[settings.cfg.theme].isLight
                     ? "white"
                     : theme.palette.background.default,
@@ -103,13 +101,13 @@ export const Varimg = ({ currentQuestion }: VarimgProps) => {
                       ? theme.palette.primary.main
                       : "#9A9AAF",
                   display: "flex",
-                  margin: isMobile ? 0 : undefined,
+                  margin:  0,
+                  "&:hover": {borderColor: theme.palette.primary.main},
                   "& .MuiFormControlLabel-label": {
                     wordBreak: "break-word",
                     height: variant.answer.length <= 60 ? undefined : "60px",
                     overflow: "auto",
                     lineHeight: "normal",
-                    paddingLeft: "45px",
                     "&::-webkit-scrollbar": {
                       width: "4px",
                     },
@@ -121,6 +119,7 @@ export const Varimg = ({ currentQuestion }: VarimgProps) => {
                         color: theme.palette.text.primary,
                     }
                 }}
+                labelPlacement="start"
                 value={index}
                 onClick={async (event) => {
                   event.preventDefault();
@@ -182,7 +181,7 @@ export const Varimg = ({ currentQuestion }: VarimgProps) => {
             display: "flex",
             alignItems: "center",
             justifyContent: "center",
-            backgroundColor: "#9A9AAF12",
+            backgroundColor: "#9A9AAF30",
             color: theme.palette.text.primary,
             textAlign: "center",
           }}

lib/components/ViewPublicationPage/tools/NextButton.tsx

@@ -0,0 +1,28 @@
+import {Button, useTheme} from "@mui/material";
+import { quizThemes } from "@utils/themes/Publication/themePublication";
+import { useQuizData } from "@contexts/QuizDataContext";
+
+interface Props{
+    isNextButtonEnabled: boolean,
+    moveToNextQuestion: () => void,
+}
+
+export default function NextButton ({isNextButtonEnabled, moveToNextQuestion}: Props) {
+    const theme = useTheme();
+    const { settings } = useQuizData();
+    return(
+        <Button
+            disabled={!isNextButtonEnabled}
+            variant="contained"
+            sx={{
+                fontSize: "16px",
+                padding: "10px 15px",
+                "&:disabled": {
+                    background: quizThemes[settings.cfg.theme].isLight ? "#F2F3F7" : "#FFFFFF26"
+                },
+            }}
+            onClick={moveToNextQuestion}
+        >
+            Далее →
+        </Button>
+    )}

lib/components/ViewPublicationPage/tools/PrevButton.tsx

@@ -0,0 +1,38 @@
+import {Button, useTheme} from "@mui/material";
+import {useRootContainerSize} from "../../../contexts/RootContainerWidthContext";
+import { quizThemes } from "@utils/themes/Publication/themePublication";
+import { useQuizData } from "@contexts/QuizDataContext";
+
+interface Props{
+    isPreviousButtonEnabled: boolean,
+    moveToPrevQuestion: () => void,
+}
+
+export default function PrevButton ({isPreviousButtonEnabled, moveToPrevQuestion}: Props) {
+    const theme = useTheme();
+    const { settings } = useQuizData();
+    const isMobileMini = useRootContainerSize() < 382;
+    return(
+        <Button
+            disabled={!isPreviousButtonEnabled}
+            variant="contained"
+            sx={{
+                fontSize: "16px",
+                padding: "10px 15px",
+                color: quizThemes[settings.cfg.theme].isLight ? theme.palette.primary.main : "#FFFFFF",
+                border: quizThemes[settings.cfg.theme].isLight ? `1px solid ${theme.palette.primary.main}` : "1px solid #9A9AAF",
+                background: quizThemes[settings.cfg.theme].isLight ? "#FFFFFF" : "#FFFFFF26",
+                "&:hover": {
+                    color: "#FFFFFF",
+                    border: `1px solid ${theme.palette.primary.dark}`,
+                },
+                "&:disabled": {
+                    background: quizThemes[settings.cfg.theme].isLight ? "#F2F3F7" : "#FFFFFF26"
+                },
+            }}
+            onClick={moveToPrevQuestion}
+        >
+            {isMobileMini ? "←" : "← Назад"}
+        </Button>
+    )
+}

lib/components/ViewPublicationPage/tools/Select.tsx

@@ -85,7 +85,6 @@ export const Select = ({
           borderRadius: "8px",
           "& .MuiOutlinedInput-notchedOutline": {
             border: `1px solid ${colorMain} !important`,
-            height: "48px",
             borderRadius: "10px",
           },
           "& .MuiSelect-icon": {

lib/utils/themes/Publication/genericPublication.ts

@@ -14,9 +14,14 @@ const themePublic = createTheme({
                             padding: '13px 20px',
                             borderRadius: '8px',
                             boxShadow: "none",
-                            // "&:hover": {
+                            "&:active": {
-                            //     backgroundColor: "#581CA7"
+                                backgroundColor: "#000000",
-                            // }
+                                color: "#FFFFFF"
+                            },
+                            "&:disabled": {
+                                color: "#9A9AAF",
+                                border: "1px solid #9A9AAF",
+                            },
 
                         },
                     },

lib/utils/themes/Publication/themePublication.ts

@@ -9,6 +9,7 @@ const StandardTheme = createTheme({
   palette: {
     primary: {
       main: "#7E2AEA",
+      dark: "#581CA7",
     },
     secondary: {
       main: "#252734",
@@ -29,6 +30,7 @@ const StandardDarkTheme = createTheme({
   palette: {
     primary: {
       main: "#7E2AEA",
+      dark: "#581CA7",
     },
     secondary: {
       main: "#252734",
@@ -49,6 +51,7 @@ const PinkTheme = createTheme({
   palette: {
     primary: {
       main: "#D34085",
+      dark: "#AD376E",
     },
     secondary: {
       main: "#252734",
@@ -69,6 +72,7 @@ const PinkDarkTheme = createTheme({
   palette: {
     primary: {
       main: "#D34085",
+      dark: "#AD376E",
     },
     secondary: {
       main: "#252734",
@@ -89,6 +93,7 @@ const BlackWhiteTheme = createTheme({
   palette: {
     primary: {
       main: "#4E4D51",
+      dark: "#323232",
     },
     secondary: {
       main: "#252734",
@@ -109,6 +114,7 @@ const OliveTheme = createTheme({
   palette: {
     primary: {
       main: "#758E4F",
+      dark: "#4A6324",
     },
     secondary: {
       main: "#252734",
@@ -129,6 +135,7 @@ const PurpleTheme = createTheme({
   palette: {
     primary: {
       main: "#7E2AEA",
+      dark: "#581CA7",
     },
     secondary: {
       main: "#252734",
@@ -149,6 +156,7 @@ const YellowTheme = createTheme({
   palette: {
     primary: {
       main: "#F2B133",
+      dark: "#E6A11C",
     },
     secondary: {
       main: "#252734",
@@ -169,6 +177,7 @@ const GoldDarkTheme = createTheme({
   palette: {
     primary: {
       main: "#E6AA37",
+      dark: "#E19A13",
     },
     secondary: {
       main: "#FFFCF6",
@@ -189,6 +198,7 @@ const BlueTheme = createTheme({
   palette: {
     primary: {
       main: "#4964ED",
+      dark: "#354DC8",
     },
     secondary: {
       main: "#252734",
@@ -209,6 +219,7 @@ const BlueDarkTheme = createTheme({
   palette: {
     primary: {
       main: "#07A0C3",
+      dark: "#0A819C",
     },
     secondary: {
       main: "#252734",
@@ -229,6 +240,7 @@ const Design1 = createTheme({
   palette: {
     primary: {
       main: "#F2B133",
+      dark: "#E6A11C",
     },
     secondary: {
       main: "#252734",
@@ -249,6 +261,7 @@ const Design2 = createTheme({
   palette: {
     primary: {
       main: "#3D9A63",
+      dark: "#247746",
     },
     secondary: {
       main: "#252734",
@@ -269,6 +282,7 @@ const Design3 = createTheme({
   palette: {
     primary: {
       main: "#4B6A99",
+      dark: "#32507D",
     },
     secondary: {
       main: "#252734",
@@ -289,6 +303,7 @@ const Design4 = createTheme({
   palette: {
     primary: {
       main: "#FF9431",
+      dark: "#EF8624",
     },
     secondary: {
       main: "#252734",
@@ -309,6 +324,7 @@ const Design5 = createTheme({
   palette: {
     primary: {
       main: "#2D99BA",
+      dark: "#1A84A6",
     },
     secondary: {
       main: "#252734",
@@ -329,6 +345,7 @@ const Design6 = createTheme({
   palette: {
     primary: {
       main: "#D34085",
+      dark: "#AD376E",
     },
     secondary: {
       main: "#252734",
@@ -349,6 +366,7 @@ const Design7 = createTheme({
   palette: {
     primary: {
       main: "#B47C3B",
+      dark: "#9C6524",
     },
     secondary: {
       main: "#252734",
@@ -369,6 +387,7 @@ const Design8 = createTheme({
   palette: {
     primary: {
       main: "#F0B136",
+      dark: "#E19F1D",
     },
     secondary: {
       main: "#252734",
@@ -389,6 +408,7 @@ const Design9 = createTheme({
   palette: {
     primary: {
       main: "#678F48",
+      dark: "#527933",
     },
     secondary: {
       main: "#252734",
@@ -409,6 +429,7 @@ const Design10 = createTheme({
   palette: {
     primary: {
       main: "#3666AF",
+      dark: "#1B478A",
     },
     secondary: {
       main: "#252734",

lib/utils/themes/generic.ts

@@ -65,7 +65,7 @@ const theme = createTheme({
         h5: { // H2 в макете
             fontSize: "24px",
             lineHeight: "28.44px",
-            fontWeight: 500,
+            fontWeight: 501,
         },
         button: {
             fontSize: "18px",