Merge pull request #131 from AnWhiteM/stiles/need-help-form

styles for need-help form done
AnWhiteM · Jun 20, 2024 · 63285cd · 63285cd
2 parents 9c3669e + 5c8f5cb
commit 63285cd
Show file tree

Hide file tree

Showing 4 changed files with 98 additions and 94 deletions.
diff --git a/index.html b/index.html
@@ -2,7 +2,7 @@
 <html lang="en">
   <head>
     <meta charset="UTF-8" />
-    <link rel="icon" type="image/svg+xml" href="./public/icon (1).svg" />
+    <link rel="icon" type="image/svg+xml" href="./public/icon.svg" />
     <meta name="viewport" content="width=device-width, initial-scale=1.0" />
     <title>TaskPro</title>
   </head>

diff --git a/public/icon (1).svg → public/icon.svg b/public/icon (1).svg → public/icon.svg
diff --git a/src/components/ModalHelp/ModalHelp.jsx b/src/components/ModalHelp/ModalHelp.jsx
@@ -4,36 +4,33 @@ import css from "./ModalHelp.module.css";
 import * as Yup from "yup";
 import toast from "react-hot-toast";
 
+import { selectUser } from "../../redux/auth/selectors";
+import { useSelector } from "react-redux";
 import { Formik, Form, Field, ErrorMessage } from "formik";
 import { useDispatch } from "react-redux";
 import { sendHelpMessage } from "../../redux/boards/operations";
 
 export default function ModalHelp({ isOpen, closeModal }) {
+  const user = useSelector(selectUser);
   const dispatch = useDispatch();
 
   const ValidEditionSchema = Yup.object().shape({
-    email: Yup.string()
-      .email("Must be a valid email!")
-      .matches(/\.com$|\.ua$/, "Email must end with .com or .ua")
-      .min(1, "Too Short Email!")
-      .max(35, "Too Long Email!")
-      .required("Required"),
+    email: Yup.string().email("Must be a valid email!").required("Required"),
     comment: Yup.string()
       .min(4, "Too Short Comment!")
       .max(300, "Too Long Comment!")
       .required("Required"),
   });
   const Notify = () =>
     toast.success(
-      "Thanks for contacting us! We've received your message and will get back to you soon."
+      "Thanks for contacting us! We've received your message and will get back to you soon"
     );
 
   const handleSubmit = (values, actions) => {
     const newMessage = {
       email: values.email,
       comment: values.comment,
     };
-    console.log(newMessage);
     actions.resetForm();
     dispatch(sendHelpMessage(newMessage));
     Notify();
@@ -49,48 +46,58 @@ export default function ModalHelp({ isOpen, closeModal }) {
     >
       <h2 className={css.title}>Need help</h2>
       <svg className={css.icon} onClick={closeModal} width="18px" height="18px">
-        <use className={css.icon} href={svg + "#x-close"}></use>
+        <use href={svg + "#x-close"}></use>
       </svg>
       <Formik
-        initialValues={{ email: "", comment: "" }}
+        initialValues={{ email: user.email, comment: "" }}
         onSubmit={handleSubmit}
         validationSchema={ValidEditionSchema}
       >
-        <Form autoComplete="off">
-          <div className={css.formGroup}>
-            <Field
-              className={css.input}
-              type="email"
-              name="email"
-              placeholder="Email address "
-            />
-            <ErrorMessage
-              name="email"
-              component="div"
-              className={css.errorMessage}
-            />
-          </div>
+        {({ touched, errors }) => (
+          <Form autoComplete="off">
+            <div className={css.formGroup}>
+              <div className={css.errorContainer}>
+                <ErrorMessage
+                  name="email"
+                  component="span"
+                  className={css.error}
+                />
+              </div>
+              <Field
+                type="email"
+                name="email"
+                placeholder="Email address"
+                className={`${css.input} ${
+                  errors.email && touched.email ? css.inputError : ""
+                }`}
+              />
+            </div>
 
-          <div className={css.formGroup}>
-            <Field
-              className={css.inputText}
-              type="text"
-              name="comment"
-              placeholder="Comment"
-              rows="5"
-              component="textarea"
-            />
-            <ErrorMessage
-              name="comment"
-              component="div"
-              className={css.errorMessage2}
-            />
-          </div>
+            <div className={css.formGroup}>
+              <div className={css.errorContainer}>
+                <ErrorMessage
+                  name="comment"
+                  component="span"
+                  className={css.error}
+                />
+              </div>
+              <Field
+                className={`${css.textArea} ${
+                  errors.comment && touched.comment ? css.textAreaError : ""
+                }`}
+                type="text"
+                name="comment"
+                placeholder="Comment"
+                rows="5"
+                component="textarea"
+              />
+            </div>
 
-          <button className={css.button} type="submit">
-            Send
-          </button>
-        </Form>
+            <button className={css.button} type="submit">
+              Send
+            </button>
+          </Form>
+        )}
       </Formik>
     </Modal>
   );

diff --git a/src/components/ModalHelp/ModalHelp.module.css b/src/components/ModalHelp/ModalHelp.module.css
@@ -1,11 +1,3 @@
-.icon {
-  position: absolute;
-  stroke: var(--modal-text);
-  top: 14px;
-  right: 14px;
-  background: none;
-  cursor: pointer;
-}
 .overlay {
   position: fixed;
   inset: 0;
@@ -15,6 +7,7 @@
   align-items: center;
   z-index: 13;
 }
+
 .modal {
   position: fixed;
   top: 50%;
@@ -26,6 +19,16 @@
   width: 335px;
   border: 1px solid var(--modal-border);
 }
+
+.icon {
+  position: absolute;
+  stroke: var(--modal-text);
+  top: 14px;
+  right: 14px;
+  background: none;
+  cursor: pointer;
+}
+
 .form {
   width: 100%;
   padding: 24px;
@@ -44,86 +47,80 @@
   color: var(--modal-text);
 }
 
-.container {
-  display: flex;
-  justify-content: center;
-  align-items: center;
-  padding: 40px;
+.formGroup {
+  position: relative;
 }
 
-.input {
-  margin-bottom: 14px;
-}
 .input,
-.inputText {
+.textArea {
   padding: 14px 18px;
   border-radius: 8px;
-  /* width: 287px; */
   width: 100%;
   height: 49px;
   background-color: var(--modal-input);
   color: var(--modal-text);
   border: 1px solid var(--modal-border);
+  font-size: 14px;
+  letter-spacing: -0.02em;
+  font-weight: 400;
+  box-shadow: none;
   outline: none;
-  opacity: 0.4;
 }
 
-.input:hover,
-.input:focus,
-.inputText:hover,
-.inputText:focus {
-  opacity: 1;
-}
-
-.input::placeholder {
-  font-size: 14px;
-  letter-spacing: -0.02em;
+.input {
+  margin-bottom: 18px;
 }
 
-.inputText {
-  /* margin-bottom: 24px; */
-  /* width: 287px; */
+.textArea {
+  margin-bottom: 24px;
   height: 120px;
   resize: none;
 }
 
-.inputText::placeholder {
-  text-align: start;
+.input:hover,
+.input:focus,
+.textArea:hover,
+.textArea:focus {
+  opacity: 1;
+  border: 1px solid var(--white);
 }
 
-/* .errorMessage {
-  color: red;
-  font-size: 8px;
-  margin-top: 8px;
-} */
+.input::placeholder,
+.textArea::placeholder {
+  text-align: start;
+}
 
-.formGroup {
-  position: relative;
+.errorContainer {
+  position: absolute;
+  top: -14px;
+  width: 100%;
+  display: flex;
+  flex-direction: column;
+  gap: 4px;
 }
 
-.errorMessage {
+.error {
+  height: 0px;
   color: red;
   font-size: 12px;
   text-align: left;
-  position: absolute;
-  bottom: 0;
-  left: 0;
+  margin-bottom: 5px;
+  bottom: initial;
 }
 
-.errorMessage2 {
-  composes: errorMessage;
-  bottom: initial;
+.inputError,
+.textAreaError {
+  border: 1px solid red;
 }
+
 .button {
   padding: 8px 16px;
   background-color: var(--btn-color);
   color: var(--plus-btn);
   border: none;
-  /* width: 287px; */
   width: 100%;
   border-radius: 8px;
   cursor: pointer;
-  margin-top: 24px;
 }
 
 .button:hover,