adjust search form

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

@@ -41,29 +41,29 @@ class SearchPageForm extends React.Component {
   render() {
     return (
       // TODO: modify design after other component is created
-      <div className="grw-search-form-in-search-result-page d-flex">
+      <div className="grw-search-form-in-search-result-page d-flex align-items-center">
         <div className="input-group flex-nowrap">
           <SearchForm
             onSubmit={this.search}
             keyword={this.state.searchedKeyword}
             onInputChange={this.onInputChange}
           />
-        </div>
-        <div className="input-group-append">
-          <button
-            type="button"
-            id="button-addon2"
-            onClick={() => {
-              try {
-                this.search();
-              }
-              catch (error) {
-                logger.error(error);
-              }
-            }}
-          >
-            <i className="icon-magnifier"></i>
-          </button>
+          <div className="btn-group-submit-search">
+            <button
+              className="btn border-0"
+              type="button"
+              onClick={() => {
+                try {
+                  this.search();
+                }
+                catch (error) {
+                  logger.error(error);
+                }
+              }}
+            >
+              <i className="pr-2 icon-magnifier"></i>
+            </button>
+          </div>
         </div>
       </div>
     );

packages/app/src/styles/_search.scss

@@ -2,6 +2,30 @@
   background-color: #f7f7f7;
 }
 
+.grw-search-form-in-search-result-page {
+  .btn-group-submit-search {
+    position: absolute;
+    top: 1px;
+    right: 0;
+    z-index: 3;
+    display: flex;
+    align-items: center;
+    justify-content: center;
+    width: 32px;
+    height: 32px;
+  }
+
+  input {
+    border-radius: 16rem !important;
+  }
+
+  button {
+    &:focus {
+      box-shadow: none !important;
+    }
+  }
+}
+
 .search-listpage-icon {
   font-size: 16px;
   color: $gray-400;