From 34ff0c8ecc47921fedea26a081cb2740ad07d775 Mon Sep 17 00:00:00 2001
From: frozenhelium <ankit.mehta@togglecorp.com>
Date: Wed, 6 Dec 2023 16:12:04 +0545
Subject: [PATCH] Use filter styling from container in appeals table and active
 operation map

---
 src/components/domain/ActiveOperationMap/index.tsx   | 12 ++++--------
 .../domain/ActiveOperationMap/styles.module.css      | 11 -----------
 src/components/domain/AppealsTable/index.tsx         |  8 +++-----
 src/components/domain/AppealsTable/styles.module.css | 11 -----------
 4 files changed, 7 insertions(+), 35 deletions(-)

diff --git a/src/components/domain/ActiveOperationMap/index.tsx b/src/components/domain/ActiveOperationMap/index.tsx
index 6d0d39a44..952d031a6 100644
--- a/src/components/domain/ActiveOperationMap/index.tsx
+++ b/src/components/domain/ActiveOperationMap/index.tsx
@@ -17,10 +17,7 @@ import {
     MapLayer,
     MapBounds,
 } from '@togglecorp/re-map';
-import {
-    ArtboardLineIcon,
-    CloseLineIcon,
-} from '@ifrc-go/icons';
+import { ArtboardLineIcon } from '@ifrc-go/icons';
 
 import BaseMap from '#components/domain/BaseMap';
 import Button from '#components/Button';
@@ -355,8 +352,8 @@ function ActiveOperationMap(props: Props) {
             className={_cs(styles.activeOperationMap, className)}
             heading={!presentationMode && heading}
             withHeaderBorder={!presentationMode}
-            filtersContainerClassName={styles.filters}
             childrenContainerClassName={styles.content}
+            withGridViewInFilter
             filters={!presentationMode && (
                 <>
                     <DateInput
@@ -400,12 +397,11 @@ function ActiveOperationMap(props: Props) {
                         value={rawFilter.displacement}
                         onChange={setFilterField}
                     />
-                    <div className={styles.clearButton}>
+                    <div>
                         <Button
                             name={undefined}
-                            icons={<CloseLineIcon />}
                             onClick={handleClearFiltersButtonclick}
-                            variant="tertiary"
+                            variant="secondary"
                             disabled={!filtered}
                         >
                             {strings.operationMapClearFilters}
diff --git a/src/components/domain/ActiveOperationMap/styles.module.css b/src/components/domain/ActiveOperationMap/styles.module.css
index b3eb1ddbe..be42392ee 100644
--- a/src/components/domain/ActiveOperationMap/styles.module.css
+++ b/src/components/domain/ActiveOperationMap/styles.module.css
@@ -13,17 +13,6 @@
         height: 40rem;
     }
 
-    .filters {
-        display: grid;
-        grid-gap: var(--go-ui-spacing-md);
-        grid-template-columns: repeat(auto-fill, minmax(12rem, 1fr));
-
-        .clear-button {
-            display: flex;
-            align-items: center;
-        }
-    }
-
     .footer {
         display: flex;
         align-items: flex-end;
diff --git a/src/components/domain/AppealsTable/index.tsx b/src/components/domain/AppealsTable/index.tsx
index afc206267..b341af153 100644
--- a/src/components/domain/AppealsTable/index.tsx
+++ b/src/components/domain/AppealsTable/index.tsx
@@ -1,6 +1,5 @@
 import { useMemo, useCallback } from 'react';
 import { _cs, isDefined } from '@togglecorp/fujs';
-import { CloseLineIcon } from '@ifrc-go/icons';
 
 import Button from '#components/Button';
 import Container from '#components/Container';
@@ -243,8 +242,8 @@ function AppealsTable(props: Props) {
     return (
         <Container
             className={_cs(styles.appealsTable, className)}
-            filtersContainerClassName={styles.filters}
             childrenContainerClassName={styles.content}
+            withGridViewInFilter
             filters={(
                 <>
                     <DateInput
@@ -288,12 +287,11 @@ function AppealsTable(props: Props) {
                         value={rawFilter.displacement}
                         onChange={setFilterField}
                     />
-                    <div className={styles.clearButton}>
+                    <div>
                         <Button
                             name={undefined}
-                            icons={<CloseLineIcon />}
                             onClick={handleClearFiltersButtonclick}
-                            variant="tertiary"
+                            variant="secondary"
                             disabled={!filtered}
                         >
                             {strings.appealsTableClearFilters}
diff --git a/src/components/domain/AppealsTable/styles.module.css b/src/components/domain/AppealsTable/styles.module.css
index 3c1d024d1..f81d6aa9f 100644
--- a/src/components/domain/AppealsTable/styles.module.css
+++ b/src/components/domain/AppealsTable/styles.module.css
@@ -1,15 +1,4 @@
 .appeals-table {
-    .filters {
-        display: grid;
-        grid-gap: var(--go-ui-spacing-md);
-        grid-template-columns: repeat(auto-fill, minmax(12rem, 1fr));
-
-        .clear-button {
-            display: flex;
-            align-items: center;
-        }
-    }
-
     .table {
         .start-date {
             width: 0%;