Merge pull request #1291 from shakti97/redundant-search-button

fix redundant search button issue

Author: catarak

client/modules/IDE/components/Searchbar/Searchbar.jsx

@@ -44,13 +44,9 @@ class Searchbar extends React.Component {
     const { searchValue } = this.state;
     return (
       <div className={`searchbar ${searchValue === '' ? 'searchbar--is-empty' : ''}`}>
-        <button
-          type="submit"
-          className="searchbar__button"
-          onClick={this.handleSearchEnter}
-        >
+        <div className="searchbar__button">
           <InlineSVG className="searchbar__icon" src={searchIcon} />
-        </button>
+        </div>
         <input
           className="searchbar__input"
           type="text"

client/styles/components/_searchbar.scss

@@ -15,26 +15,20 @@
   }
 }
 
-button[type="submit"].searchbar__button {
+div.searchbar__button {
   background-color: unset;
   width: #{31 / $base-font-size}rem;
   height: #{36 / $base-font-size}rem;
   position: absolute;
+  display: flex;
+  justify-content: center;
+  align-items: center;
   padding: 0;
   border: 0;
   border-right: solid 1px;
   @include themify() {
     border-right-color: getThemifyVariable('input-border-color');
   }
-  &:enabled:hover {
-    background-color: unset;
-    @include themify() {
-      border-right-color: getThemifyVariable('input-border-color');
-    }
-    & g {
-      fill: unset;
-    }
-  }
 }
 
 .searchbar__icon {
@@ -43,6 +37,7 @@ button[type="submit"].searchbar__button {
     width: #{22 / $base-font-size}rem;
     height: #{27 / $base-font-size}rem;
     transform: scaleX(-1);
+    padding-top: #{3 / $base-font-size}rem;
     @include themify() {
       fill: getThemifyVariable('input-text-color');
     }