feat: add cover image cropper

[foolo]

What does this PR do?

Use the image cropper when uploading a cover picture on profile settings page. Add dynamic resizing to image cropper, to fit the with of the modal, which may change when user resizes browser, etc.

Fixes #2110

Type of change

• [x] Enhancement (non-breaking small changes to existing functionality)

How should this be tested?

Visit Profile settings > Profile > Cover > Choose file In the modal that pops up, crop the image and click Upload. Modal will close. Click Save Go to profile page and verify that the cover image is updated with the cropped image.

[vercel[bot]]

The latest updates on your projects. Learn more about Vercel for Git ↗︎

Name	Status	Preview	Updated (UTC)
prerender	✅ Ready (Inspect)	Visit Preview	Apr 17, 2023 8:07am
ui	✅ Ready (Inspect)	Visit Preview	Apr 17, 2023 8:07am
web	✅ Ready (Inspect)	Visit Preview	Apr 17, 2023 8:07am

[foolo]

@bigint Opening as draft because I'm not sure about what workflow is the best choice. It's a bit different than Profile picture (where it uploads and saves at the same time). On cover picture, first you upload, and then click Save, to save the form together with the other values (profile name, bio, etc.).

https://user-images.githubusercontent.com/667227/226363132-9672d49f-7895-4da4-bb32-7ee7dce90af1.mp4

[bigint]

@foolo lemme know when its ready for review 🙇🏼

[foolo]

@foolo lemme know when its ready for review 🙇🏼

Sure! I opened it as a draft because I was not sure about what user workflow is the best choice, as mentioned here https://github.com/lensterxyz/lenster/pull/2113#issuecomment-1476288433. So just tell in case you have any opinion on that.

[socket-security[bot]]

No dependency changes detected. Learn more about Socket for GitHub ↗︎

---

👍 No new dependency issues detected in pull request

Bot Commands

To ignore an alert, reply with a comment starting with @SocketSecurity ignore followed by a space separated list of package-name@version specifiers. e.g. @SocketSecurity ignore [email protected] bar@* or ignore all packages with @SocketSecurity ignore-all

Pull request alert summary

Issue	Status
Install scripts	✅ 0 issues
Native code	✅ 0 issues
Bin script shell injection	✅ 0 issues
Unresolved require	✅ 0 issues
Invalid package.json	✅ 0 issues
HTTP dependency	✅ 0 issues
Git dependency	✅ 0 issues
Potential typo squat	✅ 0 issues
Known Malware	✅ 0 issues
Telemetry	✅ 0 issues
Protestware/Troll package	✅ 0 issues

[foolo]

@foolo lemme know when its ready for review 🙇🏼

@bigint, It's ready for review. And as a bonus it will solve the display error: https://github.com/lensterxyz/lenster/issues/2539

[foolo]

Make sure to run pnpm i18n:extract

done, thanks for the reminder!