Updated Search UI

Author: SundeepChand

src/assets/scss/components/search.scss

@@ -1,11 +1,15 @@
+.search-controls {
+  .btn-search {
+    padding: 4px 14px;
+
+    .eos-icons {
+      margin: 0px;
+    }
+  }
+}
+
 .search-input {
-  border: 0;
   border-bottom: 2px solid $dark-color;
-  border-radius: 0;
-  justify-content: space-between;
-  outline: none;
-  padding: 0px 10px;
-  padding-left: 0px;
   position: relative;
 
   .dropdown-container {
@@ -29,10 +33,6 @@
   }
 }
 
-.search {
-  margin: 0.5rem;
-}
-
 .user-suggest-dropdown {
   background-color: $eos-white;
   border-radius: 10px 0px 10px 10px;

src/config.json

@@ -1,4 +1,4 @@
 {
-  "apiURL": "https://userstory-strapi.herokuapp.com",
+  "apiURL": "http://localhost:1337",
   "APP_ENV": "dev"
 }

src/modules/SearchInput.js

@@ -31,9 +31,6 @@ function SearchInput(props) {
   return (
     <div className='flex flex-row search-controls'>
       <div className='flex flex-row search-input' data-cy='search-input-div'>
-        <span>
-          <i className='eos-icons'>search</i>
-        </span>
         {
           <UsersSuggestionDropdown
             isOpen={usersSuggestionOpen}
@@ -98,11 +95,11 @@ function SearchInput(props) {
       </div>
       <Button
         type='submit'
-        className='btn btn-default'
+        className='btn btn-default btn-search'
         data-cy='btn-search'
         onClick={handleSearchSubmit}
       >
-        Search
+        <i className='eos-icons'>search</i>
       </Button>
     </div>
   )