diff --git a/src/components/structures/FilePanel.js b/src/components/structures/FilePanel.js
index 6696f3cc0f..23feb4cf30 100644
--- a/src/components/structures/FilePanel.js
+++ b/src/components/structures/FilePanel.js
@@ -116,7 +116,6 @@ const FilePanel = React.createClass({
                     timelineSet={this.state.timelineSet}
                     showUrlPreview = {false}
                     tileShape="file_grid"
-                    opacity={this.props.opacity}
                     empty={_t('There are no visible files in this room')}
                 />
             );
diff --git a/src/components/structures/GroupView.js b/src/components/structures/GroupView.js
index 8b894e623a..314a36e486 100644
--- a/src/components/structures/GroupView.js
+++ b/src/components/structures/GroupView.js
@@ -482,8 +482,8 @@ export default React.createClass({
             profileForm: Object.assign({}, this.state.summary.profile),
         });
         dis.dispatch({
-            action: 'ui_opacity',
-            sideOpacity: 0.3,
+            action: 'panel_disable',
+            sideDisabled: true,
         });
     },
 
@@ -492,7 +492,7 @@ export default React.createClass({
             editing: false,
             profileForm: null,
         });
-        dis.dispatch({action: 'ui_opacity'});
+        dis.dispatch({action: 'panel_disable'});
     },
 
     _onNameChange: function(value) {
@@ -549,7 +549,7 @@ export default React.createClass({
                 editing: false,
                 summary: null,
             });
-            dis.dispatch({action: 'ui_opacity'});
+            dis.dispatch({action: 'panel_disable'});
             this._initGroupStore(this.props.groupId);
         }).catch((e) => {
             this.setState({
diff --git a/src/components/structures/LoggedInView.js b/src/components/structures/LoggedInView.js
index 7e6fc05599..5d1d47c5b2 100644
--- a/src/components/structures/LoggedInView.js
+++ b/src/components/structures/LoggedInView.js
@@ -240,11 +240,13 @@ export default React.createClass({
                         oobData={this.props.roomOobData}
                         eventPixelOffset={this.props.initialEventPixelOffset}
                         key={this.props.currentRoomId || 'roomview'}
-                        opacity={this.props.middleOpacity}
+                        disabled={this.props.middleDisabled}
                         collapsedRhs={this.props.collapseRhs}
                         ConferenceHandler={this.props.ConferenceHandler}
                     />;
-                if (!this.props.collapseRhs) right_panel = <RightPanel roomId={this.props.currentRoomId} opacity={this.props.rightOpacity} />;
+                if (!this.props.collapseRhs) {
+                    right_panel = <RightPanel roomId={this.props.currentRoomId} disabled={this.props.rightDisabled} />;
+                }
                 break;
 
             case PageTypes.UserSettings:
@@ -254,7 +256,7 @@ export default React.createClass({
                     referralBaseUrl={this.props.config.referralBaseUrl}
                     teamToken={this.props.teamToken}
                 />;
-                if (!this.props.collapseRhs) right_panel = <RightPanel opacity={this.props.rightOpacity} />;
+                if (!this.props.collapseRhs) right_panel = <RightPanel disabled={this.props.rightDisabled} />;
                 break;
 
             case PageTypes.MyGroups:
@@ -266,7 +268,7 @@ export default React.createClass({
                     onRoomCreated={this.props.onRoomCreated}
                     collapsedRhs={this.props.collapseRhs}
                 />;
-                if (!this.props.collapseRhs) right_panel = <RightPanel opacity={this.props.rightOpacity} />;
+                if (!this.props.collapseRhs) right_panel = <RightPanel disabled={this.props.rightDisabled} />;
                 break;
 
             case PageTypes.RoomDirectory:
@@ -294,14 +296,14 @@ export default React.createClass({
 
             case PageTypes.UserView:
                 page_element = null; // deliberately null for now
-                right_panel = <RightPanel opacity={this.props.rightOpacity} />;
+                right_panel = <RightPanel disabled={this.props.rightDisabled} />;
                 break;
             case PageTypes.GroupView:
                 page_element = <GroupView
                     groupId={this.props.currentGroupId}
                     collapsedRhs={this.props.collapseRhs}
                 />;
-                if (!this.props.collapseRhs) right_panel = <RightPanel groupId={this.props.currentGroupId} opacity={this.props.rightOpacity} />;
+                if (!this.props.collapseRhs) right_panel = <RightPanel groupId={this.props.currentGroupId} disabled={this.props.rightDisabled} />;
                 break;
         }
 
@@ -334,7 +336,7 @@ export default React.createClass({
                     <LeftPanel
                         selectedRoom={this.props.currentRoomId}
                         collapsed={this.props.collapseLhs || false}
-                        opacity={this.props.leftOpacity}
+                        disabled={this.props.leftDisabled}
                     />
                     <main className='mx_MatrixChat_middlePanel'>
                         { page_element }
diff --git a/src/components/structures/MatrixChat.js b/src/components/structures/MatrixChat.js
index 3fa628b8a3..e679276a08 100644
--- a/src/components/structures/MatrixChat.js
+++ b/src/components/structures/MatrixChat.js
@@ -145,9 +145,9 @@ module.exports = React.createClass({
 
             collapseLhs: false,
             collapseRhs: false,
-            leftOpacity: 1.0,
-            middleOpacity: 1.0,
-            rightOpacity: 1.0,
+            leftDisabled: false,
+            middleDisabled: false,
+            rightDisabled: false,
 
             version: null,
             newVersion: null,
@@ -534,12 +534,11 @@ module.exports = React.createClass({
                     collapseRhs: false,
                 });
                 break;
-            case 'ui_opacity': {
-                const sideDefault = payload.sideOpacity >= 0.0 ? payload.sideOpacity : 1.0;
+            case 'panel_disable': {
                 this.setState({
-                    leftOpacity: payload.leftOpacity >= 0.0 ? payload.leftOpacity : sideDefault,
-                    middleOpacity: payload.middleOpacity || 1.0,
-                    rightOpacity: payload.rightOpacity >= 0.0 ? payload.rightOpacity : sideDefault,
+                    leftDisabled: payload.leftDisabled || payload.sideDisabled || false,
+                    middleDisabled: payload.middleDisabled || false,
+                    rightDisabled: payload.rightDisabled || payload.sideDisabled || false,
                 });
                 break; }
             case 'set_theme':
diff --git a/src/components/structures/MessagePanel.js b/src/components/structures/MessagePanel.js
index 3873af5594..2331e096c0 100644
--- a/src/components/structures/MessagePanel.js
+++ b/src/components/structures/MessagePanel.js
@@ -16,6 +16,7 @@ limitations under the License.
 
 import React from 'react';
 import ReactDOM from 'react-dom';
+import classNames from 'classnames';
 import UserSettingsStore from '../../UserSettingsStore';
 import shouldHideEvent from '../../shouldHideEvent';
 import dis from "../../dispatcher";
@@ -78,9 +79,6 @@ module.exports = React.createClass({
         // callback which is called when more content is needed.
         onFillRequest: React.PropTypes.func,
 
-        // opacity for dynamic UI fading effects
-        opacity: React.PropTypes.number,
-
         // className for the panel
         className: React.PropTypes.string.isRequired,
 
@@ -648,12 +646,13 @@ module.exports = React.createClass({
         }
 
         const style = this.props.hidden ? { display: 'none' } : {};
-        style.opacity = this.props.opacity;
 
-        let className = this.props.className + " mx_fadable";
-        if (this.props.alwaysShowTimestamps) {
-            className += " mx_MessagePanel_alwaysShowTimestamps";
-        }
+        const className = classNames(
+            this.props.className,
+            {
+                "mx_MessagePanel_alwaysShowTimestamps": this.props.alwaysShowTimestamps,
+            },
+        );
 
         return (
             <ScrollPanel ref="scrollPanel" className={className}
diff --git a/src/components/structures/NotificationPanel.js b/src/components/structures/NotificationPanel.js
index 3c8f34fb86..3f1269f8a7 100644
--- a/src/components/structures/NotificationPanel.js
+++ b/src/components/structures/NotificationPanel.js
@@ -45,7 +45,6 @@ const NotificationPanel = React.createClass({
                     manageReadMarkers={false}
                     timelineSet={timelineSet}
                     showUrlPreview = {false}
-                    opacity={this.props.opacity}
                     tileShape="notif"
                     empty={_t('You have no visible notifications')}
                 />
diff --git a/src/components/structures/RoomView.js b/src/components/structures/RoomView.js
index 83ca987276..9b6dbb4c27 100644
--- a/src/components/structures/RoomView.js
+++ b/src/components/structures/RoomView.js
@@ -281,7 +281,7 @@ module.exports = React.createClass({
                     this.setState({
                         isPeeking: false,
                     });
-                    
+
                     // This won't necessarily be a MatrixError, but we duck-type
                     // here and say if it's got an 'errcode' key with the right value,
                     // it means we can't peek.
@@ -1697,7 +1697,7 @@ module.exports = React.createClass({
                     onResize={this.onChildResize}
                     uploadFile={this.uploadFile}
                     callState={this.state.callState}
-                    opacity={this.props.opacity}
+                    disabled={this.props.disabled}
                     showApps={this.state.showApps}
                 />;
         }
@@ -1758,7 +1758,6 @@ module.exports = React.createClass({
                     className="mx_RoomView_messagePanel mx_RoomView_searchResultsPanel"
                     onFillRequest={this.onSearchResultsFillRequest}
                     onResize={this.onSearchResultsResize}
-                    style={{ opacity: this.props.opacity }}
                 >
                     <li className={scrollheader_classes}></li>
                     { this.getSearchResultTiles() }
@@ -1789,7 +1788,6 @@ module.exports = React.createClass({
                 onScroll={this.onMessageListScroll}
                 onReadMarkerUpdated={this._updateTopUnreadMessagesBar}
                 showUrlPreview = {this.state.showUrlPreview}
-                opacity={this.props.opacity}
                 className="mx_RoomView_messagePanel"
             />);
 
@@ -1797,7 +1795,7 @@ module.exports = React.createClass({
         if (this.state.showTopUnreadMessagesBar) {
             const TopUnreadMessagesBar = sdk.getComponent('rooms.TopUnreadMessagesBar');
             topUnreadMessagesBar = (
-                <div className="mx_RoomView_topUnreadMessagesBar mx_fadable" style={{ opacity: this.props.opacity }}>
+                <div className="mx_RoomView_topUnreadMessagesBar">
                     <TopUnreadMessagesBar
                        onScrollUpClick={this.jumpToReadMarker}
                        onCloseClick={this.forgetReadMarker}
@@ -1805,10 +1803,19 @@ module.exports = React.createClass({
                 </div>
             );
         }
-        let statusBarAreaClass = "mx_RoomView_statusArea mx_fadable";
-        if (isStatusAreaExpanded) {
-            statusBarAreaClass += " mx_RoomView_statusArea_expanded";
-        }
+        const statusBarAreaClass = classNames(
+            "mx_RoomView_statusArea",
+            {
+                "mx_RoomView_statusArea_expanded": isStatusAreaExpanded,
+            },
+        );
+
+        const fadableSectionClasses = classNames(
+            "mx_RoomView_body", "mx_fadable",
+            {
+                "mx_fadable_faded": this.props.disabled,
+            },
+        );
 
         return (
             <div className={"mx_RoomView" + (inCall ? " mx_RoomView_inCall" : "")} ref="roomView">
@@ -1827,16 +1834,18 @@ module.exports = React.createClass({
                     onLeaveClick={(myMember && myMember.membership === "join") ? this.onLeaveClick : null}
                 />
                 { auxPanel }
-                { topUnreadMessagesBar }
-                { messagePanel }
-                { searchResultsPanel }
-                <div className={statusBarAreaClass} style={{opacity: this.props.opacity}}>
-                    <div className="mx_RoomView_statusAreaBox">
-                        <div className="mx_RoomView_statusAreaBox_line"></div>
-                        { statusBar }
+                <div className={fadableSectionClasses}>
+                    { topUnreadMessagesBar }
+                    { messagePanel }
+                    { searchResultsPanel }
+                    <div className={statusBarAreaClass}>
+                        <div className="mx_RoomView_statusAreaBox">
+                            <div className="mx_RoomView_statusAreaBox_line"></div>
+                            { statusBar }
+                        </div>
                     </div>
+                    { messageComposer }
                 </div>
-                { messageComposer }
             </div>
         );
     },
diff --git a/src/components/structures/TimelinePanel.js b/src/components/structures/TimelinePanel.js
index e3b3b66f97..2bf8a08b98 100644
--- a/src/components/structures/TimelinePanel.js
+++ b/src/components/structures/TimelinePanel.js
@@ -89,9 +89,6 @@ var TimelinePanel = React.createClass({
         // callback which is called when the read-up-to mark is updated.
         onReadMarkerUpdated: React.PropTypes.func,
 
-        // opacity for dynamic UI fading effects
-        opacity: React.PropTypes.number,
-
         // maximum number of events to show in a timeline
         timelineCap: React.PropTypes.number,
 
@@ -1157,7 +1154,6 @@ var TimelinePanel = React.createClass({
                           onScroll={this.onMessageListScroll}
                           onFillRequest={this.onMessageListFillRequest}
                           onUnfillRequest={this.onMessageListUnfillRequest}
-                          opacity={this.props.opacity}
                           isTwelveHour={this.state.isTwelveHour}
                           alwaysShowTimestamps={this.state.alwaysShowTimestamps}
                           className={this.props.className}
diff --git a/src/components/structures/UserSettings.js b/src/components/structures/UserSettings.js
index b69bea9282..7704cce0c7 100644
--- a/src/components/structures/UserSettings.js
+++ b/src/components/structures/UserSettings.js
@@ -271,9 +271,9 @@ module.exports = React.createClass({
         MatrixClientPeg.get().on("RoomMember.membership", this._onInviteStateChange);
 
         dis.dispatch({
-            action: 'ui_opacity',
-            sideOpacity: 0.3,
-            middleOpacity: 0.3,
+            action: 'panel_disable',
+            sideDisabled: true,
+            middleDisabled: true,
         });
         this._refreshFromServer();
 
@@ -311,9 +311,9 @@ module.exports = React.createClass({
     componentWillUnmount: function() {
         this._unmounted = true;
         dis.dispatch({
-            action: 'ui_opacity',
-            sideOpacity: 1.0,
-            middleOpacity: 1.0,
+            action: 'panel_disable',
+            sideDisabled: false,
+            middleDisabled: false,
         });
         dis.unregister(this.dispatcherRef);
         const cli = MatrixClientPeg.get();
diff --git a/src/components/views/rooms/ForwardMessage.js b/src/components/views/rooms/ForwardMessage.js
index 67e55101e8..b0fba12865 100644
--- a/src/components/views/rooms/ForwardMessage.js
+++ b/src/components/views/rooms/ForwardMessage.js
@@ -30,10 +30,9 @@ module.exports = React.createClass({
 
     componentWillMount: function() {
         dis.dispatch({
-            action: 'ui_opacity',
-            leftOpacity: 1.0,
-            rightOpacity: 0.3,
-            middleOpacity: 0.5,
+            action: 'panel_disable',
+            rightDisabled: true,
+            middleDisabled: true,
         });
     },
 
@@ -43,9 +42,9 @@ module.exports = React.createClass({
 
     componentWillUnmount: function() {
         dis.dispatch({
-            action: 'ui_opacity',
-            sideOpacity: 1.0,
-            middleOpacity: 1.0,
+            action: 'panel_disable',
+            sideDisabled: false,
+            middleDisabled: false,
         });
         document.removeEventListener('keydown', this._onKeyDown);
     },
diff --git a/src/components/views/rooms/MessageComposer.js b/src/components/views/rooms/MessageComposer.js
index 8e27520d89..93f20b8ec3 100644
--- a/src/components/views/rooms/MessageComposer.js
+++ b/src/components/views/rooms/MessageComposer.js
@@ -371,7 +371,7 @@ export default class MessageComposer extends React.Component {
         );
 
         return (
-            <div className="mx_MessageComposer mx_fadable" style={{ opacity: this.props.opacity }}>
+            <div className="mx_MessageComposer">
                 <div className="mx_MessageComposer_wrapper">
                     <div className="mx_MessageComposer_row">
                         { controls }
@@ -410,9 +410,6 @@ MessageComposer.propTypes = {
     // callback when a file to upload is chosen
     uploadFile: React.PropTypes.func.isRequired,
 
-    // opacity for dynamic UI fading effects
-    opacity: React.PropTypes.number,
-
     // string representing the current room app drawer state
     showApps: React.PropTypes.bool,
 };
diff --git a/src/components/views/rooms/RoomSettings.js b/src/components/views/rooms/RoomSettings.js
index 9934456597..f37e38c55e 100644
--- a/src/components/views/rooms/RoomSettings.js
+++ b/src/components/views/rooms/RoomSettings.js
@@ -158,9 +158,9 @@ module.exports = React.createClass({
         });
 
         dis.dispatch({
-            action: 'ui_opacity',
-            sideOpacity: 0.3,
-            middleOpacity: 0.3,
+            action: 'panel_disable',
+            sideDisabled: true,
+            middleDisabled: true,
         });
     },
 
@@ -171,9 +171,9 @@ module.exports = React.createClass({
         }
 
         dis.dispatch({
-            action: 'ui_opacity',
-            sideOpacity: 1.0,
-            middleOpacity: 1.0,
+            action: 'panel_disable',
+            sideDisabled: false,
+            middleDisabled: false,
         });
     },