Skip to content
New issue

Have a question about this project? Sign up for a free GitHub account to open an issue and contact its maintainers and the community.

Sign up for GitHub

By clicking “Sign up for GitHub”, you agree to our terms of service and privacy statement. We’ll occasionally send you account related emails.

Already on GitHub? Sign in to your account

Redesigned frontend for request flight page #63

Merged
merged 1 commit into from
Jan 27, 2025
Merged

Redesigned frontend for request flight page #63

Show file tree
Hide file tree
Changes from all commits
Commits
Show all changes
1 commit
Select commit
File filter

Filter by extension

Filter by extension
Conversations
Failed to load comments.
Loading
Jump to
Jump to file
Failed to load files.
Loading
Diff view
Diff view
2 changes: 1 addition & 1 deletion src/pages/RequestFlightPage/RequestFlightPage.module.css
View file
Open in desktop
Original file line number Diff line number Diff line change
@@ -1,6 +1,6 @@
.successPage {
width: 100%;
height: 100%;
height: 100vh;
display: flex;
flex-direction: column;
justify-content: center;
Expand Down
175 changes: 117 additions & 58 deletions src/pages/RequestFlightPage/components/FlightTimeSelector/FlightTimeSelector.module.css
View file
Open in desktop
Original file line number Diff line number Diff line change
@@ -1,21 +1,26 @@
@import url("https://fonts.googleapis.com/css2?family=Plus+Jakarta+Sans:wght@400;600;700&display=swap");

.flightSelectorContainer {
height: 100%;
padding: 2rem;
box-sizing: border-box;
}

.flightSelectorBlockHeader {
font-size: 2rem;
font-weight: 700px;
margin-bottom: 10px;
color: var(--miracle-color-dark);
opacity: 0.8;
margin-bottom: 24px;
font-size: 30px;
font-family: "Inter", sans-serif;
font-weight: 600;
color: black;
}

.flightSelectorBlockSubtitle {
color: var(--miracle-color-dark-500);
font-size: 16px;
color: black;
font-size: 15px;
font-family: "Inter", sans-serif;
font-weight: 300;
padding-bottom: 10px;
margin-bottom: 20px;
opacity: 0.5;
}

.airportChunk {
Expand Down Expand Up @@ -93,6 +98,7 @@
flex-direction: column;
height: 80px;
justify-content: space-between;
gap: 12px;
}

.flightSelectorInputRed {
Expand Down Expand Up @@ -164,30 +170,33 @@
}

.flightSelectorInputLabelBlue {
display: flex;
justify-content: center;
align-items: center;
width: 106px;
height: 37px;
background-color: #0067dd;
color: white;
font-family: "Inter", sans-serif;
font-weight: 700;
font-size: 14px;
font-weight: 600;
margin-bottom: 5px;
color: var(--miracle-color-blue);
font-weight: 400;
font-size: 18px;
opacity: 0.8;
border-bottom: 10px;
margin-left: 2px;
border-radius: 10px;
text-align: center;
margin-bottom: 16px;
}

.flightSelectorInputLabelRed {
display: flex;
justify-content: center;
align-items: center;
width: 106px;
height: 37px;
background-color: #b22a2a;
color: white;
font-family: "Inter", sans-serif;
font-weight: 700;
font-size: 14px;
margin-bottom: 5px;
color: var(--miracle-color-red);
font-weight: 400;
font-size: 18px;
opacity: 0.8;
border-bottom: 10px;
margin-left: 2px;
border-radius: 10px;
text-align: center;
margin-bottom: 16px;
}

.airplaneIconContainer {
Expand All @@ -200,9 +209,10 @@

.horizontalLineWithIcon {
display: flex;
justify-content: center;
align-items: center;
width: 20%;
margin: 36px 16px 0px 16px;
margin: 100px 16px 0px 16px;
}

.horizontalLineWithIcon::before,
Expand All @@ -213,8 +223,8 @@
}

.airplaneIcon {
font-size: 24px;
color: var(--miracle-color-medium-dark);
font-size: 40px;
color: var(--miracle-color-dark);
text-align: center;
margin: 0 16px;
}
Expand All @@ -230,44 +240,43 @@

.toggleContainer {
display: flex;
flex-direction: row;
font-size: 12px;
width: fit-content;
background-color: #e0e0e0; /* Grey background color */
border-radius: 20px; /* Adjust the border-radius as needed */
overflow: hidden; /* Clip content that goes beyond the border-radius */
justify-content: center;
align-items: center;
width: 235px;
height: 49px;
background-color: #f0f0f0;
border-radius: 31px;
margin: 0 auto;
margin-bottom: 24px;
}

.toggleItem {
padding: 8px 16px; /* Adjust padding as needed */
cursor: pointer;
user-select: none; /* Disable text selection */
transition:
background-color 0.3s ease,
color 0.3s ease; /* Smooth transition */

/* Initial styles for unselected state */
display: flex;
justify-content: center;
align-items: center;
width: 112px;
height: 39px;
border-radius: 29px;
background-color: transparent;
color: #333; /* Default text color */

/* Hover styles for unselected state */
&:hover {
background-color: var(
--miracle-color-medium
); /* Hover fill color similar to selected */
}
font-family: "Inter", sans-serif;
font-weight: 600;
font-size: 12px;
color: black;
}

/* Selected state styles */
&.selected {
background-color: var(
--miracle-color-medium-dark
); /* Blue background color */
color: var(--miracle-color-white); /* White text color */
}
.toggleItem.selected {
background-color: #d9d9d9;
}

.datePicker {
margin: 1rem;
width: 382px;
height: 334px;
border: 1px solid black;
border-radius: 50px;
background-color: transparent;
margin: 1rem auto;
padding: 0.5rem;
box-sizing: border-box;
}

.flightSelectorErrorMessage {
Expand All @@ -279,3 +288,53 @@
text-align: center;
width: 220px;
}

.subtitleDivider {
width: 100%;
height: 1px;
background-color: #a6a5a5;
border: none;
margin-bottom: 16px;
opacity: 0.48;
}

.requestsHeader {
font-family: "Inter", sans-serif;
font-weight: 600;
font-size: 25px;
color: black;
text-align: left;
width: 100%;
}

.dateRequestsHeader {
font-family: "Inter", sans-serif;
font-weight: 600;
font-size: 25px;
color: black;
text-align: left;
width: 100%;
margin-top: 10px;
margin-bottom: 20px;
}

.labelContainer {
margin-top: 50px;
margin-bottom: 20px;
display: flex;
justify-content: center;
}

.flightSelectorInput {
width: 195px;
height: 40px;
border: 0.8px solid black;
color: black;
font-family: "Plus Jakarta Sans", sans-serif;
font-size: 13px;
font-weight: 400;
background-color: transparent;
border-radius: 5px;
padding: 8px;
text-align: center;
}
38 changes: 22 additions & 16 deletions src/pages/RequestFlightPage/components/FlightTimeSelector/FlightTimeSelector.tsx
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -9,7 +9,6 @@ import type {
DateValue,
FlightTimeSelectorProps,
} from "./FlightTimeSelector.definitions.ts";
// import { set } from "react-hook-form";

const FlightTimeSelector = ({
setStep,
Expand Down Expand Up @@ -54,16 +53,15 @@ const FlightTimeSelector = ({
};

const submitDisabled = () => {
// Check if any of the required fields are empty
return (
!departureAirportPrimary ||
!departureAirportAlternate ||
!arrivalAirportPrimary ||
!arrivalAirportAlternate ||
!departDate ||
(arrivalDate && departDate > arrivalDate) ||
departureAirportPrimary == departureAirportAlternate ||
arrivalAirportPrimary == arrivalAirportAlternate ||
departureAirportPrimary === departureAirportAlternate ||
arrivalAirportPrimary === arrivalAirportAlternate ||
(!oneWay && !arrivalDate)
);
};
Expand All @@ -73,8 +71,9 @@ const FlightTimeSelector = ({
<div className={styles.flightSelectorContainer}>
<div className={styles.flightSelectorBlockHeader}>Request a Flight</div>
<div className={styles.flightSelectorBlockSubtitle}>
Choose two of the nearest airports to you and your destination.
Choose your top two airport preferences as well as your trip dates.
</div>
<hr className={styles.subtitleDivider} />
<form className={styles.flightSelectorBlockContent}>
<div className={styles.checkBoxContainer}>
<div className={styles.toggleContainer}>
Expand All @@ -85,7 +84,7 @@ const FlightTimeSelector = ({
onClick={() => setOneWay(!oneWay)}
data-testid="oneWay"
>
Round Trip
Roundtrip
</div>
<div
className={`${styles.toggleItem} ${
Expand All @@ -94,20 +93,23 @@ const FlightTimeSelector = ({
onClick={() => setOneWay(!oneWay)}
data-testid="roundTrip"
>
One Way
One-way
</div>
</div>
</div>
<div className={styles.requestsHeader}>Airport Requests</div>
<div className={styles.flightSelectorInputContainerUpper}>
<div className={styles.airportChunk}>
<div className={styles.flightSelectorInputLabelBlue}>
Departure
<div className={styles.labelContainer}>
<div className={styles.flightSelectorInputLabelBlue}>
Departure
</div>
</div>
<div className={styles.flightSelectorInputContainer}>
<input
type="text"
placeholder="Primary Selection"
className={styles.flightSelectorInputBlue}
className={styles.flightSelectorInput}
value={departureAirportPrimary}
onChange={(e) => {
const value = e.target.value;
Expand All @@ -129,7 +131,7 @@ const FlightTimeSelector = ({
<input
type="text"
placeholder="Alternate Selection"
className={styles.flightSelectorInputBlueBorder}
className={styles.flightSelectorInput}
value={departureAirportAlternate}
onChange={(e) => {
const value = e.target.value;
Expand Down Expand Up @@ -160,14 +162,17 @@ const FlightTimeSelector = ({
<Icon glyph="plane" />
</div>
</div>

<div className={styles.airportChunk}>
<div className={styles.flightSelectorInputLabelRed}>Arrival</div>
<div className={styles.labelContainer}>
<div className={styles.flightSelectorInputLabelRed}>
Arrival
</div>
</div>
<div className={styles.flightSelectorInputContainer}>
<input
type="text"
placeholder="Primary Selection"
className={styles.flightSelectorInputRed}
className={styles.flightSelectorInput}
value={arrivalAirportPrimary}
onChange={(e) => {
const value = e.target.value;
Expand All @@ -189,7 +194,7 @@ const FlightTimeSelector = ({
<input
type="text"
placeholder="Alternate Selection"
className={styles.flightSelectorInputRedBorder}
className={styles.flightSelectorInput}
value={arrivalAirportAlternate}
onChange={(e) => {
const value = e.target.value;
Expand All @@ -216,7 +221,8 @@ const FlightTimeSelector = ({
</div>
</div>
</div>

<hr className={styles.subtitleDivider} />
<div className={styles.dateRequestsHeader}>Date Requests</div>
<div className={styles.flightSelectorInputContainerLower}>
<div className="departure-calendar">
<DatePicker
Expand Down
Loading