From 92c547da85eec8ffb5864fb5478a1b416e0a2d1d Mon Sep 17 00:00:00 2001
From: Istvan Soos <istvan.soos@gmail.com>
Date: Wed, 30 Oct 2024 08:24:12 +0100
Subject: [PATCH 1/2] Search completion widget style updates.

---
 .../lib/src/widget/completion/suggest.dart    |  3 ++-
 pkg/web_css/lib/src/_search.scss              | 19 +++++++++++++++----
 pkg/web_css/lib/src/_variables.scss           |  1 +
 3 files changed, 18 insertions(+), 5 deletions(-)

diff --git a/pkg/web_app/lib/src/widget/completion/suggest.dart b/pkg/web_app/lib/src/widget/completion/suggest.dart
index 7b4743967..254efdd9b 100644
--- a/pkg/web_app/lib/src/widget/completion/suggest.dart
+++ b/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) +
diff --git a/pkg/web_css/lib/src/_search.scss b/pkg/web_css/lib/src/_search.scss
index ea514b53d..f5d807608 100644
--- a/pkg/web_css/lib/src/_search.scss
+++ b/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);
   }
 }
diff --git a/pkg/web_css/lib/src/_variables.scss b/pkg/web_css/lib/src/_variables.scss
index 0938e4359..3771222bf 100644
--- a/pkg/web_css/lib/src/_variables.scss
+++ b/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;

From dfdca4e0af8a242a8ae6a79b1a31ecf592a61162 Mon Sep 17 00:00:00 2001
From: Istvan Soos <istvan.soos@gmail.com>
Date: Wed, 30 Oct 2024 11:30:26 +0100
Subject: [PATCH 2/2] Updated test

---
 pkg/web_app/test/widget/completion/suggest_test.dart | 7 ++++---
 1 file changed, 4 insertions(+), 3 deletions(-)

diff --git a/pkg/web_app/test/widget/completion/suggest_test.dart b/pkg/web_app/test/widget/completion/suggest_test.dart
index fd26f3e9b..af4d2fcb2 100644
--- a/pkg/web_app/test/widget/completion/suggest_test.dart
+++ b/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,
         },
         {