From ab79deb88fa828ef1a13a1fecb9e0648b38b68f9 Mon Sep 17 00:00:00 2001
From: =?UTF-8?q?=C5=A0imon=20Brandner?= <simon.bra.ag@gmail.com>
Date: Wed, 24 Feb 2021 08:11:53 +0100
Subject: [PATCH] Update the looks a bit more
MIME-Version: 1.0
Content-Type: text/plain; charset=UTF-8
Content-Transfer-Encoding: 8bit

Signed-off-by: Šimon Brandner <simon.bra.ag@gmail.com>
---
 res/css/views/elements/_ImageView.scss     | 14 ++++++--
 src/components/views/elements/ImageView.js | 38 ++++++++++++----------
 2 files changed, 31 insertions(+), 21 deletions(-)

diff --git a/res/css/views/elements/_ImageView.scss b/res/css/views/elements/_ImageView.scss
index ee02a1dce8..8afd2670a7 100644
--- a/res/css/views/elements/_ImageView.scss
+++ b/res/css/views/elements/_ImageView.scss
@@ -49,24 +49,32 @@ limitations under the License.
 }
 
 .mx_ImageView_panel {
+    width: 100%;
+    height: 68px;
     position: absolute;
     z-index: 1000;
     align-self: flex-start;
     pointer-events: all;
     display: flex;
     justify-content: space-between;
-    width: 100%;
+    align-items: center;
 }
 
 .mx_ImageView_toolbar {
     right: 0;
-    padding: 50px 50px 0 0;
+    padding-right: 18px;
     display: flex;
+    align-items: center;
+}
+
+.mx_ImageView_toolbar_buttons {
+    display: flex;
+    align-items: center;
 }
 
 .mx_ImageView_label {
     left: 0;
-    padding: 50px 0 0 50px;
+    padding-left: 18px;
     text-align: left;
     display: flex;
     justify-content: center;
diff --git a/src/components/views/elements/ImageView.js b/src/components/views/elements/ImageView.js
index e3dbe2a411..fd9d84b900 100644
--- a/src/components/views/elements/ImageView.js
+++ b/src/components/views/elements/ImageView.js
@@ -227,7 +227,7 @@ export default class ImageView extends React.Component {
         if (mayRedact) {
             redactButton = (
                 <AccessibleButton className="mx_ImageView_button" title={_t("Remove")} onClick={ this.onRedactClick }>
-                    <img src={require("../../../../res/img/trash-red.svg")} alt={ _t('Remove') } width="18" height="18" />
+                    <img src={require("../../../../res/img/trash-red.svg")} alt={ _t('Remove') } width="24" height="24" />
                 </AccessibleButton>
             );
         }
@@ -263,24 +263,26 @@ export default class ImageView extends React.Component {
                             { metadata }
                         </div>
                         <div className="mx_ImageView_toolbar">
-                            { redactButton }
-                            <AccessibleButton className="mx_ImageView_button" title={_t("Rotate Right")} onClick={ this.onRotateClockwiseClick }>
-                                <img src={require("../../../../res/img/image-view/rotate-cw.svg")} alt={ _t('Rotate clockwise') } width="18" height="18" />
-                            </AccessibleButton>
-                            <AccessibleButton className="mx_ImageView_button" title={_t("Rotate Left")} onClick={ this.onRotateCounterClockwiseClick }>
-                                <img src={require("../../../../res/img/image-view/rotate-ccw.svg")} alt={ _t('Rotate counter-clockwise') } width="18" height="18" />
-                            </AccessibleButton>
-                            <AccessibleButton className="mx_ImageView_button" title={_t("Zoom out")} onClick={ this.onZoomOutClick }>
-                                <img src={require("../../../../res/img/image-view/zoom-out.svg")} alt={ _t('Zoom out') } width="18" height="18" />
-                            </AccessibleButton>
-                            <AccessibleButton className="mx_ImageView_button" title={_t("Zoom in")} onClick={ this.onZoomInClick }>
-                                <img src={require("../../../../res/img/image-view/zoom-in.svg")} alt={ _t('Zoom in') } width="18" height="18" />
-                            </AccessibleButton>
-                            <a className="mx_ImageView_button" href={ this.props.src } download={ this.props.name } title={_t("Download")} target="_blank" rel="noopener">
-                                <img src={require("../../../../res/img/image-view/download.svg")} width="18" height="18" alt={ _t('Download') } />
-                            </a>
+                            <div className="mx_ImageView_toolbar_buttons">
+                                { redactButton }
+                                <AccessibleButton className="mx_ImageView_button" title={_t("Rotate Right")} onClick={ this.onRotateClockwiseClick }>
+                                    <img src={require("../../../../res/img/image-view/rotate-cw.svg")} alt={ _t('Rotate clockwise') } width="24" height="24" />
+                                </AccessibleButton>
+                                <AccessibleButton className="mx_ImageView_button" title={_t("Rotate Left")} onClick={ this.onRotateCounterClockwiseClick }>
+                                    <img src={require("../../../../res/img/image-view/rotate-ccw.svg")} alt={ _t('Rotate counter-clockwise') } width="24" height="24" />
+                                </AccessibleButton>
+                                <AccessibleButton className="mx_ImageView_button" title={_t("Zoom out")} onClick={ this.onZoomOutClick }>
+                                    <img src={require("../../../../res/img/image-view/zoom-out.svg")} alt={ _t('Zoom out') } width="24" height="24" />
+                                </AccessibleButton>
+                                <AccessibleButton className="mx_ImageView_button" title={_t("Zoom in")} onClick={ this.onZoomInClick }>
+                                    <img src={require("../../../../res/img/image-view/zoom-in.svg")} alt={ _t('Zoom in') } width="24" height="24" />
+                                </AccessibleButton>
+                                <a className="mx_ImageView_button" href={ this.props.src } download={ this.props.name } title={_t("Download")} target="_blank" rel="noopener">
+                                    <img src={require("../../../../res/img/image-view/download.svg")} width="24" height="24" alt={ _t('Download') } />
+                                </a>
+                            </div>
                             <AccessibleButton className="mx_ImageView_button" title={_t("Close")} onClick={ this.props.onFinished }>
-                                <img src={require("../../../../res/img/image-view/close.svg")} width="18" height="18" alt={ _t('Close') } />
+                                <img src={require("../../../../res/img/image-view/close.svg")} width="32" height="32" alt={ _t('Close') } />
                             </AccessibleButton>
                         </div>
                     </div>