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 4efd2ff7..02b95274 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: "StandardTheme" | "StandardDarkTheme" | "PinkTheme" | "PinkDarkTheme" | "BlackWhiteTheme" | "OliveTheme" | "YellowTheme" | "GoldDarkTheme" | "PurpleTheme" | "BlueTheme" | "BlueDarkTheme"; resultInfo: { when: 'before' | 'after' | 'email', share: true | false, @@ -95,6 +96,7 @@ export const defaultQuizConfig: QuizConfig = { startpageType: null, results: null, haveRoot: null, + theme: "StandardTheme", resultInfo: { when: 'after', share: false, diff --git a/src/pages/Questions/DeleteNodeModal/index.tsx b/src/pages/Questions/DeleteNodeModal/index.tsx index 0da5039b..c06aff37 100644 --- a/src/pages/Questions/DeleteNodeModal/index.tsx +++ b/src/pages/Questions/DeleteNodeModal/index.tsx @@ -14,7 +14,7 @@ import { getQuestionByContentId } from "@root/questions/actions"; import { updateDeleteId } from "@root/uiTools/actions"; import { useUiTools } from "@root/uiTools/store"; -import { CheckboxIcon } from "@icons/Checkbox"; +import CheckboxIcon from "@icons/Checkbox"; type DeleteNodeModalProps = { removeNode?: (id: string) => void; 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 6689e82d..4066d9ee 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"; @@ -13,6 +13,7 @@ import { useQuestionsStore } from "@root/questions/store"; import { checkEmptyData } from "../ResultPage/cards/ResultCard"; import type { AnyTypedQuizQuestion } from "../../model/questionTypes/shared"; +import {modes} from "../../utils/themes/Publication/themePublication"; import { enqueueSnackbar } from "notistack"; type ContactFormProps = { @@ -37,8 +38,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); @@ -68,6 +70,7 @@ export const ContactForm = ({ display: "flex", alignItems: "center", justifyContent: "center", + backgroundColor: theme.palette.background.default, height: "100vh" }} > @@ -82,7 +85,8 @@ export const ContactForm = ({ sx={{ textAlign: "center", m: "20px 0", - fontSize: "28px" + fontSize: "28px", + color: theme.palette.text.primary }} > {quiz?.config.formContact.title || "Заполните форму, чтобы получить результаты теста"} @@ -109,6 +113,7 @@ export const ContactForm = ({ alignItems: "center", justifyContent: "center", flexDirection: "column", + backgroundColor: theme.palette.background.default, p: "30px" }}> @@ -146,13 +151,13 @@ export const ContactForm = ({ width: "450px", }} > - { setReady(target.checked) }} checked={ready} /> + { setReady(target.checked) }} checked={ready} colorIcon={theme.palette.primary.main}/> - С - Положением об обработке персональных данных - и - Политикой конфиденциальности - ознакомлен + С  + Положением об обработке персональных данных +  и  + Политикой конфиденциальности +  ознакомлен @@ -160,11 +165,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 3ea19249..1720dadc 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"; import { checkEmptyData } from "../ResultPage/cards/ResultCard"; type FooterProps = { @@ -23,6 +25,7 @@ export const Footer = ({ setCurrentQuestion, question, setShowContactForm, setSh const [disableNextButton, setDisableNextButton] = useState(false); const [stepNumber, setStepNumber] = useState(1); const quiz = useCurrentQuiz(); + const mode = modes; const { answers } = useQuizViewStore(); const questions = useQuestionsStore().questions as AnyTypedQuizQuestion[]; const theme = useTheme(); @@ -233,7 +236,13 @@ export const Footer = ({ setCurrentQuestion, question, setShowContactForm, setSh gap: "10px", }} > - + {mode[quiz.config.theme] ? ( + + ):( + + ) + + } {linear && <> } + + + {/* Шаг + + {stepNumber} */} + {/* */} + {/* Из + + {questions.length} + */} + + + + + + + + + + + + + + + ); }; 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 42b69f6e..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`, + borderColor: answer === variant.id ? theme.palette.primary.main : "#9A9AAF", overflow: "hidden", maxWidth: "317px", width: "100%", @@ -89,7 +90,7 @@ export const Emoji = ({ currentQuestion }: EmojiProps) => { sx={{ margin: 0, padding: "15px", - color: "#4D4D4D", + color: theme.palette.text.primary, display: "flex", gap: "10px", }} @@ -107,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 e107e9ac..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] && ( - Вы загрузили: + Вы загрузили: { 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) => { { return ( - {currentQuestion.title} + {currentQuestion.title} { sx={{ cursor: "pointer", borderRadius: "5px", - border: `1px solid ${theme.palette.grey2.main}`, + border: `1px solid`, + borderColor: answer === variant.id ? theme.palette.primary.main : "#9A9AAF", }} onClick={(event) => { event.preventDefault(); @@ -98,12 +99,12 @@ export const Images = ({ currentQuestion }: ImagesProps) => { sx={{ display: "block", textAlign: "center", - 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 d6f65eb4..095249b0 100644 --- a/src/pages/ViewPublicationPage/questions/Number.tsx +++ b/src/pages/ViewPublicationPage/questions/Number.tsx @@ -1,5 +1,5 @@ import { useState, useEffect } from "react"; -import { Box, Typography } from "@mui/material"; +import { Box, Typography, Slider, useTheme } from "@mui/material"; import { useDebouncedCallback } from "use-debounce"; import CustomTextField from "@ui_kit/CustomTextField"; @@ -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; @@ -16,6 +18,9 @@ type NumberProps = { 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) => { @@ -59,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 && ( - { + updateAnswer( + currentQuestion.content.id, + window.Number(target.value) > max + ? String(max) + : window.Number(target.value) < min + ? String(min) + : target.value + ); }} - > - { - updateAnswer( - currentQuestion.content.id, - window.Number(target.value) > max - ? String(max) - : window.Number(target.value) < min - ? String(min) - : target.value - ); - }} - sx={{ maxWidth: "80px", textAlign: "center" }} - /> - + sx={{ + maxWidth: "80px", + borderColor: theme.palette.text.primary, + "& .MuiInputBase-input": { + textAlign: "center", + backgroundColor: mode[quiz.config.theme] ? "white" : theme.palette.background.default, + }, + }} + /> )} + {currentQuestion.content.chooseRange && ( { updateMinRangeDebounced(`${target.value}—${maxRange}`); }} - sx={{ maxWidth: "80px", textAlign: "center" }} + sx={{ + 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", textAlign: "center" }} + sx={{ + 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 1199c32b..5ebdc846 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"; @@ -12,15 +12,12 @@ type PageProps = { export const Page = ({ currentQuestion }: PageProps) => { const { answers } = useQuizViewStore(); const { answer } = answers.find(({ questionId }) => questionId === currentQuestion.content.id) ?? {}; - - console.log(currentQuestion); + const theme = useTheme(); return ( - - {currentQuestion.title} - - {currentQuestion.content.text} + {currentQuestion.title} + {currentQuestion.content.text} { return ( - {currentQuestion.title} + {currentQuestion.title} { 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/Select.tsx b/src/pages/ViewPublicationPage/questions/Select.tsx index 376d8242..f23e906b 100644 --- a/src/pages/ViewPublicationPage/questions/Select.tsx +++ b/src/pages/ViewPublicationPage/questions/Select.tsx @@ -1,4 +1,4 @@ -import { Box, Typography } from "@mui/material"; +import {Box, Typography, useTheme} from "@mui/material"; import { Select as SelectComponent } from "../../../pages/Questions/Select"; @@ -12,6 +12,7 @@ type SelectProps = { export const Select = ({ currentQuestion }: SelectProps) => { 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 1b5276e4..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 5e07766b..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 ${theme.palette.grey2.main}`, + 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/pages/startPage/EditPage.tsx b/src/pages/startPage/EditPage.tsx index 6392baa7..6651f449 100755 --- a/src/pages/startPage/EditPage.tsx +++ b/src/pages/startPage/EditPage.tsx @@ -54,6 +54,7 @@ export default function EditPage() { const { editQuizId } = useQuizStore(); const { questions } = useQuestionsStore(); + console.log(quiz) useEffect(() => { const getData = async () => { const quizes = await quizApi.getList(); 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