Currently, it's hard to tell where a screenshot image starts and stops. (Especially if there's whitespace at the edges, like the image below.)
This ticket handles creating a visual wrapper component that can be used to render screenshots in a fake browser window, to make it easier to differentiate the image from the background.
Acceptance Criteria
The BrowserWindow component should take the following props:
src (required) - the image to render
alt (required) - the alt text to associate with the rendered image
url (optional) - a string to render in navigation menu of the browser window
Background
Currently, it's hard to tell where a screenshot image starts and stops. (Especially if there's whitespace at the edges, like the image below.)
This ticket handles creating a visual wrapper component that can be used to render screenshots in a fake browser window, to make it easier to differentiate the image from the background.
Acceptance Criteria
The BrowserWindow component should take the following props:
src(required) - the image to renderalt(required) - the alt text to associate with the rendered imageurl(optional) - a string to render in navigation menu of the browser windowResources
Codepen CSS prototype