Merge pull request #23 from ChangePlusPlusVandy/APP-75-Update-Passeng…

…er-Card-and-Screen-to-match-designs APP 75 update passenger card and screen to match designs
ChangePlusPlusVandy · Jan 22, 2024 · 6c706f0 · 6c706f0
2 parents 7023954 + 26760a4
commit 6c706f0
Show file tree

Hide file tree

Showing 4 changed files with 116 additions and 66 deletions.
diff --git a/src/pages/PassengersPage/components/PassengerCard/PassengerCard.module.css b/src/pages/PassengersPage/components/PassengerCard/PassengerCard.module.css
@@ -1,13 +1,35 @@
 .passengerCard {
   display: flex;
-  flex-direction: column;
-  align-items: left;
-  justify-content: center;
+  flex-direction: row;
+  justify-content: flex-end;
   font-family: "Inter";
-  width: 300px;
-  padding: 0.5rem 1rem;
-  border-radius: 1rem;
-  box-shadow: 2px 2px 5px rgb(106, 99, 99);
+  width: 100%;
+  border: 0.125rem solid var(--miracle-color-medium-light);
+  border-radius: 2.5rem;
+  background: var(--passenger-card-gradient);
+}
+
+.passengerCard:hover {
+  background: var(--passenger-card-gradient-hover);
+  cursor: pointer;
+}
+
+.imgAndInfo {
+  display: flex;
+  flex-direction: row;
+  align-items: center;
+  justify-content: flex-start;
+  flex-grow: 1;
+  padding: 2rem 4rem;
+  gap: 4rem;
+}
+
+.editIcon {
+  font-size: 1rem;
+  color: var(--miracle-color-medium-dark);
+  cursor: pointer;
+  width: fit-content;
+  padding: 1rem 1.5rem;
 }
 
 .title {
@@ -17,41 +39,70 @@
   width: fit-content;
   margin-bottom: 1rem;
   padding: 0.5rem 0.5rem;
-  border: 1px solid #0da054;
+  border: 0.0625rem solid #0da054;
   border-radius: 1rem;
   background-color: #aee6a0;
 }
 
 .name {
   font-size: 2rem;
-  font-weight: bold;
-  color: #0b0c0c;
-  margin: 0.5rem 0;
-  border-radius: 0.25rem;
+  font-weight: 300;
+  color: #3d3d3d;
+  margin-bottom: 1rem;
 }
 
 .boldText {
-  font-weight: 600;
+  font-weight: 460;
 }
 
-.dob {
+.dob,
+.medCondition {
   font-size: 1rem;
   font-weight: normal;
   color: rgb(144, 137, 137);
   margin-bottom: 0.5rem;
 }
 
+span {
+  color: rgb(71, 70, 70);
+  font-weight: 40%;
+}
+
 .relationship {
   font-size: 1rem;
   font-weight: normal;
   color: rgb(144, 137, 137);
   margin-bottom: 0.5rem;
+  margin-left: 20%;
 }
 
 .viewAllInfo {
   width: 100%;
+  font-size: 1rem;
+  font-weight: normal;
+  color: rgb(248, 237, 237);
+  background-color: rgb(231, 134, 134);
+  margin-top: 4rem;
+  margin-bottom: 1rem;
+  padding: 0.5rem 4rem;
+  border-radius: 1rem;
   align-items: center;
   display: flex;
   justify-content: center;
   align-items: center;
 }
+
+.imgContainer {
+  /* position: relative; */
+  min-width: 10rem;
+  min-height: 10rem;
+  border-radius: 50%;
+  background-color: var(--miracle-color-medium);
+}
+
+.info {
+  display: flex;
+  flex-direction: column;
+  align-items: left;
+  justify-content: space-between;
+}
diff --git a/src/pages/PassengersPage/components/PassengerCard/PassengerCard.tsx b/src/pages/PassengersPage/components/PassengerCard/PassengerCard.tsx
@@ -1,16 +1,8 @@
 import styles from "./PassengerCard.module.css";
 import { formatDate, getAge } from "../../../../util/date.util";
 import PassengerDetailsModal from "../PassengerDetailsModal/PassengerDetailsModal";
-import Tag from "../../../../components/Tag/Tag";
-import {
-  TagColor,
-  TagVariant,
-} from "../../../../components/Tag/Tag.definitions";
-import Button from "../../../../components/Button/Button";
-import {
-  ButtonColor,
-  ButtonVariant,
-} from "../../../../components/Button/Button.definitions";
+import { FontAwesomeIcon } from "@fortawesome/react-fontawesome";
+import { faPen } from "@fortawesome/free-solid-svg-icons";
 import { useState } from "react";
 import type { PassengerProps } from "./PassengerCard.definitions";
 
@@ -23,50 +15,44 @@ import type { PassengerProps } from "./PassengerCard.definitions";
  * @property {string} userType
  * @property {string} dateOfBirth
  */
-const PassengerCard = ({ passenger }: PassengerProps) => {
-  const [isModalOpen, setIsModalOpen] = useState(false);
-
-  const handleCloseModal = () => {
-    setIsModalOpen(false);
-  };
+const Passenger = ({ passenger }: PassengerProps) => {
+  const [modalOpen, setModalOpen] = useState(false);
 
   return (
-    <div className={styles.passengerCard}>
-      <Tag
-        text="PASSENGER"
-        color={TagColor.GREEN}
-        variant={TagVariant.NORMAL}
-      />
-      <div className={styles.name}>
-        {passenger.fields["First Name"]} {passenger.fields["Last Name"]}
-      </div>
-      <div className={styles.dob}>
-        <span className={styles.boldText}>DOB: </span>
-        {formatDate(passenger.fields["Date of Birth"])} {"("}
-        <span className={styles.boldText}>
-          {getAge(passenger.fields["Date of Birth"])}
-        </span>
-        {")"}
-      </div>
-
-      <div className={styles.viewAllInfo}>
-        <Button
-          text="View All Information"
-          onClick={() => setIsModalOpen(true)}
-          variant={ButtonVariant.Regular}
-          color={ButtonColor.Red}
-          extraStyles={{ width: "100%" }}
-        />
+    <>
+      <div className={styles.passengerCard} onClick={() => setModalOpen(true)}>
+        <div className={styles.imgAndInfo}>
+          <div className={styles.imgContainer} />
+          <div className={styles.info}>
+            <div className={styles.name}>
+              {passenger.fields["First Name"]} {passenger.fields["Last Name"]}
+            </div>
+            <div className={styles.dob}>
+              <span>DOB: </span>
+              <span>{formatDate(passenger.fields["Date of Birth"])}</span>
+              <span className={styles.boldText}>
+                {" ("}
+                {getAge(passenger.fields["Date of Birth"])}
+                {")"}
+              </span>
+            </div>
+            <div className={styles.medCondition}>
+              <span>Medical Condition: </span>
+            </div>
+          </div>
+        </div>
+        <div className={styles.editIcon}>
+          <FontAwesomeIcon icon={faPen} />
+        </div>
       </div>
-
-      {isModalOpen && (
+      {modalOpen && (
         <PassengerDetailsModal
-          onClose={handleCloseModal}
           passenger={passenger}
+          onClose={() => setModalOpen(false)}
         />
       )}
-    </div>
+    </>
   );
 };
 
-export default PassengerCard;
+export default Passenger;
diff --git a/src/pages/PassengersPage/components/PassengerCard/__tests__/Passenger.test.tsx b/src/pages/PassengersPage/components/PassengerCard/__tests__/Passenger.test.tsx
@@ -12,7 +12,6 @@ describe("Passenger", () => {
     const component = render(<PassengerCard {...mockProps} />);
     expect(component).toBeTruthy();
 
-    expect(component.getByText("PASSENGER")).toBeTruthy();
     expect(
       component.getByText(
         mockProps.passenger.fields["First Name"] +
@@ -22,9 +21,11 @@ describe("Passenger", () => {
     ).toBeTruthy();
     expect(
       component.getByText(
-        getAge(mockProps.passenger.fields["Date of Birth"]).toString(),
+        "(" +
+          getAge(mockProps.passenger.fields["Date of Birth"]).toString() +
+          ")",
       ),
     ).toBeTruthy();
-    expect(component.getByText("View All Information")).toBeTruthy();
+    expect(component.getByText("Medical Condition:")).toBeTruthy();
   });
 });
diff --git a/src/styles/globals.css b/src/styles/globals.css
@@ -31,9 +31,21 @@
   --miracle-color-medium-dark: #626262;
   --miracle-color-dark: #222831;
   --miracle-color-black: #000000;
-}
 
-:root {
+  --passenger-card-gradient: linear-gradient(
+    -75deg,
+    rgb(245, 232, 232) 3%,
+    rgb(228, 228, 244) 8%,
+    white 40%
+  );
+
+  --passenger-card-gradient-hover: linear-gradient(
+    -75deg,
+    rgb(225, 205, 205) 3%,
+    rgb(207, 207, 224) 8%,
+    rgb(248, 248, 248) 40%
+  );
+
   --transition-duration-short: 0.15s;
   --transition-duration-long: 0.3s;
   --border-radius-small: 0.125rem;