diff --git a/frontend/src/RouteView.js b/frontend/src/RouteView.js index 4191eef9..261a5441 100644 --- a/frontend/src/RouteView.js +++ b/frontend/src/RouteView.js @@ -97,7 +97,11 @@ function RouteView({ loggedIn, userEmail }) { - + diff --git a/frontend/src/SearchView.js b/frontend/src/SearchView.js index cbddd11d..1509aed5 100644 --- a/frontend/src/SearchView.js +++ b/frontend/src/SearchView.js @@ -2,6 +2,7 @@ import React from 'react'; import SavedTrips from './saved-trips/SavedTrips.js'; import Search from './search/Search.js'; import styles from './SearchView.module.css'; +import traveler from './traveler.svg'; /** * Creates Search View component, with saved trips rendered if user is logged in. @@ -21,10 +22,9 @@ function SearchView({ loggedIn, tripIds }) { return (
-
- - {savedTrips} -
+ + {savedTrips} + traveler graphic
); } diff --git a/frontend/src/SearchView.module.css b/frontend/src/SearchView.module.css index 6568ef09..d1fa4448 100644 --- a/frontend/src/SearchView.module.css +++ b/frontend/src/SearchView.module.css @@ -1,11 +1,18 @@ .container { height: 100%; - margin: 15vh auto; + margin: auto; + margin-top: 15vh; max-width: 1400px; + text-align: center; } .noTrips { color: var(--gray); + height: 42vh; margin-top: 32px; text-align: center; } + +.illustration { + height: 220px; +} diff --git a/frontend/src/navbar/Navbar.module.css b/frontend/src/navbar/Navbar.module.css index e5d1a9f4..6b583d25 100644 --- a/frontend/src/navbar/Navbar.module.css +++ b/frontend/src/navbar/Navbar.module.css @@ -25,5 +25,5 @@ .gRoutesLogo { height: 50px; - margin-left: 12px; + margin-left: 24px; } diff --git a/frontend/src/saved-trips/SavedTrips.module.css b/frontend/src/saved-trips/SavedTrips.module.css index 2c09a88e..0cd12420 100644 --- a/frontend/src/saved-trips/SavedTrips.module.css +++ b/frontend/src/saved-trips/SavedTrips.module.css @@ -1,17 +1,20 @@ .container { + height: 42vh; margin: auto; margin-top: 48px; width: 80%; + overflow-y: scroll; } .header { color: var(--gray); - margin-bottom: 12px; + margin-bottom: 24px; + text-align: left; } .headerIcon { - color: var(--blue); - margin-right: 16px; + color: var(--yellow); + margin: 0 16px; opacity: 0.8; } @@ -37,10 +40,17 @@ } .listItem { + align-items: center; display: flex; + font-weight: 500; justify-content: space-between; + height: 60px; } .tripContainer { + border-radius: 10px; + box-shadow: 0 1px 2px #c7c7c7; + margin-bottom: 16px; position: relative; + overflow: hidden; } diff --git a/frontend/src/traveler.svg b/frontend/src/traveler.svg new file mode 100644 index 00000000..83251cb4 --- /dev/null +++ b/frontend/src/traveler.svg @@ -0,0 +1 @@ +departing \ No newline at end of file diff --git a/frontend/src/trip-name/TripName.js b/frontend/src/trip-name/TripName.js index 5088e6b9..66cf5ab2 100644 --- a/frontend/src/trip-name/TripName.js +++ b/frontend/src/trip-name/TripName.js @@ -10,8 +10,9 @@ import styles from './TripName.module.css'; * Returns the trip name component that the user can edit and save. * @param {object} tripObject json object with all trip data * @param {function} setTripObject function to update tripObject + * @param {function} setIsSaved function to set saving status of trip */ -function TripName({ tripObject, setTripObject }) { +function TripName({ tripObject, setTripObject, setIsSaved }) { const [isEditing, setIsEditing] = useState(false); const [name, setName] = useState(tripObject.tripName); @@ -19,6 +20,7 @@ function TripName({ tripObject, setTripObject }) { e.preventDefault(); setIsEditing(false); setTripObject({ ...tripObject, tripName: name }); + setIsSaved(false); } function handleChange(e) {