search page dropdown and user onboarding styles fixed

Author: rise-erpelding

src/components/Dropdown/Dropdown.css

@@ -1,7 +1,8 @@
 .dropdown {
-  width: 192px;
+  /* display: inline-block; */
+  width: 180px;
   padding: 10px;
-  margin: auto;
+  /* margin: auto; */
 }
 
 .dropdown__button {

src/components/Dropdown/Dropdown.js

@@ -58,7 +58,7 @@ class Dropdown extends Component {
     );
 
     return (
-      <span className="dropdown">
+      <div className="dropdown">
         <button type="button" className="dropdown__button">
           See Categories
           <FontAwesomeIcon icon="caret-down" />
@@ -74,7 +74,7 @@ class Dropdown extends Component {
           </ul>
           <h5 className="dropdown__all-farms" onClick={() => this.handleSeeAllClick()}>See all farms</h5>
         </div>
-      </span>
+      </div>
 
     );
   }

src/routes/SearchPage/SearchPage.css

@@ -1,18 +1,17 @@
-.search-page__add-farm {
-  border: 1px solid black;
-  background-color: lightgray;
-  padding: 2px;
-  font-size: 0.9em;
-  top: 80px;
-}
-
 .search-page__farm-added--success {
   font-family: 'Lato', sans-serif;
   color: #50875f;
   padding: 10px;
 }
 
+.search-page__under-search-bar {
+  display: flex;
+  align-items: flex-start;
+  justify-content: center;
+}
+
 .search-page__button--onboarding {
+  padding: 10px 20px;
   font-size: 1em;
   border: none;
   background-color: transparent;

src/routes/SearchPage/SearchPage.js

@@ -56,14 +56,15 @@ class SearchPage extends Component {
         <Hero />
         {farmAddStatus}
         <SearchBar onChangePage={this.changePage} />
-        <div>
+        <div className="search-page__under-search-bar">
           <Dropdown onChangePage={this.changePage} />
           <button
             type="button"
             onClick={this.showModal}
             className="search-page__button--onboarding"
           >
-            Getting Started
+            About
+            {' '}
             <FontAwesomeIcon icon="question-circle" />
           </button>
         </div>