Imprv/84444 84445 & 84529 search form icon + clear btn (#4991)

* 84445 fix search input for text too long

* 84529 search form clear btn

* remove magnifier button

Co-authored-by: Yuki Takei <yuki@weseek.co.jp>

packages/app/src/components/Navbar/GlobalSearch.tsx

@@ -79,11 +79,6 @@ const GlobalSearch: FC<Props> = (props: Props) => {
           onInputChange={text => setText(text)}
           onSubmit={search}
         />
-        <div className="btn-group-submit-search">
-          <span role="button" className="btn-link text-decoration-none" onClick={search}>
-            <i className="icon-magnifier"></i>
-          </span>
-        </div>
       </div>
     </div>
   );

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

@@ -43,33 +43,12 @@ class SearchPageForm extends React.Component {
     const isSearchServiceReachable = appContainer.getConfig().isSearchServiceReachable;
 
     return (
-      // TODO: modify design after other component is created
-      <div className="grw-search-form-in-search-result-page d-flex align-items-center">
-        <div className="input-group flex-nowrap">
-          <SearchForm
-            isSearchServiceReachable={isSearchServiceReachable}
-            onSubmit={this.search}
-            keyword={this.state.searchedKeyword}
-            onInputChange={this.onInputChange}
-          />
-          <div className="btn-group-submit-search">
-            <span
-              role="button"
-              className="text-decoration-none"
-              onClick={() => {
-                try {
-                  this.search();
-                }
-                catch (error) {
-                  logger.error(error);
-                }
-              }}
-            >
-              <i className="icon-magnifier"></i>
-            </span>
-          </div>
-        </div>
-      </div>
+      <SearchForm
+        isSearchServiceReachable={isSearchServiceReachable}
+        onSubmit={this.search}
+        keyword={this.state.searchedKeyword}
+        onInputChange={this.onInputChange}
+      />
     );
   }
 

packages/app/src/components/SearchTypeahead.tsx

@@ -25,7 +25,7 @@ const ResetFormButton: FC<ResetFormButtonProps> = (props: ResetFormButtonProps)
   return isHidden ? (
     <span />
   ) : (
-    <button type="button" className="btn btn-link search-clear" onMouseDown={props.onReset}>
+    <button type="button" className="btn btn-outline-secondary search-clear text-muted border-0" onMouseDown={props.onReset}>
       <i className="icon-close" />
     </button>
   );

packages/app/src/styles/_search.scss

@@ -1,39 +1,21 @@
-.search-group-submit-button {
-  position: absolute;
-  top: 0;
-  right: 0;
-  z-index: 3;
-  display: flex;
-  align-items: center;
-  justify-content: center;
-  width: 32px;
-  height: 32px;
-}
-
-.search-listpage-clear {
-  position: absolute;
-  right: 8px;
-  display: none;
-  width: 22px;
-  height: 22px;
-  padding: 8px;
-  font-size: 0.6em;
-  color: $gray-300;
-}
-
 .search-typeahead {
   position: relative;
   width: 100%;
-
+  // corner radius
+  border-top-right-radius: $border-radius;
+  border-bottom-right-radius: $border-radius;
+  .rbt-input-main {
+    padding-right: 36px;
+  }
   .search-clear {
     position: absolute;
     top: 4px;
-    right: 26px;
+    right: 4px;
     z-index: 3;
     width: 24px;
     height: 24px;
     padding: 0;
-    color: $gray-400;
+    line-height: 0;
   }
 
   .rbt-menu {
@@ -77,15 +59,6 @@
   }
 
   .search-typeahead {
-    // corner radius
-    border-top-right-radius: $border-radius;
-    border-bottom-right-radius: $border-radius;
-    .rbt-input-main {
-      padding-right: 58px;
-      // corner radius
-      border-top-right-radius: $border-radius;
-      border-bottom-right-radius: $border-radius;
-    }
     .rbt-menu {
       @extend .dropdown-menu-right;
       @extend .dropdown-menu-md-left;
@@ -110,22 +83,6 @@
       border: none;
     }
   }
-
-  .btn-group-submit-search {
-    @extend .search-group-submit-button;
-  }
-}
-
-.grw-search-form-in-search-result-page {
-  .btn-group-submit-search {
-    @extend .search-group-submit-button;
-  }
-
-  button {
-    &:focus {
-      box-shadow: none !important;
-    }
-  }
 }
 
 // layout