bug fixed : Password Input widget is not consistent with the dark the…

…me (ToolJet#3992)
JPatil22 · Sep 12, 2022 · 1cf6b33 · 1cf6b33
1 parent 4119196
commit 1cf6b33
Show file tree

Hide file tree

Showing 2 changed files with 15 additions and 2 deletions.
diff --git a/frontend/src/Editor/Components/PasswordInput.jsx b/frontend/src/Editor/Components/PasswordInput.jsx
@@ -1,6 +1,14 @@
 import React from 'react';
 
-export const PasswordInput = ({ height, validate, properties, styles, exposedVariables, setExposedVariable }) => {
+export const PasswordInput = ({
+  height,
+  validate,
+  properties,
+  styles,
+  exposedVariables,
+  setExposedVariable,
+  darkMode,
+}) => {
   const value = exposedVariables.value;
   const { visibility, disabledState, borderRadius } = styles;
   const placeholder = properties.placeholder;
@@ -23,7 +31,9 @@ export const PasswordInput = ({ height, validate, properties, styles, exposedVar
           setExposedVariable('value', e.target.value);
         }}
         type={'password'}
-        className={`form-control ${!isValid ? 'is-invalid' : ''} validation-without-icon`}
+        className={`form-control ${!isValid ? 'is-invalid' : ''} validation-without-icon ${
+          darkMode && 'dark-theme-placeholder'
+        }`}
         placeholder={placeholder}
         value={exposedVariables.value}
         style={{ height, display: visibility ? '' : 'none', borderRadius: `${borderRadius}px` }}

diff --git a/frontend/src/_styles/theme.scss b/frontend/src/_styles/theme.scss
@@ -6103,4 +6103,7 @@ input.hide-input-arrows{
       padding:0 10px; 
     }
   }
+}
+.dark-theme-placeholder::placeholder{
+  color: #E0E0E0;
 }