From 14e459357824fd38bb9b122535de1b42f482bb88 Mon Sep 17 00:00:00 2001 From: Rahul Sunil Date: Thu, 17 Nov 2022 15:08:36 +0530 Subject: [PATCH] Added Background Color to Text Input (#4194) * Added Background Color to Text Input * Added Default Value for Background Color * added default value and make background of text input consistent with the dark theme Co-authored-by: manishkushare Co-authored-by: Kavin Venkatachalam --- frontend/src/Editor/Components/TextInput.jsx | 3 ++- frontend/src/Editor/WidgetManager/widgetConfig.js | 6 ++++++ 2 files changed, 8 insertions(+), 1 deletion(-) diff --git a/frontend/src/Editor/Components/TextInput.jsx b/frontend/src/Editor/Components/TextInput.jsx index 8f1c51ce0f..7b712a9249 100644 --- a/frontend/src/Editor/Components/TextInput.jsx +++ b/frontend/src/Editor/Components/TextInput.jsx @@ -1,4 +1,4 @@ -import React, { useEffect, useState, useRef } from 'react'; +import React, { useEffect, useRef, useState } from 'react'; export const TextInput = function TextInput({ height, @@ -23,6 +23,7 @@ export const TextInput = function TextInput({ borderRadius: `${styles.borderRadius}px`, color: darkMode && styles.textColor === '#000' ? '#fff' : styles.textColor, borderColor: styles.borderColor, + backgroundColor: darkMode && ['#fff'].includes(styles.backgroundColor) ? '#232e3c' : styles.backgroundColor, }; useEffect(() => { diff --git a/frontend/src/Editor/WidgetManager/widgetConfig.js b/frontend/src/Editor/WidgetManager/widgetConfig.js index 00025a7a03..a07132e8a0 100644 --- a/frontend/src/Editor/WidgetManager/widgetConfig.js +++ b/frontend/src/Editor/WidgetManager/widgetConfig.js @@ -956,6 +956,11 @@ export const widgets = [ displayName: 'Text Color', validation: { schema: { type: 'string' } }, }, + backgroundColor: { + type: 'color', + displayName: 'Background Color', + validation: { schema: { type: 'string' } }, + }, borderColor: { type: 'color', displayName: 'Border Color', @@ -1029,6 +1034,7 @@ export const widgets = [ borderRadius: { value: '{{0}}' }, visibility: { value: '{{true}}' }, disabledState: { value: '{{false}}' }, + backgroundColor: { value: '#fff' }, }, }, },