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-04-30 21:57:25 +03:00
parent 7ccaf01d2c
commit d4d56c7808
9 changed files with 64 additions and 74 deletions
Show Stats Download Patch File Download Diff File Expand all files Collapse all files

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

@ -9,13 +9,11 @@ export default function AddressIcon({ color, backgroundColor }: Props) {
return (
<Box
sx={{
// height: "38px",
// width: "24px",
display: "flex",
alignItems: "center",
justifyContent: "center",
height: "58px",
width: "42px",
width: "45px",
backgroundColor: {backgroundColor},
borderBottomLeftRadius: "12px",
borderTopLeftRadius: "12px",

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

@ -9,13 +9,11 @@ export default function EmailIcon({ color, backgroundColor }: Props) {
return (
<Box
sx={{
// height: "38px",
// width: "24px",
display: "flex",
alignItems: "center",
justifyContent: "center",
height: "58px",
width: "42px",
width: "45px",
backgroundColor: {backgroundColor},
borderBottomLeftRadius: "12px",
borderTopLeftRadius: "12px",

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

@ -9,13 +9,11 @@ export default function NameIcon({ color, backgroundColor }: Props) {
return (
<Box
sx={{
// height: "38px",
// width: "45px",
display: "flex",
alignItems: "center",
justifyContent: "center",
height: "58px",
width: "42px",
width: "45px",
backgroundColor: {backgroundColor},
borderBottomLeftRadius: "12px",
borderTopLeftRadius: "12px",

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

@ -9,13 +9,11 @@ export default function PhoneIcon({ color, backgroundColor }: Props) {
return (
<Box
sx={{
// height: "38px",
// width: "24px",
display: "flex",
alignItems: "center",
justifyContent: "center",
height: "58px",
width: "42px",
width: "45px",
backgroundColor: {backgroundColor},
borderBottomLeftRadius: "12px",
borderTopLeftRadius: "12px",

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

@ -9,13 +9,11 @@ export default function TextIcon({ color, backgroundColor }: Props) {
return (
<Box
sx={{
// height: "38px",
// width: "45px",
display: "flex",
alignItems: "center",
justifyContent: "center",
height: "58px",
width: "42px",
width: "45px",
backgroundColor: {backgroundColor},
borderBottomLeftRadius: "12px",
borderTopLeftRadius: "12px",

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

@ -247,6 +247,7 @@ export const ContactForm = ({ currentQuestion, onShowResult }: Props) => {
justifyContent: "center",
borderRight: isMobile ? undefined : "1px solid #9A9AAF80",
margin: isMobile ? 0 : "40px 0",
padding: isMobile ? "0" : "0 40px"
}}
>
<Box
@ -257,14 +258,14 @@ export const ContactForm = ({ currentQuestion, onShowResult }: Props) => {
flexDirection: "column",
alignItems: "flex-start",
justifyContent: "center",
padding: isMobile ? "20px 20px 0 20px" : "0 0 0 40px",
padding: isMobile ? "40px 20px 0 20px" : "0",
mt: isMobile ? 0 : isTablet ? "-180px" : "-47px",
}}
>
<Typography
sx={{
textAlign: isTablet ? undefined : "center",
m: "20px 0",
fontSize: isTablet ? "24px" : "28px",
fontSize: "24px",
lineHeight: "normal",
fontWeight: 501,
color: theme.palette.text.primary,
@ -292,18 +293,19 @@ export const ContactForm = ({ currentQuestion, onShowResult }: Props) => {
<Box
sx={{
display: "flex",
alignItems: "center",
alignItems: isMobile ? undefined : "center",
justifyContent: "center",
flexDirection: "column",
backgroundColor: theme.palette.background.default,
p: isMobile ? "40px" : "125px 60px 30px 60px",
p: isMobile ? "0 20px" : isTablet ? "0px 40px 30px 60px" : "125px 60px 30px 60px",
}}
>
<Box
sx={{
display: "flex",
flexDirection: "column",
my: "20px",
mt: isMobile ? "10px" : "20px",
mb: "20px"
}}
>
<Inputs
@ -319,30 +321,9 @@ export const ContactForm = ({ currentQuestion, onShowResult }: Props) => {
setAdress={setAdress}
/>
</Box>
{
// resultQuestion &&
// settings.cfg.resultInfo.when === "after" &&
<Button
disabled={!(ready && !fire)}
variant="contained"
onClick={handleShowResultsClick}
sx={{
border: `1px solid ${theme.palette.primary.main}`,
"&:disabled": {
border: "1px solid #9A9AAF",
color: "#9A9AAF",
},
}}
>
{settings.cfg.formContact?.button || "Получить результаты"}
</Button>
}
<Box
sx={{
display: "flex",
mt: "20px",
width: isMobile ? "300px" : "390px",
}}
>
@ -353,8 +334,9 @@ export const ContactForm = ({ currentQuestion, onShowResult }: Props) => {
}}
checked={ready}
colorIcon={theme.palette.primary.main}
sx={{marginRight: "0"}}
/>
<Typography sx={{ color: theme.palette.text.primary }}>
<Typography sx={{ color: theme.palette.text.primary, lineHeight: "18.96px" }} fontSize={"16px"} >
С&ensp;
<Link href={"https://shub.pena.digital/ppdd"} target="_blank">
Положением об обработке персональных данных{" "}
@ -370,6 +352,28 @@ export const ContactForm = ({ currentQuestion, onShowResult }: Props) => {
&ensp;ознакомлен
</Typography>
</Box>
{
// resultQuestion &&
// settings.cfg.resultInfo.when === "after" &&
<Button
disabled={!(ready && !fire)}
variant="contained"
onClick={handleShowResultsClick}
sx={{
border: `1px solid ${theme.palette.primary.main}`,
margin: isMobile ? "auto" : undefined,
mt: "20px",
p: "10px 20px",
"&:disabled": {
border: "1px solid #9A9AAF",
color: "#9A9AAF",
},
}}
>
{settings.cfg.formContact?.button || "Получить результаты"}
</Button>
}
{show_badge && (
<Box
component={Link}
@ -381,14 +385,17 @@ export const ContactForm = ({ currentQuestion, onShowResult }: Props) => {
display: "flex",
alignItems: "center",
mt: "55px",
mb: "50px",
gap: "15px",
mb: "40px",
gap: "10px",
textDecoration: "none",
position: "absolute",
bottom: 0,
left: isMobile ? "28%" : undefined
}}
>
<NameplateLogo
style={{
fontSize: "23px",
fontSize: "20px",
color: quizThemes[settings.cfg.theme].isLight
? "#151515"
: "#FFFFFF",
@ -507,7 +514,7 @@ const CustomInput = ({ title, desc, Icon, onChange, mask }: InputProps) => {
return (
<Box m="10px 0">
<Typography mb="7px" color={theme.palette.text.primary}>
<Typography mb="7px" color={theme.palette.text.primary} fontSize={"16px"}>
{title}
</Typography>
@ -515,8 +522,9 @@ const CustomInput = ({ title, desc, Icon, onChange, mask }: InputProps) => {
inputRef={ref}
onChange={onChange}
sx={{
width: isMobile ? "300px" : "390px",
width: isMobile ? "100%" : "390px",
backgroundColor: theme.palette.background.default,
fontSize: "16px",
"& .MuiOutlinedInput-notchedOutline": {
borderColor: "#9A9AAF80",
borderRadius: "12px",
@ -524,6 +532,9 @@ const CustomInput = ({ title, desc, Icon, onChange, mask }: InputProps) => {
"& .MuiInputBase-root": {
paddingLeft: 0,
},
"& .MuiOutlinedInput-input": {
paddingLeft: "10px",
},
"& .MuiOutlinedInput-root": {
"&:hover fieldset": {
borderColor: theme.palette.primary.main,

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

@ -75,17 +75,6 @@ export const ResultForm = ({ resultQuestion }: ResultFormProps) => {
mb: "7px",
}}
>
{settings.cfg.startpage.logo && (
<img
src={settings.cfg.startpage.logo}
style={{
height: "40px",
maxWidth: "110px",
objectFit: "cover",
}}
alt=""
/>
)}
<Typography
sx={{
fontSize: "14px",
@ -93,7 +82,7 @@ export const ResultForm = ({ resultQuestion }: ResultFormProps) => {
wordBreak: "break-word",
}}
>
{settings.cfg.info.orgname}
Ваш результат:
</Typography>
</Box>
<Box
@ -138,9 +127,9 @@ export const ResultForm = ({ resultQuestion }: ResultFormProps) => {
resultQuestion.description !== " " && (
<Typography
sx={{
fontSize: "23px",
fontSize: "24px",
fontWeight: 700,
m: "20px 0",
mt: "25px",
color: theme.palette.text.primary,
wordBreak: "break-word",
}}
@ -151,7 +140,7 @@ export const ResultForm = ({ resultQuestion }: ResultFormProps) => {
<Typography
sx={{
m: "20px 0",
mt: "20px",
color: theme.palette.text.primary,
wordBreak: "break-word",
}}
@ -164,7 +153,7 @@ export const ResultForm = ({ resultQuestion }: ResultFormProps) => {
<Typography
sx={{
fontSize: "18px",
m: "20px 0",
mt: "30px ",
wordBreak: "break-word",
color: theme.palette.text.primary,
}}

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

@ -176,7 +176,7 @@ const CenteredLayout = ({
<Box
sx={{
overflow: "auto",
padding: "10px 25px 25px",
padding: "25px 25px 25px",
display: "flex",
flexDirection: "column",
alignItems: "center",

18
lib/components/ViewPublicationPage/StartPageViewPublication/index.tsx
View File

@ -94,7 +94,7 @@ export const StartPageViewPublication = () => {
alignItems: "center",
flexWrap: settings.cfg.startpageType === "expanded" && settings.cfg.startpage.position === "center"? "nowrap" : "wrap",
gap:"30px",
mb: "7px",
mb: settings.cfg.startpageType === "centered" ? "25px" : "7px",
}}
>
{settings.cfg.startpage.logo &&
@ -163,13 +163,13 @@ export const StartPageViewPublication = () => {
? "center"
: "start"
: "start",
marginTop: "28px",
marginTop: settings.cfg.startpageType === "centered" ? "30px" : "5px",
width:settings.cfg.startpageType === "expanded" && settings.cfg.startpage.position === "center" && !isMobile? "50%" : settings.cfg.startpageType === "centered" && !isMobile? "50%" : "100%",
}}
>
<Typography
sx={{
fontWeight: "500",
fontWeight: "700",
fontSize: "26px",
fontStyle: "normal",
fontStretch: "normal",
@ -244,14 +244,14 @@ export const StartPageViewPublication = () => {
: 0,
gap: "20px",
alignItems: "flex-end",
justifyContent: settings.cfg.startpageType === "centered" && isMobile? "center" :"space-between",
justifyContent: settings.cfg.startpageType === "centered" || settings.cfg.startpageType === "expanded" && settings.cfg.startpage.position === "center" && isMobile? "center" : "space-between",
width: "100%",
flexWrap: settings.cfg.startpageType === "expanded" && settings.cfg.startpage.position === "center"? "nowrap" :"wrap",
flexWrap: settings.cfg.startpageType === "expanded" && settings.cfg.startpage.position === "center" ? isMobile ? "wrap-reverse" : "nowrap" : "wrap",
}}
>
{settings.cfg.startpageType === "expanded" && settings.cfg.startpage.position === "center"&& !isMobile && quizHeaderBlock}
{settings.cfg.startpageType === "expanded" && settings.cfg.startpage.position === "center" && !isMobile && quizHeaderBlock}
<Box sx={{ maxWidth: "300px",
display: settings.cfg.startpageType === "centered" && isMobile? "flex" : "block",
display: settings.cfg.startpageType === "centered" || settings.cfg.startpageType === "expanded" && settings.cfg.startpage.position === "center" && isMobile ? "flex" : "block",
flexDirection: "column",
alignItems: "center",
order: settings.cfg.startpageType === "expanded" && settings.cfg.startpage.position === "center"? "2" : "0"}}>
@ -346,7 +346,7 @@ export const StartPageViewPublication = () => {
sx={{
display: "flex",
alignItems: "center",
gap: "15px",
gap: "7px",
textDecoration: "none",
}}
>
@ -363,7 +363,7 @@ export const StartPageViewPublication = () => {
/>
<Typography
sx={{
fontSize: "14px",
fontSize: "13px",
color:
settings.cfg.startpageType === "expanded"
? "#F5F7FF"