From 6a285bed5af54a498f7ebd2f602f6bbb039fbb97 Mon Sep 17 00:00:00 2001
From: =?UTF-8?q?=C5=A0imon=20Brandner?= <simon.bra.ag@gmail.com>
Date: Wed, 14 Jul 2021 09:06:41 +0200
Subject: [PATCH] Make the buttons easier to hit
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 | 16 +++++++++++-----
 1 file changed, 11 insertions(+), 5 deletions(-)

diff --git a/res/css/views/elements/_ImageView.scss b/res/css/views/elements/_ImageView.scss
index da23957b363..cf92ffec643 100644
--- a/res/css/views/elements/_ImageView.scss
+++ b/res/css/views/elements/_ImageView.scss
@@ -14,6 +14,10 @@ See the License for the specific language governing permissions and
 limitations under the License.
 */
 
+$button-size: 32px;
+$icon-size: 22px;
+$button-gap: 24px;
+
 .mx_ImageView {
     display: flex;
     width: 100%;
@@ -66,16 +70,17 @@ limitations under the License.
     pointer-events: initial;
     display: flex;
     align-items: center;
+    gap: calc($button-gap - ($button-size - $icon-size));
 }
 
 .mx_ImageView_button {
-    margin-left: 24px;
+    padding: calc(($button-size - $icon-size) / 2);
     display: block;
 
     &::before {
         content: '';
-        height: 22px;
-        width: 22px;
+        height: $icon-size;
+        width: $icon-size;
         mask-repeat: no-repeat;
         mask-size: contain;
         mask-position: center;
@@ -109,11 +114,12 @@ limitations under the License.
 }
 
 .mx_ImageView_button_close {
+    padding: calc($button-size - $button-size);
     border-radius: 100%;
     background: #21262c; // same on all themes
     &::before {
-        width: 32px;
-        height: 32px;
+        width: $button-size;
+        height: $button-size;
         mask-image: url('$(res)/img/image-view/close.svg');
         mask-size: 40%;
     }