From 3310ec0f7d3a5184ee780aab3b82e763f1a0c8ce Mon Sep 17 00:00:00 2001
From: Eric Amodio <eamodio@gmail.com>
Date: Tue, 4 Oct 2022 00:12:04 -0400
Subject: [PATCH] Improves graph search box theming

---
 .../apps/shared/components/search/search-box.ts    | 26 +++++++++++-----------
 .../apps/shared/components/search/search-input.ts  |  5 +++--
 2 files changed, 16 insertions(+), 15 deletions(-)

diff --git a/src/webviews/apps/shared/components/search/search-box.ts b/src/webviews/apps/shared/components/search/search-box.ts
index cb1cd21..59ba1b6 100644
--- a/src/webviews/apps/shared/components/search/search-box.ts
+++ b/src/webviews/apps/shared/components/search/search-box.ts
@@ -52,7 +52,7 @@ const template = html<SearchBox>`<template>
 		<button
 			type="button"
 			class="button"
-			?disabled="${x => !x.hasPrevious}"
+			?disabled="${x => !x.hasResults}"
 			@click="${(x, c) => x.handlePrevious(c.event as MouseEvent)}"
 		>
 			<code-icon
@@ -64,7 +64,7 @@ const template = html<SearchBox>`<template>
 		<button
 			type="button"
 			class="button"
-			?disabled="${x => !x.hasNext}"
+			?disabled="${x => !x.hasResults}"
 			@click="${(x, c) => x.handleNext(c.event as MouseEvent)}"
 		>
 			<code-icon icon="arrow-down" aria-label="Next Match (Enter)" title="Next Match (Enter)"></code-icon>
@@ -72,7 +72,7 @@ const template = html<SearchBox>`<template>
 		<button
 			type="button"
 			class="button"
-			?disabled="${x => !x.value}"
+			?disabled="${x => !x.hasResults}"
 			@click="${(x, c) => x.handleOpenInView(c.event)}"
 		>
 			<code-icon
@@ -90,7 +90,7 @@ const styles = css`
 		flex-direction: row;
 		align-items: center;
 		gap: 0.8rem;
-		color: var(--vscode-titleBar-inactiveForeground);
+		color: var(--color-foreground);
 		flex: auto 1 1;
 	}
 	:host(:focus) {
@@ -101,8 +101,8 @@ const styles = css`
 		display: inline-flex;
 		flex-direction: row;
 		align-items: center;
-		gap: 0.8rem;
-		color: var(--vscode-titleBar-inactiveForeground);
+		gap: 0.3rem;
+		color: var(--color-foreground);
 	}
 	.search-navigation:focus {
 		outline: 0;
@@ -128,7 +128,11 @@ const styles = css`
 		background: none;
 		text-align: center;
 	}
+	.button[disabled] {
+		color: var(--vscode-disabledForeground);
+	}
 	.button:focus {
+		background-color: var(--vscode-toolbar-activeBackground);
 		outline: 1px solid var(--vscode-focusBorder);
 		outline-offset: -1px;
 	}
@@ -136,7 +140,8 @@ const styles = css`
 		cursor: pointer;
 	}
 	.button:hover:not([disabled]) {
-		background-color: var(--vscode-titleBar-activeBackground);
+		color: var(--vscode-foreground);
+		background-color: var(--vscode-toolbar-hoverBackground);
 	}
 	.button > code-icon[icon='arrow-up'] {
 		transform: translateX(-0.1rem);
@@ -207,12 +212,7 @@ export class SearchBox extends FASTElement {
 	}
 
 	@volatile
-	get hasPrevious() {
-		return this.total > 1;
-	}
-
-	@volatile
-	get hasNext() {
+	get hasResults() {
 		return this.total > 1;
 	}
 
diff --git a/src/webviews/apps/shared/components/search/search-input.ts b/src/webviews/apps/shared/components/search/search-input.ts
index 9d97df8..2ea0b32 100644
--- a/src/webviews/apps/shared/components/search/search-input.ts
+++ b/src/webviews/apps/shared/components/search/search-input.ts
@@ -101,7 +101,7 @@ const styles = css`
 		height: 2.4rem;
 		background-color: var(--vscode-input-background);
 		color: var(--vscode-input-foreground);
-		border: 1px solid var(--vscode-input-background);
+		border: 1px solid var(--vscode-input-border);
 		border-radius: 0.25rem;
 		padding: 0 6.6rem 1px 0.4rem;
 		font-family: inherit;
@@ -165,7 +165,7 @@ const styles = css`
 		height: 2rem;
 		padding: 0;
 		color: var(--vscode-input-foreground);
-		border: none;
+		border: 1px solid transparent;
 		background: none;
 		text-align: center;
 		border-radius: 0.25rem;
@@ -189,6 +189,7 @@ const styles = css`
 	button[aria-checked='true'] {
 		background-color: var(--vscode-inputOption-activeBackground);
 		color: var(--vscode-inputOption-activeForeground);
+		border-color: var(--vscode-inputOption-activeBorder);
 	}
 
 	.clear-button__hidden {