SQuiz/frontPanel
3
0
Fork 0
Code Issues 18 Pull Requests 2 Actions Packages Projects Releases Wiki Activity

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

Browse Source
This commit is contained in:
Tamara 2023-12-21 03:08:58 +03:00
parent 494d750534
commit bfe19091ac
10 changed files with 94 additions and 26 deletions
Show Stats Download Patch File Download Diff File Expand all files Collapse all files

2
src/pages/ViewPublicationPage/Footer.tsx
View File

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

8
src/pages/ViewPublicationPage/StartPageViewPublication.tsx
View File

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

14
src/pages/ViewPublicationPage/index.tsx
View File

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

3
src/pages/ViewPublicationPage/questions/Emoji.tsx
View File

@ -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%",

11
src/pages/ViewPublicationPage/questions/File.tsx
View File

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

6
src/pages/ViewPublicationPage/questions/Images.tsx
View File

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

11
src/pages/ViewPublicationPage/questions/Rating.tsx
View File

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

2
src/pages/ViewPublicationPage/questions/Variant.tsx
View File

@ -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",

2
src/pages/ViewPublicationPage/questions/Varimg.tsx
View File

@ -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}

47
src/utils/themes/themePublication.ts Normal file
View File

@ -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,
}