search

Shift3 / boilerplate-client-react

The Bitwise standard starting point for new React web projects.
7 stars 10 forks source link

Improves Profile Photo Upload UX #645

Closed joshwingreene closed 2 years ago

joshwingreene commented 2 years ago

Changes

  1. Creates UserProfileImg so that we can get the raw image element for the profile image, instead of having to work with the circular and box-shadow'ed version only.
  2. A camera icon is now shown over the UserProfileImg component when the user hovers over it. A LoadingSpinner will be shown when the user's profile picture is being updated.
  3. Refactors the LoadingSpinner so that the inline styling was removed.
  4. Deletes the UpdateProfilePictureForm and the associated test since #646 made them unnecessary.
  5. Adds some relevant theming for the tooltip.
  6. Corrects a bug that occurred in the following scenario: (1) Upload Photo (2) Delete Photo (3) Try to upload the same photo again (the bug would not allow the same photo to be uploaded)

Purpose

Improves the UX of the profile photo upload flow

Approach

The approach mimics how Twitter allows users to change their profile photo. Instead of making the user first select the photo and then click on an 'Update' button to upload it, those two steps have been consolidated into one step. The user just needs to click on the camera icon inside of the profile photo in the header and then they will need to choose a new profile photo to upload via the normal file upload dialog. Once done, their profile photo will be uploaded and updated on the frontend.

Testing Steps

  1. Pull in the changes to your local copy of this branch and run it alongside the dj_starter_demo repo.

Screenshots

https://user-images.githubusercontent.com/2876874/195207041-7524035e-7f29-4cd0-805d-4a6343bae8c7.mov

joshwingreene commented 2 years ago

Improve the UX of the profile photo upload.

DropsOfSerenity commented 2 years ago

@joshwingreene Generally we want to keep concerns about how to display content to css. This makes components more flexible and usable in different situations and properly separates concerns (css is particularly concerned with display).