From 91761722f0b60d7849de81700f166c168e5e5e2f Mon Sep 17 00:00:00 2001
From: Viraj Bahulkar <bbahulkar@gmail.com>
Date: Thu, 30 Sep 2021 08:42:42 +0530
Subject: [PATCH] Add color to toggle switch (#875)

* Add color to toggle switch

* Remove uneccessary comment from code
---
 frontend/src/Editor/Components/Toggle.jsx    | 8 ++++++--
 frontend/src/Editor/Components/components.js | 2 ++
 2 files changed, 8 insertions(+), 2 deletions(-)

diff --git a/frontend/src/Editor/Components/Toggle.jsx b/frontend/src/Editor/Components/Toggle.jsx
index 4845d9db1d..bee353f155 100644
--- a/frontend/src/Editor/Components/Toggle.jsx
+++ b/frontend/src/Editor/Components/Toggle.jsx
@@ -3,10 +3,12 @@ import { resolveReferences, resolveWidgetFieldValue } from '@/_helpers/utils';
 
 class Switch extends React.Component {
   render() {
-    const { on, onClick, onChange, disabledState } = this.props;
+    const { on, onClick, onChange, disabledState, color } = this.props;
+
     return (
       <label className="form-check form-switch form-check-inline">
         <input
+          style={{backgroundColor: on ? `${color}` : 'white'}}
           disabled={disabledState}
           className="form-check-input"
           type="checkbox"
@@ -32,6 +34,8 @@ export const ToggleSwitch = ({
   const [on, setOn] = React.useState(false);
   const label = component.definition.properties.label.value;
   const textColorProperty = component.definition.styles.textColor;
+  const toggleSwitchColorProperty = component.definition.styles.toggleSwitchColor;
+  const toggleSwitchColor = toggleSwitchColorProperty ? toggleSwitchColorProperty.value : '#3c92dc';
   const textColor = textColorProperty ? textColorProperty.value : '#000';
   const widgetVisibility = component.definition.styles?.visibility?.value ?? true;
   const disabledState = component.definition.styles?.disabledState?.value ?? false;
@@ -68,7 +72,7 @@ export const ToggleSwitch = ({
         {label}
       </span>
       <div className="col">
-        <Switch disabledState={parsedDisabledState} on={on} onClick={toggle} onChange={toggleValue} />
+        <Switch disabledState={parsedDisabledState} on={on} onClick={toggle} onChange={toggleValue} color={toggleSwitchColor} />
       </div>
     </div>
   );
diff --git a/frontend/src/Editor/Components/components.js b/frontend/src/Editor/Components/components.js
index 3726ca3348..bb0501d46b 100644
--- a/frontend/src/Editor/Components/components.js
+++ b/frontend/src/Editor/Components/components.js
@@ -503,6 +503,7 @@ export const componentTypes = [
     },
     styles: {
       textColor: { type: 'color', displayName: 'Text Color' },
+      toggleSwitchColor: { type: 'color', displayName: 'Toggle Switch Color' },
       visibility: { type: 'code', displayName: 'Visibility' },
       disabledState: { type: 'code', displayName: 'Disable' },
     },
@@ -518,6 +519,7 @@ export const componentTypes = [
       events: [],
       styles: {
         textColor: { value: '#000' },
+        toggleSwitchColor: { value: '#3c92dc' },
         visibility: { value: '{{true}}' },
         disabledState: { value: '{{false}}' },
       },