filters UI modification

src/app/dashboard/table/table.component.html

@@ -23,11 +23,10 @@
             </button>
             <button [disabled]="selectedPartnerList.length === 0" class="button" (click)="showExportOptions = true">
                 <img src="assets/export.svg" alt=""> Export </button>
-            <button class="button"> <img src="assets/filter.svg" alt=""> Filter </button>
         </div>
 
-        <div class="filter-row">
-            <div class="explainer">Filters:</div>
+        <div class="explainer">Filters:</div>
+        <div class="filter-row">            
             <ng-select [items]="communities" [multiple]="true" [closeOnSelect]="false" bindLabel="name" bindValue="name"
                 placeholder="Communities" (change)="getFilteredData()" [(ngModel)]="filteredCommunities">
             </ng-select>

src/app/dashboard/table/table.component.scss

@@ -28,20 +28,18 @@
 }
 
 .filter-row {
-    padding: 5px 15px;
-    display: flex;
-    align-items: center;
-
-    .explainer {
-        flex-basis: 150px;
-        font-style: italic;
-        color: silver;
-    }
+    display: grid;
+    align-items: stretch;
+    grid-template-columns: 1fr 1fr 1fr 1fr;
+    justify-content: flex-end;
+    grid-gap: 10px;  
+    margin: 0px 0px 20px 0px;
+}
 
-    ng-select {
-        flex-grow: 1;
-        margin: 0 5px;
-    }
+.explainer {
+    font-style: italic;
+    color: silver;
+    margin: 20px 0 10px;
 }
 
 .card {