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,20 +63,27 @@ 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
+          className={[
+            searchBoxIsOpen,
+            isSearching && dapps.length > 0 ? styles.isSearching : '',
+          ].join(' ')}
+        >
           <div
             ref={this.nodes}
-          className={[styles.search_container, cssClassVisible].join(' ')}
+            className={styles.search_container}
             onClick={e => this.applyClass(e)}
           >
             <img src={searchIcon} alt="Search Icon" width="16" height="16" />
@@ -92,6 +101,7 @@ class Search extends React.Component {
               </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,7 +39,6 @@
       width: 100%;
     }
   }
-}
 
   .isOpen {
     width: calculateRem(240);
@@ -46,18 +46,26 @@
       width: calculateRem(240);
       display: block;
     }
+  }
+  .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: 1.6rem;
+      top: calculateRem(40);
       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);
     }
   }
+}
 
 @media (max-width: $desktop) {
   .search_container {
@@ -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;
-  }
 }