refactor: re-write screenshots viewing to using css only (#600)

* refactor: re-write screenshots viewing to using css only

* refactor: change screenshot component api to more concise

* fix: fix images sizing when not loaded

* fix: fix images aspect ratio

* chore(new-ui): fix review issues

lib/static/components/modals/screenshot-accepter/body.jsx

@@ -1,10 +1,10 @@
 import React, {Component, Fragment} from 'react';
 import {connect} from 'react-redux';
 import PropTypes from 'prop-types';
-import ResizedScreenshot from '../../state/screenshot/resized';
 import StateFail from '../../state/state-fail';
 import {isNoRefImageError} from '../../../../common-utils';
 import ViewInBrowserIcon from '../../icons/view-in-browser';
+import {Screenshot} from '@/static/new-ui/components/Screenshot';
 
 class ScreenshotAccepterBody extends Component {
     static propTypes = {
@@ -36,11 +36,7 @@ class ScreenshotAccepterBody extends Component {
     }
 
     _renderImageBox(image) {
-        return (
-            <div className="image-box__image">
-                <ResizedScreenshot image={image} />
-            </div>
-        );
+        return <Screenshot image={image} />;
     }
 
     _renderTitle() {

lib/static/components/modals/screenshot-accepter/style.css

@@ -136,6 +136,9 @@
     padding-left: 15px;
     padding-right: 15px;
     margin-bottom: 10px;
+    display: flex;
+    flex-direction: column;
+    height: 100%;
 }
 
 .screenshot-accepter__body .screenshot-accepter__icon_view-in-browser {

lib/static/components/section/body/page-screenshot.tsx

@@ -1,7 +1,7 @@
 import React, {Component} from 'react';
 import Details from '../../details';
-import ResizedScreenshot from '../../state/screenshot/resized';
 import {ImageFile} from '../../../../types';
+import {Screenshot} from '@/static/new-ui/components/Screenshot';
 
 interface PageScreenshotProps {
     image: ImageFile;
@@ -11,7 +11,7 @@ export class PageScreenshot extends Component<PageScreenshotProps> {
     render(): JSX.Element {
         return <Details
             title="Page screenshot"
-            content={(): JSX.Element => <ResizedScreenshot image={this.props.image}/>}
+            content={(): JSX.Element => <Screenshot image={this.props.image} />}
         />;
     }
 }