Improve toast design

[kuv2707]

Description

The modal appears quite plain, and its theme doesn't match with the rest of the app.

• We should use the same font in the toast as the rest of the app.
• The "X" can be replaced with some fontAwesome icon
• We can have a heading and a body for the toast instead of a single content.
• The background colors for various kinds of toasts also need to match the app theme. (eg, Cyan doesn't fit there)
• Use the design that seems sensible to you, and we can discuss things during PR reviews. (@shivansh-bhatnagar18 Please chime in)

You can take inspiration from this (Maybe display a giant fire emoji in case of error toasts, etc)

Note

Apart from the addition of a state variable for heading content, there should be no change to props etc. All changes should be in the CSS or in organization of divs etc in the toast JSX.

[issue-assigner[bot]]

Comment '@csoc-bot claim' to get this issue assigned or '@csoc-bot abandon' to get this issue unassigned.

[asmit27rai]

@csoc-bot claim

[issue-assigner[bot]]

@asmit27rai This issue has been successfully assigned to you! 🚀