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

@@ -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)}

src/webviews/apps/plus/graph/graph.scss

@@ -522,6 +522,7 @@ a {
 		left: 0.8rem;
 		right: 0.8rem;
 	}
+	font-size: 1.3rem;
 
 	&,
 	&__group {

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;

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