From 343f6c7b1b7fef87ebed33f0249e129f5a8544de Mon Sep 17 00:00:00 2001
From: Mengwei Ding <mengwei.ding@gmail.com>
Date: Thu, 7 Mar 2019 15:27:37 -0800
Subject: [PATCH] [Code] adjust search bar suggestions style

---
 .../code/public/components/main/main.scss      | 14 +++++++++++---
 .../suggestions_component.test.tsx.snap        | 18 ++++++++++++------
 .../typeahead/suggestions_component.tsx        |  4 ++--
 .../components/search_page/code_result.tsx     |  4 ++--
 4 files changed, 27 insertions(+), 13 deletions(-)

diff --git a/x-pack/plugins/code/public/components/main/main.scss b/x-pack/plugins/code/public/components/main/main.scss
index bf2e59468edcbf..23aaed4cf7d020 100644
--- a/x-pack/plugins/code/public/components/main/main.scss
+++ b/x-pack/plugins/code/public/components/main/main.scss
@@ -134,7 +134,6 @@
 }
 
 .codeSearch__suggestion-item {
-  background: $euiColorLightestShade;
   height: 3rem;
   margin: 0 $euiSize;
   border-radius: $euiSizeXS;
@@ -146,7 +145,7 @@
   }
 }
 
-.codeSearch__suggestion--active {
+.codeSearch__suggestion-item--active {
   background: $euiColorLightShade;
 }
 
@@ -188,15 +187,24 @@
   overflow-x: hidden;
 }
 
+.codeSearch-suggestion__group {
+  border-top: $euiBorderThin;
+}
+
 .codeSearch-suggestion__group-header {
   padding: $euiSizeL;
-  border-top: $euiBorderThin;
 }
 .codeSearch-suggestion__group-title {
+  font-weight: bold;
   margin-left: $euiSizeS;
   display: inline-block;
 }
 
+.codeSearch-suggestion__group-result {
+  color: $euiColorDarkShade;
+  font-size: $euiFontSizeXS;
+}
+
 .codeSearch-suggestion__link {
   height: $euiSize;
   line-height: $euiSize;
diff --git a/x-pack/plugins/code/public/components/query_bar/components/typeahead/__snapshots__/suggestions_component.test.tsx.snap b/x-pack/plugins/code/public/components/query_bar/components/typeahead/__snapshots__/suggestions_component.test.tsx.snap
index a013a9cbdbc4a3..57b35c7ac2e9a9 100644
--- a/x-pack/plugins/code/public/components/query_bar/components/typeahead/__snapshots__/suggestions_component.test.tsx.snap
+++ b/x-pack/plugins/code/public/components/query_bar/components/typeahead/__snapshots__/suggestions_component.test.tsx.snap
@@ -132,7 +132,7 @@ exports[`render full suggestions component 1`] = `
             className="kbnTypeahead__popover"
           >
             <div
-              className="kbnTypeahead__items"
+              className="kbnTypeahead__items codeSearch-suggestion__group"
               data-test-subj="codeTypeaheadList-symbol"
               id="kbnTypeahead__items"
               key="symbol-suggestions"
@@ -215,7 +215,9 @@ exports[`render full suggestions component 1`] = `
                       </EuiText>
                     </div>
                   </EuiFlexGroup>
-                  <div>
+                  <div
+                    className="codeSearch-suggestion__group-result"
+                  >
                     1
                      Result
                   </div>
@@ -317,7 +319,7 @@ exports[`render full suggestions component 1`] = `
               </Component>
             </div>
             <div
-              className="kbnTypeahead__items"
+              className="kbnTypeahead__items codeSearch-suggestion__group"
               data-test-subj="codeTypeaheadList-file"
               id="kbnTypeahead__items"
               key="file-suggestions"
@@ -400,7 +402,9 @@ exports[`render full suggestions component 1`] = `
                       </EuiText>
                     </div>
                   </EuiFlexGroup>
-                  <div>
+                  <div
+                    className="codeSearch-suggestion__group-result"
+                  >
                     1
                      Result
                   </div>
@@ -454,7 +458,7 @@ exports[`render full suggestions component 1`] = `
               </Component>
             </div>
             <div
-              className="kbnTypeahead__items"
+              className="kbnTypeahead__items codeSearch-suggestion__group"
               data-test-subj="codeTypeaheadList-repository"
               id="kbnTypeahead__items"
               key="repository-suggestions"
@@ -538,7 +542,9 @@ exports[`render full suggestions component 1`] = `
                       </EuiText>
                     </div>
                   </EuiFlexGroup>
-                  <div>
+                  <div
+                    className="codeSearch-suggestion__group-result"
+                  >
                     2
                      Result
                     s
diff --git a/x-pack/plugins/code/public/components/query_bar/components/typeahead/suggestions_component.tsx b/x-pack/plugins/code/public/components/query_bar/components/typeahead/suggestions_component.tsx
index f09bfab62494f9..fc855929f26ee1 100644
--- a/x-pack/plugins/code/public/components/query_bar/components/typeahead/suggestions_component.tsx
+++ b/x-pack/plugins/code/public/components/query_bar/components/typeahead/suggestions_component.tsx
@@ -95,7 +95,7 @@ export class SuggestionsComponent extends Component<Props> {
                 {this.getGroupTitle(group.type)}
               </EuiText>
             </EuiFlexGroup>
-            <div>
+            <div className="codeSearch-suggestion__group-result">
               {total} Result
               {total === 1 ? '' : 's'}
             </div>
@@ -117,7 +117,7 @@ export class SuggestionsComponent extends Component<Props> {
         return (
           <div
             id="kbnTypeahead__items"
-            className="kbnTypeahead__items"
+            className="kbnTypeahead__items codeSearch-suggestion__group"
             role="listbox"
             data-test-subj={`codeTypeaheadList-${type}`}
             ref={node => (this.parentNode = node)}
diff --git a/x-pack/plugins/code/public/components/search_page/code_result.tsx b/x-pack/plugins/code/public/components/search_page/code_result.tsx
index 45afa9fc2b5720..bf95b7258c7392 100644
--- a/x-pack/plugins/code/public/components/search_page/code_result.tsx
+++ b/x-pack/plugins/code/public/components/search_page/code_result.tsx
@@ -61,9 +61,9 @@ export class CodeResult extends React.PureComponent<Props> {
               <EuiBadge color="default">{hits}</EuiBadge>
             </EuiFlexItem>
             <EuiText size="s">
-              &nbsp;hits from
+              &nbsp;hits from&nbsp;
               <Link to={fileLinkUrl} data-test-subj="codeSearchResultFileItem">
-                &nbsp;{filePath}
+                {filePath}
               </Link>
             </EuiText>
           </EuiFlexGroup>