Iterate to match figma

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

res/css/_common.scss

@@ -652,7 +652,7 @@ input[type=text]:focus, input[type=password]:focus, textarea:focus {
                 max-width: 16px;
             }
 
-            span:last-child { // labels
+            span.mx_IconizedContextMenu_label { // labels
                 padding-left: 14px;
                 width: 100%;
                 flex: 1;

res/css/views/rooms/_RoomTile2.scss

@@ -166,6 +166,9 @@ limitations under the License.
 .mx_RoomTile2_iconBellCrossed::before {
     mask-image: url('$(res)/img/feather-customised/bell-crossed.svg');
 }
+.mx_RoomTile2_iconCheck::before {
+    mask-image: url('$(res)/img/feather-customised/check.svg');
+}
 
 .mx_RoomTile2_contextMenu {
     .mx_RoomTile2_contextMenu_redRow {
@@ -178,6 +181,16 @@ limitations under the License.
         }
     }
 
+    .mx_RoomTile2_contextMenu_activeRow {
+        &.mx_AccessibleButton, .mx_AccessibleButton {
+            color: $accent-color !important; // !important to override styles from context menu
+        }
+
+        .mx_IconizedContextMenu_icon::before {
+            background-color: $accent-color;
+        }
+    }
+
     .mx_IconizedContextMenu_icon {
         position: relative;
         width: 16px;

src/components/structures/UserMenu.tsx

@@ -233,29 +233,29 @@ export default class UserMenu extends React.Component<IProps, IState> {
                         {homeButton}
                         <AccessibleButton onClick={(e) => this.onSettingsOpen(e, USER_NOTIFICATIONS_TAB)}>
                             <span className="mx_IconizedContextMenu_icon mx_UserMenu_iconBell" />
-                            <span>{_t("Notification settings")}</span>
+                            <span className="mx_IconizedContextMenu_label">{_t("Notification settings")}</span>
                         </AccessibleButton>
                         <AccessibleButton onClick={(e) => this.onSettingsOpen(e, USER_SECURITY_TAB)}>
                             <span className="mx_IconizedContextMenu_icon mx_UserMenu_iconLock" />
-                            <span>{_t("Security & privacy")}</span>
+                            <span className="mx_IconizedContextMenu_label">{_t("Security & privacy")}</span>
                         </AccessibleButton>
                         <AccessibleButton onClick={(e) => this.onSettingsOpen(e, null)}>
                             <span className="mx_IconizedContextMenu_icon mx_UserMenu_iconSettings" />
-                            <span>{_t("All settings")}</span>
+                            <span className="mx_IconizedContextMenu_label">{_t("All settings")}</span>
                         </AccessibleButton>
                         <AccessibleButton onClick={this.onShowArchived}>
                             <span className="mx_IconizedContextMenu_icon mx_UserMenu_iconArchive" />
-                            <span>{_t("Archived rooms")}</span>
+                            <span className="mx_IconizedContextMenu_label">{_t("Archived rooms")}</span>
                         </AccessibleButton>
                         <AccessibleButton onClick={this.onProvideFeedback}>
                             <span className="mx_IconizedContextMenu_icon mx_UserMenu_iconMessage" />
-                            <span>{_t("Feedback")}</span>
+                            <span className="mx_IconizedContextMenu_label">{_t("Feedback")}</span>
                         </AccessibleButton>
                     </div>
                     <div className="mx_IconizedContextMenu_optionList mx_UserMenu_contextMenu_redRow">
                         <AccessibleButton onClick={this.onSignOutClick}>
                             <span className="mx_IconizedContextMenu_icon mx_UserMenu_iconSignOut" />
-                            <span>{_t("Sign out")}</span>
+                            <span className="mx_IconizedContextMenu_label">{_t("Sign out")}</span>
                         </AccessibleButton>
                     </div>
                 </div>

src/components/views/rooms/RoomTile2.tsx

@@ -32,7 +32,7 @@ import NotificationBadge, {
     TagSpecificNotificationState
 } from "./NotificationBadge";
 import { _t } from "../../../languageHandler";
-import { ContextMenu, ContextMenuButton } from "../../structures/ContextMenu";
+import { ContextMenu, ContextMenuButton, MenuItemRadio } from "../../structures/ContextMenu";
 import { DefaultTagID, TagID } from "../../../stores/room-list/models";
 import { MessagePreviewStore } from "../../../stores/room-list/MessagePreviewStore";
 import RoomTileIcon from "./RoomTileIcon";
@@ -73,6 +73,34 @@ const contextMenuBelow = (elementRect) => {
     return {left, top, chevronFace};
 };
 
+type State = ALL_MESSAGES_LOUD | ALL_MESSAGES | MENTIONS_ONLY | MUTE;
+
+interface INotifOptionProps {
+    active: boolean;
+    iconClassName: string;
+    label: string;
+    onClick();
+}
+
+const NotifOption: React.FC<INotifOptionProps> = ({active, onClick, iconClassName, label}) => {
+    const classes = classNames({
+        mx_RoomTile2_contextMenu_activeRow: active,
+    });
+
+    let activeIcon;
+    if (active) {
+        activeIcon = <span className="mx_IconizedContextMenu_icon mx_RoomTile2_iconCheck" />;
+    }
+
+    return (
+        <MenuItemRadio className={classes} onClick={onClick} active={active} label={label}>
+            <span className={classNames("mx_IconizedContextMenu_icon", iconClassName)} />
+            <span className="mx_IconizedContextMenu_label">{ label }</span>
+            { activeIcon }
+        </MenuItemRadio>
+    );
+};
+
 export default class RoomTile2 extends React.Component<IProps, IState> {
     private notificationsMenuButtonRef: React.RefObject<HTMLButtonElement> = createRef();
     private generalMenuButtonRef: React.RefObject<HTMLButtonElement> = createRef();
@@ -178,6 +206,8 @@ export default class RoomTile2 extends React.Component<IProps, IState> {
     private renderNotificationsMenu(): React.ReactElement {
         if (this.props.isMinimized) return null; // no menu when minimized
 
+        const state = getRoomNotifsState(this.props.room.roomId);
+
         let contextMenu = null;
         if (this.state.notificationsMenuDisplayed) {
             const elementRect = this.notificationsMenuButtonRef.current.getBoundingClientRect();
@@ -185,29 +215,36 @@ export default class RoomTile2 extends React.Component<IProps, IState> {
                 <ContextMenu {...contextMenuBelow(elementRect)} onFinished={this.onCloseNotificationsMenu}>
                     <div className="mx_IconizedContextMenu mx_IconizedContextMenu_compact mx_RoomTile2_contextMenu">
                         <div className="mx_IconizedContextMenu_optionList">
-                            <AccessibleButton onClick={console.log}>
-                                <span className="mx_IconizedContextMenu_icon mx_RoomTile2_iconBell" />
-                                <span>{_t("All messages")}</span>
-                            </AccessibleButton>
-                            <AccessibleButton onClick={console.log}>
-                                <span className="mx_IconizedContextMenu_icon" />
-                                <span>{_t("Default")}</span>
-                            </AccessibleButton>
-                            <AccessibleButton onClick={console.log}>
-                                <span className="mx_IconizedContextMenu_icon mx_RoomTile2_iconBellDot" />
-                                <span>{_t("Mentions & Keywords")}</span>
-                            </AccessibleButton>
-                            <AccessibleButton onClick={console.log}>
-                                <span className="mx_IconizedContextMenu_icon mx_RoomTile2_iconBellCrossed" />
-                                <span>{_t("None")}</span>
-                            </AccessibleButton>
+                            <NotifOption
+                                label={_t("Use default")}
+                                active={state === ALL_MESSAGES}
+                                iconClassName="mx_RoomTile2_iconBell"
+                                onClick={this._onClickAllNotifs}
+                            />
+                            <NotifOption
+                                label={_t("All messages")}
+                                active={state === ALL_MESSAGES_LOUD}
+                                iconClassName="mx_RoomTile2_iconBellDot"
+                                onClick={this._onClickAlertMe}
+                            />
+                            <NotifOption
+                                label={_t("Mentions & Keywords")}
+                                active={state === MENTIONS_ONLY}
+                                iconClassName=""
+                                onClick={this._onClickMentions}
+                            />
+                            <NotifOption
+                                label={_t("None")}
+                                active={state === MUTE}
+                                iconClassName="mx_RoomTile2_iconBellCrossed"
+                                onClick={this._onClickMute}
+                            />
                         </div>
                     </div>
                 </ContextMenu>
             );
         }
 
-        const state = getRoomNotifsState(this.props.room.roomId);
         const classes = classNames("mx_RoomTile2_notificationsButton", {
             // Show bell icon for the default case too.
             mx_RoomTile2_iconBell: state === ALL_MESSAGES_LOUD || state === ALL_MESSAGES,
@@ -244,17 +281,17 @@ export default class RoomTile2 extends React.Component<IProps, IState> {
                         <div className="mx_IconizedContextMenu_optionList">
                             <AccessibleButton onClick={(e) => this.onTagRoom(e, DefaultTagID.Favourite)}>
                                 <span className="mx_IconizedContextMenu_icon mx_RoomTile2_iconStar" />
-                                <span>{_t("Favourite")}</span>
+                                <span className="mx_IconizedContextMenu_label">{_t("Favourite")}</span>
                             </AccessibleButton>
                             <AccessibleButton onClick={this.onOpenRoomSettings}>
                                 <span className="mx_IconizedContextMenu_icon mx_RoomTile2_iconSettings" />
-                                <span>{_t("Settings")}</span>
+                                <span className="mx_IconizedContextMenu_label">{_t("Settings")}</span>
                             </AccessibleButton>
                         </div>
                         <div className="mx_IconizedContextMenu_optionList mx_RoomTile2_contextMenu_redRow">
                             <AccessibleButton onClick={this.onLeaveRoomClick}>
                                 <span className="mx_IconizedContextMenu_icon mx_RoomTile2_iconSignOut" />
-                                <span>{_t("Leave Room")}</span>
+                                <span className="mx_IconizedContextMenu_label">{_t("Leave Room")}</span>
                             </AccessibleButton>
                         </div>
                     </div>

src/i18n/strings/en_EN.json

@@ -1218,11 +1218,11 @@
     "%(count)s unread messages.|one": "1 unread message.",
     "Unread mentions.": "Unread mentions.",
     "Unread messages.": "Unread messages.",
+    "Use default": "Use default",
     "All messages": "All messages",
     "Mentions & Keywords": "Mentions & Keywords",
     "Notification options": "Notification options",
     "Favourite": "Favourite",
-    "Low Priority": "Low Priority",
     "Leave Room": "Leave Room",
     "Room options": "Room options",
     "Add a topic": "Add a topic",
@@ -1903,6 +1903,7 @@
     "Mentions only": "Mentions only",
     "Leave": "Leave",
     "Forget": "Forget",
+    "Low Priority": "Low Priority",
     "Direct Chat": "Direct Chat",
     "Clear status": "Clear status",
     "Update status": "Update status",