added success and error message to contact page

src/contactPage/ContactPage.tsx

@@ -1,12 +1,22 @@
 import PageTitle from "../utilities/pageTitle/PageTitle";
 import TextField from "@mui/material/TextField";
-import { FormControl, FormLabel } from "@mui/material";
+import { FormControl, FormLabel, darken, lighten } from "@mui/material";
 import useLoadingState from "../hooks/use-loading-state";
 import { useState } from "react";
 import { validate as validateEmail } from "email-validator";
 import { validatePhoneNumber } from "../utilities/helpers/validatePhone";
 import axios from "axios";
+import Typography from "@mui/material/Typography";
+import Box from "@mui/material/Box";
 import LoadingIcon from "../utilities/loadingIcon/LoadingIcon";
+import PopUpModal from "../utilities/popUpModal/PopUpModal";
+import { FontAwesomeIcon } from "@fortawesome/react-fontawesome";
+import {
+  IconDefinition,
+  faCheckCircle,
+  faTimesCircle,
+} from "@fortawesome/free-regular-svg-icons";
+//import { lighten, darken } from "../utilities/helpers/changeColorShade";
 export type ContactMeInputProps = {
   sender: {
     email: string;
@@ -114,7 +124,51 @@ const ContactPageTextSection = ({
     </div>
   );
 };
-
+const ContactPageFormBannerMessage = ({
+  setSuccessMessage,
+  icon,
+  title,
+  message,
+  color,
+}: {
+  icon: IconDefinition;
+  title: string;
+  message: string;
+  color: string;
+  setSuccessMessage: React.Dispatch<
+    React.SetStateAction<{
+      err: boolean;
+      message: string;
+    }>
+  >;
+}) => {
+  return (
+    <PopUpModal onClose={() => setSuccessMessage({ err: false, message: "" })}>
+      <Box
+        className={`${namespace}-banner-box`}
+        sx={{
+          backgroundColor: `${lighten(color, 0.85)}`,
+          border: `1px solid ${darken(color, 0.2)}`,
+          color: color,
+        }}
+      >
+        <Typography
+          className={`${namespace}-banner-title`}
+          variant="h6"
+          component="h2"
+        >
+          <FontAwesomeIcon icon={icon} /> {title}
+        </Typography>
+        <Typography
+          className={`${namespace}-banner-description`}
+          sx={{ mt: 2 }}
+        >
+          {message}
+        </Typography>
+      </Box>
+    </PopUpModal>
+  );
+};
 const ContactPage = () => {
   const { status, callFunction } = useLoadingState({
     asyncFunc: submitFormFunc,
@@ -146,6 +200,24 @@ const ContactPage = () => {
   };
   return (
     <div className={namespace}>
+      {!successMessage.err && successMessage.message.length > 0 && (
+        <ContactPageFormBannerMessage
+          color="#37673F"
+          icon={faCheckCircle}
+          setSuccessMessage={setSuccessMessage}
+          message="Please await a response from our team."
+          title="Your email was recieved!"
+        />
+      )}
+      {successMessage.err && (
+        <ContactPageFormBannerMessage
+          color="#b04141"
+          icon={faTimesCircle}
+          setSuccessMessage={setSuccessMessage}
+          message="There was an error with your submission. Please try again."
+          title="There was an error!"
+        />
+      )}
       <PageTitle text={"Contact Us".toUpperCase()} />
       <ContactPageTextSection headerText="GENERAL INQUIRIES">
         <>

src/contactPage/_contactPage.scss

@@ -2,6 +2,23 @@ $namespace: "contact-pg";
 .#{$namespace} {
   padding: 0 5%;
 }
+.#{$namespace}-banner-box {
+  padding: 10% 10%;
+  // background-color: lighten($green, 55%);
+  // border: 1px solid $dark-green;
+  //   color: $dark-green;
+  border-radius: 0.5em;
+  margin: 0 2.2em;
+  .#{$namespace}-banner-title {
+    font-family: "Vollkorn", "Segoe UI", Tahoma, Geneva, Verdana, sans-serif;
+    font-weight: 500;
+  }
+  .#{$namespace}-banner-description {
+    font-family: "Vollkorn", "Segoe UI", Tahoma, Geneva, Verdana, sans-serif;
+    font-weight: 400;
+  }
+}
+
 .#{$namespace}-text-section {
   display: flex;
   flex-direction: column;
@@ -79,7 +96,6 @@ $namespace: "contact-pg";
       margin-bottom: 0;
     }
   }
-
 }
 .#{$namespace}-form-row {
   & > * {

src/projectsPage/ProjectIndexPage.tsx

@@ -6,15 +6,15 @@ const ProjectIndexPage = () => {
     <div className={namespace}>
       <PageTitle text={"Projects".toUpperCase()} />
       <div className={`${namespace}-text-content`}>
-        <h2>Our Expertise</h2>
-        <p>
+          <h2>Our Expertise</h2>
+          <ProjectsClickableBanner />
+        {/* <p>
           Martinelle offers services that cover your people and space. Our team
           can work with you from beginning-to-end, or meet your needs at any
           stage of a project. By using our diversity of ideas and research, we
           develop proposals that continue to tackle our clients challenges.{" "}
-        </p>
+        </p> */}
       </div>
-      <ProjectsClickableBanner />
     </div>
   );
 };

src/projectsPage/_projectPage.scss

@@ -3,13 +3,18 @@
 $namespace: "project-page";
 .#{$namespace} {
   padding: 0 5%;
+  min-height: calc(100vh - #{$navbar-height});
+  display: flex;
+  flex-direction: column;
 }
 .#{$namespace}-text-content {
   display: flex;
   flex-direction: column;
-  align-items: center;
+  justify-content: center;
+  flex-grow: 1;
   $fontSize: 1.7rem;
   h2 {
+    align-self: center;
     position: relative;
     font-weight: 400;
     font-family: "Vollkorn", "Segoe UI", Tahoma, Geneva, Verdana, sans-serif;

src/utilities/helpers/changeColorShade.tsx

@@ -0,0 +1,24 @@
+const newShade = (hexColor: string, magnitude: number) => {
+  hexColor = hexColor.replace(`#`, ``);
+  if (hexColor.length === 6) {
+    const decimalColor = parseInt(hexColor, 16);
+    let r = (decimalColor >> 16) + magnitude;
+    r > 255 && (r = 255);
+    r < 0 && (r = 0);
+    let g = (decimalColor & 0x0000ff) + magnitude;
+    g > 255 && (g = 255);
+    g < 0 && (g = 0);
+    let b = ((decimalColor >> 8) & 0x00ff) + magnitude;
+    b > 255 && (b = 255);
+    b < 0 && (b = 0);
+    return `#${(g | (b << 8) | (r << 16)).toString(16)}`;
+  } else {
+    return hexColor;
+  }
+};
+export const lighten = (hexColor: string, magnitude: number) =>
+  newShade(hexColor, magnitude);
+export const darken = (hexColor: string, magnitude: number) =>
+  newShade(hexColor, -magnitude);
+
+export default newShade;