change search box in search result page

packages/app/src/components/SearchPage/SearchPageForm.jsx

@@ -32,19 +32,19 @@ class SearchPageForm extends React.Component {
 
   render() {
     return (
-      <div className="input-group mb-3 d-flex">
-        <div className="flex-fill">
+      <div className="grw-search-form-in-search-result-page">
+        <div className="input-group flex-nowrap">
           <SearchForm
             t={this.props.t}
             onSubmit={this.search}
             keyword={this.state.searchedKeyword}
             onInputChange={this.onInputChange}
           />
-        </div>
-        <div className="input-group-append">
-          <button className="btn btn-secondary" type="button" id="button-addon2" onClick={this.search}>
-            <i className="icon-magnifier"></i>
-          </button>
+          <div className="input-group-append">
+            <button className="btn pr-3 pr-sm-4" type="button" id="button-addon2" onClick={this.search}>
+              <i className="icon-magnifier"></i>
+            </button>
+          </div>
         </div>
       </div>
     );

packages/app/src/styles/_search.scss

@@ -116,6 +116,38 @@
   }
 }
 
+// searchbox in the search result page
+.grw-search-form-in-search-result-page {
+  $search-box-border-radius: 40px;
+
+  .rbt-input-main {
+    padding-right: 58px;
+    padding-left: 26px;
+    // to display corner radius
+    border-top-left-radius: $search-box-border-radius;
+    border-bottom-left-radius: $search-box-border-radius;
+  }
+
+  .input-group {
+    border: solid 1px $gray-300;
+    border-radius: 40px;
+  }
+
+  .form-control {
+    border: none;
+    &:focus {
+      // to overwrite default css
+      box-shadow: none !important;
+    }
+  }
+
+  #button-addon2 {
+    // to display corner radius
+    border-top-right-radius: $search-box-border-radius;
+    border-bottom-right-radius: $search-box-border-radius;
+  }
+}
+
 // layout
 .grw-global-search-top {
   // centering on navbar