Modify css styles.

src/components/App/App.css

@@ -37,8 +37,8 @@ input:focus {
 h1 {
   padding: .66rem 0;
   text-align: center;
-  background-color: #cca353;
+  background-color: #ff0000;
   font-family: Poppins, sans-serif;
   font-size: 1.8rem;
-  color: #fff;
+  color: #ffffff;
 }

src/components/Business/Business.css

@@ -1,7 +1,6 @@
 .Business {
     display: flex;
     flex-direction: column;
-    justify-content: space-between;
     width: 16.66rem;
     margin: 0 .5rem 2.3rem .5rem;
   }
@@ -19,6 +18,7 @@
 
   .Business-information {
     display: flex;
+    flex-direction: column;
     justify-content: space-between;
   }
 
@@ -29,21 +29,15 @@
   }
 
   .Business-address {
-    display: flex;
-    flex-direction: column;
-    justify-content: space-between;
-  }
-
-  .Business-reviews {
-    display: flex;
-    flex-direction: column;
-    justify-content: space-between;
-    text-align: right;
+    margin-bottom: .3rem;
+    text-align: justify;
+    min-height: 2rem;
   }
 
   .Business-reviews h3 {
-    color: #CCA353;
+    color: #ff0000;
     font-weight: 600;
+    font-size: .88rem;
   }
 
   .Business-reviews .rating {

src/components/Business/Business.js

@@ -6,14 +6,12 @@ class Business extends React.Component {
         return (
             <div className="Business">
                 <div className="image-container">
-                    <img src={this.props.business.imageSrc} alt='' />
+                    <img src={this.props.business.imageSrc} alt={this.props.business.name} />
                 </div>
                 <h2>{this.props.business.name}</h2>
                 <div className="Business-information">
                     <div className="Business-address">
                         <p>{this.props.business.address}</p>
-                        <p>{this.props.business.city}</p>
-                        <p>{this.props.business.state} {this.props.business.zipCode}</p>
                     </div>
                     <div className="Business-reviews">
                         <h3>{this.props.business.category}</h3>

src/components/BusinessList/BusinessList.css

@@ -1,6 +1,6 @@
 .BusinessList {
-    display: flex;
-    justify-content: space-around;
-    flex-wrap: wrap;
-    margin: 4.4rem 10%;
-  }
+  display: flex;
+  justify-content: space-around;
+  flex-wrap: wrap;
+  margin: 4.4rem 10%;
+}

src/components/SearchBar/SearchBar.css

@@ -2,10 +2,10 @@
     display: flex;
     flex-direction: column;
     justify-content: center;
-    background-image: url('./background_search_desktop.jpg');
-    background-size: cover;
+    background-image: url('./background_desktop.jpg');
+    background-size:  cover;
     background-repeat: no-repeat;
-    height: 25rem;
+    height: 30rem;
   }
 
   .SearchBar-sort-options ul {
@@ -23,7 +23,7 @@
     line-height: 1.13;
     text-align: center;
     font-weight: 600;
-    font-size: .83rem;
+    font-size: .9rem;
     transition: color .25s;
   }
 
@@ -33,8 +33,8 @@
 
   .SearchBar-sort-options li.active,
   .SearchBar-sort-options li.active:hover {
-    border-bottom: 1px solid #f0c36c;
-    color: #f0c36c;
+    border-bottom: 1px solid #ff0000;
+    color: #ff0000;
   }
 
   .SearchBar-fields {
@@ -64,26 +64,36 @@
   .SearchBar-submit a {
     border-radius: 4px;
     padding: .72rem 1.7rem;
-    background-color: #cca353;
+    background-color: #ff0000;
     color: #ffffff;
     font-weight: 600;
     transition: background-color .5s;
+    cursor: pointer;
   }
 
   .SearchBar-submit a:hover {
-    cursor: pointer;
-    background-color: #a7874b;
+    background-color: #ff4d4d;
   }
 
   @media only screen and (max-width: 560px) {
     .SearchBar {
-      background-image: url('./background_search_mobile.jpg');
+      background-image: url('./background_mobile.jpg');
+      height: 25rem;
     }
 
     .SearchBar-sort-options ul {
       margin-left: 2rem;
       margin-right: 2rem;
     }
+
+    .SearchBar-sort-options li {
+      width: 4rem;
+      padding: 0 2rem .33rem 2rem;
+      text-align: center;
+      font-weight: 650;
+      font-size: .8rem;
+      transition: color .25s;
+    }
 
     .SearchBar-fields {
       flex-direction: column;
@@ -93,5 +103,6 @@
     .SearchBar-fields input {
       margin-right: 0;
       margin-bottom: .86rem;
+      width: 85%;
     }
   }

src/util/Yelp.js

@@ -25,10 +25,7 @@ const Yelp = {
                             id: business.id,
                             imageSrc: business.image_url,
                             name: business.name,
-                            address: business.location.display_address,
-                            city: business.location.city,
-                            state: business.location.state,
-                            zipCode: business.location.zip_code,
+                            address: business.location.display_address.join(' '),
                             category: categoryArr.join(', '),
                             rating: business.rating,
                             reviewCount: business.review_count