tidy up IconizedContextMenu CSS

res/css/structures/_UserMenu.scss

@@ -89,15 +89,10 @@ limitations under the License.
 .mx_UserMenu_contextMenu {
     width: 247px;
 
-    .mx_UserMenu_contextMenu_redRow {
+    &.mx_IconizedContextMenu .mx_IconizedContextMenu_optionList_red {
         .mx_AccessibleButton {
             padding-top: 16px;
             padding-bottom: 16px;
-            color: $warning-color !important; // !important to override styles from context menu
-        }
-
-        .mx_IconizedContextMenu_icon::before {
-            background-color: $warning-color;
         }
     }
 

res/css/views/context_menus/_IconizedContextMenu.scss

@@ -94,9 +94,55 @@ limitations under the License.
         }
     }
 
+    .mx_IconizedContextMenu_icon {
+        position: relative;
+        width: 16px;
+        height: 16px;
+
+        &::before {
+            content: '';
+            width: 16px;
+            height: 16px;
+            position: absolute;
+            mask-position: center;
+            mask-size: contain;
+            mask-repeat: no-repeat;
+            background: $primary-fg-color;
+        }
+    }
+
+    .mx_IconizedContextMenu_optionList_red {
+        .mx_AccessibleButton {
+            color: $warning-color !important;
+        }
+
+        .mx_IconizedContextMenu_icon::before {
+            background-color: $warning-color;
+        }
+    }
+
+    .mx_IconizedContextMenu_active {
+        &.mx_AccessibleButton, .mx_AccessibleButton {
+            color: $accent-color !important;
+        }
+
+        .mx_IconizedContextMenu_icon::before {
+            background-color: $accent-color;
+        }
+    }
+
     &.mx_IconizedContextMenu_compact {
         .mx_IconizedContextMenu_optionList > * {
             padding: 8px 16px 8px 11px;
         }
     }
+
+    .mx_IconizedContextMenu_checked {
+        margin-left: 16px;
+        margin-right: -5px;
+
+        &::before {
+            mask-image: url('$(res)/img/element-icons/roomlist/checkmark.svg');
+        }
+    }
 }

res/css/views/rooms/_RoomTile.scss

@@ -175,48 +175,8 @@ limitations under the License.
 .mx_RoomTile_iconBellMentions::before {
     mask-image: url('$(res)/img/element-icons/roomlist/notifications-dm.svg');
 }
-.mx_RoomTile_iconCheck::before {
-    mask-image: url('$(res)/img/element-icons/roomlist/checkmark.svg');
-}
 
 .mx_RoomTile_contextMenu {
-    .mx_RoomTile_contextMenu_redRow {
-        .mx_AccessibleButton {
-            color: $warning-color !important; // !important to override styles from context menu
-        }
-
-        .mx_IconizedContextMenu_icon::before {
-            background-color: $warning-color;
-        }
-    }
-
-    .mx_RoomTile_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;
-        height: 16px;
-
-        &::before {
-            content: '';
-            width: 16px;
-            height: 16px;
-            position: absolute;
-            mask-position: center;
-            mask-size: contain;
-            mask-repeat: no-repeat;
-            background: $primary-fg-color;
-        }
-    }
-
     .mx_RoomTile_iconStar::before {
         mask-image: url('$(res)/img/element-icons/roomlist/favorite.svg');
     }

src/components/views/context_menus/IconizedContextMenu.tsx

@@ -22,7 +22,7 @@ import {
     ContextMenu,
     IProps as IContextMenuProps,
     MenuItem,
-    MenuItemCheckbox,
+    MenuItemCheckbox, MenuItemRadio,
 } from "../../structures/ContextMenu";
 
 interface IProps extends IContextMenuProps {
@@ -33,6 +33,7 @@ interface IProps extends IContextMenuProps {
 interface IOptionListProps {
     first?: boolean;
     red?: boolean;
+    className?: string;
 }
 
 interface IOptionProps extends React.ComponentProps<typeof MenuItem> {
@@ -43,29 +44,63 @@ interface ICheckboxProps extends React.ComponentProps<typeof MenuItemCheckbox> {
     iconClassName: string;
 }
 
-export const IconizedContextMenuCheckbox: React.FC<ICheckboxProps> = ({label, onClick, iconClassName, checked}) => {
-    return <MenuItemCheckbox
-        className={checked ? "mx_RoomTile_contextMenu_activeRow" : ""}
-        onClick={onClick}
-        active={checked}
+interface IRadioProps extends React.ComponentProps<typeof MenuItemRadio> {
+    iconClassName: string;
+}
+
+export const IconizedContextMenuRadio: React.FC<IRadioProps> = ({
+    label,
+    iconClassName,
+    active,
+    className,
+    ...props
+}) => {
+    return <MenuItemRadio
+        {...props}
+        className={classNames(className, {
+            mx_IconizedContextMenu_active: active,
+        })}
+        active={active}
         label={label}
     >
         <span className={classNames("mx_IconizedContextMenu_icon", iconClassName)} />
         <span className="mx_IconizedContextMenu_label">{label}</span>
+        {active && <span className="mx_IconizedContextMenu_icon mx_IconizedContextMenu_checked" />}
+    </MenuItemRadio>;
+};
+
+export const IconizedContextMenuCheckbox: React.FC<ICheckboxProps> = ({
+    label,
+    iconClassName,
+    active,
+    className,
+    ...props
+}) => {
+    return <MenuItemCheckbox
+        {...props}
+        className={classNames(className, {
+            mx_IconizedContextMenu_active: active,
+        })}
+        active={active}
+        label={label}
+    >
+        <span className={classNames("mx_IconizedContextMenu_icon", iconClassName)} />
+        <span className="mx_IconizedContextMenu_label">{label}</span>
+        {active && <span className="mx_IconizedContextMenu_icon mx_IconizedContextMenu_checked" />}
     </MenuItemCheckbox>;
 };
 
-export const IconizedContextMenuOption: React.FC<IOptionProps> = ({label, onClick, iconClassName}) => {
-    return <MenuItem label={label} onClick={onClick}>
+export const IconizedContextMenuOption: React.FC<IOptionProps> = ({label, iconClassName, ...props}) => {
+    return <MenuItem {...props} label={label}>
         <span className={classNames("mx_IconizedContextMenu_icon", iconClassName)} />
         <span className="mx_IconizedContextMenu_label">{label}</span>
     </MenuItem>;
 };
 
-export const IconizedContextMenuOptionList: React.FC<IOptionListProps> = ({first, red, children}) => {
-    const classes = classNames("mx_IconizedContextMenu_optionList", {
+export const IconizedContextMenuOptionList: React.FC<IOptionListProps> = ({first, red, className, children}) => {
+    const classes = classNames("mx_IconizedContextMenu_optionList", className, {
         mx_IconizedContextMenu_optionList_notFirst: !first,
-        mx_UserMenu_contextMenu_redRow: red,
+        mx_IconizedContextMenu_optionList_red: red,
     });
 
     return <div className={classes}>

src/components/views/rooms/RoomTile.tsx

@@ -47,7 +47,7 @@ import { PROPERTY_UPDATED } from "../../../stores/local-echo/GenericEchoChamber"
 import IconizedContextMenu, {
     IconizedContextMenuCheckbox,
     IconizedContextMenuOption,
-    IconizedContextMenuOptionList
+    IconizedContextMenuOptionList, IconizedContextMenuRadio
 } from "../context_menus/IconizedContextMenu";
 
 interface IProps {
@@ -76,32 +76,6 @@ const contextMenuBelow = (elementRect: PartialDOMRect) => {
     return {left, top, chevronFace};
 };
 
-interface INotifOptionProps {
-    active: boolean;
-    iconClassName: string;
-    label: string;
-    onClick(ev: ButtonEvent);
-}
-
-const NotifOption: React.FC<INotifOptionProps> = ({active, onClick, iconClassName, label}) => {
-    const classes = classNames({
-        mx_RoomTile_contextMenu_activeRow: active,
-    });
-
-    let activeIcon;
-    if (active) {
-        activeIcon = <span className="mx_IconizedContextMenu_icon mx_RoomTile_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 RoomTile extends React.PureComponent<IProps, IState> {
     private dispatcherRef: string;
     private roomTileRef = createRef<HTMLDivElement>();
@@ -340,25 +314,25 @@ export default class RoomTile extends React.PureComponent<IProps, IState> {
                 compact
             >
                 <IconizedContextMenuOptionList first>
-                    <NotifOption
+                    <IconizedContextMenuRadio
                         label={_t("Use default")}
                         active={state === ALL_MESSAGES}
                         iconClassName="mx_RoomTile_iconBell"
                         onClick={this.onClickAllNotifs}
                     />
-                    <NotifOption
+                    <IconizedContextMenuRadio
                         label={_t("All messages")}
                         active={state === ALL_MESSAGES_LOUD}
                         iconClassName="mx_RoomTile_iconBellDot"
                         onClick={this.onClickAlertMe}
                     />
-                    <NotifOption
+                    <IconizedContextMenuRadio
                         label={_t("Mentions & Keywords")}
                         active={state === MENTIONS_ONLY}
                         iconClassName="mx_RoomTile_iconBellMentions"
                         onClick={this.onClickMentions}
                     />
-                    <NotifOption
+                    <IconizedContextMenuRadio
                         label={_t("None")}
                         active={state === MUTE}
                         iconClassName="mx_RoomTile_iconBellCrossed"