From 83c5d6df994bf3981dc525e529fdf2f7e4de3073 Mon Sep 17 00:00:00 2001 From: mahdmohsin54 Date: Sun, 21 Jan 2024 15:35:35 -0600 Subject: [PATCH 1/3] Final --- src/components/Passenger/Passenger.module.css | 67 ++++++++++++++++--- src/components/Passenger/Passenger.tsx | 40 ++++++----- 2 files changed, 80 insertions(+), 27 deletions(-) diff --git a/src/components/Passenger/Passenger.module.css b/src/components/Passenger/Passenger.module.css index 99528b4..72a2b96 100644 --- a/src/components/Passenger/Passenger.module.css +++ b/src/components/Passenger/Passenger.module.css @@ -4,10 +4,16 @@ align-items: left; justify-content: center; font-family: "Inter"; - width: 300px; - padding: 0.5rem 1rem; - border-radius: 1rem; - box-shadow: 2px 2px 5px rgb(106, 99, 99); + width: 60%; + padding: 1.5rem 3rem; + border-radius: 2.5rem; + box-shadow: 1px 1px 4px rgb(20, 19, 19); + background: linear-gradient( + -75deg, + rgb(245, 232, 232) 3%, + rgb(228, 228, 244) 8%, + white 40% + ); } .title { @@ -24,28 +30,34 @@ .name { font-size: 2rem; - font-weight: bold; - color: #0b0c0c; + font-weight: 10px; + color: #3d3d3d; margin-bottom: 1rem; - border-radius: 0.25rem; } .boldText { - font-weight: 600; + font-weight: 460; } -.dob { - font-size: 1rem; +.dob, +.medCondition { + font-size: 18px; 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 { @@ -54,6 +66,7 @@ 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; @@ -61,3 +74,37 @@ box-shadow: 2px 2px 5px rgb(106, 99, 99); border: none; } + +.imgContainer { + /* position: relative; */ + width: 150px; + height: 150px; + border-radius: 50%; + border: 3px solid #000000; + margin-left: 5%; + margin-bottom: 25px; +} + +.info { + display: flex; + flex-direction: column; + align-items: left; + justify-content: space-between; + margin-top: 2rem; + margin-bottom: 3rem; + margin-left: 25%; +} + +.imgAndInfo { + display: flex; + flex-direction: row; + align-items: center; + justify-content: first baseline; +} + +.editIcon { + margin-left: 100%; + font-size: 20px; + color: #000000; + cursor: pointer; +} diff --git a/src/components/Passenger/Passenger.tsx b/src/components/Passenger/Passenger.tsx index b7da611..e4202bf 100644 --- a/src/components/Passenger/Passenger.tsx +++ b/src/components/Passenger/Passenger.tsx @@ -1,6 +1,8 @@ import styles from "./Passenger.module.css"; import { getAge } from "../../util/date.util"; import type { PassengerProps } from "./Passenger.definitions"; +import { FontAwesomeIcon } from "@fortawesome/react-fontawesome"; +import { faPen } from "@fortawesome/free-solid-svg-icons"; /** * Passenger component - a simple component that holds passenger details @@ -14,24 +16,28 @@ import type { PassengerProps } from "./Passenger.definitions"; const Passenger = (Passengers: PassengerProps) => { return (
-
Passenger {}
-
- {Passengers.firstName} {Passengers.lastName} +
+
-
- DOB: - {Passengers.dateOfBirth} {"("} - - {getAge(Passengers.dateOfBirth)} - - {")"} -
-
- Relationship: - {Passengers.relationship} -
-
- +
+
+
+
+ {Passengers.firstName} {Passengers.lastName} +
+
+ DOB: + {Passengers.dateOfBirth} + + {" ("} + {getAge(Passengers.dateOfBirth)} + {")"} + +
+
+ Medical Condition: +
+
); From 0c58798b6e0a758004984cf0deceedd2cd9f8c9b Mon Sep 17 00:00:00 2001 From: mahdmohsin54 Date: Sun, 21 Jan 2024 15:46:00 -0600 Subject: [PATCH 2/3] Removed box shadow --- src/components/Passenger/Passenger.module.css | 2 +- 1 file changed, 1 insertion(+), 1 deletion(-) diff --git a/src/components/Passenger/Passenger.module.css b/src/components/Passenger/Passenger.module.css index 72a2b96..d83b972 100644 --- a/src/components/Passenger/Passenger.module.css +++ b/src/components/Passenger/Passenger.module.css @@ -6,8 +6,8 @@ font-family: "Inter"; width: 60%; padding: 1.5rem 3rem; + border: 1.5px solid #8c8787; border-radius: 2.5rem; - box-shadow: 1px 1px 4px rgb(20, 19, 19); background: linear-gradient( -75deg, rgb(245, 232, 232) 3%, From 26760a457e4873712d07c6ef3ac7ca7eeb7df959 Mon Sep 17 00:00:00 2001 From: jacoblurie29 Date: Mon, 22 Jan 2024 12:03:08 -0600 Subject: [PATCH 3/3] Styling fixes --- .../PassengerCard/PassengerCard.module.css | 71 +++++++++---------- .../PassengerCard/PassengerCard.tsx | 56 +++++++++------ .../__tests__/Passenger.test.tsx | 7 +- src/styles/globals.css | 16 ++++- 4 files changed, 86 insertions(+), 64 deletions(-) diff --git a/src/pages/PassengersPage/components/PassengerCard/PassengerCard.module.css b/src/pages/PassengersPage/components/PassengerCard/PassengerCard.module.css index a7905c3..78251eb 100644 --- a/src/pages/PassengersPage/components/PassengerCard/PassengerCard.module.css +++ b/src/pages/PassengersPage/components/PassengerCard/PassengerCard.module.css @@ -1,19 +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: 60%; - padding: 1.5rem 3rem; - border: 1.5px solid #8c8787; + width: 100%; + border: 0.125rem solid var(--miracle-color-medium-light); border-radius: 2.5rem; - background: linear-gradient( - -75deg, - rgb(245, 232, 232) 3%, - rgb(228, 228, 244) 8%, - white 40% - ); + 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 { @@ -23,14 +39,14 @@ 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: 10px; + font-weight: 300; color: #3d3d3d; margin-bottom: 1rem; } @@ -41,7 +57,7 @@ .dob, .medCondition { - font-size: 18px; + font-size: 1rem; font-weight: normal; color: rgb(144, 137, 137); margin-bottom: 0.5rem; @@ -78,12 +94,10 @@ span { .imgContainer { /* position: relative; */ - width: 150px; - height: 150px; + min-width: 10rem; + min-height: 10rem; border-radius: 50%; - border: 3px solid #000000; - margin-left: 5%; - margin-bottom: 25px; + background-color: var(--miracle-color-medium); } .info { @@ -91,21 +105,4 @@ span { flex-direction: column; align-items: left; justify-content: space-between; - margin-top: 2rem; - margin-bottom: 3rem; - margin-left: 25%; -} - -.imgAndInfo { - display: flex; - flex-direction: row; - align-items: center; - justify-content: first baseline; -} - -.editIcon { - margin-left: 100%; - font-size: 20px; - color: #000000; - cursor: pointer; } diff --git a/src/pages/PassengersPage/components/PassengerCard/PassengerCard.tsx b/src/pages/PassengersPage/components/PassengerCard/PassengerCard.tsx index 9ec3f5e..ff0e07b 100644 --- a/src/pages/PassengersPage/components/PassengerCard/PassengerCard.tsx +++ b/src/pages/PassengersPage/components/PassengerCard/PassengerCard.tsx @@ -1,7 +1,9 @@ import styles from "./PassengerCard.module.css"; import { formatDate, getAge } from "../../../../util/date.util"; +import PassengerDetailsModal from "../PassengerDetailsModal/PassengerDetailsModal"; import { FontAwesomeIcon } from "@fortawesome/react-fontawesome"; import { faPen } from "@fortawesome/free-solid-svg-icons"; +import { useState } from "react"; import type { PassengerProps } from "./PassengerCard.definitions"; /** @@ -14,32 +16,42 @@ import type { PassengerProps } from "./PassengerCard.definitions"; * @property {string} dateOfBirth */ const Passenger = ({ passenger }: PassengerProps) => { + const [modalOpen, setModalOpen] = useState(false); + return ( -
-
- -
-
-
-
-
- {passenger.fields["First Name"]} {passenger.fields["Last Name"]} -
-
- DOB: - {formatDate(passenger.fields["Date of Birth"])} - - {" ("} - {getAge(passenger.fields["Date of Birth"])} - {")"} - -
-
- Medical Condition: + <> +
setModalOpen(true)}> +
+
+
+
+ {passenger.fields["First Name"]} {passenger.fields["Last Name"]} +
+
+ DOB: + {formatDate(passenger.fields["Date of Birth"])} + + {" ("} + {getAge(passenger.fields["Date of Birth"])} + {")"} + +
+
+ Medical Condition: +
+
+ +
-
+ {modalOpen && ( + setModalOpen(false)} + /> + )} + ); }; diff --git a/src/pages/PassengersPage/components/PassengerCard/__tests__/Passenger.test.tsx b/src/pages/PassengersPage/components/PassengerCard/__tests__/Passenger.test.tsx index b53a65d..bd59355 100644 --- 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(); 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 index 3a9c08f..eb5dbb4 100644 --- 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;