From 595319c0e176fcf41d60d0b8d1d10e1e95f8614d Mon Sep 17 00:00:00 2001
From: Edwin J <hungrylulu8@gmail.com>
Date: Tue, 6 Sep 2022 21:51:53 -0700
Subject: [PATCH 1/4] added a grid container to bottom of contact form with a
 height equivalent to the footer to compensate for a fixed positioned footer
 that blocks visibility of portions of the contact form, namely submit button

---
 client/components/contact/ContactForm.jsx | 10 ++++++++++
 1 file changed, 10 insertions(+)

diff --git a/client/components/contact/ContactForm.jsx b/client/components/contact/ContactForm.jsx
index 158e69d32..12c01bc5d 100644
--- a/client/components/contact/ContactForm.jsx
+++ b/client/components/contact/ContactForm.jsx
@@ -9,9 +9,16 @@ import {
   Button,
   TextField,
   CircularProgress,
+  makeStyles,
 } from '@material-ui/core';
 import 'react-toastify/dist/ReactToastify.css';
 
+const useStyles = makeStyles(theme => ({
+  footer: {
+    height: theme.footer.height,
+  },
+}));
+
 const initialFormValues = {
   firstName: '',
   lastName: '',
@@ -39,6 +46,8 @@ const toastEmitterSettings = {
 };
 
 const ContactForm = () => {
+  const classes = useStyles();
+
   const dispatch = useDispatch();
 
   // mapStateToProps equivalent.
@@ -251,6 +260,7 @@ const ContactForm = () => {
               Submit
             </Button>
           </Grid>
+          <Grid container direction="column" alignItems="center" justifyContent="center" className={classes.footer} />
         </Grid>
       </form>
     </Container>

From 6cceff1b74cdbac2c17c52cf7935e34b795caf9d Mon Sep 17 00:00:00 2001
From: Edwin J <hungrylulu8@gmail.com>
Date: Wed, 7 Sep 2022 18:25:34 -0700
Subject: [PATCH 2/4] removed client/components/contact/__tests__ directory

---
 .../__snapshots__/contactForm.test.js.snap    | 299 ------------------
 1 file changed, 299 deletions(-)
 delete mode 100644 client/components/contact/__tests__/__snapshots__/contactForm.test.js.snap

diff --git a/client/components/contact/__tests__/__snapshots__/contactForm.test.js.snap b/client/components/contact/__tests__/__snapshots__/contactForm.test.js.snap
deleted file mode 100644
index 278215d6e..000000000
--- a/client/components/contact/__tests__/__snapshots__/contactForm.test.js.snap
+++ /dev/null
@@ -1,299 +0,0 @@
-// Jest Snapshot v1, https://goo.gl/fbAQLP
-
-exports[`ContactForm General should match snapshot 1`] = `
-<div
-  className="MuiContainer-root MuiContainer-maxWidthSm"
->
-  <form
-    id="contact-form"
-    onSubmit={[Function]}
-  >
-    <div
-      className="MuiGrid-root MuiGrid-container MuiGrid-direction-xs-column MuiGrid-align-items-xs-center MuiGrid-justify-content-xs-center"
-      style={
-        Object {
-          "gap": "10px",
-        }
-      }
-    >
-      <div
-        className="MuiGrid-root MuiGrid-container MuiGrid-spacing-xs-2 MuiGrid-align-items-xs-center MuiGrid-justify-content-xs-center"
-      >
-        <div
-          className="MuiGrid-root MuiGrid-item MuiGrid-grid-xs-6"
-        >
-          <div
-            className="MuiFormControl-root MuiTextField-root MuiFormControl-fullWidth"
-          >
-            <label
-              className="MuiFormLabel-root MuiInputLabel-root MuiInputLabel-formControl MuiInputLabel-animated"
-              data-shrink={false}
-              htmlFor="contact-firstname"
-              id="contact-firstname-label"
-            >
-              First Name *
-            </label>
-            <div
-              className="MuiInputBase-root MuiInput-root MuiInput-underline MuiInputBase-fullWidth MuiInput-fullWidth MuiInputBase-formControl MuiInput-formControl"
-              onClick={[Function]}
-            >
-              <input
-                aria-invalid={false}
-                autoComplete="off"
-                autoFocus={false}
-                className="MuiInputBase-input MuiInput-input"
-                disabled={false}
-                id="contact-firstname"
-                name="firstName"
-                onAnimationStart={[Function]}
-                onBlur={[Function]}
-                onChange={[Function]}
-                onFocus={[Function]}
-                required={false}
-                type="text"
-                value=""
-              />
-            </div>
-            
-          </div>
-        </div>
-        <div
-          className="MuiGrid-root MuiGrid-item MuiGrid-grid-xs-6"
-        >
-          <div
-            className="MuiFormControl-root MuiTextField-root MuiFormControl-fullWidth"
-          >
-            <label
-              className="MuiFormLabel-root MuiInputLabel-root MuiInputLabel-formControl MuiInputLabel-animated"
-              data-shrink={false}
-              htmlFor="contact-lastname"
-              id="contact-lastname-label"
-            >
-              Last Name *
-            </label>
-            <div
-              className="MuiInputBase-root MuiInput-root MuiInput-underline MuiInputBase-fullWidth MuiInput-fullWidth MuiInputBase-formControl MuiInput-formControl"
-              onClick={[Function]}
-            >
-              <input
-                aria-invalid={false}
-                autoComplete="off"
-                autoFocus={false}
-                className="MuiInputBase-input MuiInput-input"
-                disabled={false}
-                id="contact-lastname"
-                name="lastName"
-                onAnimationStart={[Function]}
-                onBlur={[Function]}
-                onChange={[Function]}
-                onFocus={[Function]}
-                required={false}
-                type="text"
-                value=""
-              />
-            </div>
-            
-          </div>
-        </div>
-      </div>
-      <div
-        className="MuiGrid-root MuiGrid-container MuiGrid-align-items-xs-center MuiGrid-justify-content-xs-center"
-      >
-        <div
-          className="MuiGrid-root MuiGrid-item MuiGrid-grid-xs-12"
-        >
-          <div
-            className="MuiFormControl-root MuiTextField-root MuiFormControl-fullWidth"
-          >
-            <label
-              className="MuiFormLabel-root MuiInputLabel-root MuiInputLabel-formControl MuiInputLabel-animated"
-              data-shrink={false}
-              htmlFor="contact-email"
-              id="contact-email-label"
-            >
-              Email *
-            </label>
-            <div
-              className="MuiInputBase-root MuiInput-root MuiInput-underline MuiInputBase-fullWidth MuiInput-fullWidth MuiInputBase-formControl MuiInput-formControl"
-              onClick={[Function]}
-            >
-              <input
-                aria-invalid={false}
-                autoComplete="off"
-                autoFocus={false}
-                className="MuiInputBase-input MuiInput-input"
-                disabled={false}
-                id="contact-email"
-                name="email"
-                onAnimationStart={[Function]}
-                onBlur={[Function]}
-                onChange={[Function]}
-                onFocus={[Function]}
-                required={false}
-                type="text"
-                value=""
-              />
-            </div>
-            
-          </div>
-        </div>
-        <div
-          className="MuiGrid-root MuiGrid-item MuiGrid-grid-xs-12"
-        >
-          <div
-            className="MuiFormControl-root MuiTextField-root MuiFormControl-fullWidth"
-          >
-            <label
-              className="MuiFormLabel-root MuiInputLabel-root MuiInputLabel-formControl MuiInputLabel-animated"
-              data-shrink={false}
-              htmlFor="contact-association"
-              id="contact-association-label"
-            >
-              Association
-            </label>
-            <div
-              className="MuiInputBase-root MuiInput-root MuiInput-underline MuiInputBase-fullWidth MuiInput-fullWidth MuiInputBase-formControl MuiInput-formControl"
-              onClick={[Function]}
-            >
-              <input
-                aria-invalid={false}
-                autoComplete="off"
-                autoFocus={false}
-                className="MuiInputBase-input MuiInput-input"
-                disabled={false}
-                id="contact-association"
-                name="association"
-                onAnimationStart={[Function]}
-                onBlur={[Function]}
-                onChange={[Function]}
-                onFocus={[Function]}
-                required={false}
-                type="text"
-                value=""
-              />
-            </div>
-          </div>
-        </div>
-        <div
-          className="MuiGrid-root MuiGrid-item MuiGrid-grid-xs-12"
-          style={
-            Object {
-              "paddingTop": "8px",
-            }
-          }
-        >
-          <div
-            className="MuiFormControl-root MuiTextField-root MuiFormControl-fullWidth"
-          >
-            <label
-              className="MuiFormLabel-root MuiInputLabel-root MuiInputLabel-formControl MuiInputLabel-animated MuiInputLabel-outlined"
-              data-shrink={false}
-              htmlFor="contact-message"
-              id="contact-message-label"
-            >
-              Message *
-            </label>
-            <div
-              className="MuiInputBase-root MuiOutlinedInput-root MuiInputBase-fullWidth MuiInputBase-formControl MuiInputBase-multiline MuiOutlinedInput-multiline"
-              onClick={[Function]}
-            >
-              <textarea
-                aria-invalid={false}
-                autoComplete="off"
-                autoFocus={false}
-                className="MuiInputBase-input MuiOutlinedInput-input MuiInputBase-inputMultiline MuiOutlinedInput-inputMultiline"
-                disabled={false}
-                id="contact-message"
-                name="message"
-                onAnimationStart={[Function]}
-                onBlur={[Function]}
-                onChange={[Function]}
-                onFocus={[Function]}
-                required={false}
-                rows={4}
-                value=""
-              />
-              <fieldset
-                aria-hidden={true}
-                className="PrivateNotchedOutline-root-1 MuiOutlinedInput-notchedOutline"
-              >
-                <legend
-                  className="PrivateNotchedOutline-legendLabelled-3"
-                >
-                  <span>
-                    Message *
-                  </span>
-                </legend>
-              </fieldset>
-            </div>
-            
-          </div>
-        </div>
-      </div>
-      <div
-        className="MuiGrid-root MuiGrid-container MuiGrid-direction-xs-column MuiGrid-align-items-xs-center MuiGrid-justify-content-xs-center"
-        style={
-          Object {
-            "paddingTop": "8px",
-          }
-        }
-      >
-        <div
-          className="MuiCircularProgress-root MuiCircularProgress-colorPrimary MuiCircularProgress-indeterminate"
-          role="progressbar"
-          style={
-            Object {
-              "display": "none",
-              "height": 40,
-              "width": 40,
-            }
-          }
-        >
-          <svg
-            className="MuiCircularProgress-svg"
-            viewBox="22 22 44 44"
-          >
-            <circle
-              className="MuiCircularProgress-circle MuiCircularProgress-circleIndeterminate"
-              cx={44}
-              cy={44}
-              fill="none"
-              r={20.2}
-              strokeWidth={3.6}
-              style={Object {}}
-            />
-          </svg>
-        </div>
-        <button
-          className="MuiButtonBase-root MuiButton-root MuiButton-contained MuiButton-containedPrimary"
-          disabled={false}
-          onBlur={[Function]}
-          onDragLeave={[Function]}
-          onFocus={[Function]}
-          onKeyDown={[Function]}
-          onKeyUp={[Function]}
-          onMouseDown={[Function]}
-          onMouseLeave={[Function]}
-          onMouseUp={[Function]}
-          onTouchEnd={[Function]}
-          onTouchMove={[Function]}
-          onTouchStart={[Function]}
-          style={
-            Object {
-              "display": "block",
-            }
-          }
-          tabIndex={0}
-          type="submit"
-        >
-          <span
-            className="MuiButton-label"
-          >
-            Submit
-          </span>
-        </button>
-      </div>
-    </div>
-  </form>
-</div>
-`;

From f0ee216fc96d54ae2b72c1c590f5e558274112be Mon Sep 17 00:00:00 2001
From: Edwin J <hungrylulu8@gmail.com>
Date: Wed, 7 Sep 2022 18:36:11 -0700
Subject: [PATCH 3/4] reverted change made in
 595319c0e176fcf41d60d0b8d1d10e1e95f8614d by removing the additional grid
 container from the bottom of the contact form (to compensate for a fixed
 positioned footer that blocks visibility of the submit button). instead,
 changed footer position: fixed to position: sticky

---
 client/components/Footer.jsx              |  2 +-
 client/components/contact/ContactForm.jsx | 10 ----------
 2 files changed, 1 insertion(+), 11 deletions(-)

diff --git a/client/components/Footer.jsx b/client/components/Footer.jsx
index 5601895b5..a4c5c96d6 100644
--- a/client/components/Footer.jsx
+++ b/client/components/Footer.jsx
@@ -9,7 +9,7 @@ import SocialMediaLinks from './SocialMediaLinks';
 
 const useStyles = makeStyles(theme => ({
   footer: {
-    position: 'fixed',
+    position: 'sticky',
     bottom: 0,
     height: theme.footer.height,
     width: '100%',
diff --git a/client/components/contact/ContactForm.jsx b/client/components/contact/ContactForm.jsx
index 12c01bc5d..158e69d32 100644
--- a/client/components/contact/ContactForm.jsx
+++ b/client/components/contact/ContactForm.jsx
@@ -9,16 +9,9 @@ import {
   Button,
   TextField,
   CircularProgress,
-  makeStyles,
 } from '@material-ui/core';
 import 'react-toastify/dist/ReactToastify.css';
 
-const useStyles = makeStyles(theme => ({
-  footer: {
-    height: theme.footer.height,
-  },
-}));
-
 const initialFormValues = {
   firstName: '',
   lastName: '',
@@ -46,8 +39,6 @@ const toastEmitterSettings = {
 };
 
 const ContactForm = () => {
-  const classes = useStyles();
-
   const dispatch = useDispatch();
 
   // mapStateToProps equivalent.
@@ -260,7 +251,6 @@ const ContactForm = () => {
               Submit
             </Button>
           </Grid>
-          <Grid container direction="column" alignItems="center" justifyContent="center" className={classes.footer} />
         </Grid>
       </form>
     </Container>

From 9dafee6512eab46c04f60fd88c0157516e759fd6 Mon Sep 17 00:00:00 2001
From: Edwin J <hungrylulu8@gmail.com>
Date: Wed, 7 Sep 2022 20:35:21 -0700
Subject: [PATCH 4/4] adding back
 client/components/contact/__tests__/__snapshots__/contactForm.test.js.snap
 per review notes

---
 .../__snapshots__/contactForm.test.js.snap    | 299 ++++++++++++++++++
 1 file changed, 299 insertions(+)
 create mode 100644 client/components/contact/__tests__/__snapshots__/contactForm.test.js.snap

diff --git a/client/components/contact/__tests__/__snapshots__/contactForm.test.js.snap b/client/components/contact/__tests__/__snapshots__/contactForm.test.js.snap
new file mode 100644
index 000000000..278215d6e
--- /dev/null
+++ b/client/components/contact/__tests__/__snapshots__/contactForm.test.js.snap
@@ -0,0 +1,299 @@
+// Jest Snapshot v1, https://goo.gl/fbAQLP
+
+exports[`ContactForm General should match snapshot 1`] = `
+<div
+  className="MuiContainer-root MuiContainer-maxWidthSm"
+>
+  <form
+    id="contact-form"
+    onSubmit={[Function]}
+  >
+    <div
+      className="MuiGrid-root MuiGrid-container MuiGrid-direction-xs-column MuiGrid-align-items-xs-center MuiGrid-justify-content-xs-center"
+      style={
+        Object {
+          "gap": "10px",
+        }
+      }
+    >
+      <div
+        className="MuiGrid-root MuiGrid-container MuiGrid-spacing-xs-2 MuiGrid-align-items-xs-center MuiGrid-justify-content-xs-center"
+      >
+        <div
+          className="MuiGrid-root MuiGrid-item MuiGrid-grid-xs-6"
+        >
+          <div
+            className="MuiFormControl-root MuiTextField-root MuiFormControl-fullWidth"
+          >
+            <label
+              className="MuiFormLabel-root MuiInputLabel-root MuiInputLabel-formControl MuiInputLabel-animated"
+              data-shrink={false}
+              htmlFor="contact-firstname"
+              id="contact-firstname-label"
+            >
+              First Name *
+            </label>
+            <div
+              className="MuiInputBase-root MuiInput-root MuiInput-underline MuiInputBase-fullWidth MuiInput-fullWidth MuiInputBase-formControl MuiInput-formControl"
+              onClick={[Function]}
+            >
+              <input
+                aria-invalid={false}
+                autoComplete="off"
+                autoFocus={false}
+                className="MuiInputBase-input MuiInput-input"
+                disabled={false}
+                id="contact-firstname"
+                name="firstName"
+                onAnimationStart={[Function]}
+                onBlur={[Function]}
+                onChange={[Function]}
+                onFocus={[Function]}
+                required={false}
+                type="text"
+                value=""
+              />
+            </div>
+            
+          </div>
+        </div>
+        <div
+          className="MuiGrid-root MuiGrid-item MuiGrid-grid-xs-6"
+        >
+          <div
+            className="MuiFormControl-root MuiTextField-root MuiFormControl-fullWidth"
+          >
+            <label
+              className="MuiFormLabel-root MuiInputLabel-root MuiInputLabel-formControl MuiInputLabel-animated"
+              data-shrink={false}
+              htmlFor="contact-lastname"
+              id="contact-lastname-label"
+            >
+              Last Name *
+            </label>
+            <div
+              className="MuiInputBase-root MuiInput-root MuiInput-underline MuiInputBase-fullWidth MuiInput-fullWidth MuiInputBase-formControl MuiInput-formControl"
+              onClick={[Function]}
+            >
+              <input
+                aria-invalid={false}
+                autoComplete="off"
+                autoFocus={false}
+                className="MuiInputBase-input MuiInput-input"
+                disabled={false}
+                id="contact-lastname"
+                name="lastName"
+                onAnimationStart={[Function]}
+                onBlur={[Function]}
+                onChange={[Function]}
+                onFocus={[Function]}
+                required={false}
+                type="text"
+                value=""
+              />
+            </div>
+            
+          </div>
+        </div>
+      </div>
+      <div
+        className="MuiGrid-root MuiGrid-container MuiGrid-align-items-xs-center MuiGrid-justify-content-xs-center"
+      >
+        <div
+          className="MuiGrid-root MuiGrid-item MuiGrid-grid-xs-12"
+        >
+          <div
+            className="MuiFormControl-root MuiTextField-root MuiFormControl-fullWidth"
+          >
+            <label
+              className="MuiFormLabel-root MuiInputLabel-root MuiInputLabel-formControl MuiInputLabel-animated"
+              data-shrink={false}
+              htmlFor="contact-email"
+              id="contact-email-label"
+            >
+              Email *
+            </label>
+            <div
+              className="MuiInputBase-root MuiInput-root MuiInput-underline MuiInputBase-fullWidth MuiInput-fullWidth MuiInputBase-formControl MuiInput-formControl"
+              onClick={[Function]}
+            >
+              <input
+                aria-invalid={false}
+                autoComplete="off"
+                autoFocus={false}
+                className="MuiInputBase-input MuiInput-input"
+                disabled={false}
+                id="contact-email"
+                name="email"
+                onAnimationStart={[Function]}
+                onBlur={[Function]}
+                onChange={[Function]}
+                onFocus={[Function]}
+                required={false}
+                type="text"
+                value=""
+              />
+            </div>
+            
+          </div>
+        </div>
+        <div
+          className="MuiGrid-root MuiGrid-item MuiGrid-grid-xs-12"
+        >
+          <div
+            className="MuiFormControl-root MuiTextField-root MuiFormControl-fullWidth"
+          >
+            <label
+              className="MuiFormLabel-root MuiInputLabel-root MuiInputLabel-formControl MuiInputLabel-animated"
+              data-shrink={false}
+              htmlFor="contact-association"
+              id="contact-association-label"
+            >
+              Association
+            </label>
+            <div
+              className="MuiInputBase-root MuiInput-root MuiInput-underline MuiInputBase-fullWidth MuiInput-fullWidth MuiInputBase-formControl MuiInput-formControl"
+              onClick={[Function]}
+            >
+              <input
+                aria-invalid={false}
+                autoComplete="off"
+                autoFocus={false}
+                className="MuiInputBase-input MuiInput-input"
+                disabled={false}
+                id="contact-association"
+                name="association"
+                onAnimationStart={[Function]}
+                onBlur={[Function]}
+                onChange={[Function]}
+                onFocus={[Function]}
+                required={false}
+                type="text"
+                value=""
+              />
+            </div>
+          </div>
+        </div>
+        <div
+          className="MuiGrid-root MuiGrid-item MuiGrid-grid-xs-12"
+          style={
+            Object {
+              "paddingTop": "8px",
+            }
+          }
+        >
+          <div
+            className="MuiFormControl-root MuiTextField-root MuiFormControl-fullWidth"
+          >
+            <label
+              className="MuiFormLabel-root MuiInputLabel-root MuiInputLabel-formControl MuiInputLabel-animated MuiInputLabel-outlined"
+              data-shrink={false}
+              htmlFor="contact-message"
+              id="contact-message-label"
+            >
+              Message *
+            </label>
+            <div
+              className="MuiInputBase-root MuiOutlinedInput-root MuiInputBase-fullWidth MuiInputBase-formControl MuiInputBase-multiline MuiOutlinedInput-multiline"
+              onClick={[Function]}
+            >
+              <textarea
+                aria-invalid={false}
+                autoComplete="off"
+                autoFocus={false}
+                className="MuiInputBase-input MuiOutlinedInput-input MuiInputBase-inputMultiline MuiOutlinedInput-inputMultiline"
+                disabled={false}
+                id="contact-message"
+                name="message"
+                onAnimationStart={[Function]}
+                onBlur={[Function]}
+                onChange={[Function]}
+                onFocus={[Function]}
+                required={false}
+                rows={4}
+                value=""
+              />
+              <fieldset
+                aria-hidden={true}
+                className="PrivateNotchedOutline-root-1 MuiOutlinedInput-notchedOutline"
+              >
+                <legend
+                  className="PrivateNotchedOutline-legendLabelled-3"
+                >
+                  <span>
+                    Message *
+                  </span>
+                </legend>
+              </fieldset>
+            </div>
+            
+          </div>
+        </div>
+      </div>
+      <div
+        className="MuiGrid-root MuiGrid-container MuiGrid-direction-xs-column MuiGrid-align-items-xs-center MuiGrid-justify-content-xs-center"
+        style={
+          Object {
+            "paddingTop": "8px",
+          }
+        }
+      >
+        <div
+          className="MuiCircularProgress-root MuiCircularProgress-colorPrimary MuiCircularProgress-indeterminate"
+          role="progressbar"
+          style={
+            Object {
+              "display": "none",
+              "height": 40,
+              "width": 40,
+            }
+          }
+        >
+          <svg
+            className="MuiCircularProgress-svg"
+            viewBox="22 22 44 44"
+          >
+            <circle
+              className="MuiCircularProgress-circle MuiCircularProgress-circleIndeterminate"
+              cx={44}
+              cy={44}
+              fill="none"
+              r={20.2}
+              strokeWidth={3.6}
+              style={Object {}}
+            />
+          </svg>
+        </div>
+        <button
+          className="MuiButtonBase-root MuiButton-root MuiButton-contained MuiButton-containedPrimary"
+          disabled={false}
+          onBlur={[Function]}
+          onDragLeave={[Function]}
+          onFocus={[Function]}
+          onKeyDown={[Function]}
+          onKeyUp={[Function]}
+          onMouseDown={[Function]}
+          onMouseLeave={[Function]}
+          onMouseUp={[Function]}
+          onTouchEnd={[Function]}
+          onTouchMove={[Function]}
+          onTouchStart={[Function]}
+          style={
+            Object {
+              "display": "block",
+            }
+          }
+          tabIndex={0}
+          type="submit"
+        >
+          <span
+            className="MuiButton-label"
+          >
+            Submit
+          </span>
+        </button>
+      </div>
+    </div>
+  </form>
+</div>
+`;