beautified Contact page

Author: anserwaseem

src/common/ErrorSnackbar.tsx

@@ -14,7 +14,7 @@ export const ErrorSnackbar = (props: ErrorSnackbarProps) => {
         horizontal: "center",
       }}
     >
-      <Alert severity="error">
+      <Alert severity={props?.severity ?? "error"}>
         <AlertTitle>{props?.titleMessage}</AlertTitle>
         {props?.bodyMessage}
       </Alert>

src/common/props/ErrorSnackbarProps.ts

@@ -1,6 +1,9 @@
+import { AlertColor } from "@mui/material";
+
 export type ErrorSnackbarProps = {
   handleErrorSnackbarClose: () => void;
   titleMessage?: string;
   bodyMessage?: string;
   open?: boolean;
-};
+  severity?: AlertColor;
+};

src/pages/Contact.tsx

@@ -1,10 +1,10 @@
 import {
-  FormControl,
   Container,
   TextField,
   Typography,
   Button,
   Box,
+  AlertColor,
 } from "@mui/material";
 import { useState } from "react";
 import { ErrorSnackbar } from "../common/ErrorSnackbar";
@@ -15,20 +15,28 @@ export const Contact = () => {
   const [email, setEmail] = useState("");
   const [message, setMessage] = useState("");
   const [snackbarMessage, setSnackbarMessage] = useState("");
+  const [snackbarSeverity, setSnackbarSeverity] = useState<AlertColor>("error");
 
   const handleSubmit = (e: any) => {
     if (subject !== "" && email !== "" && message !== "") {
       e.preventDefault();
       try {
-        window.location.assign(
-          `mailto:${Email}?subject=${subject}&body=${message}`
-        );
-        setSnackbarMessage("Email sent successfully.");
+        // check email validity
+        if (e?.currentTarget?.form?.reportValidity()) {
+          window?.location?.assign(
+            `mailto:${Email}?subject=${subject}&body=${message}`
+          );
+          setSnackbarMessage("Email sent successfully.");
+          setSnackbarSeverity("success");
+        } else {
+          setSnackbarMessage("Invalid email.");
+          setSnackbarSeverity("warning");
+        }
       } catch (e) {
         setSnackbarMessage("Email failed to send.");
         console.log(e);
       }
-    } else setSnackbarMessage("Please fill out all fields.");
+    } else setSnackbarMessage("Please fill all fields.");
   };
 
   return (
@@ -40,35 +48,47 @@ export const Contact = () => {
             setSnackbarMessage("");
           }}
           titleMessage={snackbarMessage}
-          bodyMessage={snackbarMessage}
+          severity={snackbarSeverity}
         />
       )}
 
-      <Container>
+      <Container maxWidth={"md"}>
         <Typography
           variant="h4"
           fontWeight={"bold"}
-          color={"black"}
-          sx={{ p: "1rem 0 3rem" }}
+          p={"2rem 0 1rem"}
+          textAlign={"center"}
         >
-          Contact Us
+          We'd Love to Hear From You
+        </Typography>
+
+        <Typography variant="body2" textAlign={"center"}>
+          Whether you're curious about features, have a question, or just want
+          to say hi — we're ready to answer any and all questions.
         </Typography>
 
         <Box
           component="form"
           autoComplete={"true"}
           onSubmit={handleSubmit}
+          className="contact-form"
+          pt={"4rem"}
           sx={{
             display: "flex",
             flexDirection: "column",
             justifyContent: "center",
             bgcolor: "#44444",
+            "& .MuiInputBase-root, .MuiButton-root": {
+              boxShadow: "0px 0px 10px 0px rgba(0.5,0,0,0.1)",
+              borderRadius: "50px !important",
+            },
           }}
         >
           <TextField
             id="subject"
             label="Subject"
             required
+            autoFocus
             value={subject}
             onChange={(e) => setSubject(e?.target?.value || "")}
             sx={{ pb: "1rem" }}
@@ -93,6 +113,7 @@ export const Contact = () => {
           />
           <Button
             variant="contained"
+            color="success"
             type="submit"
             fullWidth
             disabled={subject === "" || email === "" || message === ""}