From e8ba86f1a8fddd1e0dce2bef8ce75f60079a9f07 Mon Sep 17 00:00:00 2001
From: Mike Kruskal <mkruskal@google.com>
Date: Wed, 28 Sep 2022 16:41:36 -0700
Subject: [PATCH 1/9] Fixing magnifying glass icon handling in search bar

---
 assets/scss/_search.scss           | 29 ++++++++++++++++++++++++++---
 layouts/partials/search-input.html |  5 ++++-
 2 files changed, 30 insertions(+), 4 deletions(-)

diff --git a/assets/scss/_search.scss b/assets/scss/_search.scss
index 4c8fe88ee1..79386afffc 100644
--- a/assets/scss/_search.scss
+++ b/assets/scss/_search.scss
@@ -1,8 +1,13 @@
 // Search
-
-.td-search-input {
+.td-search-wrapper {
+    position: relative;
     background: transparent;
     max-width: 90%;
+}
+
+.td-search-wrapper .td-search-input {
+    width: 100%;
+    text-indent: 1.25em;
 
     &.form-control:focus {
         border-color: lighten($primary, 60%);
@@ -14,7 +19,25 @@
         border-radius: 1rem;
     }
 
-    font-family: $font-family-base, $font-awesome-font-name;
+    font-family: $font-family-base;
+}
+
+.td-search-wrapper .fa {
+    // Make this consistent with placeholder formatting.
+    color: $input-placeholder-color;
+
+    // Vertically center the content.
+    display: flex;
+    justify-content: center;
+    align-items:center;
+    height: 100%;
+
+    // Position this on the left of the input.
+    position: absolute;
+    left: 0.75em;
+
+    // Click-through to the underlying input.
+    pointer-events: none;
 }
 
 .popover.offline-search-result {
diff --git a/layouts/partials/search-input.html b/layouts/partials/search-input.html
index 22e9002477..86eb0c1706 100644
--- a/layouts/partials/search-input.html
+++ b/layouts/partials/search-input.html
@@ -1,5 +1,8 @@
 {{ if .Site.Params.gcs_engine_id -}}
-<input type="search" class="form-control td-search-input" placeholder="&#xf002; {{ T "ui_search" }}" aria-label="{{ T "ui_search" }}" autocomplete="off">
+<div class="td-search-wrapper">
+<i class="fa fa-search"></i>
+<input type="search" class="form-control td-search-input" placeholder="{{ T "ui_search" }}" aria-label="{{ T "ui_search" }}" autocomplete="off">
+</div>
 {{ else if .Site.Params.algolia_docsearch -}}
 <div id="docsearch"></div>
 {{ else if .Site.Params.offlineSearch -}}

From 70b5e394616de70785a9a721b559e5e08d3cdc66 Mon Sep 17 00:00:00 2001
From: Mike Kruskal <mkruskal@google.com>
Date: Fri, 7 Oct 2022 16:11:33 -0700
Subject: [PATCH 2/9] Fixing width and hiding effect on focus

---
 assets/scss/_search.scss | 11 ++++++++++-
 1 file changed, 10 insertions(+), 1 deletion(-)

diff --git a/assets/scss/_search.scss b/assets/scss/_search.scss
index 79386afffc..ccfd3b9df6 100644
--- a/assets/scss/_search.scss
+++ b/assets/scss/_search.scss
@@ -2,7 +2,7 @@
 .td-search-wrapper {
     position: relative;
     background: transparent;
-    max-width: 90%;
+    width: 90%;
 }
 
 .td-search-wrapper .td-search-input {
@@ -40,6 +40,15 @@
     pointer-events: none;
 }
 
+# Hide the icon on focus.
+.td-search-wrapper:focus-within .fa {
+    display: none;
+}
+
+.td-search-wrapper:focus-within .td-search-input {
+   text-indent: 0px;
+}
+
 .popover.offline-search-result {
     // Override bootstrap default style (max-width: $popover-max-width;)
     max-width: 90%;

From edea3a67248b2f6b2a209e6689a90dbca5c80908 Mon Sep 17 00:00:00 2001
From: Mike Kruskal <mkruskal@google.com>
Date: Fri, 7 Oct 2022 16:14:44 -0700
Subject: [PATCH 3/9] Fixing typo

---
 assets/scss/_search.scss | 2 +-
 1 file changed, 1 insertion(+), 1 deletion(-)

diff --git a/assets/scss/_search.scss b/assets/scss/_search.scss
index ccfd3b9df6..fc09f60c1c 100644
--- a/assets/scss/_search.scss
+++ b/assets/scss/_search.scss
@@ -40,7 +40,7 @@
     pointer-events: none;
 }
 
-# Hide the icon on focus.
+// Hide the icon on focus.
 .td-search-wrapper:focus-within .fa {
     display: none;
 }

From e1486b9a9caf7c9d62b66130a0928bf04e0e1b44 Mon Sep 17 00:00:00 2001
From: Mike Kruskal <mkruskal@google.com>
Date: Mon, 10 Oct 2022 09:43:14 -0700
Subject: [PATCH 4/9] Fixing placeholder color

---
 assets/scss/_search.scss | 4 +++-
 1 file changed, 3 insertions(+), 1 deletion(-)

diff --git a/assets/scss/_search.scss b/assets/scss/_search.scss
index fc09f60c1c..4fe02e5f5f 100644
--- a/assets/scss/_search.scss
+++ b/assets/scss/_search.scss
@@ -18,8 +18,10 @@
     @if $enable-rounded {
         border-radius: 1rem;
     }
+}
 
-    font-family: $font-family-base;
+.td-search-wrapper .td-search-input::placeholder {
+    color: $input-placeholder-color;
 }
 
 .td-search-wrapper .fa {

From 0e67d4807161eb887068c3e8762992373951a4bd Mon Sep 17 00:00:00 2001
From: Mike Kruskal <mkruskal@google.com>
Date: Mon, 10 Oct 2022 10:32:55 -0700
Subject: [PATCH 5/9] Revert accidental styling changes to nav bar

---
 assets/scss/_search.scss | 5 +----
 1 file changed, 1 insertion(+), 4 deletions(-)

diff --git a/assets/scss/_search.scss b/assets/scss/_search.scss
index 4fe02e5f5f..ba2a548a42 100644
--- a/assets/scss/_search.scss
+++ b/assets/scss/_search.scss
@@ -8,6 +8,7 @@
 .td-search-wrapper .td-search-input {
     width: 100%;
     text-indent: 1.25em;
+    background: transparent;
 
     &.form-control:focus {
         border-color: lighten($primary, 60%);
@@ -20,10 +21,6 @@
     }
 }
 
-.td-search-wrapper .td-search-input::placeholder {
-    color: $input-placeholder-color;
-}
-
 .td-search-wrapper .fa {
     // Make this consistent with placeholder formatting.
     color: $input-placeholder-color;

From 0857eab4eb2a4015dc39440f67a7b0a77ad6c0b6 Mon Sep 17 00:00:00 2001
From: Mike Kruskal <mkruskal@google.com>
Date: Mon, 10 Oct 2022 12:19:47 -0700
Subject: [PATCH 6/9] Fixing focus color issue

---
 assets/scss/_search.scss | 1 -
 1 file changed, 1 deletion(-)

diff --git a/assets/scss/_search.scss b/assets/scss/_search.scss
index ba2a548a42..ea074460fa 100644
--- a/assets/scss/_search.scss
+++ b/assets/scss/_search.scss
@@ -13,7 +13,6 @@
     &.form-control:focus {
         border-color: lighten($primary, 60%);
         box-shadow: 0 0 0 2px lighten($primary, 30%);
-        color: inherit;
     }
 
     @if $enable-rounded {

From eea3d33d8fdb7495a09bc025422c728473d09dad Mon Sep 17 00:00:00 2001
From: Mike Kruskal <mkruskal@google.com>
Date: Tue, 11 Oct 2022 14:58:50 -0700
Subject: [PATCH 7/9] Making search bar styling consistent with currently
 deployed

---
 assets/scss/_search.scss | 6 +++++-
 1 file changed, 5 insertions(+), 1 deletion(-)

diff --git a/assets/scss/_search.scss b/assets/scss/_search.scss
index ea074460fa..11d975eab6 100644
--- a/assets/scss/_search.scss
+++ b/assets/scss/_search.scss
@@ -5,14 +5,18 @@
     width: 90%;
 }
 
+.td-search-wrapper .td-search-input:not(:focus) {
+    background: transparent;
+}
+
 .td-search-wrapper .td-search-input {
     width: 100%;
     text-indent: 1.25em;
-    background: transparent;
 
     &.form-control:focus {
         border-color: lighten($primary, 60%);
         box-shadow: 0 0 0 2px lighten($primary, 30%);
+        color: inherit;
     }
 
     @if $enable-rounded {

From b8035aba61d50701d38c66bc7d4f4dc41e1559c2 Mon Sep 17 00:00:00 2001
From: Mike Kruskal <mkruskal@google.com>
Date: Tue, 11 Oct 2022 15:20:58 -0700
Subject: [PATCH 8/9] Fixing magnifying glass color

---
 assets/scss/_nav.scss    | 5 ++++-
 assets/scss/_search.scss | 7 ++++---
 2 files changed, 8 insertions(+), 4 deletions(-)

diff --git a/assets/scss/_nav.scss b/assets/scss/_nav.scss
index 87bda33094..14f29f68c9 100644
--- a/assets/scss/_nav.scss
+++ b/assets/scss/_nav.scss
@@ -57,9 +57,12 @@
         font-weight: $font-weight-bold;
     }
 
+    .td-search-wrapper .fa {
+        color: $navbar-dark-color;
+    }
+
     .td-search-input {
         border: none;
-        color: $navbar-dark-color;
         @include placeholder {
             color: $navbar-dark-color;
         }
diff --git a/assets/scss/_search.scss b/assets/scss/_search.scss
index 11d975eab6..bd8ca34e24 100644
--- a/assets/scss/_search.scss
+++ b/assets/scss/_search.scss
@@ -5,6 +5,10 @@
     width: 90%;
 }
 
+.td-search-wrapper:not(:focus-within) {
+    color: $input-placeholder-color;
+}
+
 .td-search-wrapper .td-search-input:not(:focus) {
     background: transparent;
 }
@@ -25,9 +29,6 @@
 }
 
 .td-search-wrapper .fa {
-    // Make this consistent with placeholder formatting.
-    color: $input-placeholder-color;
-
     // Vertically center the content.
     display: flex;
     justify-content: center;

From 5ce9641264d9cf9ae15d8bfc4b48d4e51adb0fed Mon Sep 17 00:00:00 2001
From: Mike Kruskal <mkruskal@google.com>
Date: Tue, 11 Oct 2022 15:24:02 -0700
Subject: [PATCH 9/9] Fixing navbar color

---
 assets/scss/_nav.scss | 1 +
 1 file changed, 1 insertion(+)

diff --git a/assets/scss/_nav.scss b/assets/scss/_nav.scss
index 14f29f68c9..b5429fd11a 100644
--- a/assets/scss/_nav.scss
+++ b/assets/scss/_nav.scss
@@ -63,6 +63,7 @@
 
     .td-search-input {
         border: none;
+        color: $navbar-dark-color;
         @include placeholder {
             color: $navbar-dark-color;
         }