темы для публикации на стейтах(нужны доработки)

src/pages/ViewPublicationPage/Footer.tsx

@@ -222,7 +222,7 @@ export const Footer = ({ setCurrentQuestion, question, setShowContactForm, setSh
             alignItems: "center",
             gap: "10px",
             marginRight: "auto",
-            color: theme.palette.grey1.main,
+            // color: theme.palette.grey1.main,
           }}
         >
           {/* <Typography>Шаг</Typography>

src/pages/ViewPublicationPage/StartPageViewPublication.tsx

@@ -112,7 +112,7 @@ export const StartPageViewPublication = ({ setVisualStartPage }: Props) => {
               <Typography sx={{ fontSize: "14px" }}>{quiz.config.info.orgname}</Typography>
             </Box>
             <Link mb="16px" href={quiz.config.info.site}>
-              <Typography sx={{ fontSize: "16px", color: theme.palette.brightPurple.main }}>
+              <Typography sx={{ fontSize: "16px", color: theme.palette.primary.main }}>
                 {quiz.config.info.site}
               </Typography>
             </Link>
@@ -184,19 +184,19 @@ export const StartPageViewPublication = ({ setVisualStartPage }: Props) => {
                 {quiz.config.info.clickable ? (
                   isMobileDevice ? (
                     <Link href={`tel:${quiz.config.info.phonenumber}`}>
-                      <Typography sx={{ fontSize: "16px", color: theme.palette.brightPurple.main }}>
+                      <Typography sx={{ fontSize: "16px", color: theme.palette.primary.main }}>
                         {quiz.config.info.phonenumber}
                       </Typography>
                     </Link>
                   ) : (
                     <ButtonBase onClick={handleCopyNumber}>
-                      <Typography sx={{ fontSize: "16px", color: theme.palette.brightPurple.main }}>
+                      <Typography sx={{ fontSize: "16px", color: theme.palette.primary.main }}>
                         {quiz.config.info.phonenumber}
                       </Typography>
                     </ButtonBase>
                   )
                 ) : (
-                  <Typography sx={{ fontSize: "16px", color: theme.palette.brightPurple.main }}>
+                  <Typography sx={{ fontSize: "16px", color: theme.palette.primary.main }}>
                     {quiz.config.info.phonenumber}
                   </Typography>
                 )}

src/pages/ViewPublicationPage/index.tsx

@@ -1,5 +1,5 @@
 import { useEffect, useState } from "react";
-import { Box } from "@mui/material";
+import {Box, Button, ThemeProvider} from "@mui/material";
 
 import { StartPageViewPublication } from "./StartPageViewPublication";
 import { Question } from "./Question";
@@ -18,6 +18,9 @@ import { useQuestionsStore } from "@root/questions/store";
 import { setQuestions } from "@root/questions/actions";
 import { questionApi } from "@api/question";
 import { ApologyPage } from "./ApologyPage"
+import {themesPublication} from "../../utils/themes/themePublication";
+
+type themePublic = "StandardTheme" | "PinkTheme"
 
 export const ViewPage = () => {
   const quiz = useCurrentQuiz();
@@ -55,15 +58,24 @@ export const ViewPage = () => {
 
   console.log(questions)
 
+  const [themeState, setThemeState] = useState<themePublic>("StandardTheme");
+
   if (visualStartPage === undefined) return <></>;
   if (questions.length === 0 || (questions.length === 1 && questions[0].type === "result")) return <ApologyPage message="Нет созданных вопросов"/>
   return (
-    <Box>
+      <ThemeProvider theme={themesPublication?.[themeState]}>
-      {!visualStartPage ? (
+        <Box>
-        <StartPageViewPublication setVisualStartPage={setVisualStartPage} />
+          {!visualStartPage ? (
-      ) : (
+              <StartPageViewPublication setVisualStartPage={setVisualStartPage} />
-        <Question questions={filteredQuestions} />
+          ) : (
-      )}
+              <Question questions={filteredQuestions} />
-    </Box>
+          )}
+          <Box>
+            <Button onClick={() => {setThemeState("StandardTheme")}}>Standard</Button>
+            <Button onClick={() => {setThemeState("PinkTheme")}}>Pink</Button>
+          </Box>
+        </Box>
+      </ThemeProvider>
+
   );
 };

src/pages/ViewPublicationPage/questions/Emoji.tsx

@@ -55,7 +55,8 @@ export const Emoji = ({ currentQuestion }: EmojiProps) => {
               key={variant.id}
               sx={{
                 borderRadius: "12px",
-                border: `1px solid ${theme.palette.grey2.main}`,
+                // border: `1px solid ${theme.palette.grey2.main}`,
+                border: `1px solid #9A9AAF`,
                 overflow: "hidden",
                 maxWidth: "317px",
                 width: "100%",

src/pages/ViewPublicationPage/questions/File.tsx

@@ -72,7 +72,7 @@ export const File = ({ currentQuestion }: FileProps) => {
             <Box
               sx={{
                 padding: "5px 5px 5px 16px",
-                backgroundColor: theme.palette.brightPurple.main,
+                backgroundColor: theme.palette.primary.main,
                 borderRadius: "8px",
                 color: "#FFFFFF",
                 display: "flex",
@@ -115,7 +115,8 @@ export const File = ({ currentQuestion }: FileProps) => {
                 alignItems: "center",
                 padding: "33px 44px 33px 55px",
                 backgroundColor: theme.palette.background.default,
-                border: `1px solid ${theme.palette.grey2.main}`,
+                border: `1px solid #9A9AAF`,
+                // border: `1px solid ${theme.palette.grey2.main}`,
                 borderRadius: "8px",
               }}
             >
@@ -123,7 +124,8 @@ export const File = ({ currentQuestion }: FileProps) => {
               <Box>
                 <Typography
                   sx={{
-                    color: theme.palette.grey2.main,
+                    color: "#9A9AAF",
+                    // color: theme.palette.grey2.main,
                     fontWeight: 500,
                   }}
                 >
@@ -134,7 +136,8 @@ export const File = ({ currentQuestion }: FileProps) => {
                 </Typography>
                 <Typography
                   sx={{
-                    color: theme.palette.grey2.main,
+                    color: "#9A9AAF",
+                    // color: theme.palette.grey2.main,
                     fontSize: "16px",
                     lineHeight: "19px",
                   }}

src/pages/ViewPublicationPage/questions/Images.tsx

@@ -62,7 +62,8 @@ export const Images = ({ currentQuestion }: ImagesProps) => {
               sx={{
                 cursor: "pointer",
                 borderRadius: "5px",
-                border: `1px solid ${theme.palette.grey2.main}`,
+                border: `1px solid #9A9AAF`,
+                // border: `1px solid ${theme.palette.grey2.main}`,
               }}
               onClick={(event) => {
                 event.preventDefault();
@@ -98,7 +99,8 @@ export const Images = ({ currentQuestion }: ImagesProps) => {
                 sx={{
                   display: "block",
                   textAlign: "center",
-                  color: theme.palette.grey2.main,
+                  color: "#9A9AAF",
+                  // color: theme.palette.grey2.main,
                   marginTop: "10px",
                 }}
                 value={index}

src/pages/ViewPublicationPage/questions/Rating.tsx

@@ -74,7 +74,10 @@ export const Rating = ({ currentQuestion }: RatingProps) => {
           marginTop: "20px",
         }}
       >
-        <Typography sx={{ color: theme.palette.grey2.main }}>
+        <Typography sx={{
+          color: "#9A9AAF"
+          // color: theme.palette.grey2.main
+        }}>
           {currentQuestion.content.ratingNegativeDescription}
         </Typography>
         <Box
@@ -90,11 +93,11 @@ export const Rating = ({ currentQuestion }: RatingProps) => {
             }
             sx={{ height: "50px", gap: "15px" }}
             max={currentQuestion.content.steps}
-            icon={form?.icon(theme.palette.brightPurple.main)}
+            icon={form?.icon(theme.palette.primary.main)}
-            emptyIcon={form?.icon(theme.palette.grey2.main)}
+            emptyIcon={form?.icon("#9A9AAF")}
           />
         </Box>
-        <Typography sx={{ color: theme.palette.grey2.main }}>
+        <Typography sx={{ color: "#9A9AAF" }}>
           {currentQuestion.content.ratingPositiveDescription}
         </Typography>
       </Box>

src/pages/ViewPublicationPage/questions/Variant.tsx

@@ -134,7 +134,7 @@ const VariantItem = ({
         margin: "0",
         borderRadius: "12px",
         padding: "15px",
-        border: `1px solid ${theme.palette.grey2.main}`,
+        border: `1px solid #9A9AAF`,
         display: "flex",
         maxWidth: "685px",
         justifyContent: "space-between",

src/pages/ViewPublicationPage/questions/Varimg.tsx

@@ -57,7 +57,7 @@ export const Varimg = ({ currentQuestion }: VarimgProps) => {
                   borderRadius: "5px",
                   padding: "15px",
                   color: "#4D4D4D",
-                  border: `1px solid ${theme.palette.grey2.main}`,
+                  border: `1px solid #9A9AAF`,
                   display: "flex",
                 }}
                 value={index}

src/utils/themes/themePublication.ts

@@ -0,0 +1,47 @@
+import { createTheme } from "@mui/material";
+import theme from "./generic";
+
+
+const StandardTheme = createTheme({
+    // ...theme,
+    palette: {
+        primary: {
+            main: "#7E2AEA",
+        },
+        secondary: {
+            main: "#252734"
+        },
+        text: {
+            primary: "#333647",
+            secondary: "#7E2AEA",
+        },
+
+        background: {
+            default: "#FFFFFF",
+        },
+    }
+})
+
+const PinkTheme = createTheme({
+    // ...theme,
+    palette: {
+        primary: {
+            main: "#D34085",
+        },
+        secondary: {
+            main: "#252734"
+        },
+        text: {
+            primary: "#333647",
+            secondary: "#D34085",
+        },
+
+        background: {
+            default: "#FFF9FC",
+        },
+    }
+})
+export const themesPublication = {
+    StandardTheme,
+    PinkTheme,
+}