Skip to content

Commit 5c8f5cb

Browse files
VitaliiShcVitaliiShc
committed
styles for need-help form done
1 parent 4d3c60e commit 5c8f5cb

File tree

4 files changed

+98
-94
lines changed

4 files changed

+98
-94
lines changed

‎index.html

+1-1
Original file line numberDiff line numberDiff line change
@@ -2,7 +2,7 @@
22
<html lang="en">
33
<head>
44
<meta charset="UTF-8" />
5-
<link rel="icon" type="image/svg+xml" href="./public/icon (1).svg" />
5+
<link rel="icon" type="image/svg+xml" href="./public/icon.svg" />
66
<meta name="viewport" content="width=device-width, initial-scale=1.0" />
77
<title>TaskPro</title>
88
</head>

‎public/icon (1).svg renamed to ‎public/icon.svg

File renamed without changes.

‎src/components/ModalHelp/ModalHelp.jsx

+50-43
Original file line numberDiff line numberDiff line change
@@ -4,36 +4,33 @@ import css from "./ModalHelp.module.css";
44
import * as Yup from "yup";
55
import toast from "react-hot-toast";
66

7+
import { selectUser } from "../../redux/auth/selectors";
8+
import { useSelector } from "react-redux";
79
import { Formik, Form, Field, ErrorMessage } from "formik";
810
import { useDispatch } from "react-redux";
911
import { sendHelpMessage } from "../../redux/boards/operations";
1012

1113
export default function ModalHelp({ isOpen, closeModal }) {
14+
const user = useSelector(selectUser);
1215
const dispatch = useDispatch();
1316

1417
const ValidEditionSchema = Yup.object().shape({
15-
email: Yup.string()
16-
.email("Must be a valid email!")
17-
.matches(/\.com$|\.ua$/, "Email must end with .com or .ua")
18-
.min(1, "Too Short Email!")
19-
.max(35, "Too Long Email!")
20-
.required("Required"),
18+
email: Yup.string().email("Must be a valid email!").required("Required"),
2119
comment: Yup.string()
2220
.min(4, "Too Short Comment!")
2321
.max(300, "Too Long Comment!")
2422
.required("Required"),
2523
});
2624
const Notify = () =>
2725
toast.success(
28-
"Thanks for contacting us! We've received your message and will get back to you soon."
26+
"Thanks for contacting us! We've received your message and will get back to you soon"
2927
);
3028

3129
const handleSubmit = (values, actions) => {
3230
const newMessage = {
3331
email: values.email,
3432
comment: values.comment,
3533
};
36-
console.log(newMessage);
3734
actions.resetForm();
3835
dispatch(sendHelpMessage(newMessage));
3936
Notify();
@@ -49,48 +46,58 @@ export default function ModalHelp({ isOpen, closeModal }) {
4946
>
5047
<h2 className={css.title}>Need help</h2>
5148
<svg className={css.icon} onClick={closeModal} width="18px" height="18px">
52-
<use className={css.icon} href={svg + "#x-close"}></use>
49+
<use href={svg + "#x-close"}></use>
5350
</svg>
5451
<Formik
55-
initialValues={{ email: "", comment: "" }}
52+
initialValues={{ email: user.email, comment: "" }}
5653
onSubmit={handleSubmit}
5754
validationSchema={ValidEditionSchema}
5855
>
59-
<Form autoComplete="off">
60-
<div className={css.formGroup}>
61-
<Field
62-
className={css.input}
63-
type="email"
64-
name="email"
65-
placeholder="Email address "
66-
/>
67-
<ErrorMessage
68-
name="email"
69-
component="div"
70-
className={css.errorMessage}
71-
/>
72-
</div>
56+
{({ touched, errors }) => (
57+
<Form autoComplete="off">
58+
<div className={css.formGroup}>
59+
<div className={css.errorContainer}>
60+
<ErrorMessage
61+
name="email"
62+
component="span"
63+
className={css.error}
64+
/>
65+
</div>
66+
<Field
67+
type="email"
68+
name="email"
69+
placeholder="Email address"
70+
className={`${css.input} ${
71+
errors.email && touched.email ? css.inputError : ""
72+
}`}
73+
/>
74+
</div>
7375

74-
<div className={css.formGroup}>
75-
<Field
76-
className={css.inputText}
77-
type="text"
78-
name="comment"
79-
placeholder="Comment"
80-
rows="5"
81-
component="textarea"
82-
/>
83-
<ErrorMessage
84-
name="comment"
85-
component="div"
86-
className={css.errorMessage2}
87-
/>
88-
</div>
76+
<div className={css.formGroup}>
77+
<div className={css.errorContainer}>
78+
<ErrorMessage
79+
name="comment"
80+
component="span"
81+
className={css.error}
82+
/>
83+
</div>
84+
<Field
85+
className={`${css.textArea} ${
86+
errors.comment && touched.comment ? css.textAreaError : ""
87+
}`}
88+
type="text"
89+
name="comment"
90+
placeholder="Comment"
91+
rows="5"
92+
component="textarea"
93+
/>
94+
</div>
8995

90-
<button className={css.button} type="submit">
91-
Send
92-
</button>
93-
</Form>
96+
<button className={css.button} type="submit">
97+
Send
98+
</button>
99+
</Form>
100+
)}
94101
</Formik>
95102
</Modal>
96103
);

‎src/components/ModalHelp/ModalHelp.module.css

+47-50
Original file line numberDiff line numberDiff line change
@@ -1,11 +1,3 @@
1-
.icon {
2-
position: absolute;
3-
stroke: var(--modal-text);
4-
top: 14px;
5-
right: 14px;
6-
background: none;
7-
cursor: pointer;
8-
}
91
.overlay {
102
position: fixed;
113
inset: 0;
@@ -15,6 +7,7 @@
157
align-items: center;
168
z-index: 13;
179
}
10+
1811
.modal {
1912
position: fixed;
2013
top: 50%;
@@ -26,6 +19,16 @@
2619
width: 335px;
2720
border: 1px solid var(--modal-border);
2821
}
22+
23+
.icon {
24+
position: absolute;
25+
stroke: var(--modal-text);
26+
top: 14px;
27+
right: 14px;
28+
background: none;
29+
cursor: pointer;
30+
}
31+
2932
.form {
3033
width: 100%;
3134
padding: 24px;
@@ -44,86 +47,80 @@
4447
color: var(--modal-text);
4548
}
4649

47-
.container {
48-
display: flex;
49-
justify-content: center;
50-
align-items: center;
51-
padding: 40px;
50+
.formGroup {
51+
position: relative;
5252
}
5353

54-
.input {
55-
margin-bottom: 14px;
56-
}
5754
.input,
58-
.inputText {
55+
.textArea {
5956
padding: 14px 18px;
6057
border-radius: 8px;
61-
/* width: 287px; */
6258
width: 100%;
6359
height: 49px;
6460
background-color: var(--modal-input);
6561
color: var(--modal-text);
6662
border: 1px solid var(--modal-border);
63+
font-size: 14px;
64+
letter-spacing: -0.02em;
65+
font-weight: 400;
66+
box-shadow: none;
6767
outline: none;
68-
opacity: 0.4;
6968
}
7069

71-
.input:hover,
72-
.input:focus,
73-
.inputText:hover,
74-
.inputText:focus {
75-
opacity: 1;
76-
}
77-
78-
.input::placeholder {
79-
font-size: 14px;
80-
letter-spacing: -0.02em;
70+
.input {
71+
margin-bottom: 18px;
8172
}
8273

83-
.inputText {
84-
/* margin-bottom: 24px; */
85-
/* width: 287px; */
74+
.textArea {
75+
margin-bottom: 24px;
8676
height: 120px;
8777
resize: none;
8878
}
8979

90-
.inputText::placeholder {
91-
text-align: start;
80+
.input:hover,
81+
.input:focus,
82+
.textArea:hover,
83+
.textArea:focus {
84+
opacity: 1;
85+
border: 1px solid var(--white);
9286
}
9387

94-
/* .errorMessage {
95-
color: red;
96-
font-size: 8px;
97-
margin-top: 8px;
98-
} */
88+
.input::placeholder,
89+
.textArea::placeholder {
90+
text-align: start;
91+
}
9992

100-
.formGroup {
101-
position: relative;
93+
.errorContainer {
94+
position: absolute;
95+
top: -14px;
96+
width: 100%;
97+
display: flex;
98+
flex-direction: column;
99+
gap: 4px;
102100
}
103101

104-
.errorMessage {
102+
.error {
103+
height: 0px;
105104
color: red;
106105
font-size: 12px;
107106
text-align: left;
108-
position: absolute;
109-
bottom: 0;
110-
left: 0;
107+
margin-bottom: 5px;
108+
bottom: initial;
111109
}
112110

113-
.errorMessage2 {
114-
composes: errorMessage;
115-
bottom: initial;
111+
.inputError,
112+
.textAreaError {
113+
border: 1px solid red;
116114
}
115+
117116
.button {
118117
padding: 8px 16px;
119118
background-color: var(--btn-color);
120119
color: var(--plus-btn);
121120
border: none;
122-
/* width: 287px; */
123121
width: 100%;
124122
border-radius: 8px;
125123
cursor: pointer;
126-
margin-top: 24px;
127124
}
128125

129126
.button:hover,

0 commit comments

Comments
 (0)