💄 Notifications UX - Additional changes based on Adam's feedback (v3.6) #1524
Conversation
Moving away from "Mon, 05/01/2025" to "Mon 05/01/2025"
There was a problem hiding this comment.
Pull request overview
This PR implements UX improvements to the notification creation form based on Adam's feedback. The changes focus on styling consistency, visual layout adjustments, and date formatting.
Key changes:
- Restructured targeting radio buttons to display inline above their respective dropdowns
- Added comprehensive CSS rules for input validation states and label styling
- Updated date formatting to remove comma after day abbreviation
- Adjusted theme Surface color for visual consistency
Reviewed changes
Copilot reviewed 5 out of 5 changed files in this pull request and generated 2 comments.
Show a summary per file
| File | Description |
|---|---|
| src/AdminUI/wwwroot/css/app.css | Added CSS variables for validation colors, input padding consistency, label styling overrides, and validation error styling |
| src/AdminUI/Pages/SendNotification.razor.css | Added inline radio button styling, target section spacing adjustments, and component-specific input padding rules |
| src/AdminUI/Pages/SendNotification.razor | Restructured targeting section to split radio buttons into separate groups above their dropdowns, removed unused CSS class |
| src/AdminUI/Helpers/DateTimeFormatter.cs | Removed comma from date format string for cleaner date display |
| src/AdminUI/AdminPortalMudTheme.cs | Updated Surface color from #373740 to #333333 to match DrawerBackground |
|
|
||
| /* Ensure textarea has proper padding when focused */ | ||
| textarea.mud-input-slot { | ||
| padding: 12px !important; |
There was a problem hiding this comment.
There is redundant padding specification for textarea elements. Lines 65-69 already set padding-left and padding-right to 12px for textarea.mud-input-slot, and then lines 141-143 set padding to 12px for the same selector. The second rule with the shorthand 'padding' property will override the first rule. Consider consolidating these rules to avoid confusion and improve maintainability.
| padding: 12px !important; | |
| padding-top: 12px !important; | |
| padding-bottom: 12px !important; |
✏️ #1392 extended feedback from Adam.
✏️ Changes based on Adam's feedback.
Figure: Changed layout and colors to match latest feedback.
Figure: When collapsed, date, time and timezone are in their own lines.
Figure: Improved validation design.
✏️ No.