Finish breaking out contact form into separate page

Co-authored-by: Jess-White <Jess-White@users.noreply.github.com>
tuning-fork · Apr 20, 2023 · 59e1c9d · 59e1c9d
1 parent 7b03515
commit 59e1c9d
Show file tree

Hide file tree

Showing 4 changed files with 34 additions and 18 deletions.
diff --git a/src/Components/Helpers/Spinner.css b/src/Components/Helpers/Spinner.css
@@ -20,6 +20,8 @@
 }
 
 .spinner {
+  display: flex;
+  align-items: center;
   width: 100%;
 }
 
@@ -30,11 +32,16 @@
 }
 
 .spinner__svg > circle {
-  stroke: var(--primary);
+  stroke: currentColor;
   stroke-linecap: round;
   animation: dash 1.5s ease-in-out infinite;
 }
 
+.spinner--xs > .spinner__svg {
+  width: 1rem;
+  height: 1rem;
+}
+
 .spinner--sm > .spinner__svg {
   width: 2rem;
   height: 2rem;

diff --git a/src/Components/Layouts/SplashpageLayout/SplashpageContact/SplashpageContactForm.css b/src/Components/Layouts/SplashpageLayout/SplashpageContact/SplashpageContactForm.css
@@ -5,9 +5,13 @@
   border-radius: 5px;
 }
 
-.splashpage-contact-form__confirmation-message {
-  color: #ffffff;
+.splashpage-contact-form__confirmation-message > p {
   font-size: var(--font-size-large-1);
+  margin-top: 0;
+}
+
+.splashpage-contact-form__submitted-message {
+  font-style: italic;
 }
 
 .splashpage-contact-form__header__container {
@@ -44,4 +48,5 @@
 }
 .splashpage-contact-form__actions > button {
   margin-left: 20px;
+  gap: .4rem;
 }
diff --git a/src/Components/Layouts/SplashpageLayout/SplashpageContact/SplashpageContactForm.jsx b/src/Components/Layouts/SplashpageLayout/SplashpageContact/SplashpageContactForm.jsx
@@ -1,10 +1,10 @@
 import { useState } from "react";
 import Button from "../../../design/Button/Button";
-import Container from "../../../design/Container/Container";
 import TextBox from "../../../design/TextBox/TextBox";
 import "./SplashpageContactForm.css";
 import * as ContactService from "../../../../Services/ContactService";
 import { useMutation } from "react-query";
+import Spinner from "../../../Helpers/Spinner";
 
 export default function SplashpageContactForm() {
   const [splashpageContactFields, setSplashpageContactFields] = useState({
@@ -17,7 +17,7 @@ export default function SplashpageContactForm() {
   const [displayContactSubmittedMessage, setDisplayContactSubmittedMessage] =
     useState("");
 
-  const { mutate: sendContactSubmission } = useMutation(
+  const { mutate: sendContactSubmission, isLoading } = useMutation(
     (newContactFields) =>
       ContactService.sendContactSubmission(newContactFields),
     {
@@ -36,11 +36,15 @@ export default function SplashpageContactForm() {
   return (
     <div className="splashpage-contact-form__container">
       {displayContactSubmittedMessage ? (
-        <div className="splashpage-contact-form__confirmation-message">
-          <p>Thanks for contacting us! We will be in touch soon.</p>
-          <p>This is the text of the message you sent us:</p>
-          <div>{displayContactSubmittedMessage}</div>
-        </div>
+        <>
+          <div className="splashpage-contact-form__confirmation-message">
+            <p>Thanks for contacting us! We will be in touch soon.</p>
+            <p>This is the text of the message you sent us:</p>
+          </div>
+          <blockquote className="splashpage-contact-form__submitted-message">
+            {displayContactSubmittedMessage}
+          </blockquote>
+        </>
       ) : (
         <form onSubmit={handleSubmit} className="splashpage-contact-form">
           <TextBox
@@ -107,7 +111,9 @@ export default function SplashpageContactForm() {
             }
           />
           <div className="splashpage-contact-form__actions">
-            <Button type="submit">Save</Button>
+            <Button type="submit">
+              Save {isLoading && <Spinner size="xs" />}
+            </Button>
           </div>
         </form>
       )}

diff --git a/src/Components/design/Navbar/NavbarSplashpage/NavbarSplashpage.jsx b/src/Components/design/Navbar/NavbarSplashpage/NavbarSplashpage.jsx
@@ -47,13 +47,11 @@ export default function NavbarSplashpage(props) {
             alt="Custom button"
             className="navbar__tab-image"
           />
-          <Button
-            variant="none"
-            onClick={() => props.togglePanelContents("Contact")}
-            className="navbar__tab"
-          >
-            <div className={clsx("navbar__tab-text", "tab-pink")}>Contact</div>
-          </Button>
+          <Link to="/contact" className="navbar__tab">
+            <span className={clsx("navbar__tab-text", "tab-pink")}>
+              Contact
+            </span>
+          </Link>
         </div>
         <div className="navbar__tab-container">
           <img