Skip to content
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

Switch to using shadcn's Sonner for in-app toast notifications #9394

Open
5 tasks
rithviknishad opened this issue Dec 12, 2024 · 4 comments · May be fixed by #9405
Open
5 tasks

Switch to using shadcn's Sonner for in-app toast notifications #9394

rithviknishad opened this issue Dec 12, 2024 · 4 comments · May be fixed by #9405
Assignees
Labels
good first issue Good for newcomers needs-triage question Further information is requested work-in-progress

Comments

@rithviknishad
Copy link
Member

rithviknishad commented Dec 12, 2024

Currently, notifications are dispatched via functions exported from Notifications.js.

Since we are slowly moving towards using shadcn's UI components, let's switch to using shadcn's sonner for notifications.

https://ui.shadcn.com/docs/components/sonner

Here's an example of the Toaster component added to the App.tsx file (to ensure colours are as expected).

care_fe/src/App.tsx

Lines 38 to 45 in e48d37c

<Toaster
position="top-right"
theme="light"
richColors
// Voluntarily passing empty object as a workaround for `richColors`
// to work. Refer: https://github.com/shadcn-ui/ui/issues/2234.
toastOptions={{}}
/>

Here's the full attempt diff for reference: https://github.com/ohcnetwork/care_fe/pull/9350/files

Action Items

@rithviknishad rithviknishad added the good first issue Good for newcomers label Dec 12, 2024
@github-project-automation github-project-automation bot moved this to Triage in Care Dec 12, 2024
@rithviknishad rithviknishad moved this from Triage to Up Next in Care Dec 12, 2024
@rithviknishad rithviknishad changed the title Switch to using shadcn's Sonner for notifications Switch to using shadcn's Sonner for in-app toast notifications Dec 12, 2024
@nilay-v3rma
Copy link

May I work on this issue?

@github-actions github-actions bot added needs-triage question Further information is requested labels Dec 12, 2024
@rithviknishad
Copy link
Member Author

@nilay-v3rma could you open a draft PR once you start working on it?

@nilay-v3rma
Copy link

@rithviknishad sure i'll raise it asap

nilay-v3rma added a commit to nilay-v3rma/care_fe that referenced this issue Dec 13, 2024
@nilay-v3rma nilay-v3rma linked a pull request Dec 13, 2024 that will close this issue
6 tasks
@nilay-v3rma
Copy link

@rithviknishad I have raised the PR

Sign up for free to join this conversation on GitHub. Already have an account? Sign in to comment
Labels
good first issue Good for newcomers needs-triage question Further information is requested work-in-progress
Projects
Status: Up Next
Development

Successfully merging a pull request may close this issue.

2 participants