feat(screenshot-accepter): add more space for screenshot view

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

@@ -13,7 +13,8 @@ class ScreenshotAccepterBody extends Component {
             expectedImg: PropTypes.object,
             actualImg: PropTypes.object,
             diffImg: PropTypes.object,
-            error: PropTypes.object
+            error: PropTypes.object,
+            parentId: PropTypes.string
         }),
         // from store
         testName: PropTypes.string,
@@ -27,24 +28,26 @@ class ScreenshotAccepterBody extends Component {
             <div className='image-box__container'>
                 {
                     isNoRefImageError(image.error)
-                        ? this._renderImageBox('No reference image', image.actualImg)
+                        ? this._renderImageBox(image.actualImg)
                         : <StateFail image={image} />
                 }
             </div>
         );
     }
 
-    _renderImageBox(label, image) {
+    _renderImageBox(image) {
         return (
             <div className="image-box__image">
-                <div className="image-box__title">{label}</div>
                 <ResizedScreenshot image={image} />
             </div>
         );
     }
 
     _renderTitle() {
-        const {testName, browserName, image: {stateName, parentId: resultId}} = this.props;
+        const {testName, browserName, image: {stateName, parentId: resultId, error: imageError}} = this.props;
+        const imagesDescription = isNoRefImageError(imageError)
+            ? 'actual'
+            : 'expected, actual, diff';
 
         return (
             <div className="screenshot-accepter__title">
@@ -53,6 +56,7 @@ class ScreenshotAccepterBody extends Component {
                 <span className="screenshot-accepter__browser-name">{browserName}</span>
                 <span className="screenshot-accepter__title-divider">{'/'}</span>
                 <span className="screenshot-accepter__state-name">{stateName}</span>
+                <span className="screenshot-accepter__images-desc"> ({imagesDescription})</span>
                 <ViewInBrowserIcon extendClassNames="screenshot-accepter__icon_view-in-browser" resultId={resultId}/>
             </div>
         );

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

@@ -11,13 +11,15 @@
     overflow-y: auto;
 }
 
-.screenshot-accepter__header {
+.screenshot-accepter__header.container {
+    padding-left: 15px;
+    padding-right: 15px;
     background-color: #fff;
 }
 
 .screenshot-accepter__controls.state-controls .progress-bar {
     margin-left: auto;
-    margin-bottom: 20px;
+    margin-bottom: 15px;
 }
 
 .screenshot-accepter__controls.state-controls .progress-bar::after {
@@ -35,14 +37,14 @@
 .state-controls.screenshot-accepter__controls {
     display: flex;
     flex-wrap: wrap;
-    margin-top: 20px;
+    margin-top: 15px;
 }
 
 .screenshot-accepter__controls .button,
 .screenshot-accepter__controls .tab-switcher,
 .screenshot-accepter__controls .select {
-    margin-right: 20px;
-    margin-bottom: 20px;
+    margin-right: 15px;
+    margin-bottom: 15px;
 }
 
 .button.screenshot-accepter__arrows-open-btn,
@@ -85,7 +87,7 @@
 
 .button.screenshot-accepter__arrow-down-btn,
 .button.screenshot-accepter__accept-btn {
-    margin-right: 20px;
+    margin-right: 15px;
 }
 
 .button.screenshot-accepter__arrow-down-btn .arrow-icon {
@@ -104,15 +106,19 @@
 
 .screenshot-accepter__title {
     font-size: 16px;
-    line-height: 20px;
-    margin-top: 20px;
-    margin-bottom: 20px;
+    line-height: 10px;
+    margin-top: 10px;
+    margin-bottom: 10px;
 }
 
 .screenshot-accepter__test-name {
     font-weight: bold;
 }
 
+.screenshot-accepter__images-desc {
+    color: #808080;
+}
+
 .screenshot-accepter__title-divider {
     margin-left: 5px;
     margin-right: 5px;
@@ -124,8 +130,10 @@
     font-size: 20px;
 }
 
-.screenshot-accepter__body {
-    margin-bottom: 30px;
+.screenshot-accepter__body.container {
+    padding-left: 15px;
+    padding-right: 15px;
+    margin-bottom: 10px;
 }
 
 .screenshot-accepter__body .screenshot-accepter__icon_view-in-browser {

lib/static/components/progress-bar/index.styl

@@ -1,7 +1,7 @@
 .progress-bar {
     position: relative;
     display: flex;
-    outline: 1px solid #ccc;
+    border: 1px solid #ccc;
     border-radius: 5px;
 
     &__container {

lib/static/components/state/state-fail/index.jsx

@@ -64,7 +64,7 @@ const StateFail = ({image, diffMode: diffModeProp, isScreenshotAccepterOpened})
 
         return (
             <div className="image-box__image" style={{flex: image.size.width}}>
-                {label && <div key={titleKey} ref={ref} className="image-box__title">{titleText}</div>}
+                {label && !isScreenshotAccepterOpened && <div key={titleKey} ref={ref} className="image-box__title">{titleText}</div>}
                 <ResizedScreenshot
                     image={image}
                     diffClusters={diffClusters}

lib/static/styles.css

@@ -26,8 +26,8 @@
 }
 
 .container {
-    padding-left: 30px;
-    padding-right: 30px;
+    padding-left: 20px;
+    padding-right: 20px;
 }
 
 main.container {

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

@@ -75,7 +75,7 @@ describe('<ScreenshotAccepterBody/>', () => {
         assert.isEmpty(component.find('.screenshot-accepter__title'));
     });
 
-    it('should render full title of image state', () => {
+    it('should render full title of image state with image description', () => {
         const image = mkImage({id: 'img', parentId: 'res', stateName: 'state'});
         const resultsById = mkResult({id: 'res', parentId: 'bro'});
         const browsersById = mkBrowser({id: 'bro', parentId: 'suite', name: 'yabro'});
@@ -85,30 +85,44 @@ describe('<ScreenshotAccepterBody/>', () => {
 
         assert.equal(
             component.find('.screenshot-accepter__title').text(),
-            'suite/yabro/state'
+            'suite/yabro/state (expected, actual, diff)'
         );
     });
 
     describe('no reference image error', () => {
-        it('should render screenshot with title', () => {
-            const image = mkImage({
+        let image;
+
+        beforeEach(() => {
+            image = mkImage({
                 id: 'img',
                 parentId: 'res',
                 stateName: 'state',
                 error: {name: 'NoRefImageError'},
                 actualImg: {path: 'some/path', size: {width: 10, height: 20}}
             });
+        });
+
+        it('should render screenshot', () => {
+            const resultsById = mkResult({id: 'res', parentId: 'bro'});
+            const browsersById = mkBrowser({id: 'bro', parentId: 'suite', name: 'yabro'});
+            const tree = mkStateTree({browsersById, resultsById});
+
+            mkBodyComponent({image}, {tree});
+
+            assert.calledOnceWith(ResizedScreenshot, {image: image.actualImg});
+        });
+
+        it('should contain description only for actual image', () => {
             const resultsById = mkResult({id: 'res', parentId: 'bro'});
             const browsersById = mkBrowser({id: 'bro', parentId: 'suite', name: 'yabro'});
             const tree = mkStateTree({browsersById, resultsById});
 
             const component = mkBodyComponent({image}, {tree});
 
             assert.equal(
-                component.find('.image-box__title').text(),
-                'No reference image'
+                component.find('.screenshot-accepter__title').text(),
+                'suite/yabro/state (actual)'
             );
-            assert.calledOnceWith(ResizedScreenshot, {image: image.actualImg});
         });
     });