From 723ce436da85f769601dda9236c08c207731747e Mon Sep 17 00:00:00 2001
From: sipayrt <sipayrt@yandex.ru>
Date: Mon, 2 Oct 2023 17:10:17 +0300
Subject: [PATCH] feat(screenshot-accepter): add more space for screenshot view

---
 .../modals/screenshot-accepter/body.jsx       | 14 +++++----
 .../modals/screenshot-accepter/style.css      | 30 ++++++++++++-------
 lib/static/components/progress-bar/index.styl |  2 +-
 .../components/state/state-fail/index.jsx     |  2 +-
 lib/static/styles.css                         |  4 +--
 .../modals/screenshot-accepter/body.jsx       |  8 ++---
 6 files changed, 34 insertions(+), 26 deletions(-)

diff --git a/lib/static/components/modals/screenshot-accepter/body.jsx b/lib/static/components/modals/screenshot-accepter/body.jsx
index ec574924c..6fa365cf7 100644
--- a/lib/static/components/modals/screenshot-accepter/body.jsx
+++ b/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>
         );
diff --git a/lib/static/components/modals/screenshot-accepter/style.css b/lib/static/components/modals/screenshot-accepter/style.css
index c85c38b98..99357b6ad 100644
--- a/lib/static/components/modals/screenshot-accepter/style.css
+++ b/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 {
diff --git a/lib/static/components/progress-bar/index.styl b/lib/static/components/progress-bar/index.styl
index abc5afe72..02ea261a0 100644
--- a/lib/static/components/progress-bar/index.styl
+++ b/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 {
diff --git a/lib/static/components/state/state-fail/index.jsx b/lib/static/components/state/state-fail/index.jsx
index 24ede4059..d87331323 100644
--- a/lib/static/components/state/state-fail/index.jsx
+++ b/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}
diff --git a/lib/static/styles.css b/lib/static/styles.css
index 3b3be8d16..4bea85215 100644
--- a/lib/static/styles.css
+++ b/lib/static/styles.css
@@ -26,8 +26,8 @@
 }
 
 .container {
-    padding-left: 30px;
-    padding-right: 30px;
+    padding-left: 20px;
+    padding-right: 20px;
 }
 
 main.container {
diff --git a/test/unit/lib/static/components/modals/screenshot-accepter/body.jsx b/test/unit/lib/static/components/modals/screenshot-accepter/body.jsx
index b10777902..0c117ad1e 100644
--- a/test/unit/lib/static/components/modals/screenshot-accepter/body.jsx
+++ b/test/unit/lib/static/components/modals/screenshot-accepter/body.jsx
@@ -92,7 +92,7 @@ describe('<ScreenshotAccepterBody/>', () => {
     });
 
     describe('no reference image error', () => {
-        it('should render screenshot with title', () => {
+        it('should render screenshot', () => {
             const image = mkImage({
                 id: 'img',
                 parentId: 'res',
@@ -105,12 +105,8 @@ describe('<ScreenshotAccepterBody/>', () => {
             const tree = mkStateTree({browsersById, resultsById});
             isNoRefImageError.withArgs(image.error).returns(true);
 
-            const component = mkBodyComponent({image}, {tree});
+            mkBodyComponent({image}, {tree});
 
-            assert.equal(
-                component.find('.image-box__title').text(),
-                'No reference image'
-            );
             assert.calledOnceWith(ResizedScreenshot, {image: image.actualImg});
         });
     });