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-14 19:09:40 +03:00
parent 9664a6fdc5
commit ab0f53e061
8 changed files with 85 additions and 36 deletions
Show Stats Download Patch File Download Diff File Expand all files Collapse all files

10
lib/assets/icons/ContactFormIcon/AddressIcon.tsx
View File

@ -2,17 +2,23 @@ import { Box } from "@mui/material";
interface Props {
color: string;
backgroundColor: string
}
export default function AddressIcon({ color }: Props) {
export default function AddressIcon({ color, backgroundColor }: Props) {
return (
<Box
sx={{
// height: "38px",
// width: "45px",
// width: "24px",
display: "flex",
alignItems: "center",
justifyContent: "center",
height: "58px",
width: "42px",
backgroundColor: {backgroundColor},
borderBottomLeftRadius: "12px",
borderTopLeftRadius: "12px",
}}
>
<svg

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

@ -2,17 +2,23 @@ import { Box } from "@mui/material";
interface Props {
color: string;
backgroundColor: string
}
export default function EmailIcon({ color }: Props) {
export default function EmailIcon({ color, backgroundColor }: Props) {
return (
<Box
sx={{
// height: "38px",
// width: "45px",
// width: "24px",
display: "flex",
alignItems: "center",
justifyContent: "center",
height: "58px",
width: "42px",
backgroundColor: {backgroundColor},
borderBottomLeftRadius: "12px",
borderTopLeftRadius: "12px",
}}
>
<svg

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

@ -2,9 +2,10 @@ import { Box } from "@mui/material";
interface Props {
color: string;
backgroundColor: string
}
export default function NameIcon({ color }: Props) {
export default function NameIcon({ color, backgroundColor }: Props) {
return (
<Box
sx={{
@ -13,6 +14,11 @@ export default function NameIcon({ color }: Props) {
display: "flex",
alignItems: "center",
justifyContent: "center",
height: "58px",
width: "42px",
backgroundColor: {backgroundColor},
borderBottomLeftRadius: "12px",
borderTopLeftRadius: "12px",
}}
>
<svg

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

@ -2,23 +2,29 @@ import { Box } from "@mui/material";
interface Props {
color: string;
backgroundColor: string
}
export default function PhoneIcon({ color }: Props) {
export default function PhoneIcon({ color, backgroundColor }: Props) {
return (
<Box
sx={{
// height: "38px",
// width: "45px",
// width: "24px",
display: "flex",
alignItems: "center",
justifyContent: "center",
height: "58px",
width: "42px",
backgroundColor: {backgroundColor},
borderBottomLeftRadius: "12px",
borderTopLeftRadius: "12px",
}}
>
<svg
width="15"
height="15"
viewBox="0 0 15 15"
width="17"
height="17"
viewBox="0 0 17 17"
fill="none"
xmlns="http://www.w3.org/2000/svg"
>

8
lib/assets/icons/ContactFormIcon/TextIcon.tsx
View File

@ -2,9 +2,10 @@ import { Box } from "@mui/material";
interface Props {
color: string;
backgroundColor: string
}
export default function TextIcon({ color }: Props) {
export default function TextIcon({ color, backgroundColor }: Props) {
return (
<Box
sx={{
@ -13,6 +14,11 @@ export default function TextIcon({ color }: Props) {
display: "flex",
alignItems: "center",
justifyContent: "center",
height: "58px",
width: "42px",
backgroundColor: {backgroundColor},
borderBottomLeftRadius: "12px",
borderTopLeftRadius: "12px",
}}
>
<svg

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

@ -180,31 +180,43 @@ export const ContactForm = ({ currentQuestion, onShowResult }: Props) => {
borderRight: isWide && !isMobile ? "1px solid gray" : undefined,
}}
>
<Typography
<Box
sx={{
textAlign: "center",
m: "20px 0",
fontSize: "28px",
color: theme.palette.text.primary,
wordBreak: "break-word"
maxWidth: "630px",
width: "100%",
display: "flex",
flexDirection: "column",
alignItems: "flex-start",
justifyContent: "center",
padding: isMobile ? "20px 20px 0 20px" : "0 0 0 40px"
}}
>
{settings.cfg.formContact.title ||
"Заполните форму, чтобы получить результаты теста"}
</Typography>
{settings.cfg.formContact.desc && (
<Typography
sx={{
color: theme.palette.text.primary,
textAlign: "center",
m: "20px 0",
fontSize: "18px",
fontSize: "28px",
color: theme.palette.text.primary,
wordBreak: "break-word"
}}
>
{settings.cfg.formContact.desc}
{settings.cfg.formContact.title ||
"Заполните форму, чтобы получить результаты теста"}
</Typography>
)}
{settings.cfg.formContact.desc && (
<Typography
sx={{
color: theme.palette.text.primary,
m: "20px 0",
fontSize: "18px",
wordBreak: "break-word"
}}
>
{settings.cfg.formContact.desc}
</Typography>
)}
</Box>
</Box>
<Box
@ -214,7 +226,7 @@ export const ContactForm = ({ currentQuestion, onShowResult }: Props) => {
justifyContent: "center",
flexDirection: "column",
backgroundColor: theme.palette.background.default,
p: "30px",
p: "0px 20px 30px 20px",
}}
>
<Box
@ -348,7 +360,7 @@ const Inputs = ({
onChange={({ target }) => setName(target.value)}
id={name}
title={FC["name"].innerText || "Введите имя"}
desc={FC["name"].text || "имя"}
desc={FC["name"].text || "Имя"}
Icon={NameIcon}
/>
);
@ -366,7 +378,7 @@ const Inputs = ({
onChange={({ target }) => setPhone(target.value)}
id={phone}
title={FC["phone"].innerText || "Введите номер телефона"}
desc={FC["phone"].text || "номер телефона"}
desc={FC["phone"].text || "Номер телефона"}
Icon={PhoneIcon}
/>
);
@ -375,7 +387,7 @@ const Inputs = ({
onChange={({ target }) => setText(target.value)}
id={text}
title={FC["text"].text || "Введите фамилию"}
desc={FC["text"].innerText || "фамилию"}
desc={FC["text"].innerText || "Фамилия"}
Icon={TextIcon}
/>
);
@ -384,7 +396,7 @@ const Inputs = ({
onChange={({ target }) => setAdress(target.value)}
id={adress}
title={FC["address"].innerText || "Введите адрес"}
desc={FC["address"].text || "адрес"}
desc={FC["address"].text || "Адрес"}
Icon={AddressIcon}
/>
);
@ -414,12 +426,12 @@ const CustomInput = ({ title, desc, Icon, onChange, id }: {
id: string;
title: string;
desc: string;
Icon: FC<{ color: string; }>;
Icon: FC<{ color: string; backgroundColor: string }>;
onChange: TextFieldProps["onChange"];
}) => {
const theme = useTheme();
const isMobile = useRootContainerSize() < 600;
const { settings } = useQuizData();
return (
<Box m="15px 0">
<Typography mb="7px" color={theme.palette.text.primary}>
@ -430,15 +442,21 @@ const CustomInput = ({ title, desc, Icon, onChange, id }: {
onChange={onChange}
sx={{
width: isMobile ? "300px" : "350px",
backgroundColor: theme.palette.background.default,
"& .MuiOutlinedInput-notchedOutline": {
borderColor: "#9A9AAF"
borderColor: "#9A9AAF80",
borderRadius: "12px"
},
"& .MuiInputBase-root": {
paddingLeft: 0
}
}}
placeholder={desc}
InputProps={{
startAdornment: (
<InputAdornment position="start">
<Icon color="gray" />
<Icon color="gray" backgroundColor={quizThemes[settings.cfg.theme].isLight ? "#F2F3F7" : "#F2F3F71A"} />
</InputAdornment>
),
}}

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

@ -170,12 +170,13 @@ export const ResultForm = ({ resultQuestion }: ResultFormProps) => {
<Box
sx={{
boxShadow: "0 0 15px 0 rgba(0,0,0,.08)",
// boxShadow: "0 0 15px 0 rgba(0,0,0,.08)",
width: "100%",
flexDirection: "column",
display: "flex",
justifyContent: "center",
alignItems: "center",
border: "1px solid #9A9AAF80",
p:
(
settings.cfg.resultInfo.showResultForm === "before" &&

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

@ -64,7 +64,7 @@ export default function ViewPublicationPage() {
sx={{
fontSize: "16px",
padding: "10px 15px",
color: "#FFFFFF",
color: "#9A9AAF",
border: "1px solid #9A9AAF",
background: "rgba(154,154,175, 0.2)",
"&:disabled": {