fix: styles for the screenshot modal according to figma

rostyslavvnahornyi commented 6 months ago

@kfarr i dont have tasks now, so i decided to check figma styles and fix screenshot modal because we had big problems with markup there.

netlify[bot] commented 6 months ago

Name	Link
Latest commit	dd6965b809bce0723afa7373a821dc4e6bb58ec7
Latest deploy log	https://app.netlify.com/sites/3dstreet-editor-builds/deploys/65d682845d3458000814fe5b
Deploy Preview	https://deploy-preview-385--3dstreet-editor-builds.netlify.app
Preview on mobile	Toggle QR Code... Use your smartphone camera to open QR code link.

To edit notification comments on pull requests, go to your Netlify site configuration.

kfarr commented 5 months ago

Thanks @rostyslavvnahornyi this is a good thing to fix and you have made great progress!

To finish this, there are 3 remaining issues to merge:

[ ] squished image; instead preserve original screenshot image aspect ratio (usually same aspect ratio as window) see (1)
[ ] too tall image: vertical height of screenshot image should not exceed size of modal; scrollbar should not be needed on the right of modal
[ ] update button with "Share" label text and new camera + share icon, see https://www.figma.com/file/W9jid3A0jgssnIKBFEvG38/3DStreet-2022?type=design&node-id=5464-100685&mode=design&t=aMlZE4p596V1Qzje-4

(1) issues with the sizing of the image:

the aspect ratio is not preserved: wrong in modal left, correct right (after downloading the png)

kfarr commented 5 months ago

looks great!

3DStreet / 3dstreet-editor