Improve error page styling with interactive button states #10864
Conversation
- Add hover effects to buttons with subtle lift animation - Add keyboard focus states with visible outline for accessibility - Add active/pressed states for better user feedback - Implement smooth transitions (0.2s ease-in-out) for all interactions - Add proper dark mode support for all interactive states - Remove default link underlines for cleaner appearance - Enhance back button with cursor pointer and transitions These improvements enhance user experience and accessibility across both light and dark themes.
📝 WalkthroughWalkthroughThe pull request adds interactive styling enhancements to error page templates (404 and error pages). Changes include CSS transitions and state-based styling for buttons and anchors with hover, focus, and active states. Dark mode variants are added to maintain visual contrast and consistency across both light and dark themes. Estimated code review effort🎯 2 (Simple) | ⏱️ ~8 minutes
Pre-merge checks and finishing touches✅ Passed checks (3 passed)
✨ Finishing touches🧪 Generate unit tests (beta)
Tip 📝 Customizable high-level summaries are now available in beta!You can now customize how CodeRabbit generates the high-level summary in your pull requests — including its content, structure, tone, and formatting.
Example instruction:
Note: This feature is currently in beta for Pro-tier users, and pricing will be announced later. Thanks for using CodeRabbit! It's free for OSS, and your support helps us grow. If you like it, consider giving us a shout-out. Comment |
Security Scan Results for PRDocker Image Scan Results
Source Code Scan Results🎉 No vulnerabilities found! |
There was a problem hiding this comment.
Actionable comments posted: 0
🧹 Nitpick comments (4)
app/views/general/404.phtml (1)
98-99: Consider specifying transition properties for better performance.Using
transition: allcan cause performance issues as it applies transitions to every CSS property change. Since onlybackground,border-color, andtransformare being animated, specify them explicitly.Apply this diff:
- transition: all 0.2s ease-in-out; + transition: background 0.2s ease-in-out, border-color 0.2s ease-in-out, transform 0.2s ease-in-out;app/views/general/error.phtml (3)
214-230: Good interactive states, but optimize transition property.The hover, focus, and active states for
.bordered-buttonare well-implemented and provide excellent user feedback. However, the transition property can be optimized.Apply this diff to improve performance:
- transition: all 0.2s ease-in-out; + transition: background 0.2s ease-in-out, border-color 0.2s ease-in-out, transform 0.2s ease-in-out;
245-260: Optimize transition properties for button element.The interactive states are well-implemented. Since this button has a transparent border and only animates
backgroundandtransform, specify only those properties in the transition.Apply this diff:
- transition: all 0.2s ease-in-out; + transition: background 0.2s ease-in-out, transform 0.2s ease-in-out;
348-364: Enhanced back button with good accessibility, optimize transition.The enhancements to the back button improve interactivity and accessibility. The cursor pointer, hover state, and focus outline all follow best practices.
Since only the
colorproperty changes on hover, optimize the transition:- transition: all 0.2s ease-in-out; + transition: color 0.2s ease-in-out;
📜 Review details
Configuration used: Path: .coderabbit.yaml
Review profile: CHILL
Plan: Pro
📒 Files selected for processing (2)
app/views/general/404.phtml(2 hunks)app/views/general/error.phtml(5 hunks)
⏰ Context from checks skipped due to timeout of 90000ms. You can increase the timeout in your CodeRabbit configuration to a maximum of 15 minutes (900000ms). (1)
- GitHub Check: scan
🔇 Additional comments (6)
app/views/general/404.phtml (3)
101-114: LGTM! Well-implemented interactive states.The hover, focus, and active states provide excellent user feedback. The lift animation on hover, visible focus outline for accessibility, and active state reset all follow UX best practices.
116-118: LGTM! Cleaner button appearance.Removing text decoration from anchor tags wrapping buttons provides a cleaner visual appearance while maintaining accessibility through button styling.
169-176: Focus outline colors meet WCAG AAA accessibility standards.The dark mode focus outline (#818CF8) achieves a contrast ratio of 5.63 against the background, and the light mode outline (#5A67D8) achieves 4.81—both exceeding WCAG AAA requirements (4.5). The code changes are accessibility-compliant.
app/views/general/error.phtml (3)
262-264: LGTM! Consistent with 404 page styling.Removing text decoration from anchors provides a cleaner appearance and is consistent with the changes in the 404 page.
451-471: LGTM! Consistent dark mode styling.The dark mode hover and focus states are well-implemented and consistent with the 404 page. The contrast verification for focus outline colors mentioned in the 404.phtml review applies here as well.
505-511: LGTM! Complete dark mode support for back button.The dark mode states for the back button maintain good contrast and are consistent with the overall dark mode styling approach.
These improvements enhance user experience and accessibility across both light and dark themes.
What does this PR do?
(Provide a description of what this PR does and why it's needed.)
Test Plan
(Write your test plan here. If you changed any code, please provide us with clear instructions on how you verified your changes work. Screenshots may also be helpful.)
Related PRs and Issues
Checklist