From bfe19091ac04d9156c01c8ce98e8068ad27891f6 Mon Sep 17 00:00:00 2001 From: Tamara Date: Thu, 21 Dec 2023 03:08:58 +0300 Subject: [PATCH 1/3] =?UTF-8?q?=D1=82=D0=B5=D0=BC=D1=8B=20=D0=B4=D0=BB?= =?UTF-8?q?=D1=8F=20=D0=BF=D1=83=D0=B1=D0=BB=D0=B8=D0=BA=D0=B0=D1=86=D0=B8?= =?UTF-8?q?=D0=B8=20=D0=BD=D0=B0=20=D1=81=D1=82=D0=B5=D0=B9=D1=82=D0=B0?= =?UTF-8?q?=D1=85(=D0=BD=D1=83=D0=B6=D0=BD=D1=8B=20=D0=B4=D0=BE=D1=80?= =?UTF-8?q?=D0=B0=D0=B1=D0=BE=D1=82=D0=BA=D0=B8)?= MIME-Version: 1.0 Content-Type: text/plain; charset=UTF-8 Content-Transfer-Encoding: 8bit --- src/pages/ViewPublicationPage/Footer.tsx | 2 +- .../StartPageViewPublication.tsx | 8 ++-- src/pages/ViewPublicationPage/index.tsx | 28 +++++++---- .../ViewPublicationPage/questions/Emoji.tsx | 3 +- .../ViewPublicationPage/questions/File.tsx | 11 +++-- .../ViewPublicationPage/questions/Images.tsx | 6 ++- .../ViewPublicationPage/questions/Rating.tsx | 11 +++-- .../ViewPublicationPage/questions/Variant.tsx | 2 +- .../ViewPublicationPage/questions/Varimg.tsx | 2 +- src/utils/themes/themePublication.ts | 47 +++++++++++++++++++ 10 files changed, 94 insertions(+), 26 deletions(-) create mode 100644 src/utils/themes/themePublication.ts diff --git a/src/pages/ViewPublicationPage/Footer.tsx b/src/pages/ViewPublicationPage/Footer.tsx index 8a1f2dea..e6ccf759 100644 --- a/src/pages/ViewPublicationPage/Footer.tsx +++ b/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, }} > {/* Шаг diff --git a/src/pages/ViewPublicationPage/StartPageViewPublication.tsx b/src/pages/ViewPublicationPage/StartPageViewPublication.tsx index 3b129a02..ea2ffccd 100644 --- a/src/pages/ViewPublicationPage/StartPageViewPublication.tsx +++ b/src/pages/ViewPublicationPage/StartPageViewPublication.tsx @@ -112,7 +112,7 @@ export const StartPageViewPublication = ({ setVisualStartPage }: Props) => { {quiz.config.info.orgname} - + {quiz.config.info.site} @@ -184,19 +184,19 @@ export const StartPageViewPublication = ({ setVisualStartPage }: Props) => { {quiz.config.info.clickable ? ( isMobileDevice ? ( - + {quiz.config.info.phonenumber} ) : ( - + {quiz.config.info.phonenumber} ) ) : ( - + {quiz.config.info.phonenumber} )} diff --git a/src/pages/ViewPublicationPage/index.tsx b/src/pages/ViewPublicationPage/index.tsx index a84851a3..f780e1c4 100644 --- a/src/pages/ViewPublicationPage/index.tsx +++ b/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("StandardTheme"); + if (visualStartPage === undefined) return <>; if (questions.length === 0 || (questions.length === 1 && questions[0].type === "result")) return return ( - - {!visualStartPage ? ( - - ) : ( - - )} - + + + {!visualStartPage ? ( + + ) : ( + + )} + + + + + + + ); }; diff --git a/src/pages/ViewPublicationPage/questions/Emoji.tsx b/src/pages/ViewPublicationPage/questions/Emoji.tsx index 42b69f6e..8642e3e6 100644 --- a/src/pages/ViewPublicationPage/questions/Emoji.tsx +++ b/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%", diff --git a/src/pages/ViewPublicationPage/questions/File.tsx b/src/pages/ViewPublicationPage/questions/File.tsx index e107e9ac..12ebd62f 100644 --- a/src/pages/ViewPublicationPage/questions/File.tsx +++ b/src/pages/ViewPublicationPage/questions/File.tsx @@ -72,7 +72,7 @@ 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) => { @@ -134,7 +136,8 @@ export const File = ({ currentQuestion }: FileProps) => { { 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} diff --git a/src/pages/ViewPublicationPage/questions/Rating.tsx b/src/pages/ViewPublicationPage/questions/Rating.tsx index 14860935..55330e93 100644 --- a/src/pages/ViewPublicationPage/questions/Rating.tsx +++ b/src/pages/ViewPublicationPage/questions/Rating.tsx @@ -74,7 +74,10 @@ export const Rating = ({ currentQuestion }: RatingProps) => { marginTop: "20px", }} > - + {currentQuestion.content.ratingNegativeDescription} { } sx={{ height: "50px", gap: "15px" }} max={currentQuestion.content.steps} - icon={form?.icon(theme.palette.brightPurple.main)} - emptyIcon={form?.icon(theme.palette.grey2.main)} + icon={form?.icon(theme.palette.primary.main)} + emptyIcon={form?.icon("#9A9AAF")} /> - + {currentQuestion.content.ratingPositiveDescription} diff --git a/src/pages/ViewPublicationPage/questions/Variant.tsx b/src/pages/ViewPublicationPage/questions/Variant.tsx index 1b5276e4..8e0806d7 100644 --- a/src/pages/ViewPublicationPage/questions/Variant.tsx +++ b/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", diff --git a/src/pages/ViewPublicationPage/questions/Varimg.tsx b/src/pages/ViewPublicationPage/questions/Varimg.tsx index 5e07766b..5f2d0185 100644 --- a/src/pages/ViewPublicationPage/questions/Varimg.tsx +++ b/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} diff --git a/src/utils/themes/themePublication.ts b/src/utils/themes/themePublication.ts new file mode 100644 index 00000000..731d9acb --- /dev/null +++ b/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, +} \ No newline at end of file From 4cdd23d71fa587fbc8a5b8f42e87412db918595f Mon Sep 17 00:00:00 2001 From: Nastya Date: Thu, 21 Dec 2023 11:58:47 +0300 Subject: [PATCH 2/3] =?UTF-8?q?=D1=82=D0=B5=D0=BC=D1=8B=20=D0=BF=D1=83?= =?UTF-8?q?=D0=B1=D0=BB=D0=B8=D0=BA=D0=B0=D1=86=D0=B8=D0=B9=20=D1=81=D0=BE?= =?UTF-8?q?=D1=85=D1=80=D0=B0=D0=BD=D1=8F=D1=8E=D1=82=D1=81=D1=8F=20=D0=BD?= =?UTF-8?q?=D0=B0=20=D0=B1=D0=B5=D0=BA?= MIME-Version: 1.0 Content-Type: text/plain; charset=UTF-8 Content-Transfer-Encoding: 8bit --- src/model/quizSettings.ts | 2 ++ src/pages/ViewPublicationPage/index.tsx | 12 ++++++++---- src/pages/startPage/EditPage.tsx | 1 + 3 files changed, 11 insertions(+), 4 deletions(-) diff --git a/src/model/quizSettings.ts b/src/model/quizSettings.ts index db37e5c4..7bde9206 100644 --- a/src/model/quizSettings.ts +++ b/src/model/quizSettings.ts @@ -33,6 +33,7 @@ export interface QuizConfig { startpageType: QuizStartpageType; results: QuizResultsType; haveRoot: string | null; + theme: string | "StandardTheme" | "PinkTheme"; resultInfo: { when: 'before' | 'after' | 'email', share: true | false, @@ -92,6 +93,7 @@ export const defaultQuizConfig: QuizConfig = { startpageType: null, results: null, haveRoot: null, + theme: "StandardTheme", resultInfo: { when: 'after', share: false, diff --git a/src/pages/ViewPublicationPage/index.tsx b/src/pages/ViewPublicationPage/index.tsx index f780e1c4..4a9ba34f 100644 --- a/src/pages/ViewPublicationPage/index.tsx +++ b/src/pages/ViewPublicationPage/index.tsx @@ -7,7 +7,7 @@ import { useQuestions } from "@root/questions/hooks"; import { useCurrentQuiz } from "@root/quizes/hooks"; import useSWR from "swr"; import { quizApi } from "@api/quiz"; -import { setQuizes } from "@root/quizes/actions"; +import { setQuizes, updateQuiz } from "@root/quizes/actions"; import { isAxiosError } from "axios"; import { devlog } from "@frontend/kitui"; import { useQuizStore } from "@root/quizes/store"; @@ -63,7 +63,7 @@ export const ViewPage = () => { if (visualStartPage === undefined) return <>; if (questions.length === 0 || (questions.length === 1 && questions[0].type === "result")) return return ( - + {!visualStartPage ? ( @@ -71,8 +71,12 @@ export const ViewPage = () => { )} - - + + diff --git a/src/pages/startPage/EditPage.tsx b/src/pages/startPage/EditPage.tsx index 11f091bb..636ed4ad 100755 --- a/src/pages/startPage/EditPage.tsx +++ b/src/pages/startPage/EditPage.tsx @@ -52,6 +52,7 @@ export default function EditPage() { const { editQuizId } = useQuizStore(); const { questions } = useQuestionsStore(); + console.log(quiz) useEffect(() => { const getData = async () => { const quizes = await quizApi.getList(); From 5c51104e8cf4b6c20ae81ad19db5786fbbeb4413 Mon Sep 17 00:00:00 2001 From: Tamara Date: Tue, 26 Dec 2023 02:46:28 +0300 Subject: [PATCH 3/3] =?UTF-8?q?=D0=BF=D1=80=D0=B8=D0=BC=D0=B5=D0=BD=D0=B5?= =?UTF-8?q?=D0=BD=D0=B8=D0=B5=20=D1=82=D0=B5=D0=BC=20=D0=BD=D0=B0=20=D1=81?= =?UTF-8?q?=D1=82=D1=80=D0=B0=D0=BD=D0=B8=D1=86=D1=83=20=D0=BF=D1=83=D0=B1?= =?UTF-8?q?=D0=BB=D0=B8=D0=BA=D0=B0=D1=86=D0=B8=D0=B8?= MIME-Version: 1.0 Content-Type: text/plain; charset=UTF-8 Content-Transfer-Encoding: 8bit --- src/assets/icons/ArrowDownIcon.tsx | 13 +- src/assets/icons/CalendarIcon.tsx | 8 +- src/assets/icons/Checkbox.tsx | 11 +- src/assets/icons/NameplateLogo.tsx | 2 +- src/assets/icons/NameplateLogoFQDark.tsx | 24 ++ src/assets/icons/UploadIcon.tsx | 11 +- src/model/quizSettings.ts | 2 +- src/pages/Questions/Select.tsx | 20 +- src/pages/ViewPublicationPage/ContactForm.tsx | 32 ++- src/pages/ViewPublicationPage/Footer.tsx | 14 +- src/pages/ViewPublicationPage/Question.tsx | 9 +- src/pages/ViewPublicationPage/ResultForm.tsx | 4 +- .../StartPageViewPublication.tsx | 9 +- src/pages/ViewPublicationPage/index.tsx | 39 ++- .../ViewPublicationPage/questions/Date.tsx | 21 +- .../ViewPublicationPage/questions/Emoji.tsx | 10 +- .../ViewPublicationPage/questions/File.tsx | 4 +- .../ViewPublicationPage/questions/Images.tsx | 11 +- .../ViewPublicationPage/questions/Number.tsx | 35 ++- .../ViewPublicationPage/questions/Page.tsx | 7 +- .../ViewPublicationPage/questions/Rating.tsx | 2 +- .../ViewPublicationPage/questions/Select.tsx | 7 +- .../ViewPublicationPage/questions/Text.tsx | 11 +- .../ViewPublicationPage/questions/Variant.tsx | 19 +- .../ViewPublicationPage/questions/Varimg.tsx | 14 +- src/ui_kit/CustomCheckbox.tsx | 9 +- src/ui_kit/CustomSlider.tsx | 9 +- src/ui_kit/RadioCheck.tsx | 7 +- .../themes/Publication/genericPublication.ts | 43 +++ .../themes/Publication/themePublication.ts | 253 ++++++++++++++++++ src/utils/themes/themePublication.ts | 47 ---- 31 files changed, 556 insertions(+), 151 deletions(-) create mode 100644 src/assets/icons/NameplateLogoFQDark.tsx create mode 100644 src/utils/themes/Publication/genericPublication.ts create mode 100644 src/utils/themes/Publication/themePublication.ts delete mode 100644 src/utils/themes/themePublication.ts diff --git a/src/assets/icons/ArrowDownIcon.tsx b/src/assets/icons/ArrowDownIcon.tsx index 0b92d66a..59392473 100755 --- a/src/assets/icons/ArrowDownIcon.tsx +++ b/src/assets/icons/ArrowDownIcon.tsx @@ -1,7 +1,12 @@ -import { Box, useTheme } from "@mui/material"; +import {Box, SxProps, Theme, useTheme} from "@mui/material"; - -export default function ArrowDownIcon(props: any) { +interface Color{ + color?: string +} +export default function ArrowDownIcon( + props: any, + {color = "#7E2AEA"}: Color +) { const theme = useTheme(); return ( @@ -17,7 +22,7 @@ export default function ArrowDownIcon(props: any) { }} > - + ); diff --git a/src/assets/icons/CalendarIcon.tsx b/src/assets/icons/CalendarIcon.tsx index a3c91293..3c3544e9 100644 --- a/src/assets/icons/CalendarIcon.tsx +++ b/src/assets/icons/CalendarIcon.tsx @@ -1,6 +1,9 @@ -import { Box } from "@mui/material"; +import {Box, SxProps, Theme} from "@mui/material"; -export default function CalendarIcon() { +interface Props { + sx?: SxProps +} +export default function CalendarIcon({sx}:Props) { return ( diff --git a/src/assets/icons/Checkbox.tsx b/src/assets/icons/Checkbox.tsx index 265b62e3..6974b531 100644 --- a/src/assets/icons/Checkbox.tsx +++ b/src/assets/icons/Checkbox.tsx @@ -1,10 +1,11 @@ import { Box, useTheme } from "@mui/material"; -type CheckboxIconProps = { +interface CheckboxIconProps { checked?: boolean; + color?: string; }; -export const CheckboxIcon = ({ checked = false }: CheckboxIconProps) => { +export default function CheckboxIcon ({ checked = false, color = "#7E2AEA", }: CheckboxIconProps) { const theme = useTheme(); return ( @@ -17,9 +18,9 @@ export const CheckboxIcon = ({ checked = false }: CheckboxIconProps) => { justifyContent: "center", alignItems: "center", backgroundColor: checked - ? theme.palette.brightPurple.main - : theme.palette.background.default, - border: `1px solid ${theme.palette.grey2.main}`, + ? color + : "#F2F3F7", + border: `1px solid #9A9AAF`, }} > {checked && ( diff --git a/src/assets/icons/NameplateLogo.tsx b/src/assets/icons/NameplateLogo.tsx index a977b2fe..8a999fc6 100644 --- a/src/assets/icons/NameplateLogo.tsx +++ b/src/assets/icons/NameplateLogo.tsx @@ -12,7 +12,7 @@ export const NameplateLogo: FC> = (props) => ( ); diff --git a/src/assets/icons/NameplateLogoFQDark.tsx b/src/assets/icons/NameplateLogoFQDark.tsx new file mode 100644 index 00000000..651c17b2 --- /dev/null +++ b/src/assets/icons/NameplateLogoFQDark.tsx @@ -0,0 +1,24 @@ +import { FC, SVGProps } from "react"; + +export const NameplateLogoFQDark: FC> = (props) => ( + + + + + + + + + + + + + + + + + + + + +); \ No newline at end of file diff --git a/src/assets/icons/UploadIcon.tsx b/src/assets/icons/UploadIcon.tsx index 46c386c6..573fcbfb 100755 --- a/src/assets/icons/UploadIcon.tsx +++ b/src/assets/icons/UploadIcon.tsx @@ -1,7 +1,10 @@ import { Box, useTheme } from "@mui/material"; +interface Props{ + color?: string +} -export default function UploadIcon() { +export default function UploadIcon({color= "#9A9AAF"}: Props) { const theme = useTheme(); return ( @@ -15,9 +18,9 @@ export default function UploadIcon() { }} > - - - + + + ); diff --git a/src/model/quizSettings.ts b/src/model/quizSettings.ts index 7bde9206..f57f3100 100644 --- a/src/model/quizSettings.ts +++ b/src/model/quizSettings.ts @@ -33,7 +33,7 @@ export interface QuizConfig { startpageType: QuizStartpageType; results: QuizResultsType; haveRoot: string | null; - theme: string | "StandardTheme" | "PinkTheme"; + theme: "StandardTheme" | "StandardDarkTheme" | "PinkTheme" | "PinkDarkTheme" | "BlackWhiteTheme" | "OliveTheme" | "YellowTheme" | "GoldDarkTheme" | "PurpleTheme" | "BlueTheme" | "BlueDarkTheme"; resultInfo: { when: 'before' | 'after' | 'email', share: true | false, diff --git a/src/pages/Questions/Select.tsx b/src/pages/Questions/Select.tsx index 5aa40377..1d1f4d39 100644 --- a/src/pages/Questions/Select.tsx +++ b/src/pages/Questions/Select.tsx @@ -4,7 +4,7 @@ import { MenuItem, FormControl, Typography, - useTheme, + useTheme, Theme, } from "@mui/material"; import ArrowDown from "@icons/ArrowDownIcon"; @@ -18,6 +18,9 @@ type SelectProps = { onChange?: (item: string, num: number) => void; sx?: SxProps; placeholder?: string; + colorPlaceholder?: string; + colorMain?: string; + color?: string; }; export const Select = ({ @@ -27,6 +30,9 @@ export const Select = ({ onChange, sx, placeholder = "", + colorMain = "#7E2AEA", + colorPlaceholder = "#9A9AAF", + color }: SelectProps) => { const [activeItem, setActiveItem] = useState( empty ? -1 : activeItemIndex @@ -63,7 +69,7 @@ export const Select = ({ value ? ( items[Number(value)] ) : ( - + {placeholder} ) @@ -77,7 +83,7 @@ export const Select = ({ height: "48px", borderRadius: "8px", "& .MuiOutlinedInput-notchedOutline": { - border: `1px solid ${theme.palette.brightPurple.main} !important`, + border: `1px solid ${colorMain} !important`, height: "48px", borderRadius: "10px", }, @@ -100,21 +106,21 @@ export const Select = ({ gap: "8px", "& .Mui-selected": { backgroundColor: theme.palette.background.default, - color: theme.palette.brightPurple.main, + color: colorMain, }, }, }, }} inputProps={{ sx: { - color: theme.palette.brightPurple.main, + color: colorMain, display: "flex", alignItems: "center", px: "9px", gap: "20px", }, }} - IconComponent={(props) => } + IconComponent={(props) => } > {items.map((item, index) => ( {item} diff --git a/src/pages/ViewPublicationPage/ContactForm.tsx b/src/pages/ViewPublicationPage/ContactForm.tsx index 728c7ba5..8271c10d 100644 --- a/src/pages/ViewPublicationPage/ContactForm.tsx +++ b/src/pages/ViewPublicationPage/ContactForm.tsx @@ -1,4 +1,4 @@ -import { Box, Typography, Button, Paper, TextField, Link, InputAdornment } from "@mui/material"; +import {Box, Typography, Button, Paper, TextField, Link, InputAdornment, useTheme} from "@mui/material"; import NameIcon from "@icons/ContactFormIcon/NameIcon"; import EmailIcon from "@icons/ContactFormIcon/EmailIcon"; import PhoneIcon from "@icons/ContactFormIcon/PhoneIcon"; @@ -12,6 +12,7 @@ import { useState } from "react"; import { useQuestionsStore } from "@root/questions/store"; import type { AnyTypedQuizQuestion } from "../../model/questionTypes/shared"; +import {modes} from "../../utils/themes/Publication/themePublication"; type ContactFormProps = { currentQuestion: AnyTypedQuizQuestion; @@ -35,8 +36,9 @@ export const ContactForm = ({ setShowResultForm, }: ContactFormProps) => { const quiz = useCurrentQuiz(); + const mode = modes; const { questions } = useQuestionsStore(); - + const theme = useTheme(); const [ready, setReady] = useState(false) const followNextForm = () => { setShowContactForm(false); @@ -54,6 +56,7 @@ export const ContactForm = ({ display: "flex", alignItems: "center", justifyContent: "center", + backgroundColor: theme.palette.background.default, height: "100vh" }} > @@ -68,7 +71,8 @@ export const ContactForm = ({ sx={{ textAlign: "center", m: "20px 0", - fontSize: "28px" + fontSize: "28px", + color: theme.palette.text.primary }} > {quiz?.config.formContact.title || "Заполните форму, чтобы получить результаты теста"} @@ -95,6 +99,7 @@ export const ContactForm = ({ alignItems: "center", justifyContent: "center", flexDirection: "column", + backgroundColor: theme.palette.background.default, p: "30px" }}> @@ -129,13 +134,13 @@ export const ContactForm = ({ width: "450px", }} > - { setReady(target.checked) }} checked={ready} /> + { setReady(target.checked) }} checked={ready} colorIcon={theme.palette.primary.main}/> - С - Положением об обработке персональных данных - и - Политикой конфиденциальности - ознакомлен + С  + Положением об обработке персональных данных +  и  + Политикой конфиденциальности +  ознакомлен @@ -143,11 +148,14 @@ export const ContactForm = ({ sx={{ display: "flex", alignItems: "center", - mt: "20px" + mt: "20px", + gap: "15px" }} > - - Сделано на PenaQuiz + + + Сделано на PenaQuiz + diff --git a/src/pages/ViewPublicationPage/Footer.tsx b/src/pages/ViewPublicationPage/Footer.tsx index 8366771a..ef49eed8 100644 --- a/src/pages/ViewPublicationPage/Footer.tsx +++ b/src/pages/ViewPublicationPage/Footer.tsx @@ -9,6 +9,8 @@ import type { AnyTypedQuizQuestion, QuizQuestionBase } from "../../model/questio import { getQuestionByContentId } from "@root/questions/actions"; import { enqueueSnackbar } from "notistack"; import { NameplateLogoFQ } from "@icons/NameplateLogoFQ"; +import {NameplateLogoFQDark} from "@icons/NameplateLogoFQDark"; +import {modes} from "../../utils/themes/Publication/themePublication"; type FooterProps = { setCurrentQuestion: (step: AnyTypedQuizQuestion) => void; @@ -21,6 +23,7 @@ export const Footer = ({ setCurrentQuestion, question, setShowContactForm, setSh const [disablePreviousButton, setDisablePreviousButton] = useState(false); const [disableNextButton, setDisableNextButton] = useState(false); const quiz = useCurrentQuiz(); + const mode = modes; const { answers } = useQuizViewStore(); const questions = useQuestionsStore().questions as AnyTypedQuizQuestion[]; const theme = useTheme(); @@ -205,7 +208,14 @@ export const Footer = ({ setCurrentQuestion, question, setShowContactForm, setSh gap: "10px", }} > - + {mode[quiz.config.theme] ? ( + + ):( + + ) + + } + ← Назад diff --git a/src/pages/ViewPublicationPage/Question.tsx b/src/pages/ViewPublicationPage/Question.tsx index efb5b5e2..b143ed08 100644 --- a/src/pages/ViewPublicationPage/Question.tsx +++ b/src/pages/ViewPublicationPage/Question.tsx @@ -1,5 +1,5 @@ import { useState, useEffect } from "react"; -import { Box } from "@mui/material"; +import {Box, useTheme} from "@mui/material"; import { useCurrentQuiz } from "@root/quizes/hooks"; import { getQuestionByContentId } from "@root/questions/actions"; @@ -64,10 +64,13 @@ export const Question = ({ questions }: QuestionProps) => { const QuestionComponent = QUESTIONS_MAP[currentQuestion.type as Exclude]; - + const theme = useTheme(); return ( {!showContactForm && !showResultForm && ( diff --git a/src/pages/ViewPublicationPage/ResultForm.tsx b/src/pages/ViewPublicationPage/ResultForm.tsx index 5f1b166f..ae076a46 100644 --- a/src/pages/ViewPublicationPage/ResultForm.tsx +++ b/src/pages/ViewPublicationPage/ResultForm.tsx @@ -7,6 +7,7 @@ import { useQuestionsStore } from "@root/questions/store"; import type { AnyTypedQuizQuestion } from "../../model/questionTypes/shared"; import YoutubeEmbedIframe from "../../ui_kit/StartPagePreview/YoutubeEmbedIframe.tsx" import { NameplateLogo } from "@icons/NameplateLogo"; +import {modes} from "../../utils/themes/Publication/themePublication"; type ResultFormProps = { currentQuestion: AnyTypedQuizQuestion; @@ -23,6 +24,7 @@ export const ResultForm = ({ }: ResultFormProps) => { const quiz = useCurrentQuiz(); + const mode = modes; const { questions } = useQuestionsStore(); const resultQuestion = questions.find( (question) => @@ -118,7 +120,7 @@ export const ResultForm = ({ }} > - Сделано на PenaQuiz + Сделано на PenaQuiz diff --git a/src/pages/ViewPublicationPage/StartPageViewPublication.tsx b/src/pages/ViewPublicationPage/StartPageViewPublication.tsx index ea2ffccd..e8c52a3a 100644 --- a/src/pages/ViewPublicationPage/StartPageViewPublication.tsx +++ b/src/pages/ViewPublicationPage/StartPageViewPublication.tsx @@ -5,6 +5,7 @@ import { QuizStartpageAlignType, QuizStartpageType } from "@model/quizSettings"; import { notReachable } from "../../utils/notReachable"; import { useUADevice } from "../../utils/hooks/useUADevice"; import { NameplateLogo } from "@icons/NameplateLogo"; +import {modes} from "../../utils/themes/Publication/themePublication"; interface Props { setVisualStartPage: (a: boolean) => void; @@ -13,6 +14,7 @@ interface Props { export const StartPageViewPublication = ({ setVisualStartPage }: Props) => { const theme = useTheme(); const quiz = useCurrentQuiz(); + const mode = modes; const { isMobileDevice } = useUADevice(); if (!quiz) return null; @@ -83,6 +85,7 @@ export const StartPageViewPublication = ({ setVisualStartPage }: Props) => { ? "linear-gradient(180deg,transparent,#272626)" : "linear-gradient(270deg,#272626,transparent)" : "", + backgroundColor: theme.palette.background.default, color: quiz.config.startpageType === "expanded" ? "white" : "black", }} @@ -147,6 +150,7 @@ export const StartPageViewPublication = ({ setVisualStartPage }: Props) => { overflowWrap: "break-word", width: "100%", textAlign: quiz.config.startpageType === "centered" ? "center" : "-moz-initial", + color: theme.palette.text.primary }} > {quiz.name} @@ -209,10 +213,11 @@ export const StartPageViewPublication = ({ setVisualStartPage }: Props) => { sx={{ display: "flex", alignItems: "center", + gap: "15px" }} > - - + + Сделано на PenaQuiz diff --git a/src/pages/ViewPublicationPage/index.tsx b/src/pages/ViewPublicationPage/index.tsx index 4a9ba34f..2a08f1f0 100644 --- a/src/pages/ViewPublicationPage/index.tsx +++ b/src/pages/ViewPublicationPage/index.tsx @@ -1,5 +1,5 @@ import { useEffect, useState } from "react"; -import {Box, Button, ThemeProvider} from "@mui/material"; +import {Box, Button, ThemeProvider, useTheme} from "@mui/material"; import { StartPageViewPublication } from "./StartPageViewPublication"; import { Question } from "./Question"; @@ -18,15 +18,14 @@ 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"; +import {themesPublication} from "../../utils/themes/Publication/themePublication"; -type themePublic = "StandardTheme" | "PinkTheme" export const ViewPage = () => { const quiz = useCurrentQuiz(); const { editQuizId } = useQuizStore(); const { questions } = useQuestionsStore(); - + const theme = useTheme(); useEffect(() => { const getData = async () => { const quizes = await quizApi.getList(); @@ -55,16 +54,13 @@ export const ViewPage = () => { questions.filter(({ type }) => type) as AnyTypedQuizQuestion[] ).sort((previousItem, item) => previousItem.page - item.page); - console.log(questions) - const [themeState, setThemeState] = useState("StandardTheme"); - if (visualStartPage === undefined) return <>; if (questions.length === 0 || (questions.length === 1 && questions[0].type === "result")) return return ( - + {!visualStartPage ? ( ) : ( @@ -77,6 +73,33 @@ export const ViewPage = () => { + + + + + + + + + diff --git a/src/pages/ViewPublicationPage/questions/Date.tsx b/src/pages/ViewPublicationPage/questions/Date.tsx index 0f33e19f..5408148c 100644 --- a/src/pages/ViewPublicationPage/questions/Date.tsx +++ b/src/pages/ViewPublicationPage/questions/Date.tsx @@ -1,17 +1,22 @@ import dayjs from "dayjs"; import { DatePicker } from "@mui/x-date-pickers"; -import { Box, Typography } from "@mui/material"; +import {Box, Typography, useTheme} from "@mui/material"; import { useQuizViewStore, updateAnswer } from "@root/quizView"; import type { QuizQuestionDate } from "../../../model/questionTypes/date"; import CalendarIcon from "@icons/CalendarIcon"; +import {modes} from "../../../utils/themes/Publication/themePublication"; +import {useCurrentQuiz} from "@root/quizes/hooks"; type DateProps = { currentQuestion: QuizQuestionDate; }; export const Date = ({ currentQuestion }: DateProps) => { + const theme = useTheme(); + const mode = modes; + const quiz = useCurrentQuiz(); const { answers } = useQuizViewStore(); const answer = answers.find( ({ questionId }) => questionId === currentQuestion.content.id @@ -20,7 +25,7 @@ export const Date = ({ currentQuestion }: DateProps) => { return ( - {currentQuestion.title} + {currentQuestion.title} { > , + openPickerIcon: () => , }} value={dayjs( answer @@ -61,10 +69,14 @@ export const Date = ({ currentQuestion }: DateProps) => { }, "data-cy": "open-datepicker", }, + layout: { + sx: {backgroundColor: theme.palette.background.default,} + } }} sx={{ + "& .MuiInputBase-root": { - backgroundColor: "#F2F3F7", + backgroundColor: mode[quiz.config.theme] ? "white" : theme.palette.background.default, borderRadius: "10px", maxWidth: "250px", pr: "22px", @@ -77,6 +89,7 @@ export const Date = ({ currentQuestion }: DateProps) => { borderColor: "#9A9AAF", }, }, + }} /> diff --git a/src/pages/ViewPublicationPage/questions/Emoji.tsx b/src/pages/ViewPublicationPage/questions/Emoji.tsx index 8642e3e6..ad9ec1d8 100644 --- a/src/pages/ViewPublicationPage/questions/Emoji.tsx +++ b/src/pages/ViewPublicationPage/questions/Emoji.tsx @@ -29,7 +29,7 @@ export const Emoji = ({ currentQuestion }: EmojiProps) => { return ( - {currentQuestion.title} + {currentQuestion.title} { key={variant.id} sx={{ borderRadius: "12px", - // border: `1px solid ${theme.palette.grey2.main}`, - border: `1px solid #9A9AAF`, + border: `1px solid`, + borderColor: answer === variant.id ? theme.palette.primary.main : "#9A9AAF", overflow: "hidden", maxWidth: "317px", width: "100%", @@ -90,7 +90,7 @@ export const Emoji = ({ currentQuestion }: EmojiProps) => { sx={{ margin: 0, padding: "15px", - color: "#4D4D4D", + color: theme.palette.text.primary, display: "flex", gap: "10px", }} @@ -108,7 +108,7 @@ export const Emoji = ({ currentQuestion }: EmojiProps) => { } }} control={ - } icon={} /> + } icon={} /> } label={ diff --git a/src/pages/ViewPublicationPage/questions/File.tsx b/src/pages/ViewPublicationPage/questions/File.tsx index 12ebd62f..2dcff3b0 100644 --- a/src/pages/ViewPublicationPage/questions/File.tsx +++ b/src/pages/ViewPublicationPage/questions/File.tsx @@ -56,7 +56,7 @@ export const File = ({ currentQuestion }: FileProps) => { return ( - {currentQuestion.title} + {currentQuestion.title} { > {answer?.split("|")[0] && ( - Вы загрузили: + Вы загрузили: { return ( - {currentQuestion.title} + {currentQuestion.title} { sx={{ cursor: "pointer", borderRadius: "5px", - border: `1px solid #9A9AAF`, - // border: `1px solid ${theme.palette.grey2.main}`, + border: `1px solid`, + borderColor: answer === variant.id ? theme.palette.primary.main : "#9A9AAF", }} onClick={(event) => { event.preventDefault(); @@ -99,13 +99,12 @@ export const Images = ({ currentQuestion }: ImagesProps) => { sx={{ display: "block", textAlign: "center", - color: "#9A9AAF", - // color: theme.palette.grey2.main, + color: theme.palette.text.primary, marginTop: "10px", }} value={index} control={ - } icon={} /> + } icon={} /> } label={variant.answer} /> diff --git a/src/pages/ViewPublicationPage/questions/Number.tsx b/src/pages/ViewPublicationPage/questions/Number.tsx index 6056beab..46f8e594 100644 --- a/src/pages/ViewPublicationPage/questions/Number.tsx +++ b/src/pages/ViewPublicationPage/questions/Number.tsx @@ -8,6 +8,8 @@ import { CustomSlider } from "@ui_kit/CustomSlider"; import { useQuizViewStore, updateAnswer } from "@root/quizView"; import type { QuizQuestionNumber } from "../../../model/questionTypes/number"; +import {modes} from "../../../utils/themes/Publication/themePublication"; +import {useCurrentQuiz} from "@root/quizes/hooks"; type NumberProps = { currentQuestion: QuizQuestionNumber; @@ -17,6 +19,8 @@ export const Number = ({ currentQuestion }: NumberProps) => { const [minRange, setMinRange] = useState("0"); const [maxRange, setMaxRange] = useState("100000000000"); const theme = useTheme(); + const mode = modes; + const quiz = useCurrentQuiz(); const { answers } = useQuizViewStore(); const updateMinRangeDebounced = useDebouncedCallback( (value, crowded = false) => { @@ -60,7 +64,7 @@ export const Number = ({ currentQuestion }: NumberProps) => { return ( - {currentQuestion.title} + {currentQuestion.title} { setMaxRange(String(range[1])); } }} + sx={{ + color: theme.palette.primary.main, + "& .MuiSlider-valueLabel": { + background: theme.palette.primary.main,} + }} /> {!currentQuestion.content.chooseRange && ( @@ -111,7 +120,11 @@ export const Number = ({ currentQuestion }: NumberProps) => { }} sx={{ maxWidth: "80px", - "& .MuiInputBase-input": { textAlign: "center" }, + borderColor: theme.palette.text.primary, + "& .MuiInputBase-input": { + textAlign: "center", + backgroundColor: mode[quiz.config.theme] ? "white" : theme.palette.background.default, + }, }} /> )} @@ -140,11 +153,15 @@ export const Number = ({ currentQuestion }: NumberProps) => { updateMinRangeDebounced(`${target.value}—${maxRange}`); }} sx={{ - maxWidth: "80px", - "& .MuiInputBase-input": { textAlign: "center" }, + maxWidth: "80px", + borderColor: theme.palette.text.primary, + "& .MuiInputBase-input": { + textAlign: "center", + backgroundColor: mode[quiz.config.theme] ? "white" : theme.palette.background.default, + }, }} /> - до + до { updateMaxRangeDebounced(`${minRange}—${target.value}`); }} sx={{ - maxWidth: "80px", - "& .MuiInputBase-input": { textAlign: "center" }, + maxWidth: "80px", + borderColor: theme.palette.text.primary, + "& .MuiInputBase-input": { + textAlign: "center", + backgroundColor: mode[quiz.config.theme] ? "white" : theme.palette.background.default, + }, }} /> diff --git a/src/pages/ViewPublicationPage/questions/Page.tsx b/src/pages/ViewPublicationPage/questions/Page.tsx index 619aea4b..0e0fde9a 100644 --- a/src/pages/ViewPublicationPage/questions/Page.tsx +++ b/src/pages/ViewPublicationPage/questions/Page.tsx @@ -1,4 +1,4 @@ -import { Box, Typography } from "@mui/material"; +import {Box, Typography, useTheme} from "@mui/material"; import { useQuizViewStore, updateAnswer } from "@root/quizView"; @@ -11,11 +11,12 @@ type PageProps = { export const Page = ({ currentQuestion }: PageProps) => { const { answers } = useQuizViewStore(); const { answer } = answers.find(({ questionId }) => questionId === currentQuestion.content.id) ?? {}; + const theme = useTheme(); return ( - {currentQuestion.title} - {currentQuestion.content.text} + {currentQuestion.title} + {currentQuestion.content.text} { return ( - {currentQuestion.title} + {currentQuestion.title} { const { answers } = useQuizViewStore(); + const theme = useTheme(); const { answer } = answers.find( ({ questionId }) => questionId === currentQuestion.content.id @@ -19,7 +20,7 @@ export const Select = ({ currentQuestion }: SelectProps) => { return ( - {currentQuestion.title} + {currentQuestion.title} { placeholder={currentQuestion.content.default} activeItemIndex={answer ? Number(answer) : -1} items={currentQuestion.content.variants.map(({ answer }) => answer)} + colorMain={theme.palette.primary.main} + color={theme.palette.primary.main} onChange={(_, value) => { if (value < 0) { deleteAnswer(currentQuestion.content.id); diff --git a/src/pages/ViewPublicationPage/questions/Text.tsx b/src/pages/ViewPublicationPage/questions/Text.tsx index bb0d90c8..63caa02a 100644 --- a/src/pages/ViewPublicationPage/questions/Text.tsx +++ b/src/pages/ViewPublicationPage/questions/Text.tsx @@ -1,4 +1,4 @@ -import { Box, Typography } from "@mui/material"; +import {Box, Typography, useTheme} from "@mui/material"; import CustomTextField from "@ui_kit/CustomTextField"; @@ -13,10 +13,10 @@ type TextProps = { export const Text = ({ currentQuestion }: TextProps) => { const { answers } = useQuizViewStore(); const { answer } = answers.find(({ questionId }) => questionId === currentQuestion.content.id) ?? {}; - + const theme = useTheme(); return ( - {currentQuestion.title} + {currentQuestion.title} { placeholder={currentQuestion.content.placeholder} value={answer || ""} onChange={({ target }) => updateAnswer(currentQuestion.content.id, target.value)} + sx={{ + "&:focus-visible": { + borderColor: theme.palette.primary.main + } + }} /> diff --git a/src/pages/ViewPublicationPage/questions/Variant.tsx b/src/pages/ViewPublicationPage/questions/Variant.tsx index 8e0806d7..5925ef65 100644 --- a/src/pages/ViewPublicationPage/questions/Variant.tsx +++ b/src/pages/ViewPublicationPage/questions/Variant.tsx @@ -21,10 +21,12 @@ import { import RadioCheck from "@ui_kit/RadioCheck"; import RadioIcon from "@ui_kit/RadioIcon"; -import { CheckboxIcon } from "@icons/Checkbox"; +import CheckboxIcon from "@icons/Checkbox"; +import {modes} from "../../../utils/themes/Publication/themePublication"; import type { QuizQuestionVariant } from "../../../model/questionTypes/variant"; import type { QuestionVariant } from "../../../model/questionTypes/shared"; +import {useCurrentQuiz} from "@root/quizes/hooks"; type VariantProps = { stepNumber: number; @@ -40,6 +42,7 @@ type VariantItemProps = { }; export const Variant = ({ currentQuestion }: VariantProps) => { + const theme = useTheme() const { answers, ownVariants } = useQuizViewStore(); const { answer } = answers.find( @@ -59,7 +62,7 @@ export const Variant = ({ currentQuestion }: VariantProps) => { return ( - {currentQuestion.title} + {currentQuestion.title} { const theme = useTheme(); - + const mode = modes + const quiz = useCurrentQuiz(); return ( } + checkedIcon={} icon={} /> ) : ( - } icon={} /> + } icon={} /> ) } label={own ? : variant.answer} diff --git a/src/pages/ViewPublicationPage/questions/Varimg.tsx b/src/pages/ViewPublicationPage/questions/Varimg.tsx index 5f2d0185..2c25ae74 100644 --- a/src/pages/ViewPublicationPage/questions/Varimg.tsx +++ b/src/pages/ViewPublicationPage/questions/Varimg.tsx @@ -15,6 +15,8 @@ import RadioCheck from "@ui_kit/RadioCheck"; import RadioIcon from "@ui_kit/RadioIcon"; import type { QuizQuestionVarImg } from "../../../model/questionTypes/varimg"; +import {modes} from "../../../utils/themes/Publication/themePublication"; +import {useCurrentQuiz} from "@root/quizes/hooks"; type VarimgProps = { currentQuestion: QuizQuestionVarImg; @@ -22,6 +24,8 @@ type VarimgProps = { export const Varimg = ({ currentQuestion }: VarimgProps) => { const { answers } = useQuizViewStore(); + const mode = modes; + const quiz = useCurrentQuiz(); const theme = useTheme(); const { answer } = answers.find( @@ -33,7 +37,7 @@ export const Varimg = ({ currentQuestion }: VarimgProps) => { return ( - {currentQuestion.title} + {currentQuestion.title} { marginBottom: "15px", borderRadius: "5px", padding: "15px", - color: "#4D4D4D", - border: `1px solid #9A9AAF`, + color: theme.palette.text.primary, + backgroundColor: mode[quiz.config.theme] ? "white" : theme.palette.background.default, + border: `1px solid`, + borderColor: answer === variant.id ? theme.palette.primary.main : "#9A9AAF", display: "flex", }} value={index} @@ -74,7 +80,7 @@ export const Varimg = ({ currentQuestion }: VarimgProps) => { } }} control={ - } icon={} /> + } icon={} /> } label={variant.answer} /> diff --git a/src/ui_kit/CustomCheckbox.tsx b/src/ui_kit/CustomCheckbox.tsx index 32b7d4ef..cb630f5d 100755 --- a/src/ui_kit/CustomCheckbox.tsx +++ b/src/ui_kit/CustomCheckbox.tsx @@ -1,7 +1,7 @@ import { FormControlLabel, Checkbox, useTheme, Box, useMediaQuery } from "@mui/material"; import React from "react"; -import { CheckboxIcon } from "@icons/Checkbox"; +import CheckboxIcon from "@icons/Checkbox"; import type { SxProps } from "@mui/material"; @@ -11,9 +11,10 @@ interface Props { checked?: boolean; sx?: SxProps; dataCy?: string; + colorIcon?: string; } -export default function CustomCheckbox({ label, handleChange, checked, sx, dataCy }: Props) { +export default function CustomCheckbox({ label, handleChange, checked, sx, dataCy, colorIcon }: Props) { const theme = useTheme(); const isMobile = useMediaQuery(theme.breakpoints.down(790)); @@ -24,7 +25,7 @@ export default function CustomCheckbox({ label, handleChange, checked, sx, dataC sx={{ padding: "0px 13px 1px 11px" }} disableRipple icon={} - checkedIcon={} + checkedIcon={} onChange={handleChange} checked={checked} data-cy={dataCy} @@ -32,7 +33,7 @@ export default function CustomCheckbox({ label, handleChange, checked, sx, dataC } label={label} sx={{ - color: theme.palette.grey2.main, + color: "#9A9AAF", height: "26px", ...sx, }} diff --git a/src/ui_kit/CustomSlider.tsx b/src/ui_kit/CustomSlider.tsx index 4438b42c..ab92c02f 100644 --- a/src/ui_kit/CustomSlider.tsx +++ b/src/ui_kit/CustomSlider.tsx @@ -1,4 +1,4 @@ -import { Slider, useTheme } from "@mui/material"; +import {Slider, SxProps, Theme, useTheme} from "@mui/material"; type CustomSliderProps = { defaultValue?: number; @@ -6,6 +6,7 @@ type CustomSliderProps = { min?: number; max?: number; step?: number; + sx?: SxProps onChange?: (_: Event, value: number | number[]) => void; onChangeCommitted?: (_: React.SyntheticEvent | Event, value: number | number[]) => void; }; @@ -18,6 +19,7 @@ export const CustomSlider = ({ step, onChange, onChangeCommitted, + sx, }: CustomSliderProps) => { // const handleChange = ({ type }: Event, newValue: number | number[]) => { // // Для корректной работы слайдера в FireFox @@ -40,11 +42,11 @@ export const CustomSlider = ({ onMouseDown={(e) => e.stopPropagation()} data-cy="slider" sx={{ - color: theme.palette.brightPurple.main, + color: "#7E2AEA", padding: "0", marginTop: "75px", "& .MuiSlider-valueLabel": { - background: theme.palette.brightPurple.main, + background: "#7E2AEA", borderRadius: "8px", minWidth: "60px", width: "auto", @@ -71,6 +73,7 @@ export const CustomSlider = ({ "& .MuiSlider-track": { height: "12px", }, + ...sx }} /> ); diff --git a/src/ui_kit/RadioCheck.tsx b/src/ui_kit/RadioCheck.tsx index 311daded..c842d817 100644 --- a/src/ui_kit/RadioCheck.tsx +++ b/src/ui_kit/RadioCheck.tsx @@ -1,7 +1,10 @@ import { Box, useTheme } from "@mui/material"; +interface Props { + color?: string +} -export default function RadioCheck() { +export default function RadioCheck( {color = "#7E2AEA"} : Props) { const theme = useTheme(); return ( @@ -16,7 +19,7 @@ export default function RadioCheck() { }} > - + diff --git a/src/utils/themes/Publication/genericPublication.ts b/src/utils/themes/Publication/genericPublication.ts new file mode 100644 index 00000000..f6f319e6 --- /dev/null +++ b/src/utils/themes/Publication/genericPublication.ts @@ -0,0 +1,43 @@ +import { createTheme } from "@mui/material"; +import theme from "../generic"; + +const themePublic = createTheme({ + ...theme, + components: { + MuiButton: { + variants: [ + { + props: { + variant: 'contained' + }, + style: { + padding: '13px 20px', + borderRadius: '8px', + boxShadow: "none", + // "&:hover": { + // backgroundColor: "#581CA7" + // } + + }, + }, + { + props: { + variant: 'outlined' + }, + style: { + padding: '10px 20px', + borderRadius: '8px', + "&:hover": { + backgroundColor: "#581CA7", + border: '1px solid #581CA7', + } + + }, + }, + ], + }, + }, + }, +) + +export default themePublic; \ No newline at end of file diff --git a/src/utils/themes/Publication/themePublication.ts b/src/utils/themes/Publication/themePublication.ts new file mode 100644 index 00000000..3c1a499f --- /dev/null +++ b/src/utils/themes/Publication/themePublication.ts @@ -0,0 +1,253 @@ +import { createTheme } from "@mui/material"; +import themePublic from "./genericPublication"; +import theme from "../generic"; + + + +const StandardTheme = createTheme({ + ...themePublic, + palette: { + primary: { + main: "#7E2AEA", + }, + secondary: { + main: "#252734" + }, + text: { + primary: "#333647", + secondary: "#7E2AEA", + }, + + background: { + default: "#FFFFFF", + }, + } +}) + +const StandardDarkTheme = createTheme({ + ...themePublic, + palette: { + primary: { + main: "#7E2AEA", + }, + secondary: { + main: "#252734" + }, + text: { + primary: "#FFFFFF", + secondary: "#7E2AEA", + }, + + background: { + default: "#333647", + }, + } +}) + +const PinkTheme = createTheme({ + ...themePublic, + palette: { + primary: { + main: "#D34085", + }, + secondary: { + main: "#252734" + }, + text: { + primary: "#333647", + secondary: "#D34085", + }, + + background: { + default: "#FFF9FC", + }, + } +}) + +const PinkDarkTheme = createTheme({ + ...themePublic, + palette: { + primary: { + main: "#D34085", + }, + secondary: { + main: "#252734" + }, + text: { + primary: "#FFFFFF", + secondary: "#D34085", + }, + + background: { + default: "#333647", + }, + } +}) + +const BlackWhiteTheme = createTheme({ + ...themePublic, + palette: { + primary: { + main: "#4E4D51", + }, + secondary: { + main: "#252734" + }, + text: { + primary: "#333647", + secondary: "#FFF9FC", + }, + + background: { + default: "#FFFFFF", + }, + } +}) + +const OliveTheme = createTheme({ + ...themePublic, + palette: { + primary: { + main: "#758E4F", + }, + secondary: { + main: "#252734" + }, + text: { + primary: "#333647", + secondary: "#758E4F", + }, + + background: { + default: "#F9FBF1", + }, + } +}) + +const PurpleTheme = createTheme({ + ...themePublic, + palette: { + primary: { + main: "#7E2AEA", + }, + secondary: { + main: "#252734" + }, + text: { + primary: "#333647", + secondary: "#7E2AEA", + }, + + background: { + default: "#FBF8FF", + }, + } +}) + +const YellowTheme = createTheme({ + ...themePublic, + palette: { + primary: { + main: "#F2B133", + }, + secondary: { + main: "#252734" + }, + text: { + primary: "#333647", + secondary: "#F2B133", + }, + + background: { + default: "#FFFCF6", + }, + } +}) + +const GoldDarkTheme = createTheme({ + ...themePublic, + palette: { + primary: { + main: "#E6AA37", + }, + secondary: { + main: "#FFFCF6", + }, + text: { + primary: "#FFFFFF", + secondary: "#F2B133", + }, + + background: { + default: "#333647", + }, + } +}) + +const BlueTheme = createTheme({ + ...themePublic, + palette: { + primary: { + main: "#4964ED", + }, + secondary: { + main: "#252734" + }, + text: { + primary: "#333647", + secondary: "#4964ED", + }, + + background: { + default: "#F5F7FF", + }, + } +}) + +const BlueDarkTheme = createTheme({ + ...themePublic, + palette: { + primary: { + main: "#07A0C3", + }, + secondary: { + main: "#252734" + }, + text: { + primary: "#FFFFFF", + secondary: "#07A0C3", + }, + + background: { + default: "#333647", + }, + } +}) + +export const modes = { + StandardTheme: true, + StandardDarkTheme: false, + PinkTheme: true, + PinkDarkTheme: false, + BlackWhiteTheme: true, + OliveTheme: true, + YellowTheme: true, + GoldDarkTheme: false, + PurpleTheme: true, + BlueTheme: true, + BlueDarkTheme: false +} + +export const themesPublication = { + StandardTheme, + StandardDarkTheme, + PinkTheme, + PinkDarkTheme, + BlackWhiteTheme, + OliveTheme, + YellowTheme, + GoldDarkTheme, + PurpleTheme, + BlueTheme, + BlueDarkTheme, +} \ No newline at end of file diff --git a/src/utils/themes/themePublication.ts b/src/utils/themes/themePublication.ts deleted file mode 100644 index 731d9acb..00000000 --- a/src/utils/themes/themePublication.ts +++ /dev/null @@ -1,47 +0,0 @@ -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, -} \ No newline at end of file