make the UI fadable to help with decluttering

src/components/structures/LeftPanel.js

@@ -89,7 +89,7 @@ var LeftPanel = React.createClass({
         var BottomLeftMenu = sdk.getComponent('structures.BottomLeftMenu');
 
         var collapseButton;
-        var classes = "mx_LeftPanel";
+        var classes = "mx_LeftPanel mx_fadable";
         if (this.props.collapsed) {
             classes += " collapsed";
         }
@@ -109,7 +109,7 @@ var LeftPanel = React.createClass({
         }
 
         return (
-            <aside className={classes}>
+            <aside className={classes} style={{ opacity: this.props.opacity }}>
                 { collapseButton }
                 { callPreview }
                 <RoomList

src/components/structures/RightPanel.js

@@ -158,13 +158,13 @@ module.exports = React.createClass({
 
         }
 
-        var classes = "mx_RightPanel";
+        var classes = "mx_RightPanel mx_fadable";
         if (this.props.collapsed) {
             classes += " collapsed";
         }
 
         return (
-            <aside className={classes}>
+            <aside className={classes} style={{ opacity: this.props.opacity }}>
                 <div className="mx_RightPanel_header">
                     { buttonGroup }
                 </div>

src/skins/vector/css/common.css

@@ -58,6 +58,15 @@ input[type=text]:focus, textarea:focus {
     box-shadow: none;
 }
 
+/* applied to side-panels and messagepanel when in RoomSettings */
+.mx_fadable {
+    opacity: 1;
+    -webkit-transition: opacity 0.2s ease-in-out;
+    -moz-transition: opacity 0.2s ease-in-out;
+    -ms-transition: opacity 0.2s ease-in-out;
+    -o-transition: opacity 0.2s ease-in-out;
+}
+
 /* XXX: critical hack to GeminiScrollbar to allow them to work in FF 42 and Chrome 48.
    Stop the scrollbar view from pushing out the container's overall sizing, which causes
    flexbox to adapt to the new size and cause the view to keep growing.

src/skins/vector/css/matrix-react-sdk/structures/RoomView.css

@@ -89,7 +89,7 @@ limitations under the License.
     margin: auto;
 
     overflow: auto;
-    border-bottom: 1px solid #eee;
+    border-bottom: 1px solid #ccc;
 
     -webkit-flex: 0 0 auto;
     flex: 0 0 auto;