improve lipstick and support scalar logout

src/components/views/settings/IntegrationsManager.js

@@ -19,6 +19,7 @@ limitations under the License.
 var React = require('react');
 var sdk = require('matrix-react-sdk');
 var MatrixClientPeg = require('matrix-react-sdk/lib/MatrixClientPeg');
+var dis = require('matrix-react-sdk/lib/dispatcher');
 
 module.exports = React.createClass({
     displayName: 'IntegrationsManager',
@@ -31,11 +32,13 @@ module.exports = React.createClass({
     // XXX: keyboard shortcuts for managing dialogs should be done by the modal
     // dialog base class somehow, surely...
     componentDidMount: function() {
+        this.dispatcherRef = dis.register(this.onAction);
         document.addEventListener("keydown", this.onKeyDown);
     },
 
     componentWillUnmount: function() {
         document.removeEventListener("keydown", this.onKeyDown);
+        dis.unregister(this.dispatcherRef);
     },
 
     onKeyDown: function(ev) {
@@ -46,11 +49,15 @@ module.exports = React.createClass({
         }
     },
 
+    onAction: function(payload) {
+        if (payload.action === 'close_scalar') {
+            this.props.onFinished();
+        }
+    },
+
     render: function() {
         return (
-            <div className="mx_IntegrationsManager">
             <iframe src={ this.props.src }></iframe>
-            </div>
         );
     }
 });

src/skins/vector/css/matrix-react-sdk/views/settings/IntegrationsManager.css

@@ -14,20 +14,18 @@ See the License for the specific language governing permissions and
 limitations under the License.
 */
 
-.mx_IntegrationsManager {
+.mx_IntegrationsManager .mx_Dialog {
-    display: -webkit-flex;
+    width: 60%;
-    display: flex;
+    height: 70%;
-    width: 100%;
+    overflow: hidden;
-    height: 100%;
+    padding: 0px;
-    -webkit-align-items: center;
+    max-width: initial;
-    align-items: center;
+    max-height: initial;
-    justify-content: center;
-    -webkit-justify-content: center;
 }
 
 .mx_IntegrationsManager iframe {
     background-color: #fff;
     border: 0px;
-    width: 720px;
+    width: 100%;
-    height: 512px;
+    height: 100%;
 }