contact form styling and mobile menu button

package.json

@@ -25,8 +25,5 @@
   "devDependencies": {
     "craco": "^0.0.3",
     "lerna": "^4.0.0"
-  },
-  "dependencies": {
-    "@formspree/react": "^2.4.0"
   }
 }

packages/storyteller-home/package.json

@@ -9,6 +9,7 @@
     "@fortawesome/free-brands-svg-icons": "^6.1.1",
     "@fortawesome/free-solid-svg-icons": "^6.1.1",
     "@fortawesome/react-fontawesome": "^0.2.0",
+    "@formspree/react": "^2.4.0",
     "@testing-library/jest-dom": "^5.16.1",
     "@testing-library/react": "^9.5.0",
     "@testing-library/user-event": "^13.5.0",
@@ -34,7 +35,8 @@
     "@tippyjs/react": "^4.2.6",
     "gsap": "^3.11.0",
     "split-type": "^0.3.2",
-    "swiper": "^8.3.2"
+    "swiper": "^8.3.2",
+    "react-toastify": "^9.0.8"
   },
   "scripts": {
     "start": "craco start",

packages/storyteller-home/src/App.scss

@@ -1022,6 +1022,10 @@ span.swiper-pagination-bullet.swiper-pagination-bullet-active {
   --swiper-theme-color: #fa6b68 !important;
 }
 
+.contact-container {
+  max-width: 700px;
+}
+
 @media (max-width: 1199.98px) {
   .hero-img {
     padding-top: 100px;

packages/storyteller-home/src/common/TopNav.tsx

@@ -1,7 +1,7 @@
 import { useLocomotiveScroll } from "react-locomotive-scroll";
 import React, { useState, useEffect } from "react";
 
-interface Props { }
+interface Props {}
 
 function TopNav(props: Props) {
   const { scroll } = useLocomotiveScroll();
@@ -106,7 +106,9 @@ function TopNav(props: Props) {
           </ul>
 
           <div className="col-md-3 text-end">
-            <a href="#contact" className="btn btn-primary fs-6" data-scroll-to>Contact</a>
+            <a href="#contact" className="btn btn-primary fs-6" data-scroll-to>
+              Contact
+            </a>
           </div>
         </div>
 
@@ -159,6 +161,16 @@ function TopNav(props: Props) {
                 Mentions
               </a>
             </li>
+            <li className="mt-4">
+              <a
+                onClick={menuToggle}
+                href="#contact"
+                data-scroll-to
+                className="btn btn-primary"
+              >
+                Contact
+              </a>
+            </li>
           </ul>
         </div>
       </div>

packages/storyteller-home/src/pages/index/IndexPage.tsx

@@ -32,9 +32,9 @@ import { Swiper, SwiperSlide } from "swiper/react";
 import "swiper/css";
 import "swiper/css/pagination";
 import { Autoplay, Pagination } from "swiper";
-import { useForm, ValidationError } from '@formspree/react';
-import { ToastContainer, toast } from 'react-toastify';
-import 'react-toastify/dist/ReactToastify.css';
+import { useForm, ValidationError } from "@formspree/react";
+import { ToastContainer, toast } from "react-toastify";
+import "react-toastify/dist/ReactToastify.css";
 
 function IndexPage() {
   // Title Animation
@@ -135,18 +135,20 @@ function IndexPage() {
 
   const [state, handleSubmit] = useForm("xnqrvjbo");
   if (state.succeeded) {
-    const reset = document.getElementById("reset")
-    const success = document.getElementById('success_message')
+    const reset = document.getElementById("reset");
+    const success = document.getElementById("success_message");
 
-    if (reset) reset.click()
+    if (reset) reset.click();
 
     setTimeout(function () {
-      if (success) success.innerHTML = '<h4 >Thank you for your message!</h4>'
-    }, 500)
+      if (success)
+        success.innerHTML =
+          '<div class="alert alert-success fw-semibold w-100 mb-4">Thank you for your message!</div>';
+    }, 500);
 
     setTimeout(function () {
-      if (success) success.innerHTML = ''
-    }, 5000)
+      if (success) success.innerHTML = "";
+    }, 5000);
   }
 
   return (
@@ -1112,64 +1114,75 @@ function IndexPage() {
         </div>
 
         <div id="contact" className="bg-light section-2">
-          <h3 className="text-center fw-bold display-5 mb-5">Contact Us</h3>
-          <div id="success_message" className="fw-semibold opacity-75 mb-4 text-center"></div>
-          <form id="contact_form" onSubmit={handleSubmit} className="col-12 col-md-6 mx-auto">
-            <fieldset className="">
-              <input
-                id="name"
-                type="text"
-                name="name"
-                placeholder='Name *'
-                required
-                className="col-12"
-              />
-              <ValidationError
-                prefix="Name"
-                field="name"
-                errors={state.errors}
-              />
-              <input
-                id="email"
-                type="email"
-                name="email"
-                placeholder='Email *'
-                required
-                className="col-12 mt-2"
-              />
-              <ValidationError
-                prefix="Email"
-                field="email"
-                errors={state.errors}
-              />
-            </fieldset>
-            <fieldset>
-              <textarea
-                id="message"
-                name="message"
-                placeholder='Say "hi" here!'
-                required
-                className="col-12 mt-2"
-                cols={40}
-                rows={4}
-                style={{ resize: 'none' }}
-              />
-              <ValidationError
-                prefix="Message"
-                field="message"
-                errors={state.errors}
-              />
-            </fieldset>
-            <button type="submit" className="btn btn-primary mt-4 col-12" disabled={state.submitting}>
-              Submit
-            </button>
-            <input type="reset" id="reset" className="d-none" />
-          </form>
+          <div className="container contact-container">
+            <h1 className="text-center fw-bold display-5">Contact Us</h1>
+            <h4 className="text-center opacity-75 mb-5">
+              Send us a message and we'll get back to you!
+            </h4>
+
+            <div id="success_message"></div>
+            <form
+              id="contact_form"
+              onSubmit={handleSubmit}
+              className="col-12 col-md-6 card bg-dark-solid w-100"
+            >
+              <fieldset className="d-flex flex-column gap-3 w-100">
+                <input
+                  id="name"
+                  type="text"
+                  name="name"
+                  placeholder="Name*"
+                  required
+                  className="col-12 form-control"
+                />
+                <ValidationError
+                  prefix="Name"
+                  field="name"
+                  errors={state.errors}
+                />
+                <input
+                  id="email"
+                  type="email"
+                  name="email"
+                  placeholder="Email*"
+                  required
+                  className="col-12 mt-2 form-control"
+                />
+                <ValidationError
+                  prefix="Email"
+                  field="email"
+                  errors={state.errors}
+                />
+                <textarea
+                  id="message"
+                  name="message"
+                  placeholder='Say "hi" here!'
+                  required
+                  className="col-12 mt-2 form-control"
+                  cols={40}
+                  rows={4}
+                  style={{ resize: "none" }}
+                />
+                <ValidationError
+                  prefix="Message"
+                  field="message"
+                  errors={state.errors}
+                />
+              </fieldset>
+              <button
+                type="submit"
+                className="btn btn-primary mt-4 col-12"
+                disabled={state.submitting}
+              >
+                Submit
+              </button>
+              <input type="reset" id="reset" className="d-none" />
+            </form>
+          </div>
         </div>
       </div>
     </>
   );
 }
 
-
 export default IndexPage;