From 16ae6610e0321ca10292ccfc6f58e83703111da4 Mon Sep 17 00:00:00 2001
From: kj1352 <nikhilkj24@gmail.com>
Date: Fri, 4 Mar 2022 22:31:11 +0530
Subject: [PATCH] filters UI modification

---
 src/app/dashboard/table/table.component.html |  5 ++--
 src/app/dashboard/table/table.component.scss | 24 +++++++++-----------
 2 files changed, 13 insertions(+), 16 deletions(-)

diff --git a/src/app/dashboard/table/table.component.html b/src/app/dashboard/table/table.component.html
index 313c5c9..aaf5fa5 100644
--- a/src/app/dashboard/table/table.component.html
+++ b/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>
diff --git a/src/app/dashboard/table/table.component.scss b/src/app/dashboard/table/table.component.scss
index aedb9e4..afa931c 100644
--- a/src/app/dashboard/table/table.component.scss
+++ b/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 {