From 397b138d624cc1aa6b661ef0142e49c6ea993c07 Mon Sep 17 00:00:00 2001
From: Manish Kushare <kushare.manish9@gmail.com>
Date: Tue, 18 Oct 2022 08:47:06 +0530
Subject: [PATCH] bug fixed : table widget is not consistent with the dark
 theme (#3987)

* bug fixed : table widget is not consistent with the dark theme

* bug fixed : dropdown in filter is not consistent with the dark theme

* fixed dark theme for dropdown and multiselect column in table

* making generateColumns re-render with change in applied theme

* made badge and multibadge consistent withthe dark theme

* made text column consistent with the dark theme
---
 frontend/src/Editor/Components/Table/CustomSelect.jsx  | 3 ++-
 frontend/src/Editor/Components/Table/Filter.jsx        | 2 ++
 frontend/src/Editor/Components/Table/GlobalFilter.jsx  | 3 ++-
 frontend/src/Editor/Components/Table/Table.jsx         | 3 +++
 frontend/src/Editor/Components/Table/columns/index.jsx | 8 +++++++-
 frontend/src/_styles/theme.scss                        | 8 ++++++++
 6 files changed, 24 insertions(+), 3 deletions(-)

diff --git a/frontend/src/Editor/Components/Table/CustomSelect.jsx b/frontend/src/Editor/Components/Table/CustomSelect.jsx
index f49e23b2c5..865c9f2e64 100644
--- a/frontend/src/Editor/Components/Table/CustomSelect.jsx
+++ b/frontend/src/Editor/Components/Table/CustomSelect.jsx
@@ -2,7 +2,7 @@ import React from 'react';
 import SelectSearch from 'react-select-search';
 import { useTranslation } from 'react-i18next';
 
-export const CustomSelect = ({ options, value, multiple, onChange }) => {
+export const CustomSelect = ({ options, value, multiple, onChange, darkMode }) => {
   const { t } = useTranslation();
 
   function renderValue(valueProps) {
@@ -26,6 +26,7 @@ export const CustomSelect = ({ options, value, multiple, onChange }) => {
         onChange={onChange}
         multiple={multiple}
         placeholder={t('globals.select', 'Select') + '...'}
+        className={`${darkMode ? 'select-search-dark' : 'select-search'}`}
       />
     </div>
   );
diff --git a/frontend/src/Editor/Components/Table/Filter.jsx b/frontend/src/Editor/Components/Table/Filter.jsx
index d6149e5d9c..309f2fff42 100644
--- a/frontend/src/Editor/Components/Table/Filter.jsx
+++ b/frontend/src/Editor/Components/Table/Filter.jsx
@@ -140,6 +140,7 @@ export function Filter(props) {
                 search={true}
                 onChange={(value) => filterColumnChanged(index, value)}
                 placeholder={t('globals.select', 'Select') + '...'}
+                className={`${darkMode ? 'select-search-dark' : 'select-search'} mb-0`}
                 styles={selectStyles('100%')}
               />
             </div>
@@ -164,6 +165,7 @@ export function Filter(props) {
                 onChange={(value) => {
                   filterOperationChanged(index, value);
                 }}
+                className={`${darkMode ? 'select-search-dark' : 'select-search'}`}
                 placeholder={t('globals.select', 'Select') + '...'}
                 styles={selectStyles('100%')}
               />
diff --git a/frontend/src/Editor/Components/Table/GlobalFilter.jsx b/frontend/src/Editor/Components/Table/GlobalFilter.jsx
index 91676163b2..72f1d37818 100644
--- a/frontend/src/Editor/Components/Table/GlobalFilter.jsx
+++ b/frontend/src/Editor/Components/Table/GlobalFilter.jsx
@@ -7,6 +7,7 @@ export const GlobalFilter = ({
   onComponentOptionChanged,
   component,
   onEvent,
+  darkMode,
 }) => {
   const [value, setValue] = React.useState(globalFilter);
   const onChange = useAsyncDebounce((filterValue) => {
@@ -26,7 +27,7 @@ export const GlobalFilter = ({
       />
       <input
         type="text"
-        className="global-search-field btn-light align-self-center"
+        className={`global-search-field btn-light align-self-center ${darkMode && 'dark-theme-placeholder'}`}
         defaultValue={value || ''}
         onChange={(e) => onChange(e.target.value)}
         placeholder="Search"
diff --git a/frontend/src/Editor/Components/Table/Table.jsx b/frontend/src/Editor/Components/Table/Table.jsx
index 86e6b8df71..5d9be9dec4 100644
--- a/frontend/src/Editor/Components/Table/Table.jsx
+++ b/frontend/src/Editor/Components/Table/Table.jsx
@@ -278,6 +278,7 @@ export function Table({
     fireEvent,
     tableRef,
     t,
+    darkMode,
   });
 
   const [leftActionsCellData, rightActionsCellData] = useMemo(
@@ -315,6 +316,7 @@ export function Table({
       JSON.stringify(component.definition.properties.columns),
       showBulkSelector,
       JSON.stringify(variablesExposedForPreview && variablesExposedForPreview[id]),
+      darkMode,
     ] // Hack: need to fix
   );
 
@@ -575,6 +577,7 @@ export function Table({
                 onComponentOptionChanged={onComponentOptionChanged}
                 component={component}
                 onEvent={onEvent}
+                darkMode={darkMode}
               />
             )}
             <div>
diff --git a/frontend/src/Editor/Components/Table/columns/index.jsx b/frontend/src/Editor/Components/Table/columns/index.jsx
index 0775f49f4f..135398ad91 100644
--- a/frontend/src/Editor/Components/Table/columns/index.jsx
+++ b/frontend/src/Editor/Components/Table/columns/index.jsx
@@ -23,6 +23,7 @@ export default function generateColumnsData({
   fireEvent,
   tableRef,
   t,
+  darkMode,
 }) {
   return columnProperties.map((column) => {
     const columnSize = columnSizes[column.id] || columnSizes[column.name];
@@ -219,7 +220,9 @@ export default function generateColumnsData({
             return (
               <textarea
                 rows="1"
-                className="form-control-plaintext text-container text-muted"
+                className={`form-control-plaintext text-container ${
+                  darkMode ? 'text-light textarea-dark-theme' : 'text-muted'
+                }`}
                 readOnly={!column.isEditable}
                 style={{ maxWidth: width, minWidth: width - 10 }}
                 onBlur={(e) => {
@@ -272,6 +275,7 @@ export default function generateColumnsData({
                   filterOptions={fuzzySearch}
                   placeholder={t('globals.select', 'Select') + '...'}
                   disabled={!column.isEditable}
+                  className={`${darkMode ? 'select-search-dark' : 'select-search'}`}
                 />
                 <div className={`invalid-feedback ${isValid ? '' : 'd-flex'}`}>{validationError}</div>
               </div>
@@ -291,6 +295,7 @@ export default function generateColumnsData({
                     handleCellValueChange(cell.row.index, column.key || column.name, value, cell.row.original);
                   }}
                   disabled={!column.isEditable}
+                  className={`${darkMode ? 'select-search-dark' : 'select-search'}`}
                 />
               </div>
             );
@@ -306,6 +311,7 @@ export default function generateColumnsData({
                   onChange={(value) => {
                     handleCellValueChange(cell.row.index, column.key || column.name, value, cell.row.original);
                   }}
+                  darkMode={darkMode}
                 />
               </div>
             );
diff --git a/frontend/src/_styles/theme.scss b/frontend/src/_styles/theme.scss
index e0ca03a503..f33cf3a6e2 100644
--- a/frontend/src/_styles/theme.scss
+++ b/frontend/src/_styles/theme.scss
@@ -6554,3 +6554,11 @@ tbody {
   }
 
 }
+.custom-select{
+  .select-search-dark__value::after{
+    content: none;
+  }
+}
+.jet-data-table td .textarea-dark-theme.text-container:focus {
+  background-color: transparent !important; 
+}
\ No newline at end of file