Better images preview behaviour

[mingming-ma]

As discussed in #493 (comment), we could use better lib such as react-medium-image-zoom to get enhanced images preview vs the image modal popup.

[Amnish04]

I was actually thinking of having the click and zoom feature inside the modal instead of completely removing the modal.
Reason being, the modal allows the user to look at the entire image in a single frame. My proposal is to extend that behaviour so users have more flexibility in preview

[mingming-ma]

@Amnish04 My bad, just saw the transparent background and images zoom from it's original size is great!
if we keep using the modal, do you mean we implement similar behaviour, e.g. the modal zoomed ? (I know we should change the cursor at the first step)

[Amnish04]

@mingming-ma I was thinking of allowing the user to zoom in and zoom out the image in the image preview modal itself.

I am not sure if what I've shared is the best library for our purpose, so I am looking for more.

Right now I am looking at this one
https://bettertyped.github.io/react-zoom-pan-pinch/?path=/story/docs-introduction--page

[Amnish04]

@mingming-ma I was experimenting with react-zoom-pan-pinch and it gives me this for starters.

I think this one should be good for our needs as it supports mobile gestures as well.

My proposal:

1. Let's have a zoom-in cursor on an unzoomed image when the modal opens.
2. When a user clicks on the image, we should zoom it to a certain scale and allows the user to reposition the image center with drag/swipe like in my gif.
3. When in zoomed state, the image should have a cursor of zoom-out.
4. If the user clicks it again (in zoomed state), we should unzoom it, i.e. scale = 1

[mingming-ma]

@Amnish04 I think it's great to ship this! Can you make a PR when you're satisfied ?

[Amnish04]

@humphd suggested in today's triage that we can rather open the image in a new tab rather than implementing zoom and pulling a new library