Merge pull request #209 from googleinterns/home-page-styles

Search view styles

Author: Cindyzhang977

frontend/src/RouteView.js

@@ -97,7 +97,11 @@ function RouteView({ loggedIn, userEmail }) {
         <Row className={styles.row}>
           <Col sm={4}>
             <Row className={styles.row}>
-              <TripName tripObject={tripObject} setTripObject={setTripObject} />
+              <TripName
+                tripObject={tripObject}
+                setTripObject={setTripObject}
+                setIsSaved={setIsSaved}
+              />
             </Row>
             <Row className={styles.routeListContainer}>
               <Route places={attractions} onManualPlaceChange={onManualPlaceChange} />

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 (
     <div className={styles.container}>
-      <div>
-        <Search />
-        {savedTrips}
-      </div>
+      <Search />
+      {savedTrips}
+      <img src={traveler} className={styles.illustration} alt="traveler graphic" />
     </div>
   );
 }

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;
+}

frontend/src/navbar/Navbar.module.css

@@ -25,5 +25,5 @@
 
 .gRoutesLogo {
   height: 50px;
-  margin-left: 12px;
+  margin-left: 24px;
 }

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;
 }

frontend/src/traveler.svg

@@ -10,15 +10,17 @@ 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);
 
   function handleSave(e) {
     e.preventDefault();
     setIsEditing(false);
     setTripObject({ ...tripObject, tripName: name });
+    setIsSaved(false);
   }
 
   function handleChange(e) {