Merge pull request #29 from ChangePlusPlusVandy/APP-96

Making the flight details modal have the regular modal

src/pages/TripsPage/components/FlightDetailsModal/FlightDetailsModal.module.css

@@ -1,102 +1,33 @@
-.modalBackdrop {
-  position: fixed;
-  top: 0;
-  left: 0;
-  width: 100%;
-  height: 100%;
-  background-color: rgba(0, 0, 0, 0.5);
-  display: flex;
-  justify-content: center;
-  align-items: center;
-  z-index: 1000;
-}
-
-.modal {
-  background-color: white;
-  padding: 20px;
-  border-radius: 10px;
-  box-shadow: 0 8px 16px rgba(0, 0, 0, 0.2);
-  display: flex;
-  flex-direction: column;
-  width: 500px;
-  max-width: 90%;
-  font-family: "Inter", sans-serif;
-  position: relative;
-}
-
-.header {
-  font-size: 24px;
-  font-weight: 600;
-  border-bottom: 2px solid #eaeaea;
-  padding-bottom: 20px;
-  margin-bottom: 20px;
-}
-
-.flightInfo {
-  display: flex;
-  flex-direction: column;
-  gap: 13px;
-}
-
-.from,
-.to,
-.flightTime,
-.flightNum {
+.label {
   font-size: 16px;
-  color: #333;
+  margin-right: 10px;
+  color: var(--miracle-color-black);
+  font-weight: 600;
 }
 
-.from,
-.to {
+.row {
   display: flex;
+  margin-bottom: 1rem;
   align-items: center;
 }
 
-.airplaneIcon1 {
-  color: #7597ce;
-  margin-right: 8px;
-}
-
-.airplaneIcon2 {
-  color: #d07171;
-  margin-right: 8px;
-}
-
-.flightTime,
-.flightNum,
-.confirmationNum {
-  padding-left: 26px;
-}
-
-.exitIcon {
-  width: 16px;
-  height: 16px;
-  position: absolute;
-  top: 20px;
-  right: 20px;
+.icon {
+  width: 1.5rem;
 }
 
-.exitIcon:hover {
-  cursor: pointer;
-  color: #d07171;
+.colorRed {
+  color: var(--miracle-color-red);
 }
 
-.modalContent {
-  overflow-y: auto; /*idek if this is even neccessary*/
-  padding: 0 20px;
+.colorBlue {
+  color: var(--miracle-color-blue);
 }
 
 .footer {
-  text-align: center;
-  padding-top: 20px;
-  color: #7597ce;
+  display: flex;
+  justify-content: center;
+  margin-top: 20px;
+  color: var(--miracle-color-blue);
   font-weight: 700;
-}
-
-.fromMargin {
-  margin-right: 100px;
-}
-
-.toMargin {
-  margin-right: 120px;
+  font-size: 18px;
 }

src/pages/TripsPage/components/FlightDetailsModal/FlightDetailsModal.tsx

@@ -1,7 +1,6 @@
 import styles from "./FlightDetailsModal.module.css";
 import Modal from "../../../../components/Modal/Modal";
-import { faPlaneUp } from "@fortawesome/free-solid-svg-icons";
-import { FontAwesomeIcon } from "@fortawesome/react-fontawesome";
+import Icon from "../../../../components/CustomIcon/Icon";
 import type { FlightDetailsModalProps } from "./FlightDetailsModal.definitions";
 
 const FlightDetailsModal = ({ onClose, flight }: FlightDetailsModalProps) => {
@@ -25,36 +24,45 @@ const FlightDetailsModal = ({ onClose, flight }: FlightDetailsModalProps) => {
       }
     }
   }
+  function formatDateString(dateString: string | number | Date) {
+    const date = new Date(dateString);
+    const formattedDate =
+      date.getMonth() + 1 + "/" + date.getDate() + "/" + date.getFullYear();
+    const formattedTime =
+      date.getHours().toString().padStart(2, "0") +
+      ":" +
+      date.getMinutes().toString().padStart(2, "0");
+    return formattedDate + " " + formattedTime;
+  }
 
   return (
     <Modal
       action={onClose}
       header="Flight Information"
       body={
         <>
-          <div className={styles.flightInfo}>
-            <div className={styles.from}>
-              <FontAwesomeIcon
-                icon={faPlaneUp}
-                className={styles.airplaneIcon1}
-              />
-              <div className={styles.fromMargin}>From:</div>{" "}
-              {flight["Departure Airport"]}
-            </div>
-            <div className={styles.to}>
-              <FontAwesomeIcon
-                icon={faPlaneUp}
-                className={styles.airplaneIcon2}
-              />
-              <div className={styles.toMargin}>To:</div>{" "}
-              {flight["Arrival Airport"]}
-            </div>
-            <div className={styles.flightTime}>
-              Departure Time: {flight["Departure Date/Time"]}
+          <div className={styles.row}>
+            <div className={`${styles.icon} ${styles.colorRed}`}>
+              <Icon glyph="plane" />
             </div>
-            <div className={styles.flightNum}>
-              Passengers: {joinWithCommasAndAnd(flight["Passenger Names"])}
+            <div className={styles.label}>From:</div>{" "}
+            {flight["Departure Airport"]}
+          </div>
+          <div className={styles.row}>
+            <div className={`${styles.icon} ${styles.colorBlue}`}>
+              <Icon glyph="plane" />
             </div>
+            <div className={styles.label}>To:</div> {flight["Arrival Airport"]}
+          </div>
+          <div className={styles.row}>
+            <div className={styles.icon} />
+            <div className={styles.label}> Departure Time: </div>
+            {formatDateString(flight["Departure Date/Time"])}
+          </div>
+          <div className={styles.row}>
+            <div className={styles.icon} />
+            <div className={styles.label}> Passengers:</div>
+            {joinWithCommasAndAnd(flight["Passenger Names"])}
           </div>
           <div className={styles.footer}>
             <a href="https://eelslap.com/" className={styles.footer}>