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:
2026-01-21 10:35:34 +01:00
parent 6f8c4518ce
commit 0182174153
4 changed files with 65 additions and 29 deletions

View File

@@ -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>