From 4a4a8cd6110f4af5eb4795d2efd42a71a4e63b8e Mon Sep 17 00:00:00 2001
From: Michael Telatynski <7t3chguy@gmail.com>
Date: Tue, 8 Sep 2020 15:39:58 +0100
Subject: [PATCH] styling and fix `i` button behaviour

---
 res/css/structures/_RightPanel.scss            | 18 ++++++++----------
 .../views/right_panel/RoomHeaderButtons.tsx    | 11 ++++++++---
 2 files changed, 16 insertions(+), 13 deletions(-)

diff --git a/res/css/structures/_RightPanel.scss b/res/css/structures/_RightPanel.scss
index b9b765db56..5bf0d953f3 100644
--- a/res/css/structures/_RightPanel.scss
+++ b/res/css/structures/_RightPanel.scss
@@ -68,6 +68,14 @@ limitations under the License.
         mask-repeat: no-repeat;
         mask-size: contain;
     }
+
+    &:hover {
+        background: rgba($accent-color, 0.1);
+
+        &::before {
+            background-color: $accent-color;
+        }
+    }
 }
 
 .mx_RightPanel_notifsButton::before {
@@ -90,16 +98,6 @@ limitations under the License.
     mask-position: center;
 }
 
-.mx_RightPanel_headerButton {
-    &:hover {
-        background: rgba($accent-color, 0.1);
-
-        &::before {
-            background-color: $accent-color;
-        }
-    }
-}
-
 .mx_RightPanel_headerButton_highlight {
     &::before {
         background-color: $accent-color !important;
diff --git a/src/components/views/right_panel/RoomHeaderButtons.tsx b/src/components/views/right_panel/RoomHeaderButtons.tsx
index e19a440005..fa97568fba 100644
--- a/src/components/views/right_panel/RoomHeaderButtons.tsx
+++ b/src/components/views/right_panel/RoomHeaderButtons.tsx
@@ -19,7 +19,7 @@ limitations under the License.
 */
 
 import React from 'react';
-import { _t } from '../../../languageHandler';
+import {_t} from '../../../languageHandler';
 import HeaderButton from './HeaderButton';
 import HeaderButtons, {HeaderKind} from './HeaderButtons';
 import {RightPanelPhases} from "../../../stores/RightPanelStorePhases";
@@ -59,8 +59,13 @@ export default class RoomHeaderButtons extends HeaderButtons {
 
     // TODO make it restore whatever widget they were on last
     private onRoomSummaryClicked = () => {
-        // This toggles for us, if needed
-        this.setPhase(RightPanelPhases.RoomSummary);
+        if (this.state.phase === RightPanelPhases.Widget) {
+            // Close the panel
+            this.setPhase(RightPanelPhases.Widget);
+        } else {
+            // This toggles for us, if needed
+            this.setPhase(RightPanelPhases.RoomSummary);
+        }
     };
 
     private onNotificationsClicked = () => {