SQuiz/frontAnswerer
2
0
Fork 0
Code Issues 4 Pull Requests Actions Packages Projects Releases Wiki Activity

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

Browse Source
This commit is contained in:
Tamara 2024-03-26 03:06:54 +03:00
parent 0ffec3083c
commit 118f05439e
29 changed files with 299 additions and 237 deletions
Show Stats Download Patch File Download Diff File Expand all files Collapse all files

25
lib/assets/icons/ContactFormIcon/EmailIcon.tsx
View File

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

29
lib/assets/icons/ContactFormIcon/NameIcon.tsx
View File

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

17
lib/assets/icons/ContactFormIcon/PhoneIcon.tsx
View File

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

9
lib/assets/icons/questionsPage/FlagIcon.tsx
View File

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

9
lib/assets/icons/questionsPage/hashtagIcon.tsx
View File

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

9
lib/assets/icons/questionsPage/heartIcon.tsx
View File

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

9
lib/assets/icons/questionsPage/lightbulbIcon.tsx
View File

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

9
lib/assets/icons/questionsPage/likeIcon.tsx
View File

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

9
lib/assets/icons/questionsPage/tropfyIcon.tsx
View File

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

30
lib/components/ViewPublicationPage/ContactForm.tsx
View File

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

2
lib/components/ViewPublicationPage/Footer.tsx
View File

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

69
lib/components/ViewPublicationPage/Question.tsx
View File

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

9
lib/components/ViewPublicationPage/ResultForm.tsx
View File

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

35
lib/components/ViewPublicationPage/ViewPublicationPage.tsx
View File

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

2
lib/components/ViewPublicationPage/questions/Date.tsx
View File

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

97
lib/components/ViewPublicationPage/questions/Emoji.tsx
View File

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

16
lib/components/ViewPublicationPage/questions/Images.tsx
View File

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

5
lib/components/ViewPublicationPage/questions/Number.tsx
View File

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

19
lib/components/ViewPublicationPage/questions/Rating.tsx
View File

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

2
lib/components/ViewPublicationPage/questions/Select.tsx
View File

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

2
lib/components/ViewPublicationPage/questions/Text.tsx
View File

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

3
lib/components/ViewPublicationPage/questions/Variant.tsx
View File

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

19
lib/components/ViewPublicationPage/questions/Varimg.tsx
View File

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

28
lib/components/ViewPublicationPage/tools/NextButton.tsx Normal file
View File

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

38
lib/components/ViewPublicationPage/tools/PrevButton.tsx Normal file
View File

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

1
lib/components/ViewPublicationPage/tools/Select.tsx
View File

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

11
lib/utils/themes/Publication/genericPublication.ts
View File

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

21
lib/utils/themes/Publication/themePublication.ts
View File

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

2
lib/utils/themes/generic.ts
View File

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