Iterate PR based on Figma design and feedback

Signed-off-by: Michael Telatynski <7t3chguy@gmail.com>

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;

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');
 }

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}

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