styling and fix i button behaviour

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;

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 = () => {