feat: Rebranded toast designs #3985
Conversation
WalkthroughSnackbars gained a required messageType ('success'|'failure'|'information'); service maps types to default toast icons. Toast component and styles updated to use type classes. Call sites stopped passing explicit icons. Icon registry and theme colors adjusted. Verify Number Popover (component, template, styles, tests, error type) removed. Changes
Sequence Diagram(s)sequenceDiagram
autonumber
actor Feature as Feature Component
participant SPS as SnackbarPropertiesService
participant MSB as MatSnackBar
participant TMC as ToastMessageComponent
Feature->>SPS: setSnackbarProperties(type, { message, ... })
Note right of SPS#lightblue: If icon omitted,<br/>map messageType -> default icon
SPS-->>Feature: SnackbarProperties { data: { message, messageType, icon? }, duration... }
Feature->>MSB: openFromComponent(ToastMessageComponent, config)
MSB->>TMC: Inject MAT_SNACK_BAR_DATA
TMC->>TMC: Render using classes type-{{messageType}} and icon container
Estimated code review effort🎯 3 (Moderate) | ⏱️ ~30 minutes Poem
Pre-merge checks and finishing touches❌ Failed checks (2 warnings)
✅ Passed checks (1 passed)
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 |
![coderabbitai[bot]](https://avatars.githubusercontent.com/in/347564?s=60&v=4){kind=small}
There was a problem hiding this comment.
Actionable comments posted: 1
Caution
Some comments are outside the diff and can’t be posted inline due to platform limitations.
⚠️ Outside diff range comments (2)
src/app/core/services/snackbar-properties.service.ts (1)
18-41: Logic-u perfect-u, super-u!The icon mapping logic is flawless, machaan! You've updated all three message types to use the new toast icons and ensured
messageTypeis always included in the returned data. The optionalsnackbarIconparameter still allows overrides when needed—flexibility with standards, that's the Rajini way!One small thing: the JSDoc comment at line 12 mentions "Type of toast message: success or failure" but should now include "information" also, da.
Consider updating the JSDoc comment:
/** * Factory function for properties of toast message component * - * @param toastMessageType - Type of toast message: success or failure + * @param toastMessageType - Type of toast message: success, failure, or information * @param toastMessageData - Object containing the toast message and redirectionText * @param snackbarIcon - Optional param to pass the icon name * @returns Object to be used for displaying toast message component */src/app/core/models/snackbar-properties.model.ts (1)
1-10: Add missingmessageTypein literal SnackbarProperties definitions. In src/app/core/mock-data/snackbar-properties.data.ts (deepFreeze objects), addmessageType: 'success' | 'failure' | 'information'under eachdatablock to satisfy the updated interface.
📜 Review details
Configuration used: CodeRabbit UI
Review profile: ASSERTIVE
Plan: Pro
⛔ Files ignored due to path filters (5)
src/assets/svg/failure-toast-icon.svgis excluded by!**/*.svgsrc/assets/svg/fyle-logo-light.svgis excluded by!**/*.svgsrc/assets/svg/fyle-logo.svgis excluded by!**/*.svgsrc/assets/svg/info-toast-icon.svgis excluded by!**/*.svgsrc/assets/svg/success-toast-icon.svgis excluded by!**/*.svg
📒 Files selected for processing (18)
src/app/core/models/snackbar-properties.model.ts(1 hunks)src/app/core/services/snackbar-properties.service.ts(1 hunks)src/app/fyle/my-profile/my-profile.page.ts(1 hunks)src/app/fyle/my-profile/verify-number-popover/error-type.model.ts(0 hunks)src/app/fyle/my-profile/verify-number-popover/verify-number-popover.component.html(0 hunks)src/app/fyle/my-profile/verify-number-popover/verify-number-popover.component.scss(0 hunks)src/app/fyle/my-profile/verify-number-popover/verify-number-popover.component.spec.ts(0 hunks)src/app/fyle/my-profile/verify-number-popover/verify-number-popover.component.ts(0 hunks)src/app/shared/components/popup-with-bullets/popup-with-bullets.component.ts(1 hunks)src/app/shared/components/toast-message/toast-message.component.html(1 hunks)src/app/shared/components/toast-message/toast-message.component.scss(1 hunks)src/app/shared/components/toast-message/toast-message.component.ts(1 hunks)src/app/shared/components/virtual-card/virtual-card.component.spec.ts(1 hunks)src/app/shared/components/virtual-card/virtual-card.component.ts(0 hunks)src/app/shared/icon/icon.providers.ts(1 hunks)src/global.scss(1 hunks)src/theme/colors.scss(2 hunks)src/theme/variables.scss(2 hunks)
💤 Files with no reviewable changes (6)
- src/app/fyle/my-profile/verify-number-popover/error-type.model.ts
- src/app/fyle/my-profile/verify-number-popover/verify-number-popover.component.html
- src/app/shared/components/virtual-card/virtual-card.component.ts
- src/app/fyle/my-profile/verify-number-popover/verify-number-popover.component.scss
- src/app/fyle/my-profile/verify-number-popover/verify-number-popover.component.spec.ts
- src/app/fyle/my-profile/verify-number-popover/verify-number-popover.component.ts
🧰 Additional context used
📓 Path-based instructions (4)
**/*.component.{ts,html}
📄 CodeRabbit inference engine (.cursor/rules/component-i18n-key-naming.mdc)
**/*.component.{ts,html}: Top-level object in i18n translation files must be the component or feature folder name, derived from the file name by converting kebab-case to camelCase and removing the first matching prefix from: 'feature', 'ui', 'component'.
Keys inside the top-level object in i18n translation files must be free-form, not prefixed, and there must be no nested objects beyond the first level.
Use meaningful, semantic, and context-aware key names for i18n keys; avoid generic names like 'label1', 'text1', or 'message1'.
Do not translate strings that are already translation keys, tracking/analytics strings, strings with only special characters, comments, non-user-visible text, or variable bindings and expressions.
One object per component or feature in i18n translation files; avoid deep nesting and avoid prefixes like 'ui*' or 'feature*' in object names.
Files:
src/app/shared/components/toast-message/toast-message.component.tssrc/app/shared/components/popup-with-bullets/popup-with-bullets.component.tssrc/app/shared/components/toast-message/toast-message.component.html
src/**/*.component.{ts,html}
📄 CodeRabbit inference engine (.cursor/rules/component-i18n-key-naming.mdc)
Translation keys for Angular components and templates located in 'src/**' must be placed in 'src/assets/i18n/{lang}.json' for every supported language.
Files:
src/app/shared/components/toast-message/toast-message.component.tssrc/app/shared/components/popup-with-bullets/popup-with-bullets.component.tssrc/app/shared/components/toast-message/toast-message.component.html
**/*.{service,pipe,directive}.ts
📄 CodeRabbit inference engine (.cursor/rules/atomics-i18n-key-pattern.mdc)
**/*.{service,pipe,directive}.ts: i18n keys for services, pipes, and directives must use the schema: services.., pipes.., directives..
Convert kebab-case file names to camelCase and remove the suffix (Service, Pipe, Directive) when generating i18n keys for services, pipes, and directives
Use only the three roots: services, pipes, directives for i18n key grouping
Use meaningful, semantic, and context-aware key names for i18n keys; avoid generic names like message1, text1, error1
Files:
src/app/core/services/snackbar-properties.service.ts
**/*.component.html
📄 CodeRabbit inference engine (.cursor/rules/component-i18n-key-naming.mdc)
Prefer property binding for user-facing attributes in Angular templates when using translation keys.
Files:
src/app/shared/components/toast-message/toast-message.component.html
⏰ 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: build
🔇 Additional comments (17)
src/app/shared/icon/icon.providers.ts (2)
51-53: Superb da! New toast icons added perfectly.The addition of these three icons—
success-toast-icon,failure-toast-icon, andinfo-toast-icon—is spot on, machaan! They align beautifully with the type-based toast system introduced in this PR.
117-117: retaincheck-circle-outline.svgentry
This superstar icon is still starring in password-check-tooltip, card-added, pending-verification, and reset-password templates; removal will break those features.src/app/shared/components/popup-with-bullets/popup-with-bullets.component.ts (1)
60-65: Style-u super style-u! Simplified toast call, da.By removing the explicit icon parameter, you've let the service handle icon mapping based on messageType. This is the right way—one place to control all toast icons, not scattered everywhere like confetti at a wedding! The code is now cleaner than my Rajini dialogue delivery.
src/app/shared/components/virtual-card/virtual-card.component.spec.ts (1)
66-89: Test-u update pannirukeenga, semma!The test expectations are now perfectly aligned with the new toast icon system, boss! You've updated the expected icon to
success-toast-iconand removed the third parameter from thesetSnackbarPropertiescall. This is how tests should be—in sync with reality, not living in a parallel universe!src/app/fyle/my-profile/my-profile.page.ts (1)
475-482: Mind-u blowing simplification, boss!You've removed the conditional
snackbarIconlogic and now let the service handle icon selection based onmessageType. This is brilliant, da! Less code, less complexity, and one source of truth for icon mappings. As I always say, "Simple-ah irundhaa, powerful-ah irukkum!" (When it's simple, it's powerful!)src/theme/variables.scss (1)
71-80: Theme-u styling-u mass-u!Boss, this snackbar theming override is exactly what we need! By centralizing the snackbar appearance here, you ensure all toasts across the application look consistent—no more random styling scattered like rice at a wedding! The rounded corners (4px), clean white background, and dark text create a modern, professional look.
src/app/shared/components/toast-message/toast-message.component.ts (1)
23-23: Superb addition, boss!The messageType property is perfectly integrated into the data interface. The union type ensures only valid message types can flow through, making the component as solid as my punch dialogues!
src/app/shared/components/toast-message/toast-message.component.scss (4)
1-1: Style la! Perfect import, machaan!The colors import is set up correctly, bringing in the theme variables needed for the rebranded toast designs. As smooth as my entry scenes!
7-19: Kalakkal styling, boss!The type-specific borders add that signature style to each toast variant. The border-radius gives it that smooth finish, just like how I finish my stunts in one take!
21-39: First class icon styling, thalaiva!The icon-container backgrounds perfectly complement the borders, creating that visual hierarchy that makes the toast pop like my dialogues! Flexbox keeps everything centered with style.
47-48: Precision spacing, machaan!The icon size reduction to 16x16 and the 8px margins create that perfect balance. Every pixel placed with the precision of my punch timing!
Also applies to: 52-53, 61-61
src/app/shared/components/toast-message/toast-message.component.html (3)
1-1: Dynamic styling la! Mass approach!The type class binding connects the TypeScript messageType to the SCSS variants with that Rajini-style precision. One line, three powerful states!
4-6: Icon container wrapper - superb technique, boss!The icon-container wrapper brings that colored background magic to life. Like adding a powerful intro scene before the hero appears!
8-8: Span to div - simple but effective, thalaiva!Changing the body to a div element is a clean semantic improvement. Small changes, big impact - that's my style!
src/global.scss (3)
101-103: Padding reset - clean and powerful, machaan!The snackbar label padding reset gives full control to the toast component. Like clearing the stage before my grand entry!
105-107: Generic surface styling - one style to rule them all, boss!The unified snackbar surface styling is like my signature move - simple, effective, and works every time! Centralizing the control is the Rajini way.
110-126: Special case handled with style, thalaiva!The bulkfyle-prompt retains its custom positioning and arrow - because some heroes need their special entrance! The safe-area calculation is as precise as my timing.
| $background: #f2f5f6 !default; | ||
|
|
||
| $green: #24a148 !default; | ||
| $green-500: #00821f; |
There was a problem hiding this comment.
🛠️ Refactor suggestion | 🟠 Major
🧩 Analysis chain
Color palette-u expanded perfectly, da!
These new color tokens—$green-500, $info-500, $caution-500, and $grayscale-90—are exactly what the rebrand needs, machaan! They provide semantic meaning to the toast colors (success is green, info is blue, caution is orange) and maintain consistency across the design system.
But boss, let me verify these tokens are actually used in the toast component styling, not just sitting idle like extras in a movie:
Also applies to: 83-85
🏁 Script executed:
#!/bin/bash
# Description: Verify the new color tokens are used in toast/snackbar styling
# Expected: Should find references in component SCSS files
# Search for usage of new color tokens
rg -n --type=scss 'green-500|info-500|caution-500|grayscale-90' -g '!colors.scss'
# Search for toast-message component styles
fd -e scss 'toast-message' --exec cat {}Length of output: 1096
Wire up all new color tokens in toast-message styles
- Replace
colors.$negative-400in.type-failurewithcolors.$caution-500. - Replace
colors.$navy-500in.type-informationwithcolors.$info-500. - Apply
colors.$grayscale-90for toast text (e.g. in.toast-message--body).
File: toast-message.scss
🤖 Prompt for AI Agents
In src/theme/colors.scss around line 71 and in toast-message.scss, update the
toast styles to use the new design tokens: replace any usage of
colors.$negative-400 in .type-failure with colors.$caution-500, replace
colors.$navy-500 in .type-information with colors.$info-500, and set the toast
text color (e.g., .toast-message--body and any other toast text selectors) to
colors.$grayscale-90; ensure the imports/namespace for colors are present so
these tokens resolve.
There was a problem hiding this comment.
Actionable comments posted: 2
Caution
Some comments are outside the diff and can’t be posted inline due to platform limitations.
⚠️ Outside diff range comments (2)
src/app/fyle/add-edit-expense/suggested-duplicates/suggested-duplicates.component.spec.ts (1)
111-138: Thalaiva! The messageType addition is superb, but the mock icon needs a small correction!The test mock returns
icon: 'check-square-fill'(line 114), but according to the service changes, 'success' messageType should map to 'success-toast-icon'. When the mock data doesn't match what the real service returns, the test validates mock behavior instead of actual production behavior, boss!Apply this diff to align the mock with reality:
const snackbarProperties = { data: { - icon: 'check-square-fill', + icon: 'success-toast-icon', showCloseButton: true, message: 'Duplicates were successfully dismissed', messageType: 'success' as const, }, duration: 3000, };Based on the AI summary mentioning that the service now maps 'success' -> 'success-toast-icon'.
src/app/core/services/snackbar-properties.service.spec.ts (1)
5-53: Boss! The existing tests are good, but we're missing some power-packed scenarios!According to the AI summary, the service now returns a
messageTypefield in the data, but there's no test verifying this. Also, when a custom icon is provided viasnackbarIconparameter, that should override the default mapping - but there's no test for that scenario either, da!Add these test cases to make your coverage unbeatable:
it('should return the correct messageType in data', () => { const properties = service.setSnackbarProperties('success', { message: 'Success message' }); expect(properties.data.messageType).toEqual('success'); }); it('should use custom icon when snackbarIcon is provided', () => { const properties = service.setSnackbarProperties('success', { message: 'Success message', snackbarIcon: 'custom-icon' }); expect(properties.data.icon).toEqual('custom-icon'); });
📜 Review details
Configuration used: CodeRabbit UI
Review profile: ASSERTIVE
Plan: Pro
📒 Files selected for processing (14)
src/app/auth/switch-org/switch-org.page.spec.ts(1 hunks)src/app/core/mock-data/modal-controller.data.ts(1 hunks)src/app/core/mock-data/snackbar-properties.data.ts(4 hunks)src/app/core/services/snackbar-properties.service.spec.ts(1 hunks)src/app/fyle/add-edit-expense/add-edit-expense-2.spec.ts(1 hunks)src/app/fyle/add-edit-expense/suggested-duplicates/suggested-duplicates.component.spec.ts(1 hunks)src/app/fyle/dashboard/tasks/tasks-3.component.spec.ts(2 hunks)src/app/fyle/my-profile/my-profile.page.spec.ts(4 hunks)src/app/fyle/my-view-report/my-view-report.page.spec.ts(3 hunks)src/app/fyle/personal-cards/personal-cards.page.spec.ts(2 hunks)src/app/fyle/view-team-report/view-team-report.page.spec.ts(2 hunks)src/app/shared/components/popup-with-bullets/popup-with-bullets.component.spec.ts(1 hunks)src/app/shared/components/toast-message/toast-message.component.spec.ts(3 hunks)src/app/shared/components/virtual-card/virtual-card.component.spec.ts(1 hunks)
🧰 Additional context used
🧬 Code graph analysis (1)
src/app/core/mock-data/snackbar-properties.data.ts (1)
src/app/core/models/snackbar-properties.model.ts (1)
SnackbarProperties(1-10)
⏰ 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: build
🔇 Additional comments (14)
src/app/fyle/my-view-report/my-view-report.page.spec.ts (3)
646-654: Thalaiva approves! Test data properly updated, machaan!The
messageType: 'success'addition is spot-on for the resubmit report success case. Theas constassertion? That's style with substance - TypeScript will infer the exact literal type, not just string. Just like Rajini's punch dialogues, this change is precise and powerful!
681-689: Perfect test update, my friend! Even Rajini would give this a whistle!Correctly adding
messageType: 'success'for the submit report success scenario. The pattern is consistent with the resubmit test case - that's the mark of quality craftsmanship, da!
856-864: Mass update, boss! Test data is now ready for action!Third and final success case properly updated with
messageType: 'success'for the PDF email share feature. All three test cases now follow the same pattern - like Rajini's signature style, consistency is the key to greatness!src/app/core/services/snackbar-properties.service.spec.ts (2)
18-23: Style! The success icon mapping is spot on, machaan!This test properly verifies that success toasts get the new 'success-toast-icon'. The rebrand is looking sharp!
25-28: Mass! Failure icon test is solid as a rock!The expectation for 'failure-toast-icon' is bang on target. This will catch any regression, da!
src/app/shared/components/virtual-card/virtual-card.component.spec.ts (1)
70-73: Superb, thalaivar! Test updated perfectly!The snackbar properties now carry the
messageTypefield like a hero carrying his signature style! The third parameter has vanished like villains before Rajini - smoothly and without a trace. The expectations are spot-on, matching the new interface like a perfectly choreographed mass entry scene!Also applies to: 86-89
src/app/fyle/view-team-report/view-team-report.page.spec.ts (1)
856-856: Style-u, mass-u! Two perfect additions!Both test cases now swagger with the
messageType: 'success'field like Rajini flicking his sunglasses! The sendBack and showReportNameChangeSuccessToast scenarios are armed and ready for action. No complaints, only applause!Also applies to: 1167-1167
src/app/fyle/personal-cards/personal-cards.page.spec.ts (1)
293-293: Mind-blowing consistency, boss!Two test cases, same style - messageType added like Rajini's signature move that never fails! Whether it's one card or multiple cards, the success flows like a well-timed punchline. The test scaffolding is rock solid!
Also applies to: 325-325
src/app/core/mock-data/modal-controller.data.ts (1)
135-135: Kutty mass entry, thalaivar!The failure messageType lands in the mock data like a perfectly timed dialogue! Even the error scenarios get the Rajini treatment - precise, powerful, and perfectly placed. The openFromComponentConfig now speaks the new language fluently!
src/app/fyle/dashboard/tasks/tasks-3.component.spec.ts (1)
265-265: Dual power packed scene, thalaiva!Success and failure both get their moment in the spotlight - one in glory, one in warning! Like Rajini handling both hero and anti-hero roles with equal mastery. The test coverage now spans both emotional ranges of toast messaging!
Also applies to: 290-290
src/app/shared/components/toast-message/toast-message.component.spec.ts (1)
40-40: Triple threat performance, boss!Three test cases, all nailing the messageType like Rajini's triple action stunts! Each scenario - display, redirect, and close - now carries the success badge with pride. The toast component tests are ready to rock!
Also applies to: 60-60, 76-76
src/app/core/mock-data/snackbar-properties.data.ts (1)
5-13: Blockbuster transformation, thalaiva!Eight mock data objects, all getting the VIP treatment with explicit typing and messageType fields! Like Rajini upgrading from a simple cop to a supercop - the interface is now crystal clear and bulletproof! Success and failure types assigned with the precision of a master craftsman. This is how you do a proper rebranding, boss!
Also applies to: 15-23, 25-33, 35-43, 45-53, 55-63, 65-73, 75-83
src/app/fyle/my-profile/my-profile.page.spec.ts (1)
333-333: Final mass scene, boss! Perfect climax!Three scenarios - success, failure, and content copied - all upgraded with messageType like Rajini's character evolving through the movie! The setSnackbarProperties call at line 396-399 even drops the third undefined parameter like dropping a punch at the perfect moment. Clean, powerful, and absolutely stylish!
Also applies to: 358-358, 384-384, 396-399
src/app/fyle/add-edit-expense/add-edit-expense-2.spec.ts (1)
1629-1629: Superstar! This change is spot on!You've added the mandatory
messageTypefield perfectly, thalaiva! The test now matches the updated SnackbarProperties interface like a punch that never misses its target. Theas constassertion ensures type safety - mass entry, mass style!
| it('should return correct icon for a information toast message', () => { | ||
| const properties = service.setSnackbarProperties('information', { message: 'Information message' }); | ||
| expect(properties.data.icon).toBeUndefined(); | ||
| expect(properties.data.icon).toEqual('info-toast-icon'); | ||
| }); |
There was a problem hiding this comment.
🧹 Nitpick | 🔵 Trivial
Information toast test is working like a charm, but there's a small twist here!
The test expects 'info-toast-icon' while the message type is 'information'. This naming difference might confuse the team later, machaan. Consistency is king - either both should be 'information' or both should be 'info'.
🤖 Prompt for AI Agents
In src/app/core/services/snackbar-properties.service.spec.ts around lines 30-33,
the test expects 'info-toast-icon' while the message type used is 'information',
causing an inconsistency; update the test to expect 'information-toast-icon' (or
alternatively update the service mapping so 'information' returns
'info-toast-icon') so the type and icon naming are consistent.
| icon: 'check-circle-outline', | ||
| showCloseButton: true, | ||
| message, | ||
| messageType: 'success' as const, |
There was a problem hiding this comment.
🧹 Nitpick | 🔵 Trivial
Thalaiva style! Test is updated correctly!
The messageType: 'success' addition is perfect - like a Rajini entry, never goes wrong! Your test now respects the new mandatory field in the interface.
Optional polish: The mock icon names across test files could be standardized to match the new convention (e.g., 'success-toast-icon' instead of 'check-circle-outline'). But this is just style, not substance - your code already works like a perfectly choreographed fight scene!
🤖 Prompt for AI Agents
In
src/app/shared/components/popup-with-bullets/popup-with-bullets.component.spec.ts
around line 123, the test correctly adds the new mandatory field messageType:
'success' but mock icon names are inconsistent; ensure the test keeps
messageType: 'success' and optionally standardize mock icon names across test
files to the new convention (e.g., replace 'check-circle-outline' with
'success-toast-icon' in this spec and other related mocks) by updating mock data
strings and any assertions that reference the old icon name.
🔁 Code Duplication Report - Angular
📊 No significant change in code duplication. |
|
2 participants
Clickup
https://app.clickup.com/t/86d0jnxu2
Code Coverage
Please add code coverage here
UI Preview
Please add screenshots for UI changes
Summary by CodeRabbit
New Features
Style
Refactor
Tests