Search completion widget style updates. (#8204)

Author: isoos

pkg/web_app/lib/src/widget/completion/suggest.dart

@@ -110,7 +110,8 @@ class Suggestion {
     final overlap = _lcs(prefix, option);
     var html = option;
     if (overlap.isNotEmpty) {
-      html = html.replaceAll(overlap, '<strong>$overlap</strong>');
+      html = html.replaceAll(
+          overlap, '<span class="completion-overlap">$overlap</span>');
     }
     final score = (option.startsWith(word) ? math.pow(overlap.length, 3) : 0) +
         math.pow(overlap.length, 2) +

pkg/web_app/test/widget/completion/suggest_test.dart

@@ -68,21 +68,22 @@ void main() {
           'start': 0,
           'end': 5,
           'value': 'is:flutter-favorite ',
-          'html': 'flu<strong>tt</strong>er-favorite',
+          'html': 'flu<span class="completion-overlap">tt</span>er-favorite',
           'score': 4.125,
         },
         {
           'start': 0,
           'end': 5,
           'value': 'is:unlisted ',
-          'html': 'unlis<strong>t</strong>ed',
+          'html': 'unlis<span class="completion-overlap">t</span>ed',
           'score': 1.125,
         },
         {
           'start': 0,
           'end': 5,
           'value': 'is:dart3-compatible ',
-          'html': 'dar<strong>t</strong>3-compa<strong>t</strong>ible',
+          'html':
+              'dar<span class="completion-overlap">t</span>3-compa<span class="completion-overlap">t</span>ible',
           'score': 1.0625,
         },
         {

pkg/web_css/lib/src/_search.scss

@@ -110,9 +110,15 @@
   overflow-x: hidden;
   appearance: none;
   width: 25ex;
-  border: 1px solid #000;
+  padding-bottom: 4px;
+  border-left: 1px solid #000;
+  border-right: 1px solid #000;
+  border-bottom: 1px solid #000;
+  border-bottom-left-radius: 5px;
+  border-bottom-right-radius: 5px;
   max-height: 20em;
-  background-color: var(--pub-neutral-bgColor);
+  background: var(--pub-searchbar_input-background-color);
+  color: var(--pub-input-placeholder-color);
   font-size: 16px;
   margin-left: 48px; // counter padding-left on .search-bar>.input
   margin-top: -14px; // counter padding-top on .search-bar>.input
@@ -123,11 +129,16 @@
     padding: 0px 3px;
 
     &:hover {
-      background-color: var(--pub-selected-bgColor);
+      background-color: var(--pub-searchbar_input_hover-background-color);
+    }
+
+    .completion-overlap {
+      color: var(--pub-searchbar_input-text-color);
+      font-weight: 500; // slightly bolder
     }
   }
 
   >.completion-option-selected {
-    background-color: var(--pub-selected-bgColor);
+    background-color: var(--pub-searchbar_input_hover-background-color);
   }
 }

pkg/web_css/lib/src/_variables.scss

@@ -79,6 +79,7 @@
   --pub-searchbar-background-color: #132030;
   --pub-searchbar-text-color: #8d9399;
   --pub-searchbar_input-background-color: #35404d;
+  --pub-searchbar_input_hover-background-color: #455060;
   --pub-searchbar_input-text-color: var(--pub-color-white);
   --pub-session_warning-background-color: #ffffaa;
   --pub-site_header_banner-background-color: #1C2834;