fix: designs

2024-03-05 17:29:52 +03:00 · 2024-03-05 17:29:52 +03:00 · 593059f2e2
commit 593059f2e2
parent 2a02773c46
11 changed files with 462 additions and 386 deletions
--- a/lib/components/ViewPublicationPage/Question.tsx
+++ b/lib/components/ViewPublicationPage/Question.tsx
@ -88,7 +88,9 @@ export const Question = ({
      <Box
        sx={{
          background: settings.cfg.design
-            ? "linear-gradient(90deg,#272626, transparent)"
+            ? quizThemes[settings.cfg.theme].isLight
+              ? "transparent"
+              : "linear-gradient(90deg,#272626, transparent)"
            : theme.palette.background.default,
        }}
      >
--- a/lib/components/ViewPublicationPage/StartPageViewPublication/index.tsx
+++ b/lib/components/ViewPublicationPage/StartPageViewPublication/index.tsx
@ -267,7 +267,10 @@ export const StartPageViewPublication = () => {
                      <Typography
                        sx={{
                          fontSize: "16px",
-                          color: theme.palette.text.primary,
+                          color:
+                            settings.cfg.startpageType === "expanded"
+                              ? "#FFFFFF"
+                              : theme.palette.text.primary,
                        }}
                      >
                        {settings.cfg.info.phonenumber}
@ -278,7 +281,10 @@ export const StartPageViewPublication = () => {
                      <Typography
                        sx={{
                          fontSize: "16px",
-                          color: theme.palette.text.primary,
+                          color:
+                            settings.cfg.startpageType === "expanded"
+                              ? "#FFFFFF"
+                              : theme.palette.text.primary,
                        }}
                      >
                        {settings.cfg.info.phonenumber}
@ -290,7 +296,10 @@ export const StartPageViewPublication = () => {
                    sx={{
                      fontSize: "16px",
                      marginTop: "5px",
-                      color: theme.palette.text.primary,
+                      color:
+                        settings.cfg.startpageType === "expanded"
+                          ? "#FFFFFF"
+                          : theme.palette.text.primary,
                    }}
                  >
                    {settings.cfg.info.phonenumber}
--- a/lib/components/ViewPublicationPage/questions/Date.tsx
+++ b/lib/components/ViewPublicationPage/questions/Date.tsx
@ -88,7 +88,9 @@ export const Date = ({ currentQuestion }: DateProps) => {
          sx={{
            "& .MuiInputBase-root": {
              backgroundColor: settings.cfg.design
-                ? "rgba(154,154,175, 0.2)"
+                ? quizThemes[settings.cfg.theme].isLight
+                  ? "#F2F3F7"
+                  : "rgba(154,154,175, 0.2)"
                : quizThemes[settings.cfg.theme].isLight
                ? "white"
                : theme.palette.background.default,
--- a/lib/components/ViewPublicationPage/questions/Emoji.tsx
+++ b/lib/components/ViewPublicationPage/questions/Emoji.tsx
@ -5,7 +5,7 @@ import {
  Radio,
  RadioGroup,
  Typography,
-    useTheme
+  useTheme,
 } from "@mui/material";

 import { deleteAnswer, updateAnswer, useQuizViewStore } from "@stores/quizView";
@ -19,7 +19,7 @@ import { enqueueSnackbar } from "notistack";
 import type { QuizQuestionEmoji } from "../../../model/questionTypes/emoji";
 import { useQuizData } from "@contexts/QuizDataContext";
 import { polyfillCountryFlagEmojis } from "country-flag-emoji-polyfill";
-
+import { quizThemes } from "@utils/themes/Publication/themePublication";

 polyfillCountryFlagEmojis();
 import { useState } from "react";
@ -30,12 +30,10 @@ type EmojiProps = {

 export const Emoji = ({ currentQuestion }: EmojiProps) => {
  const theme = useTheme();
-    const { quizId } = useQuizData();
+  const { quizId, settings } = useQuizData();
  const { answers } = useQuizViewStore();
  const { answer } =
-        answers.find(
-            ({ questionId }) => questionId === currentQuestion.id
-        ) ?? {};
+    answers.find(({ questionId }) => questionId === currentQuestion.id) ?? {};
  const [isSending, setIsSending] = useState<boolean>(false);

  return (
@ -44,7 +42,9 @@ export const Emoji = ({ currentQuestion }: EmojiProps) => {
        variant="h5"
        color={theme.palette.text.primary}
        sx={{ wordBreak: "break-word" }}
-            >{currentQuestion.title}</Typography>
+      >
+        {currentQuestion.title}
+      </Typography>
      <RadioGroup
        name={currentQuestion.id}
        value={currentQuestion.content.variants.findIndex(
@ -56,8 +56,7 @@ export const Emoji = ({ currentQuestion }: EmojiProps) => {
            currentQuestion.content.variants[Number(target.value)].answer,
            currentQuestion.content.variants[Number(target.value)].points || 0
          );
-                }
-                }
+        }}
        sx={{
          display: "flex",
          flexWrap: "wrap",
@ -66,7 +65,9 @@ export const Emoji = ({ currentQuestion }: EmojiProps) => {
          marginTop: "20px",
        }}
      >
-                <Box sx={{ display: "flex", width: "100%", gap: "42px", flexWrap: "wrap" }}>
+        <Box
+          sx={{ display: "flex", width: "100%", gap: "42px", flexWrap: "wrap" }}
+        >
          {currentQuestion.content.variants.map((variant, index) => (
            <FormControl
              key={variant.id}
@ -74,11 +75,19 @@ export const Emoji = ({ currentQuestion }: EmojiProps) => {
              sx={{
                borderRadius: "12px",
                border: `1px solid`,
-                                borderColor: answer === variant.id ? theme.palette.primary.main : "#9A9AAF",
+                borderColor:
+                  answer === variant.id
+                    ? theme.palette.primary.main
+                    : "#9A9AAF",
                overflow: "hidden",
                maxWidth: "317px",
                width: "100%",
                height: "255px",
+                background: settings.cfg.design
+                  ? quizThemes[settings.cfg.theme].isLight
+                    ? "#F2F3F7"
+                    : "rgba(154,154,175, 0.2)"
+                  : "transparent",
              }}
            >
              <Box
@ -125,7 +134,7 @@ export const Emoji = ({ currentQuestion }: EmojiProps) => {
                    },
                    "&::-webkit-scrollbar-thumb": {
                      backgroundColor: "#b8babf",
-                                        }
+                    },
                  },
                }}
                value={index}
@ -137,7 +146,10 @@ export const Emoji = ({ currentQuestion }: EmojiProps) => {
                  try {
                    await sendAnswer({
                      questionId: currentQuestion.id,
-                                            body: currentQuestion.content.variants[index].extendedText + " " + currentQuestion.content.variants[index].answer,
+                      body:
+                        currentQuestion.content.variants[index].extendedText +
+                        " " +
+                        currentQuestion.content.variants[index].answer,
                      qid: quizId,
                    });

@ -165,16 +177,24 @@ export const Emoji = ({ currentQuestion }: EmojiProps) => {

                  setIsSending(false);
                }}
-
                control={
-                                    <Radio checkedIcon={<RadioCheck color={theme.palette.primary.main} />} icon={<RadioIcon />} />
+                  <Radio
+                    checkedIcon={
+                      <RadioCheck color={theme.palette.primary.main} />
+                    }
+                    icon={<RadioIcon />}
+                  />
                }
                label={
                  <Box sx={{ display: "flex", gap: "10px" }}>
-                                        <Typography sx={{
+                    <Typography
+                      sx={{
                        wordBreak: "break-word",
                        lineHeight: "normal",
-                                        }}>{variant.answer}</Typography>
+                      }}
+                    >
+                      {variant.answer}
+                    </Typography>
                  </Box>
                }
              />
--- a/lib/components/ViewPublicationPage/questions/Images.tsx
+++ b/lib/components/ViewPublicationPage/questions/Images.tsx
@ -4,7 +4,7 @@ import {
  Radio,
  RadioGroup,
  Typography,
-    useTheme
+  useTheme,
 } from "@mui/material";

 import { deleteAnswer, updateAnswer, useQuizViewStore } from "@stores/quizView";
@ -17,6 +17,7 @@ import { useRootContainerSize } from "../../../contexts/RootContainerWidthContex
 import type { QuizQuestionImages } from "../../../model/questionTypes/images";
 import { useQuizData } from "@contexts/QuizDataContext";
 import { useState } from "react";
+import { quizThemes } from "@utils/themes/Publication/themePublication";

 type ImagesProps = {
  currentQuestion: QuizQuestionImages;
@ -26,14 +27,23 @@ export const Images = ({ currentQuestion }: ImagesProps) => {
  const { quizId } = useQuizData();
  const { answers } = useQuizViewStore();
  const theme = useTheme();
-    const answer = answers.find(({ questionId }) => questionId === currentQuestion.id)?.answer;
+  const answer = answers.find(
+    ({ questionId }) => questionId === currentQuestion.id
+  )?.answer;
+  const { settings } = useQuizData();
  const [isSending, setIsSending] = useState<boolean>(false);
  const isTablet = useRootContainerSize() < 1000;
  const isMobile = useRootContainerSize() < 500;

  return (
    <Box>
-            <Typography variant="h5" color={theme.palette.text.primary} sx={{ wordBreak: "break-word" }}>{currentQuestion.title}</Typography>
+      <Typography
+        variant="h5"
+        color={theme.palette.text.primary}
+        sx={{ wordBreak: "break-word" }}
+      >
+        {currentQuestion.title}
+      </Typography>
      <RadioGroup
        name={currentQuestion.id}
        value={currentQuestion.content.variants.findIndex(
@ -66,7 +76,15 @@ export const Images = ({ currentQuestion }: ImagesProps) => {
                cursor: "pointer",
                borderRadius: "5px",
                border: `1px solid`,
-                                borderColor: answer === variant.id ? theme.palette.primary.main : "#9A9AAF",
+                borderColor:
+                  answer === variant.id
+                    ? theme.palette.primary.main
+                    : "#9A9AAF",
+                background: settings.cfg.design
+                  ? quizThemes[settings.cfg.theme].isLight
+                    ? "#FFFFFF"
+                    : "rgba(154,154,175, 0.2)"
+                  : "transparent",
                transition: "opacity 0.5s ease",
                opacity: isSending ? 0.5 : 1,
                pointerEvents: isSending ? "none" : "auto",
@ -147,12 +165,17 @@ export const Images = ({ currentQuestion }: ImagesProps) => {
                    },
                    "&::-webkit-scrollbar-thumb": {
                      backgroundColor: "#b8babf",
-                                        }
+                    },
                  },
                }}
                value={index}
                control={
-                                    <Radio checkedIcon={<RadioCheck color={theme.palette.primary.main} />} icon={<RadioIcon />} />
+                  <Radio
+                    checkedIcon={
+                      <RadioCheck color={theme.palette.primary.main} />
+                    }
+                    icon={<RadioIcon />}
+                  />
                }
                label={variant.answer}
              />
--- a/lib/components/ViewPublicationPage/questions/Number.tsx
+++ b/lib/components/ViewPublicationPage/questions/Number.tsx
@ -411,9 +411,7 @@ export const Number = ({ currentQuestion }: NumberProps) => {
              "& .MuiOutlinedInput-root": { background: "transparent" },
              "& .MuiInputBase-input": { textAlign: "center", zIndex: 1 },
              "& .MuiOutlinedInput-notchedOutline": {
-                backgroundColor: settings.cfg.design
-                  ? "rgba(154,154,175, 0.2)"
-                  : quizThemes[settings.cfg.theme].isLight
+                backgroundColor: quizThemes[settings.cfg.theme].isLight
                  ? "white"
                  : theme.palette.background.default,
              },
@ -440,9 +438,7 @@ export const Number = ({ currentQuestion }: NumberProps) => {
                "& .MuiOutlinedInput-root": { background: "transparent" },
                "& .MuiInputBase-input": { textAlign: "center", zIndex: 1 },
                "& .MuiOutlinedInput-notchedOutline": {
-                  backgroundColor: settings.cfg.design
-                    ? "rgba(154,154,175, 0.2)"
-                    : quizThemes[settings.cfg.theme].isLight
+                  backgroundColor: quizThemes[settings.cfg.theme].isLight
                    ? "white"
                    : theme.palette.background.default,
                },
@ -455,13 +451,10 @@ export const Number = ({ currentQuestion }: NumberProps) => {
              onChange={onMaxInputChange}
              sx={{
                maxWidth: "80px",
-                borderColor: theme.palette.text.primary,
                "& .MuiOutlinedInput-root": { background: "transparent" },
                "& .MuiInputBase-input": { textAlign: "center", zIndex: 1 },
                "& .MuiOutlinedInput-notchedOutline": {
-                  backgroundColor: settings.cfg.design
-                    ? "rgba(154,154,175, 0.2)"
-                    : quizThemes[settings.cfg.theme].isLight
+                  backgroundColor: quizThemes[settings.cfg.theme].isLight
                    ? "white"
                    : theme.palette.background.default,
                },
--- a/lib/components/ViewPublicationPage/questions/Select.tsx
+++ b/lib/components/ViewPublicationPage/questions/Select.tsx
@ -9,6 +9,7 @@ import { enqueueSnackbar } from "notistack";
 import type { QuizQuestionSelect } from "../../../model/questionTypes/select";
 import { useQuizData } from "@contexts/QuizDataContext";
 import { useState } from "react";
+import { quizThemes } from "@utils/themes/Publication/themePublication";

 type SelectProps = {
  currentQuestion: QuizQuestionSelect;
@ -16,17 +17,21 @@ type SelectProps = {

 export const Select = ({ currentQuestion }: SelectProps) => {
  const theme = useTheme();
-    const { quizId } = useQuizData();
+  const { quizId, settings } = useQuizData();
  const [isSending, setIsSending] = useState<boolean>(false);
  const { answers } = useQuizViewStore();
  const { answer } =
-        answers.find(
-            ({ questionId }) => questionId === currentQuestion.id
-        ) ?? {};
+    answers.find(({ questionId }) => questionId === currentQuestion.id) ?? {};

  return (
    <Box>
-            <Typography variant="h5" color={theme.palette.text.primary} sx={{ wordBreak: "break-word" }}>{currentQuestion.title}</Typography>
+      <Typography
+        variant="h5"
+        color={theme.palette.text.primary}
+        sx={{ wordBreak: "break-word" }}
+      >
+        {currentQuestion.title}
+      </Typography>
      <Box
        sx={{
          display: "flex",
@ -41,18 +46,26 @@ export const Select = ({ currentQuestion }: SelectProps) => {
          activeItemIndex={answer ? Number(answer) : -1}
          items={currentQuestion.content.variants.map(({ answer }) => answer)}
          colorMain={theme.palette.primary.main}
+          sx={{
+            "& .MuiSelect-select.MuiSelect-outlined": { zIndex: 1 },
+            "& .MuiOutlinedInput-notchedOutline": {
+              background: settings.cfg.design
+                ? quizThemes[settings.cfg.theme].isLight
+                  ? "#F2F3F7"
+                  : "rgba(154,154,175, 0.2)"
+                : "transparent",
+            },
+          }}
          onChange={async (_, value) => {
            setIsSending(true);
            if (value < 0) {
              deleteAnswer(currentQuestion.id);
              try {
-
                await sendAnswer({
                  questionId: currentQuestion.id,
                  body: "",
                  qid: quizId,
                });
-
              } catch (e) {
                enqueueSnackbar("ответ не был засчитан");
              }
@ -60,15 +73,15 @@ export const Select = ({ currentQuestion }: SelectProps) => {
            }

            try {
-
              await sendAnswer({
                questionId: currentQuestion.id,
-                                body: String(currentQuestion.content.variants[Number(value)].answer),
+                body: String(
+                  currentQuestion.content.variants[Number(value)].answer
+                ),
                qid: quizId,
              });

              updateAnswer(currentQuestion.id, String(value), 0);
-
            } catch (e) {
              enqueueSnackbar("ответ не был засчитан");
            }
--- a/lib/components/ViewPublicationPage/questions/Text.tsx
+++ b/lib/components/ViewPublicationPage/questions/Text.tsx
@ -16,6 +16,7 @@ import { useRootContainerSize } from "@contexts/RootContainerWidthContext";
 import { enqueueSnackbar } from "notistack";
 import { ChangeEvent, FC, useEffect, useState } from "react";
 import { useDebouncedCallback } from "use-debounce";
+import { quizThemes } from "@utils/themes/Publication/themePublication";
 import type { QuizQuestionText } from "../../../model/questionTypes/text";

 const TextField = MuiTextField as unknown as FC<TextFieldProps>; // temporary fix ts(2590)
@ -151,9 +152,11 @@ const TextNormal = ({ currentQuestion, answer, inputHC }: Props) => {
          }}
          sx={{
            "& .MuiOutlinedInput-root": {
-              backgroundColor: settings.cfg.design
-                ? "rgba(154,154,175, 0.2)"
-                : "#FFFFFF",
+              background: settings.cfg.design
+                ? quizThemes[settings.cfg.theme].isLight
+                  ? "#F2F3F7"
+                  : "rgba(154,154,175, 0.2)"
+                : "transparent",
            },
            "&:focus-visible": { borderColor: theme.palette.primary.main },
          }}
@ -240,7 +243,14 @@ const TextSpecial = ({
              updateAnswer(currentQuestion.id, target.value, 0);
              inputHC(target.value);
            }}
-            inputProps={{ maxLength: 400 }}
+            inputProps={{
+              maxLength: 400,
+              background: settings.cfg.design
+                ? quizThemes[settings.cfg.theme].isLight
+                  ? "#F2F3F7"
+                  : "rgba(154,154,175, 0.2)"
+                : "transparent",
+            }}
            sx={{
              width: "100%",
              "& .MuiOutlinedInput-root": {
--- a/lib/components/ViewPublicationPage/questions/Variant.tsx
+++ b/lib/components/ViewPublicationPage/questions/Variant.tsx
@ -176,7 +176,9 @@ const VariantItem = ({
        borderColor:
          answer === variant.id ? theme.palette.primary.main : "#9A9AAF",
        backgroundColor: settings.cfg.design
-          ? "rgba(154,154,175, 0.2)"
+          ? quizThemes[settings.cfg.theme].isLight
+            ? "#FFFFFF"
+            : "rgba(154,154,175, 0.2)"
          : quizThemes[settings.cfg.theme].isLight
          ? "white"
          : theme.palette.background.default,
--- a/lib/components/ViewPublicationPage/questions/Varimg.tsx
+++ b/lib/components/ViewPublicationPage/questions/Varimg.tsx
@ -87,7 +87,9 @@ export const Varimg = ({ currentQuestion }: VarimgProps) => {
                  padding: "15px",
                  color: theme.palette.text.primary,
                  backgroundColor: settings.cfg.design
-                    ? "rgba(154,154,175, 0.2)"
+                    ? quizThemes[settings.cfg.theme].isLight
+                      ? "#FFFFFF"
+                      : "rgba(154,154,175, 0.2)"
                    : quizThemes[settings.cfg.theme].isLight
                    ? "white"
                    : theme.palette.background.default,
@ -174,7 +176,7 @@ export const Varimg = ({ currentQuestion }: VarimgProps) => {
            alignItems: "center",
            justifyContent: "center",
            backgroundColor: "#9A9AAF12",
-            color: "#9A9AAF",
+            color: theme.palette.text.primary,
            textAlign: "center",
          }}
        >
--- a/lib/utils/themes/Publication/themePublication.ts
+++ b/lib/utils/themes/Publication/themePublication.ts
@ -274,12 +274,12 @@ const Design3 = createTheme({
      main: "#252734",
    },
    text: {
-      primary: "#333647",
+      primary: "#252734",
      secondary: "#4B6A99",
    },

    background: {
-      default: "#FFFFFF",
+      default: "#F5F7FF",
    },
  },
 });