OZG-635 styling search-field part 1

goofy-client/libs/navigation/src/lib/header-container/header/_header.theme.scss

-goofy-client-header {
+goofy-client-header header {
 	background-color: #fff;
 }
 

goofy-client/libs/navigation/src/lib/header-container/header/header.component.scss

@@ -23,6 +23,10 @@ header {
 	pointer-events: none;
 }
 
+.middle {
+	flex-grow: 1;
+}
+
 img {
 	margin: 0 14px;
 	height: 40px;
@@ -32,6 +36,7 @@ img {
 .left {
 	display: flex;
 	align-items: inherit;
+	min-width: 240px;
 
 	a {
 		outline: 0;

goofy-client/libs/vorgang-shared-ui/src/lib/vorgang-search-container/vorgang-search-container.component.html

-<form (ngSubmit)="search()" [formGroup]="formService.form">
-	<div class="c-searchfield">
-		<button class="material-icons" type="submit" data-test-id="search-button" matTooltip="Suche ausführen">search</button>
-		<input type="text" [formControlName]="formService.SEARCH_FIELD" name="searchString" data-test-id="search-input" placeholder="Eingangskennzeichen" />
-	</div>
+<form (ngSubmit)="search()" [formGroup]="formService.form" class="search-field">
+
+	<button type="submit" data-test-id="search-button" mat-icon-button aria-label="icon button with search icon">
+		<mat-icon>search</mat-icon>
+	</button>
+
+	<input type="text" maxlength="32" [formControlName]="formService.SEARCH_FIELD" name="searchString" data-test-id="search-input" placeholder="Eingangskennzeichen" />
+
+	<button
+			*ngIf="isSearchFieldFilled()"
+			(click)="formService.reset()"
+			mat-icon-button aria-label="icon button to clear the search field"
+			data-test-id="clear-button">
+		<mat-icon>close</mat-icon>
+	</button>
+
 </form>

goofy-client/libs/vorgang-shared-ui/src/lib/vorgang-search-container/vorgang-search-container.component.scss

 @import "variables";
 
-.c-searchfield {
+input {
+	border: 0;
+	background-color: transparent;
+	outline: 0;
+	flex-grow: 1;
+	font-size: 18px;
+
+	&::placeholder {
+		color: rgba(#000, 0.2);
+	}
+}
+
+.search-field {
+	border-radius: 20px;
+	background-color: #fafafa;
+	max-width: 320px;
+	display: flex;
+	box-shadow: 0 0 0 1px rgba(#000, 0.08);
+	margin-left: 16px;
+}
+
+
+.xc-searchfield {
 	border: 1px solid grey;
 	display: flex;
 	border-radius: 25px;

goofy-client/libs/vorgang-shared-ui/src/lib/vorgang-search-container/vorgang-search-container.component.ts

@@ -14,4 +14,8 @@ export class VorgangSearchContainerComponent {
 	search(): void {
 		this.formService.submit();
 	}
+
+	isSearchFieldFilled(): boolean {
+		return this.formService.hasSearchString();
+	}
 }

goofy-client/libs/vorgang-shared-ui/src/lib/vorgang-search-container/vorgang-search.formservice.ts

@@ -24,6 +24,14 @@ export class VorgangSearchFormService {
 		return this.service.search(this.getFormValue());
 	}
 
+	reset(): void {
+		this.form.controls[this.SEARCH_FIELD].patchValue('');
+	}
+
+	hasSearchString(): boolean {
+		return !!this.form.controls[this.SEARCH_FIELD].value;
+	}
+
 	private getFormValue(){
 		const formValue: string = this.form.value.search;
 		return isEmpty(formValue) ? null : formValue;