Implement a UI component for editing profile photo

[hayderjebur]

What this PR does (required):

• list PR functionality here
• Render the UI for uploading profile photos.
• Removed the temporary button for display the Upload component conditionally.
• Applied all the feedback from the developers to the PR.

Screenshots / Videos (front-end only):

• Post at least one screenshot to show the feature in action. Only required in front-end work

  Any information needed

to test this feature (required):

• Post what steps to take to be able to test this feature (eg. "sign up as a new user and upload a profile picture from the navbar")

Any issues with the current functionality (optional):

• List any problems where you were not able to complete all tasks on ticket
• List any problems this PR may cause for the project or other active PRs
• Post a screenshot/video of the problem, along with detailed console outputs where applicable

[hayderjebur]

Looks very good overall, good job 💯 Left some minor comments, please have a look when you can 👼🏼

One thing I was wondering, the server/package-lock.json seems to have changed but there aren't any backend changes 🤔 Could we exclude that change from the PR? (one way of doing this would be to checkout the file from main/develop).

Lastly, thank you so much for formatting the PR nicely! I don't know about you but it looked soo much better to me! 🎉

Regarding the package-lock.json, I wonder if would be a conflict between the develop branch and my PR, I would leave everything in develop branch and remove any things in package-lock.json from my branch! Is will that way solve the issue?