v1.0.3: Fix expression textbox error state and UI consistency
- Fixed theme class application from html to body element for proper CSS inheritance - Removed CSS conflicts between base styles and error/success states - Fixed focus state interference with error/success background colors - Changed error message panel to fixed placement (no more UI jumping) - Added theme-consistent styling for alert-success in all theme modes - Expression textbox now properly shows red/green backgrounds in manual themes - Status message now shows Expression is correct vs error message consistently
This commit is contained in:
20
src/App.js
20
src/App.js
@@ -33,12 +33,16 @@ function App() {
|
||||
// Apply theme to document
|
||||
const applyTheme = (selectedTheme) => {
|
||||
const root = document.documentElement;
|
||||
root.className = ''; // Clear existing theme classes
|
||||
const body = document.body;
|
||||
|
||||
// Clear existing theme classes from both html and body
|
||||
root.className = '';
|
||||
body.classList.remove('theme-light', 'theme-dark');
|
||||
|
||||
if (selectedTheme === 'light') {
|
||||
root.classList.add('theme-light');
|
||||
body.classList.add('theme-light');
|
||||
} else if (selectedTheme === 'dark') {
|
||||
root.classList.add('theme-dark');
|
||||
body.classList.add('theme-dark');
|
||||
}
|
||||
// 'auto' uses CSS media queries (no class needed)
|
||||
};
|
||||
@@ -310,16 +314,14 @@ function App() {
|
||||
<div className="card-body">
|
||||
<input
|
||||
type="text"
|
||||
className={`form-control jmespath-input ${error ? 'error' : ''}`}
|
||||
className={`form-control jmespath-input ${error ? 'error' : 'success'}`}
|
||||
value={jmespathExpression}
|
||||
onChange={handleJmespathChange}
|
||||
placeholder="Enter JMESPath expression (e.g., people[*].name)"
|
||||
/>
|
||||
{error && (
|
||||
<div className="alert alert-danger mt-2 mb-0">
|
||||
<small>{error}</small>
|
||||
</div>
|
||||
)}
|
||||
<div className={`alert mt-2 mb-0 ${error ? 'alert-danger' : 'alert-success'}`}>
|
||||
<small>{error || 'Expression is correct'}</small>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
|
||||
Reference in New Issue
Block a user