фк и результаты приближены к макету
This commit is contained in:
Tamara
parent
9664a6fdc5
commit
ab0f53e061
@ -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
|
||||
|
||||
@ -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
|
||||
|
||||
@ -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
|
||||
|
||||
@ -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"
|
||||
>
|
||||
|
||||
@ -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
|
||||
|
||||
@ -179,6 +179,17 @@ export const ContactForm = ({ currentQuestion, onShowResult }: Props) => {
|
||||
justifyContent: "center",
|
||||
borderRight: isWide && !isMobile ? "1px solid gray" : undefined,
|
||||
}}
|
||||
>
|
||||
<Box
|
||||
sx={{
|
||||
maxWidth: "630px",
|
||||
width: "100%",
|
||||
display: "flex",
|
||||
flexDirection: "column",
|
||||
alignItems: "flex-start",
|
||||
justifyContent: "center",
|
||||
padding: isMobile ? "20px 20px 0 20px" : "0 0 0 40px"
|
||||
}}
|
||||
>
|
||||
<Typography
|
||||
sx={{
|
||||
@ -196,7 +207,6 @@ export const ContactForm = ({ currentQuestion, onShowResult }: Props) => {
|
||||
<Typography
|
||||
sx={{
|
||||
color: theme.palette.text.primary,
|
||||
textAlign: "center",
|
||||
m: "20px 0",
|
||||
fontSize: "18px",
|
||||
wordBreak: "break-word"
|
||||
@ -207,6 +217,8 @@ export const ContactForm = ({ currentQuestion, onShowResult }: Props) => {
|
||||
)}
|
||||
</Box>
|
||||
|
||||
</Box>
|
||||
|
||||
<Box
|
||||
sx={{
|
||||
display: "flex",
|
||||
@ -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>
|
||||
),
|
||||
}}
|
||||
|
||||
@ -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" &&
|
||||
|
||||
@ -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": {
|
||||
|
||||
Loading…
Reference in New Issue
Block a user