Iterate to match design on Zeplin

res/css/structures/_CustomRoomTagPanel.scss

@@ -26,11 +26,15 @@ limitations under the License.
 
 .mx_CustomRoomTagPanel_scroller {
     max-height: inherit;
+    display: flex;
+    flex-direction: column;
+    align-items: center;
 }
 
 .mx_CustomRoomTagPanel .mx_AccessibleButton {
     margin: 9px auto;
     width: 40px;
+    position: relative;
 }
 
 .mx_CustomRoomTagPanel .mx_BaseAvatar_image {
@@ -39,7 +43,13 @@ limitations under the License.
     height: 40px;
 }
 
-.mx_CustomRoomTagPanel .mx_AccessibleButton.CustomRoomTagPanel_tileSelected .mx_BaseAvatar_image {
-    border: 3px solid $warning-color;
-    border-radius: 40px;
+.mx_CustomRoomTagPanel .mx_AccessibleButton.CustomRoomTagPanel_tileSelected::before {
+    content: '';
+    height: 56px;
+    background-color: $accent-color-alt;
+    width: 5px;
+    position: absolute;
+    left: -15px;
+    border-radius: 0 3px 3px 0;
+    top: -8px; // (56 - 40)/2
 }

res/css/structures/_TagPanel.scss

@@ -87,7 +87,7 @@ limitations under the License.
     height: 40px;
     width: 40px;
     border-radius: 20px;
-    background-color: $button-primary-fg-color;
+    background-color: $tagpanel-button-color;
     opacity: 0.11;
     position: relative;
     /* overwrite mx_RoleButton inline-block */
@@ -96,7 +96,7 @@ limitations under the License.
     &::before {
         mask-image: url('$(res)/img/feather-customised/plus.svg');
         mask-position: center;
-        background-color: $tagpanel-bg-color;
+        background-color: $button-primary-fg-color;
         mask-repeat: no-repeat;
         content: '';
         position: absolute;

src/components/structures/CustomRoomTagPanel.js

@@ -61,30 +61,13 @@ class CustomRoomTagPanel extends React.Component {
 }
 
 class CustomRoomTagTile extends React.Component {
-    constructor(props) {
-        super(props);
-        this.state = {hover: false};
-        this.onClick = this.onClick.bind(this);
-        this.onMouseOut = this.onMouseOut.bind(this);
-        this.onMouseOver = this.onMouseOver.bind(this);
-    }
-
-    onMouseOver() {
-        this.setState({hover: true});
-    }
-
-    onMouseOut() {
-        this.setState({hover: false});
-    }
-
-    onClick() {
+    onClick = () => {
         dis.dispatch({action: 'select_custom_room_tag', tag: this.props.tag.name});
-    }
+    };
 
     render() {
         const BaseAvatar = sdk.getComponent('avatars.BaseAvatar');
-        const AccessibleButton = sdk.getComponent('elements.AccessibleButton');
-        const Tooltip = sdk.getComponent('elements.Tooltip');
+        const AccessibleTooltipButton = sdk.getComponent('elements.AccessibleTooltipButton');
 
         const tag = this.props.tag;
         const avatarHeight = 40;
@@ -102,12 +85,9 @@ class CustomRoomTagTile extends React.Component {
             badgeElement = (<div className={badgeClasses}>{FormattingUtils.formatCount(badge.count)}</div>);
         }
 
-        const tip = (this.state.hover ?
-            <Tooltip className="mx_TagTile_tooltip" label={name} /> :
-            <div />);
         return (
-            <AccessibleButton className={className} onClick={this.onClick}>
-                <div className="mx_TagTile_avatar" onMouseOver={this.onMouseOver} onMouseOut={this.onMouseOut}>
+            <AccessibleTooltipButton className={className} onClick={this.onClick} title={name}>
+                <div className="mx_TagTile_avatar">
                     <BaseAvatar
                         name={tag.avatarLetter}
                         idName={name}
@@ -115,9 +95,8 @@ class CustomRoomTagTile extends React.Component {
                         height={avatarHeight}
                     />
                     { badgeElement }
-                    { tip }
                 </div>
-            </AccessibleButton>
+            </AccessibleTooltipButton>
         );
     }
 }

src/components/structures/TagPanel.js

@@ -104,7 +104,7 @@ const TagPanel = createReactClass({
     render() {
         const DNDTagTile = sdk.getComponent('elements.DNDTagTile');
         const AccessibleButton = sdk.getComponent('elements.AccessibleButton');
-        const AccessibleTooltipButton = sdk.getComponent('elements.AccessibleTooltipButton');
+        const ActionButton = sdk.getComponent('elements.ActionButton');
         const TintableSvg = sdk.getComponent('elements.TintableSvg');
         const GeminiScrollbarWrapper = sdk.getComponent("elements.GeminiScrollbarWrapper");
 
@@ -155,7 +155,13 @@ const TagPanel = createReactClass({
                                 ref={provided.innerRef}
                             >
                                 { tags }
-                                <div><AccessibleTooltipButton title={_t("Communities")} className="mx_TagTile mx_TagTile_plus" /></div>
+                                <div>
+                                    <ActionButton
+                                        tooltip
+                                        label={_t("Communities")}
+                                        action="toggle_my_groups"
+                                        className="mx_TagTile mx_TagTile_plus" />
+                                </div>
                                 { provided.placeholder }
                             </div>
                     ) }

src/components/views/context_menus/TopLeftMenu.js

@@ -129,6 +129,7 @@ export class TopLeftMenu extends React.Component {
     }
 
     openHelp() {
+        this.closeMenu();
         const RedesignFeedbackDialog = sdk.getComponent("views.dialogs.RedesignFeedbackDialog");
         Modal.createTrackedDialog('Report bugs & give feedback', '', RedesignFeedbackDialog);
     }