[Enhancement]: Add Camera Icon to Circle Profile Picture for Uploading

RitaMonye commented 3 weeks ago

Description

Enhance the user experience by adding a camera icon to the circle profile picture placeholder. This icon should appear when users hover over or click the profile picture, indicating that they can upload or change their profile picture. The goal is to provide a clear, intuitive interface for users to update their profile images.

Acceptance Criteria

The camera icon should appear centred within the circle profile picture when the user hovers over or clicks on the profile picture placeholder.
The camera icon should be visible when the user hovers over or clicks the profile picture area, providing visual feedback that the area is interactive.
The camera icon should be designed to match the overall style of the application, with appropriate size, colour, and positioning.
The camera icon should display correctly across different devices and screen sizes, maintaining consistent functionality.
If the upload fails, an appropriate error message should be displayed, guiding the user on how to resolve the issue.