From b5014282a4ed02ca8c186d95a0093f75bba07e11 Mon Sep 17 00:00:00 2001
From: Michael Telatynski <7t3chguy@gmail.com>
Date: Wed, 1 Jul 2020 13:59:50 +0100
Subject: [PATCH] Iterate PR based on Figma design and feedback

Signed-off-by: Michael Telatynski <7t3chguy@gmail.com>
---
 res/css/_common.scss                     | 1 +
 res/css/views/rooms/_RoomTile2.scss      | 5 +++++
 src/components/structures/UserMenu.tsx   | 1 +
 src/components/views/rooms/RoomTile2.tsx | 7 ++++---
 4 files changed, 11 insertions(+), 3 deletions(-)

diff --git a/res/css/_common.scss b/res/css/_common.scss
index 880b01a10e..6e70618142 100644
--- a/res/css/_common.scss
+++ b/res/css/_common.scss
@@ -631,6 +631,7 @@ input[type=text]:focus, input[type=password]:focus, textarea:focus {
         }
 
         .mx_AccessibleButton {
+            // pad the inside of the button so that the hover background is padded too
             padding-top: 12px;
             padding-bottom: 12px;
             text-decoration: none;
diff --git a/res/css/views/rooms/_RoomTile2.scss b/res/css/views/rooms/_RoomTile2.scss
index 8933c73045..44c5b6ee17 100644
--- a/res/css/views/rooms/_RoomTile2.scss
+++ b/res/css/views/rooms/_RoomTile2.scss
@@ -92,6 +92,7 @@ limitations under the License.
         justify-content: center;
     }
 
+    // The context menu buttons are hidden by default
     .mx_RoomTile2_menuButton,
     .mx_RoomTile2_notificationsButton {
         width: 20px;
@@ -114,6 +115,7 @@ limitations under the License.
         }
     }
 
+    // If the room has an overriden notification setting then we always show the notifications menu button
     .mx_RoomTile2_notificationsButton.mx_RoomTile2_notificationsButton_show {
         display: block;
     }
@@ -166,6 +168,9 @@ limitations under the License.
 .mx_RoomTile2_iconBellCrossed::before {
     mask-image: url('$(res)/img/feather-customised/bell-crossed.svg');
 }
+.mx_RoomTile2_iconBellMentions::before {
+    mask-image: url('$(res)/img/feather-customised/bell-mentions.custom.svg');
+}
 .mx_RoomTile2_iconCheck::before {
     mask-image: url('$(res)/img/feather-customised/check.svg');
 }
diff --git a/src/components/structures/UserMenu.tsx b/src/components/structures/UserMenu.tsx
index 4a45162902..d6771f3011 100644
--- a/src/components/structures/UserMenu.tsx
+++ b/src/components/structures/UserMenu.tsx
@@ -202,6 +202,7 @@ export default class UserMenu extends React.Component<IProps, IState> {
         return (
             <ContextMenu
                 chevronFace="none"
+                // -20 to overlap the context menu by just over the width of the `...` icon and make it look connected
                 left={elementRect.width + elementRect.left - 20}
                 top={elementRect.top + elementRect.height}
                 onFinished={this.onCloseMenu}
diff --git a/src/components/views/rooms/RoomTile2.tsx b/src/components/views/rooms/RoomTile2.tsx
index aad9b00860..d518c74aa7 100644
--- a/src/components/views/rooms/RoomTile2.tsx
+++ b/src/components/views/rooms/RoomTile2.tsx
@@ -70,7 +70,7 @@ interface IState {
 
 const contextMenuBelow = (elementRect) => {
     const left = elementRect.left + window.pageXOffset - 6;
-    let top = elementRect.bottom + window.pageYOffset + 21;
+    let top = elementRect.bottom + window.pageYOffset + 17;
     const chevronFace = "none";
     return {left, top, chevronFace};
 };
@@ -209,10 +209,11 @@ export default class RoomTile2 extends React.Component<IProps, IState> {
         if (MatrixClientPeg.get().isGuest()) return;
 
         try {
-            // TODO add local echo
+            // TODO add local echo - https://github.com/vector-im/riot-web/issues/14280
             await setRoomNotifsState(this.props.room.roomId, newState);
         } catch (error) {
             // TODO: some form of error notification to the user to inform them that their state change failed.
+            // https://github.com/vector-im/riot-web/issues/14281
             console.error(error);
         }
 
@@ -254,7 +255,7 @@ export default class RoomTile2 extends React.Component<IProps, IState> {
                             <NotifOption
                                 label={_t("Mentions & Keywords")}
                                 active={state === MENTIONS_ONLY}
-                                iconClassName=""
+                                iconClassName="mx_RoomTile2_iconBellMentions"
                                 onClick={this.onClickMentions}
                             />
                             <NotifOption