From 7534284d1793180bc610411c0f7b73cd4c0aa3cb Mon Sep 17 00:00:00 2001
From: navaneeth <navaneethpk@outlook.com>
Date: Tue, 20 Apr 2021 11:16:31 +0530
Subject: [PATCH] Background & text colors for table action buttons

---
 frontend/src/Editor/Components/Table.jsx           |  1 +
 frontend/src/Editor/Inspector/Components/Table.jsx | 13 ++++++++++++-
 2 files changed, 13 insertions(+), 1 deletion(-)

diff --git a/frontend/src/Editor/Components/Table.jsx b/frontend/src/Editor/Components/Table.jsx
index 3941915407..d1cebd41fb 100644
--- a/frontend/src/Editor/Components/Table.jsx
+++ b/frontend/src/Editor/Components/Table.jsx
@@ -55,6 +55,7 @@ export function Table({ id, width, height, component, onComponentClick, currentS
 			return actions.value.map((action) => 
 				<button 
 					className="btn btn-sm m-1 btn-light"
+					style={{background: action.backgroundColor, color: action.textColor}}
 					onClick={(e) => { e.stopPropagation(); onEvent('onTableActionButtonClicked', { component, data: cell.row.original, action }); }}
 				>
 						{action.buttonText}
diff --git a/frontend/src/Editor/Inspector/Components/Table.jsx b/frontend/src/Editor/Inspector/Components/Table.jsx
index efc2120d92..fc7a950424 100644
--- a/frontend/src/Editor/Inspector/Components/Table.jsx
+++ b/frontend/src/Editor/Inspector/Components/Table.jsx
@@ -9,6 +9,7 @@ import arrayMove from "array-move";
 import OverlayTrigger from 'react-bootstrap/OverlayTrigger';
 import Popover from 'react-bootstrap/Popover';
 import { EventSelector } from '../EventSelector';
+import { Color } from '../Elements/Color';
 
 class Table extends React.Component {
     constructor(props) {
@@ -69,7 +70,7 @@ class Table extends React.Component {
             <Popover id="popover-basic">
                 <Popover.Title as="h3">Column Settings</Popover.Title>
                 <Popover.Content>
-                <div className="field mb-2">
+                    <div className="field mb-2">
                         <label class="form-label">name</label>
                         <input 
                             type="text"  
@@ -108,6 +109,16 @@ class Table extends React.Component {
                             value={action.buttonText} 
                         />
                     </div>
+                    <Color 
+                        param={{name: 'backgroundColor'}}
+                        definition={{ value: action.backgroundColor }}
+                        onChange={(name, value, color) => this.onActionButtonPropertyChanged(index, 'backgroundColor', color)}
+                    />
+                    <Color 
+                        param={{name: 'textColor'}}
+                        definition={{ value: action.textColor }}
+                        onChange={(name, value, color) => this.onActionButtonPropertyChanged(index, 'textColor', color)}
+                    />
                     <EventSelector 
                         param={ { name: 'onClick' } }
                         definition={action.onClick}