Update changes

src/common/components/Search/Search.jsx

@@ -11,6 +11,7 @@ class Search extends React.Component {
     this.state = {
       dapps: [],
       isSearching: false,
+      isOpen: false,
     }
     this.nodes = React.createRef()
     this.handleChange = this.handleChange.bind(this)
@@ -32,6 +33,7 @@ class Search extends React.Component {
 
     this.setState({
       isSearching: false,
+      isOpen: false,
       dapps: [],
     })
   }
@@ -41,15 +43,15 @@ class Search extends React.Component {
   applyClass(e) {
     e.preventDefault()
     this.setState({
-      isSearching: true,
+      isOpen: true,
     })
   }
 
   handleChange(e) {
     const { value } = e.target
     const { dappState } = this.props
-    this.setState({ isSearching: true })
     if (value.length > 1) {
+      this.setState({ isSearching: true })
       const searchExp = new RegExp(value, 'i')
       const dapps = dappState.dapps.filter(dapp => {
         if (dapp.name.search(searchExp) != -1) {
@@ -61,36 +63,44 @@ class Search extends React.Component {
     } else {
       this.setState({
         dapps: [],
+        isSearching: false,
       })
     }
   }
 
   render() {
     const { searchStyle, searchResultStyle } = this.props
-    const { dapps, isSearching } = this.state
-    const cssClassVisible = isSearching ? styles.isOpen : ''
+    const { dapps, isSearching, isOpen } = this.state
+    const searchBoxIsOpen = isOpen ? styles.isOpen : ''
     return (
       <>
-        <div className={`${styles.dim}`} />
+        <div className={styles.dim} />
         <div
-          ref={this.nodes}
-          className={[styles.search_container, cssClassVisible].join(' ')}
-          onClick={e => this.applyClass(e)}
+          className={[
+            searchBoxIsOpen,
+            isSearching && dapps.length > 0 ? styles.isSearching : '',
+          ].join(' ')}
         >
-          <img src={searchIcon} alt="Search Icon" width="16" height="16" />
-          <input
-            type="text"
-            onChange={e => this.handleChange(e)}
-            className={[styles.search, searchStyle].join(' ')}
-            placeholder="Search Dapps"
-          />
-          {isSearching && (
-            <div
-              className={[styles.searchResults, searchResultStyle].join(' ')}
-            >
-              <SearchResultItem showActionButtons={false} dapps={dapps} />
-            </div>
-          )}
+          <div
+            ref={this.nodes}
+            className={styles.search_container}
+            onClick={e => this.applyClass(e)}
+          >
+            <img src={searchIcon} alt="Search Icon" width="16" height="16" />
+            <input
+              type="text"
+              onChange={e => this.handleChange(e)}
+              className={[styles.search, searchStyle].join(' ')}
+              placeholder="Search Dapps"
+            />
+            {isSearching && (
+              <div
+                className={[styles.searchResults, searchResultStyle].join(' ')}
+              >
+                <SearchResultItem showActionButtons={false} dapps={dapps} />
+              </div>
+            )}
+          </div>
         </div>
       </>
     )

src/common/components/Search/Search.module.scss

@@ -3,7 +3,7 @@
 @media (min-width: $desktop) {
   .search_container {
     height: calculateRem(20);
-    border-radius: calculateRem(40);
+    border-radius: calculateRem(50);
     background: #ffffff;
     padding: calculateRem(10);
     position: absolute;
@@ -14,6 +14,7 @@
     display: flex;
     z-index: 1;
     transform: translateY(-50%);
+    cursor: pointer;
 
     img {
       align-self: center;
@@ -38,24 +39,31 @@
       width: 100%;
     }
   }
-}
 
-.isOpen {
-  width: calculateRem(240);
-  .search {
+  .isOpen {
     width: calculateRem(240);
-    display: block;
+    .search {
+      width: calculateRem(240);
+      display: block;
+    }
   }
-  .searchResults {
-    z-index: 99;
-    display: block;
-    position: absolute;
-    top: 1.6rem;
-    background: #ffffff;
-    left: 0;
-    border-bottom-left-radius: calculateRem(5);
-    border-bottom-right-radius: calculateRem(5);
-    box-shadow: 0 0 0 rgba(0, 34, 51, 0.08), 0px 2px 4px rgba(0, 34, 51, 0.16);
+  .isSearching {
+    .search_container {
+      border-bottom-left-radius: 0;
+      border-bottom-right-radius: 0;
+      border-top-right-radius: calculateRem(20);
+      border-top-left-radius: calculateRem(20);
+      cursor: default;
+    }
+    .searchResults {
+      z-index: 99;
+      display: block;
+      position: absolute;
+      top: calculateRem(40);
+      background: #ffffff;
+      left: 0;
+      box-shadow: 0 0 0 rgba(0, 34, 51, 0.08), 0px 2px 4px rgba(0, 34, 51, 0.16);
+    }
   }
 }
 
@@ -85,14 +93,8 @@
     .searchResults {
       z-index: 99;
       top: calculateRem(100);
-      width: 92vw;
-      background-position: center center;
-      background-repeat: no-repeat;
-      background-attachment: fixed;
-      background-size: cover;
+      width: 94vw;
+      margin-left: calculateRem(-16);
     }
   }
-  .isOpen {
-    width: 90vw;
-  }
 }