-
Notifications
You must be signed in to change notification settings - Fork 5
Feature/softer unsaved changes dialog #183
New issue
Have a question about this project? Sign up for a free GitHub account to open an issue and contact its maintainers and the community.
By clicking “Sign up for GitHub”, you agree to our terms of service and privacy statement. We’ll occasionally send you account related emails.
Already on GitHub? Sign in to your account
base: main
Are you sure you want to change the base?
Conversation
There was a problem hiding this comment.
Choose a reason for hiding this comment
The reason will be displayed to describe this comment to others. Learn more.
Pull request overview
This PR refines the visual design of the UnsavedChangesDialog component to create a softer, less aggressive appearance while maintaining clear functionality. The changes reduce visual intensity through lowered opacity values, softer color tones, and improved button layout that provides equal emphasis to all action options.
Key Changes:
- Reduced background overlay opacity from 75% to 50% for a less intrusive modal experience
- Transformed warning icon from solid orange to a subtle translucent design with border treatment
- Restructured action buttons from right-aligned flex layout to equal-width grid layout (3 columns)
Reviewed changes
Copilot reviewed 2 out of 2 changed files in this pull request and generated 1 comment.
| File | Description |
|---|---|
| frontend/src/components/UnsavedChangesDialog.jsx | Updated modal styling with softer colors, reduced opacities, and equal-width button layout; added comprehensive focus ring styling for accessibility |
| CHANGELOG.md | Added two bullet points documenting the styling changes and button layout improvements for PR #181 |
| <div className="p-2 bg-orange-500/15 rounded-full border border-orange-500/20"> | ||
| <AlertTriangle className="w-5 h-5 text-orange-200" /> |
Copilot
AI
Dec 18, 2025
There was a problem hiding this comment.
Choose a reason for hiding this comment
The reason will be displayed to describe this comment to others. Learn more.
The new icon styling uses very low opacity colors (bg-orange-500/15 with border-orange-500/20 and text-orange-200) which may result in insufficient color contrast against the gray-800 background. This could make the warning icon less visible and potentially fail WCAG accessibility standards. Consider increasing the opacity values or using more saturated colors to ensure the alert icon maintains sufficient visual prominence for users with visual impairments.
| <div className="p-2 bg-orange-500/15 rounded-full border border-orange-500/20"> | |
| <AlertTriangle className="w-5 h-5 text-orange-200" /> | |
| <div className="p-2 bg-orange-500/25 rounded-full border border-orange-500/60"> | |
| <AlertTriangle className="w-5 h-5 text-orange-300" /> |
🔒 Security Scan ResultsSecurity Scan SummaryScan ResultsPython SAST (Bandit)Recommendations
|
No description provided.