From 19fe4a8684271ab41409eeb1721eac79956c6fd7 Mon Sep 17 00:00:00 2001
From: Eric Amodio <eamodio@gmail.com>
Date: Thu, 22 Sep 2022 23:31:14 -0400
Subject: [PATCH] Increases search font-size to match vscode Adds error
 highlight for no results like vscode Removes clear search button (styling
 looks bad)

---
 src/webviews/apps/plus/graph/GraphWrapper.tsx       |  3 ++-
 src/webviews/apps/plus/graph/graph.scss             |  1 +
 .../apps/shared/components/search/search-field.ts   |  8 ++++++--
 .../apps/shared/components/search/search-nav.ts     | 21 +++++++++++++--------
 4 files changed, 22 insertions(+), 11 deletions(-)

diff --git a/src/webviews/apps/plus/graph/GraphWrapper.tsx b/src/webviews/apps/plus/graph/GraphWrapper.tsx
index 2d2f4fb..e9bd18d 100644
--- a/src/webviews/apps/plus/graph/GraphWrapper.tsx
+++ b/src/webviews/apps/plus/graph/GraphWrapper.tsx
@@ -7,7 +7,7 @@ import GraphContainer, {
 	type GraphRow,
 	type GraphZoneType,
 } from '@gitkraken/gitkraken-components';
-import type { FormEvent, ReactElement } from 'react';
+import type { ReactElement } from 'react';
 import React, { createElement, useEffect, useLayoutEffect, useMemo, useRef, useState } from 'react';
 import { getPlatform } from '@env/platform';
 import { DateStyle } from '../../../../config';
@@ -592,6 +592,7 @@ export function GraphWrapper({
 						aria-label="Graph search navigation"
 						step={searchPosition}
 						total={searchIds?.length ?? 0}
+						valid={Boolean(searchValue && searchValue.length > 2)}
 						more={hasMoreSearchIds}
 						onPrevious={() => handleSearchNavigation(false)}
 						onNext={() => handleSearchNavigation(true)}
diff --git a/src/webviews/apps/plus/graph/graph.scss b/src/webviews/apps/plus/graph/graph.scss
index c5c47ea..2bbe483 100644
--- a/src/webviews/apps/plus/graph/graph.scss
+++ b/src/webviews/apps/plus/graph/graph.scss
@@ -522,6 +522,7 @@ a {
 		left: 0.8rem;
 		right: 0.8rem;
 	}
+	font-size: 1.3rem;
 
 	&,
 	&__group {
diff --git a/src/webviews/apps/shared/components/search/search-field.ts b/src/webviews/apps/shared/components/search/search-field.ts
index dbdd49f..cd1451a 100644
--- a/src/webviews/apps/shared/components/search/search-field.ts
+++ b/src/webviews/apps/shared/components/search/search-field.ts
@@ -71,9 +71,9 @@ const styles = css`
 		color: var(--vscode-input-foreground);
 		border: 1px solid var(--vscode-input-background);
 		border-radius: 0.25rem;
-		padding: 0 6.6rem 0 0.4rem;
+		padding: 0 6.6rem 1px 0.4rem;
 		font-family: inherit;
-		font-size: 1rem;
+		font-size: inherit;
 	}
 	input:focus {
 		outline: 1px solid var(--vscode-focusBorder);
@@ -83,6 +83,10 @@ const styles = css`
 		color: var(--vscode-input-placeholderForeground);
 	}
 
+	input::-webkit-search-cancel-button {
+		display: none;
+	}
+
 	.controls {
 		position: absolute;
 		top: 0.2rem;
diff --git a/src/webviews/apps/shared/components/search/search-nav.ts b/src/webviews/apps/shared/components/search/search-nav.ts
index a3f08b1..df18c5a 100644
--- a/src/webviews/apps/shared/components/search/search-nav.ts
+++ b/src/webviews/apps/shared/components/search/search-nav.ts
@@ -1,10 +1,11 @@
-import { attr, css, customElement, FASTElement, html, ref, volatile, when } from '@microsoft/fast-element';
+import { attr, css, customElement, FASTElement, html, volatile, when } from '@microsoft/fast-element';
+import { pluralize } from '../../../../../system/string';
 import { numberConverter } from '../converters/number-converter';
 import '../codicon';
 
 const template = html<SearchNav>`<template>
-	<span class="count">
-		${when(x => x.total < 1, html<SearchNav>`No ${x => x.formattedLabel}`)}
+	<span class="count${x => (x.total < 1 && x.valid ? ' error' : '')}">
+		${when(x => x.total < 1, html<SearchNav>`${x => x.formattedLabel}`)}
 		${when(
 			x => x.total > 0,
 			html<SearchNav>`<span aria-current="step">${x => x.step}</span> of
@@ -47,6 +48,11 @@ const styles = css`
 	.count {
 		flex: none;
 		margin-right: 0.4rem;
+		font-size: 1.2rem;
+	}
+
+	.count.error {
+		color: var(--vscode-errorForeground);
 	}
 
 	.button {
@@ -95,16 +101,15 @@ export class SearchNav extends FASTElement {
 	@attr({ mode: 'boolean' })
 	more = false;
 
+	@attr({ mode: 'boolean' })
+	valid = false;
+
 	@attr
 	label = 'result';
 
 	@volatile
 	get formattedLabel() {
-		if (this.total === 1) {
-			return this.label;
-		}
-
-		return `${this.label}s`;
+		return pluralize(this.label, this.total, { zero: 'No' });
 	}
 
 	@volatile