WIP

res/css/structures/_RightPanel.scss

@@ -29,7 +29,7 @@ limitations under the License.
     border-bottom: 1px solid $primary-hairline-color;
     margin-right: 20px;
 
-    flex: 0 0 70px;
+    flex: 0 0 52px;
 }
 
 /** Fixme - factor this out with the main header **/
@@ -39,7 +39,8 @@ limitations under the License.
     display: flex;
     width: 100%;
     background-color: $primary-bg-color;
-    margin-left: 0px;
+    padding: 0 9px;
+    align-items: center;
 }
 
 .mx_RightPanel_headerButton {
@@ -50,26 +51,27 @@ limitations under the License.
     padding-right: 5px;
     text-align: center;
     position: relative;
+    border-bottom: 2px solid transparent;
 }
 
 .mx_RightPanel_headerButton object {
     pointer-events: none;
-    padding-bottom: 3px;
 }
 
 .mx_RightPanel_headerButton_highlight {
-    width: 25px;
-    height: 5px;
-    border-radius: 5px;
-    background-color: $accent-color;
-    opacity: 0.2;
+    border-color: $accent-color;
 }
 
 .mx_RightPanel_headerButton_badge {
-    font-size: 11px;
-    color: $accent-color;
+    font-size: 8px;
+    border-radius: 8px;
+    color: $accent-fg-color;
+    background-color: $accent-color;
     font-weight: bold;
-    padding-bottom: 2px;
+    position: absolute;
+    top: -4px;
+    left: 20px;
+    padding: 2px 4px;
 }
 
 .mx_RightPanel_collapsebutton {

src/components/structures/RightPanel.js

@@ -49,19 +49,21 @@ class HeaderButton extends React.Component {
         const TintableSvg = sdk.getComponent("elements.TintableSvg");
         const AccessibleButton = sdk.getComponent("elements.AccessibleButton");
 
+        const classes = classNames({
+            mx_RightPanel_headerButton: true,
+            mx_RightPanel_headerButton_highlight: this.props.isHighlighted,
+        })
+
         return <AccessibleButton
             aria-label={this.props.title}
             aria-expanded={this.props.isHighlighted}
             title={this.props.title}
-            className="mx_RightPanel_headerButton"
+            className={classes}
             onClick={this.onClick} >
-
                 <div className="mx_RightPanel_headerButton_badge">
                     { this.props.badge ? this.props.badge : <span>&nbsp;</span> }
                 </div>
                 <TintableSvg src={this.props.iconSrc} width="25" height="25" />
-                { this.props.isHighlighted ? <div className="mx_RightPanel_headerButton_highlight" /> : <div /> }
-
             </AccessibleButton>;
     }
 }