Cleanup search function

src/app/components/shared/comment-list/comment-list.component.html

@@ -3,13 +3,14 @@
     <mat-icon>search</mat-icon>
   </mat-label>
   <input #searchBox placeholder="{{ 'comment-list-page.search-box-placeholder-text' | translate }}"
-    (focus)="hideCommentsList=true" (input)="searchComments(searchBox.value)">
-  <button mat-flat-button color="accent" *ngIf="hideCommentsList"
-    (click)="hideCommentsList=false;searchBox.value='';">{{ 'comment-list-page.cancel' | translate }}</button>
+         (input)="searchComments(searchBox.value)">
+  <button mat-button matSuffix *ngIf="searchBox.value" (click)="hideCommentsList=false; searchBox.value=''">
+    <mat-icon>close</mat-icon>
+  </button>
 </div>
-<mat-card class="outer-card" *ngIf="hideCommentsList && searchBox.value!=''">
+<mat-card class="outer-card" *ngIf="hideCommentsList">
   <app-comment *ngFor="let current of filteredComments" [comment]="current"> </app-comment>
 </mat-card>
 <mat-card class="outer-card" *ngIf="!hideCommentsList">
   <app-comment *ngFor="let current of comments" [comment]="current"> </app-comment>
-</mat-card>
\ No newline at end of file
+</mat-card>

src/app/components/shared/comment-list/comment-list.component.scss

 mat-card {
   margin-bottom: 10px;
   background-color: #4db6ac;
-  border-radius: 8px;
-  width: 100%;
-  max-width: 800px;
 }
 
 app-comment {
@@ -13,15 +10,17 @@ app-comment {
 
 input {
   box-sizing: border-box;
-  padding: 0 10px 0 20px;
-  width: 100%;
-  background-color: #4db6ac;
+  padding: 0 10px 0 5px;
+  width: 90%;
+  background-color: #80cbc4;
   border: none;
+  outline: none;
+  max-height: 44px;
+  font-size: large;
+  border-radius: 5px;
 }
 
 button{
-  border-left: 3px solid #b2dfdb;
-  border-radius: 0px;
   min-height: 100% !important;
   min-width: 100px;
 }
@@ -30,12 +29,8 @@ mat-icon {
   padding: 10px;
 }
 
-mat-label {
-  min-height: 100% !important;
-  border-radius: 0px;
-}
-
 #search-container{
-  background-color: #4db6ac;
+  border-radius: 5px;
+  background-color: #80cbc4;
   margin-bottom: 10px;
 }

src/app/components/shared/comment-list/comment-list.component.ts

@@ -45,7 +45,12 @@ export class CommentListComponent implements OnInit {
   }
 
   searchComments(term: string): void {
-    this.filteredComments = this.comments.filter(c => c.body.toLowerCase().includes(term));
+    if (term) {
+      this.hideCommentsList = true;
+      this.filteredComments = this.comments.filter(c => c.body.toLowerCase().includes(term));
+    } else {
+      this.hideCommentsList = false;
+    }
   }
 
   parseIncomingMessage(message: Message) {