hngprojects / hng_boilerplate_nextjs

https://deployment.nextjs.boilerplate.hng.tech
Apache License 2.0
205 stars 264 forks source link

[Improvement): Implement Feedback Modal for Successful Picture Upload #1105

Open Zaraorji opened 3 weeks ago

Zaraorji commented 3 weeks ago

Description

Develop a feedback modal that appears after successfully uploading a profile picture. This modal should notify the user that the picture has been successfully uploaded and provide a clear confirmation.

User Story:

As a user, I want to receive a confirmation via a feedback modal when I successfully upload a profile picture so that I know the upload was successful.

Requirements:

  1. Implement a feedback modal that appears upon successful picture upload, centered on the screen.
  2. The modal should display a success message, such as "Your profile picture has been successfully uploaded."
  3. Ensure the modal matches the design and style of other feedback modals in the application. .4. The modal should automatically close after 3 seconds or when the user clicks a close button.
  4. Ensure the modal does not disrupt the user experience and that it is visible long enough for users to read the message.

Acceptance Criteria

  1. A feedback modal is displayed immediately after a successful picture upload.
  2. The modal displays a clear success message .
  3. The modal automatically closes after 3 seconds .
  4. The modal does not interfere with other UI elements or functionalities.

Expected Outcome:

  1. Users see a confirmation message in a feedback modal after uploading a profile picture, enhancing their confidence in the upload process.
  2. The feedback modal functions smoothly, closing automatically without disrupting the user experience.

Links

| FIGMA LINK

Images

image

Zaraorji commented 3 weeks ago

I will drop screenshot before 10am

Zaraorji commented 3 weeks ago

Screen Shot 2024-08-22 at 11 37 57 PM