Fix: consistent style an dtext on datasets list page

src/app/datasets/dashboard/full-text-search/full-text-search-bar.component.html

@@ -12,17 +12,24 @@
     </mat-form-field>
     <div class="search-button-group">
       <button
-        mat-flat-button
-        color="accent"
+        mat-raised-button
+        color="primary"
+        class="full-text-search-button"
         data-cy="search-button"
         (click)="onSearch()"
       >
         <mat-icon>search</mat-icon>
         Search
       </button>
-      <button mat-flat-button data-cy="search-clear-button" (click)="onClear()">
-        <mat-icon>close</mat-icon>
-        Clear
+      <button 
+        mat-raised-button 
+        color="primary"
+        class="full-text-clear-button"
+        data-cy="search-clear-button" 
+        (click)="onClear()"
+      >
+        <mat-icon>clear</mat-icon>
+        Clear Text
       </button>
     </div>
   </div>

src/app/datasets/dashboard/full-text-search/full-text-search-bar.component.scss

@@ -16,4 +16,8 @@ mat-card {
   mat-form-field.full-text-search-field {
     flex: 1;
   }
+  .full-text-search-button,
+  .full-text-clear-button {
+    margin:0 2px;
+  }
 }

src/app/datasets/dashboard/full-text-search/full-text-search-bar.component.ts

@@ -87,7 +87,7 @@ export class FullTextSearchBarComponent implements OnInit, OnDestroy {
   onClear(): void {
     this.searchTerm = "";
     this.searchTermSubject.next(undefined);
-    this.searchClickSubject.next();
+    //this.searchClickSubject.next();
   }
 
   ngOnDestroy(): void {

src/app/datasets/datasets-filter/datasets-filter.component.html

@@ -1,15 +1,6 @@
 <mat-card>
   <mat-card-header class="section-container">
     <mat-card-title>Filter by...</mat-card-title>
-    <button
-      [disabled]="(hasAppliedFilters$ | async) === false"
-      mat-button
-      class="clear-button"
-      color="primary"
-      (click)="clearFacets()"
-    >
-      <mat-icon>clear_all</mat-icon> Reset
-    </button>
   </mat-card-header>
 
   <mat-card-content>
@@ -207,11 +198,22 @@
       <button
         mat-raised-button
         color="primary"
-        class="applyButton"
+        class="datasets-filters-search-button"
         (click)="applyFilters()"
       >
-        Apply
+        <mat-icon>search</mat-icon>
+        Search
       </button>
+      <button
+        [disabled]="(hasAppliedFilters$ | async) === false"
+        mat-raised-button
+        color="primary"
+        class="datasets-filters-clear-all-button"
+        (click)="clearFacets()"
+      >
+      <mat-icon>clear_all</mat-icon>
+      Clear All Filters
+    </button>
     </div>
   </mat-card-content>
 </mat-card>

src/app/datasets/datasets-filter/datasets-filter.component.scss

@@ -35,8 +35,13 @@ mat-card {
       word-break: break-all;
     }
 
-    .applyButton {
-      width: 100%;
+    .datasets-filters-search-button {
+      width: 49%;
+    }
+
+    .datasets-filters-clear-all-button {
+      width: 49%;
+      margin-left: 1%;
     }
   }
 

src/app/datasets/datasets-filter/datasets-filter.component.spec.ts

@@ -160,10 +160,16 @@ describe("DatasetsFilterComponent", () => {
     expect(type).toBeTruthy();
   });
 
-  it("should contain a clear button", () => {
+  it("should contain a clear all button", () => {
     const compiled = fixture.debugElement.nativeElement;
-    const btn = compiled.querySelector(".clear-button");
-    expect(btn.textContent).toContain("Reset");
+    const btn = compiled.querySelector(".datasets-filters-clear-all-button");
+    expect(btn.textContent).toContain("Clear All Filters");
+  });
+
+  it("should contain a search button", () => {
+    const compiled = fixture.debugElement.nativeElement;
+    const btn = compiled.querySelector(".datasets-filters-search-button");
+    expect(btn.textContent).toContain("Search");
   });
 
   describe("#getFacetId()", () => {