Change user avatar to a home icon

res/css/structures/_TagPanel.scss

@@ -75,6 +75,7 @@ limitations under the License.
 .mx_TagPanel .mx_TagTile {
     // opacity: 0.5;
     position: relative;
+    padding: 3px;
 }
 .mx_TagPanel .mx_TagTile:focus,
 .mx_TagPanel .mx_TagTile:hover,
@@ -82,6 +83,45 @@ limitations under the License.
     // opacity: 1;
 }
 
+.mx_TagPanel .mx_TagTile.mx_TagTile_selected_prototype {
+    background-color: $primary-bg-color;
+    border-radius: 6px;
+}
+
+.mx_TagTile_selected_prototype {
+    .mx_TagTile_homeIcon::before {
+        background-color: $primary-fg-color; // dark-on-light
+    }
+}
+
+.mx_TagTile:not(.mx_TagTile_selected_prototype) .mx_TagTile_homeIcon {
+    background-color: $icon-button-color; // XXX: Variable abuse
+    border-radius: 48px;
+
+    &::before {
+        background-color: $primary-bg-color; // light-on-grey
+    }
+}
+
+.mx_TagTile_homeIcon {
+    width: 32px;
+    height: 32px;
+    position: relative;
+
+    &::before {
+        mask-image: url('$(res)/img/element-icons/home.svg');
+        mask-position: center;
+        mask-repeat: no-repeat;
+        width: 21px;
+        height: 21px;
+        content: '';
+        display: inline-block;
+        position: absolute;
+        top: calc(50% - 10.5px);
+        left: calc(50% - 10.5px);
+    }
+}
+
 .mx_TagPanel .mx_TagTile_plus {
     margin-bottom: 12px;
     height: 32px;
@@ -116,10 +156,6 @@ limitations under the License.
     border-radius: 0 3px 3px 0;
 }
 
-.mx_TagPanel .mx_TagTile.mx_TagTile_large.mx_TagTile_selected::before {
-    left: -10px;
-}
-
 .mx_TagPanel .mx_TagTile.mx_AccessibleButton:focus {
     filter: none;
 }

res/img/element-icons/home.svg

@@ -0,0 +1,3 @@
+<svg width="18" height="18" viewBox="0 0 18 18" fill="none" xmlns="http://www.w3.org/2000/svg">
+<path d="M2.33301 14.9494V7.28325C2.33301 6.8921 2.50477 6.52067 2.80281 6.26733L8.0282 1.82575C8.58834 1.34963 9.411 1.34963 9.97115 1.82575L15.1965 6.26734C15.4946 6.52067 15.6663 6.89065 15.6663 7.28181V14.9756C15.6663 16.0899 14.7592 16.9891 13.6449 16.9792C11.3214 16.9585 7.43567 16.9341 4.38152 16.9659C3.25744 16.9776 2.33301 16.0735 2.33301 14.9494Z" fill="white"/>
+</svg>

src/components/views/elements/TagTile.js

@@ -141,9 +141,11 @@ export default createReactClass({
             profile.avatarUrl, avatarHeight, avatarHeight, "crop",
         ) : null;
 
+        const isPrototype = SettingsStore.getValue("feature_communities_v2_prototypes");
         const className = classNames({
             mx_TagTile: true,
-            mx_TagTile_selected: this.props.selected,
+            mx_TagTile_selected: this.props.selected && !isPrototype,
+            mx_TagTile_selected_prototype: this.props.selected && isPrototype,
         });
 
         const badge = TagOrderStore.getGroupBadge(this.props.tag);

src/components/views/elements/UserTagTile.tsx

@@ -16,16 +16,14 @@ limitations under the License.
 
 import React from "react";
 import defaultDispatcher from "../../../dispatcher/dispatcher";
-import { OwnProfileStore } from "../../../stores/OwnProfileStore";
-import { UPDATE_EVENT } from "../../../stores/AsyncStore";
 import * as fbEmitter from "fbemitter";
 import TagOrderStore from "../../../stores/TagOrderStore";
 import AccessibleTooltipButton from "./AccessibleTooltipButton";
-import BaseAvatar from "../avatars/BaseAvatar";
-import { MatrixClientPeg } from "../../../MatrixClientPeg";
 import classNames from "classnames";
+import { _t } from "../../../languageHandler";
 
-interface IProps{}
+interface IProps {
+}
 
 interface IState {
     selected: boolean;
@@ -43,18 +41,13 @@ export default class UserTagTile extends React.PureComponent<IProps, IState> {
     }
 
     public componentDidMount() {
-        OwnProfileStore.instance.on(UPDATE_EVENT, this.onProfileUpdate);
         this.tagStoreRef = TagOrderStore.addListener(this.onTagStoreUpdate);
     }
 
     public componentWillUnmount() {
-        OwnProfileStore.instance.off(UPDATE_EVENT, this.onProfileUpdate);
+        this.tagStoreRef.remove();
     }
 
-    private onProfileUpdate = () => {
-        this.forceUpdate();
-    };
-
     private onTagStoreUpdate = () => {
         const selected = TagOrderStore.getSelectedTags().length === 0;
         this.setState({selected});
@@ -71,27 +64,19 @@ export default class UserTagTile extends React.PureComponent<IProps, IState> {
     public render() {
         // XXX: We reuse TagTile classes for ease of demonstration - we should probably generify
         // TagTile instead if we continue to use this component.
-        const avatarHeight = 36;
-        const name = OwnProfileStore.instance.displayName || MatrixClientPeg.get().getUserId();
         const className = classNames({
             mx_TagTile: true,
-            mx_TagTile_selected: this.state.selected,
-            mx_TagTile_large: true,
+            mx_TagTile_selected_prototype: this.state.selected,
+            mx_TagTile_home: true,
         });
         return (
             <AccessibleTooltipButton
                 className={className}
                 onClick={this.onTileClick}
-                title={name}
+                title={_t("Home")}
             >
                 <div className="mx_TagTile_avatar">
-                    <BaseAvatar
-                        name={name}
-                        idName={MatrixClientPeg.get().getUserId()}
-                        url={OwnProfileStore.instance.getHttpAvatarUrl(avatarHeight)}
-                        width={avatarHeight}
-                        height={avatarHeight}
-                    />
+                    <div className="mx_TagTile_homeIcon" />
                 </div>
             </AccessibleTooltipButton>
         );