Improve Toastify Design and Aesthetics

[suryanshsingh2001]

---

Improve Toastify Design and Aesthetics

Issue Description

Objective:

Enhance the design and aesthetics of the Toastify notifications in the MyLibrary project to improve user experience and visual appeal.

Tasks:

• Evaluate the current Toastify design and identify areas for improvement.
• Implement a more visually appealing and user-friendly notification design.
• Consider using custom styles, animations, or transitions to enhance the notifications.
• Ensure that notifications are consistent with the project's overall design theme.
• Test the improved Toastify design on various devices and browsers.

Additional Information (Optional):

You are also allowed to use any other toastify library other than react-toastify for enchancements.

Acceptance Criteria

• Toastify notifications have an improved and visually appealing design.
• Notifications are easy to read and understand.
• The improved design is consistent with the project's overall aesthetics.
• Toastify notifications are responsive and work well on different devices and browsers.

---

Contribution Guidelines

Please refer to our Contributing Guidelines for information on how to contribute to this design improvement task.

Timeline

The timeline for improving the Toastify design and aesthetics is flexible, but we encourage timely completion to enhance the user experience of MyLibrary.

Let's make MyLibrary's notifications look and feel better!

[Pinaka-Pani-18]

Hi @suryanshsingh2001, I would like to work on this issue.

[suryanshsingh2001]

@Pinaka-Pani-18 Sure, I have assigned the issue. You can start working on it. Do share your working gif for the toastify in your PR to simplify PR review. Happy Coding 🧑‍💻

[Pinaka-Pani-18]

Hi @suryanshsingh2001, I haven't made any changes in the project, but I'm encountering this error upon running the project. Please take a look at the screenshot below. Do you have any insights on the cause of this error or how to resolve it?

[suryanshsingh2001]

Could you share the code snippet of App.jsx, BookList.jsx and Header.jsx of your local clone.
Also make sure that you have installed all the dependencies in the client folder.
To do this make sure you are in the client folder

npm i

[Pinaka-Pani-18]

Sorry for the inconvenience, I could not able to complete this issue.

[suryanshsingh2001]

No problem @Pinaka-Pani-18