Doing the state change via onClick events rather than radio buttons, as they were causeing untraceable react errros for some reason

src/components/views/rooms/NotificationStateContextMenu.js

@@ -18,6 +18,7 @@ limitations under the License.
 
 var q = require("q");
 var React = require('react');
+var classNames = require('classnames');
 var MatrixClientPeg = require('matrix-react-sdk/lib/MatrixClientPeg');
 
 module.exports = React.createClass({
@@ -67,31 +68,52 @@ module.exports = React.createClass({
     _onToggle: function(ev) {
         switch (ev.target.value) {
             case "all":
-                if (this.props.onFinished) {
+                this._save(false);
-                    this._save(false);
-                    this.props.onFinished();
-                }
                 break;
             case "mute":
-                if (this.props.onFinished) {
+                this._save(true);
-                    this._save(true);
-                    this.props.onFinished();
-                }
                 break;
         }
+
+        if (this.props.onFinished) {
+            this.props.onFinished();
+        };
+    },
+
+    _onClickAllNotifs: function() {
+        this._save(false);
+        if (this.props.onFinished) {
+            this.props.onFinished();
+        };
+    },
+
+    _onClickMute: function() {
+        this._save(true);
+        if (this.props.onFinished) {
+            this.props.onFinished();
+        };
     },
 
     render: function() {
         var cli = MatrixClientPeg.get();
+
+        var allNotifsClasses = classNames({
+            'mx_ContextualMenu_field': true,
+            'mx_ContextualMenu_fieldSet': !this.state.areNotifsMuted,
+        });
+
+        var muteNotifsClasses = classNames({
+            'mx_ContextualMenu_field': true,
+            'mx_ContextualMenu_fieldSet': this.state.areNotifsMuted,
+        });
+
         return (
             <div>
-                <div className="mx_ContextualMenu_field" >
+                <div className={ allNotifsClasses } onClick={this._onClickAllNotifs} >
-                    <input disabled={cli.isGuest()} type="radio" name="notification_state" value="all" onChange={this._onToggle} checked={!this.state.areNotifsMuted}/>
+                    { !this.state.areNotifsMuted ? "ON" : "OFF" } - All notifications
-                    All notifications
                 </div>
-                <div className="mx_ContextualMenu_field" >
+                <div className={ muteNotifsClasses } onClick={this._onClickMute} >
-                    <input disabled={cli.isGuest()} type="radio" name="notification_state" value="mute" onChange={this._onToggle} checked={this.state.areNotifsMuted}/>
+                    { this.state.areNotifsMuted ? "ON" : "OFF" } - Mute
-                    Mute
                 </div>
             </div>
         );

src/skins/vector/css/common.css

@@ -103,6 +103,7 @@ input[type=text]:focus, textarea:focus {
     position: fixed;
     z-index: 2001;
     padding: 6px;
+	font-size: 14px;
 }
 
 .mx_ContextualMenu_chevron_right {
@@ -156,6 +157,10 @@ input[type=text]:focus, textarea:focus {
     cursor: pointer;
 }
 
+.mx_ContextualMenu_field.mx_ContextualMenu_fieldSet {
+    font-weight: bold;
+}
+
 .mx_ContextualMenu_spinner {
     display: block;
     margin: 0 auto;