switch to a LoginPage wrapper component

as it's much nicer in the CSS to wrap the LoginBox as needed rather than have separate header & footer divs floating above and below it which need to be correctly vertically centered

src/components/structures/login/ForgotPassword.js

@@ -154,6 +154,7 @@ module.exports = React.createClass({
     },
 
     render: function() {
+        const LoginPage = sdk.getComponent("login.LoginPage");        
         const LoginHeader = sdk.getComponent("login.LoginHeader");
         const LoginFooter = sdk.getComponent("login.LoginFooter");
         const ServerConfig = sdk.getComponent("login.ServerConfig");
@@ -233,12 +234,12 @@ module.exports = React.createClass({
 
 
         return (
-            <div className="mx_Login">
+            <LoginPage>
                 <div className="mx_Login_box">
                     <LoginHeader />
                     { resetPasswordJsx }
                 </div>
-            </div>
+            </LoginPage>
         );
     },
 });

src/components/structures/login/Login.js

@@ -329,8 +329,7 @@ module.exports = React.createClass({
 
     render: function() {
         const Loader = sdk.getComponent("elements.Spinner");
-        const LoginPageHeader = sdk.getComponent("login.LoginPageHeader");
+        const LoginPage = sdk.getComponent("login.LoginPage");
-        const LoginPageFooter = sdk.getComponent("login.LoginPageFooter");
         const LoginHeader = sdk.getComponent("login.LoginHeader");
         const LoginFooter = sdk.getComponent("login.LoginFooter");
         const ServerConfig = sdk.getComponent("login.ServerConfig");
@@ -367,8 +366,7 @@ module.exports = React.createClass({
         }
 
         return (
-            <div className="mx_Login">
+            <LoginPage>
-                <LoginPageHeader />
                 <div className="mx_Login_box">
                     <LoginHeader />
                     <div>
@@ -389,8 +387,7 @@ module.exports = React.createClass({
                         <LoginFooter />
                     </div>
                 </div>
-                <LoginPageFooter />
+            </LoginPage>
-            </div>
         );
     },
 });

src/components/structures/login/PostRegistration.js

@@ -59,9 +59,10 @@ module.exports = React.createClass({
     render: function() {
         const ChangeDisplayName = sdk.getComponent('settings.ChangeDisplayName');
         const ChangeAvatar = sdk.getComponent('settings.ChangeAvatar');
+        const LoginPage = sdk.getComponent('login.LoginPage');
         const LoginHeader = sdk.getComponent('login.LoginHeader');
         return (
-            <div className="mx_Login">
+            <LoginPage>
                 <div className="mx_Login_box">
                     <LoginHeader />
                     <div className="mx_Login_profile">
@@ -74,7 +75,7 @@ module.exports = React.createClass({
                         { this.state.errorString }
                     </div>
                 </div>
-            </div>
+            </LoginPage>
         );
     },
 });

src/components/structures/login/Registration.js

@@ -322,6 +322,7 @@ module.exports = React.createClass({
     render: function() {
         const LoginHeader = sdk.getComponent('login.LoginHeader');
         const LoginFooter = sdk.getComponent('login.LoginFooter');
+        const LoginPage = sdk.getComponent('login.LoginPage');
         const InteractiveAuth = sdk.getComponent('structures.InteractiveAuth');
         const Spinner = sdk.getComponent("elements.Spinner");
         const ServerConfig = sdk.getComponent('views.login.ServerConfig');
@@ -385,7 +386,7 @@ module.exports = React.createClass({
             );
         }
         return (
-            <div className="mx_Login">
+            <LoginPage>
                 <div className="mx_Login_box">
                     <LoginHeader
                         icon={this.state.teamSelected ?
@@ -401,7 +402,7 @@ module.exports = React.createClass({
                     { returnToAppJsx }
                     <LoginFooter />
                 </div>
-            </div>
+            </LoginPage>
         );
     },
 });

src/components/views/login/LoginPage.js

@@ -0,0 +1,58 @@
+/*
+Copyright 2015, 2016 OpenMarket Ltd
+
+Licensed under the Apache License, Version 2.0 (the "License");
+you may not use this file except in compliance with the License.
+You may obtain a copy of the License at
+
+    http://www.apache.org/licenses/LICENSE-2.0
+
+Unless required by applicable law or agreed to in writing, software
+distributed under the License is distributed on an "AS IS" BASIS,
+WITHOUT WARRANTIES OR CONDITIONS OF ANY KIND, either express or implied.
+See the License for the specific language governing permissions and
+limitations under the License.
+*/
+
+'use strict';
+
+import UserSettingsStore from '../../../UserSettingsStore';
+
+const React = require('react');
+
+module.exports = React.createClass({
+    displayName: 'LoginPage',
+
+    render: function() {
+        if (UserSettingsStore.getTheme() === 'status') {
+            return (
+                <div className="mx_StatusLogin">
+                    <div className="mx_StatusLogin_brand">
+                        <img src="themes/status/img/logo.svg" alt="Status" width="221" height="53"/>
+                    </div>
+                    <div className="mx_StatusLogin_content">
+                        <div className="mx_StatusLogin_header">
+                            <h1>Status Community Chat</h1>
+                            <div className="mx_StatusLogin_subtitle">
+                                A safer, decentralised communication platform <a href="https://riot.im">powered by Riot</a>
+                            </div>
+                        </div>
+                        { this.props.children }
+                        <div className="mx_StatusLogin_footer">
+                            <p>This channel is for our development community.</p>
+                            <p>Interested in SNT and discussions on the cryptocurrency market?</p>
+                            <p><a href="#" className="mx_StatusLogin_footer_cta">Join Telegram Chat</a></p>
+                        </div>
+                    </div>
+                </div>
+            );
+        }
+        else {
+            return (
+                <div className="mx_Login">
+                    { this.props.children }
+                </div>
+            );
+        }
+    },
+});

src/components/views/login/LoginPageFooter.js

@@ -1,30 +0,0 @@
-/*
-Copyright 2015, 2016 OpenMarket Ltd
-
-Licensed under the Apache License, Version 2.0 (the "License");
-you may not use this file except in compliance with the License.
-You may obtain a copy of the License at
-
-    http://www.apache.org/licenses/LICENSE-2.0
-
-Unless required by applicable law or agreed to in writing, software
-distributed under the License is distributed on an "AS IS" BASIS,
-WITHOUT WARRANTIES OR CONDITIONS OF ANY KIND, either express or implied.
-See the License for the specific language governing permissions and
-limitations under the License.
-*/
-
-'use strict';
-
-import { _t } from '../../../languageHandler';
-import React from 'react';
-
-module.exports = React.createClass({
-    displayName: 'LoginPageFooter',
-
-    render: function() {
-        return (
-            <div/>
-        );
-    },
-});

src/components/views/login/LoginPageHeader.js

@@ -1,47 +0,0 @@
-/*
-Copyright 2015, 2016 OpenMarket Ltd
-
-Licensed under the Apache License, Version 2.0 (the "License");
-you may not use this file except in compliance with the License.
-You may obtain a copy of the License at
-
-    http://www.apache.org/licenses/LICENSE-2.0
-
-Unless required by applicable law or agreed to in writing, software
-distributed under the License is distributed on an "AS IS" BASIS,
-WITHOUT WARRANTIES OR CONDITIONS OF ANY KIND, either express or implied.
-See the License for the specific language governing permissions and
-limitations under the License.
-*/
-
-'use strict';
-
-import UserSettingsStore from '../../../UserSettingsStore';
-
-const React = require('react');
-
-module.exports = React.createClass({
-    displayName: 'LoginPageHeader',
-
-    render: function() {
-        let themeBranding;
-        if (UserSettingsStore.getTheme() === 'status') {
-            themeBranding = <div>
-                <div className="mx_LoginPageHeader_brand">
-                    <img src="themes/status/img/logo.svg" alt="Status" width="221" height="53"/>
-                </div>
-                <div className="mx_LoginPageHeader_title">
-                    <h1>Status Community Chat</h1>
-                    <div className="mx_LoginPageHeader_subtitle">
-                        A safer, decentralised communication platform <a href="https://riot.im">powered by Riot</a>
-                    </div>
-                </div>
-            </div>;   
-        }
-        else {
-            themeBranding = <div/>;
-        }
-
-        return themeBranding;
-    },
-});