From 219079be84dc42264d5d044754dcae01d408bf5f Mon Sep 17 00:00:00 2001
From: Nishidh Jain <61869195+NishidhJain@users.noreply.github.com>
Date: Tue, 26 Oct 2021 17:55:53 +0530
Subject: [PATCH] Resolves text and button color issue in dark mode for filter
 component of table (#1283)

---
 frontend/src/Editor/Components/Table/Table.jsx | 10 +++++-----
 1 file changed, 5 insertions(+), 5 deletions(-)

diff --git a/frontend/src/Editor/Components/Table/Table.jsx b/frontend/src/Editor/Components/Table/Table.jsx
index 1f22f8e8a6..700b7edef8 100644
--- a/frontend/src/Editor/Components/Table/Table.jsx
+++ b/frontend/src/Editor/Components/Table/Table.jsx
@@ -950,7 +950,7 @@ export function Table({
         <div className="table-filters card">
           <div className="card-header row">
             <div className="col">
-              <h4 className="text-muted">Filters</h4>
+              <h4 className="font-weight-normal">Filters</h4>
             </div>
             <div className="col-auto">
               <button onClick={() => hideFilters()} className="btn btn-light btn-sm">
@@ -1008,7 +1008,7 @@ export function Table({
                   />
                 </div>
                 <div className="col-auto">
-                  <button onClick={() => removeFilter(index)} className="btn btn-light btn-sm p-2 text-danger">
+                  <button onClick={() => removeFilter(index)} className={`btn ${darkMode ? "btn-dark" : "btn-light"} btn-sm p-2 text-danger font-weight-bold`}>
                     x
                   </button>
                 </div>
@@ -1017,16 +1017,16 @@ export function Table({
             {filters.length === 0 && (
               <div>
                 <center>
-                  <span className="text-muted">no filters yet.</span>
+                  <span>no filters yet.</span>
                 </center>
               </div>
             )}
           </div>
           <div className="card-footer">
-            <button onClick={addFilter} className="btn btn-light btn-sm text-muted">
+            <button onClick={addFilter} className="btn btn-light btn-sm">
               + add filter
             </button>
-            <button onClick={() => clearFilters()} className="btn btn-light btn-sm mx-2 text-muted">
+            <button onClick={() => clearFilters()} className="btn btn-light btn-sm mx-2">
               clear filters
             </button>
           </div>