From a2b5e5a6a1f1e685d361d414b2d17aaa50803451 Mon Sep 17 00:00:00 2001
From: Michael Telatynski <7t3chguy@gmail.com>
Date: Thu, 16 Jul 2020 14:38:46 +0100
Subject: [PATCH] Fix top right header button layout and hover consistency

Signed-off-by: Michael Telatynski <7t3chguy@gmail.com>
---
 res/css/structures/_HeaderButtons.scss |  2 +-
 res/css/structures/_RightPanel.scss    |  8 ++++----
 res/css/views/rooms/_RoomHeader.scss   | 23 +++++++++++++++++------
 3 files changed, 22 insertions(+), 11 deletions(-)

diff --git a/res/css/structures/_HeaderButtons.scss b/res/css/structures/_HeaderButtons.scss
index eef7653b24..9ef40e9d6a 100644
--- a/res/css/structures/_HeaderButtons.scss
+++ b/res/css/structures/_HeaderButtons.scss
@@ -22,7 +22,7 @@ limitations under the License.
     content: "";
     background-color: $header-divider-color;
     opacity: 0.5;
-    margin: 0 15px;
+    margin: 6px 8px;
     border-radius: 1px;
     width: 1px;
 }
diff --git a/res/css/structures/_RightPanel.scss b/res/css/structures/_RightPanel.scss
index 77114954eb..2fe7aac3b2 100644
--- a/res/css/structures/_RightPanel.scss
+++ b/res/css/structures/_RightPanel.scss
@@ -61,10 +61,10 @@ limitations under the License.
     &::before {
         content: '';
         position: absolute;
-        top: 6px; // center with parent of 32px
-        left: 6px; // center with parent of 32px
-        height: 20px;
-        width: 20px;
+        top: 4px; // center with parent of 32px
+        left: 4px; // center with parent of 32px
+        height: 24px;
+        width: 24px;
         background-color: $rightpanel-button-color;
         mask-repeat: no-repeat;
         mask-size: contain;
diff --git a/res/css/views/rooms/_RoomHeader.scss b/res/css/views/rooms/_RoomHeader.scss
index 46993bb644..ba46100ea6 100644
--- a/res/css/views/rooms/_RoomHeader.scss
+++ b/res/css/views/rooms/_RoomHeader.scss
@@ -75,7 +75,6 @@ limitations under the License.
 .mx_RoomHeader_buttons {
     display: flex;
     background-color: $primary-bg-color;
-    padding-right: 5px;
 }
 
 .mx_RoomHeader_info {
@@ -209,20 +208,32 @@ limitations under the License.
 
 .mx_RoomHeader_button {
     position: relative;
-    margin-left: 10px;
+    margin-left: 1px;
+    margin-right: 1px;
     cursor: pointer;
-    height: 20px;
-    width: 20px;
+    height: 32px;
+    width: 32px;
+    border-radius: 100%;
 
     &::before {
         content: '';
         position: absolute;
-        height: 20px;
-        width: 20px;
+        top: 4px; // center with parent of 32px
+        left: 4px; // center with parent of 32px
+        height: 24px;
+        width: 24px;
         background-color: $roomheader-button-color;
         mask-repeat: no-repeat;
         mask-size: contain;
     }
+
+    &:hover {
+        background: rgba($accent-color, 0.1);
+
+        &::before {
+            background-color: $accent-color;
+        }
+    }
 }
 
 .mx_RoomHeader_settingsButton::before {