Toast notifications redesign

[exezbcz]

---

It is time to redesign our notification system. For now, let's start with the most used notifs - warning, error, and info

It will enable reporting issues directly from the app when the user encounters one.

• i will add more and more in the future

Design

• updated in figma file: toast notif page: https://www.figma.com/file/JXNtryaNYhY0XJNArzvPQx/Handoff?type=design&node-id=9705-14201&mode=design&t=tTxaqMd4D1AUbd4M-11

Warnings

old one:

new one:

Changes

• different background
• different copy (after i specify it)
• close button
• duration indicator
• paragraph text - 14px
• heading - 16px regular
• option to report issue

Duration and placement

placement in the top right corner like we already have

• lets put the duration to 7 seconds

this bar will shrink as the time is getting past

• when you hover over the toast, the timer will stop

Other PBJs

Dark mode

New color pair

we already had this one:

• but the light mode was bit weird and is not longterm solution imo here is the new one:

End

• lastly, I would like to slowly rewrite the most used error and warning codes to more human-friendly language. Would anyone be able to help me here? Are there any stats which toast pops up the most

thank you!

[kodabot]

ASSIGNED ISSUES LIMIT REACHED - @hassnian, you have been already assigned with 5 issues: 6955,8163,8890,9921,10071,10001,9951. Finish one of them in order to get more issues assigned!

[exezbcz]

rel:

• https://github.com/kodadot/nft-gallery/issues/9038