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/skins/vector/themes/status/css/_StatusLogin.scss

@@ -18,12 +18,66 @@ limitations under the License.
 // Ideally this would be all Status prefixes for a Status specific version of the component
 // but given we're not doing Status as a dedicated 'skin' yet...
 
-.mx_Login {
+.mx_StatusLogin {
-    flex-direction: column;
+
+    width: 100%;
+    height: 100%;
+
+    display: flex;
     align-items: center;
     justify-content: center;
+
+    overflow: auto;
+
+    .mx_StatusLogin_brand {
+        position: absolute;
+        top: 30px;
+        left: 30px;
     }
 
+    .mx_StatusLogin_content {
+        margin: auto;
+    }
+
+    .mx_StatusLogin_header {
+        text-align: center;
+        margin-top: 70px;
+        margin-bottom: 50px;
+    }
+
+    .mx_StatusLogin_header h1 {
+        font-size: 29px;
+        margin-bottom: 3px;
+    }
+
+    .mx_StatusLogin_subtitle {
+        font-size: 18px;
+    }
+
+    .mx_StatusLogin_footer {
+        margin-top: 30px;
+        margin-bottom: 30px;
+        text-align: center;
+        font-size: 16px;
+        color: $footer-color;
+    }
+
+    .mx_StatusLogin_footer p {
+        margin-top: 0.5em;
+        margin-bottom: 0.5em;
+    }
+
+    .mx_StatusLogin_footer_cta {
+        color: $callout-color;
+        font-family: $header-font-family;
+        letter-spacing: 1px;
+        font-size: 13px;
+        text-transform: uppercase;
+        text-decoration: none;
+    }
+
+    // overrides of .mx_Login
+
     .mx_Login_box {
         width: 350px;
         min-height: initial;
@@ -32,7 +86,6 @@ limitations under the License.
         padding-left: 33px;
         padding-right: 33px;
         border-radius: 8px;
-    margin: initial;
         background-color: $form-bg-color;
         box-shadow: 0px 5px 16px 0px rgba(25,12,46,0.16);    
         position: relative;
@@ -62,27 +115,6 @@ limitations under the License.
         font-size: 25px;
     }
 
-.mx_LoginPageHeader_brand {
-    position: absolute;
-    top: 30px;
-    left: 30px;
-}
-
-.mx_LoginPageHeader_title {
-    text-align: center;
-    margin-top: 90px;
-    margin-bottom: 50px;
-}
-
-.mx_LoginPageHeader_title h1 {
-    font-size: 29px;
-    margin-bottom: 3px;
-}
-
-.mx_LoginPageHeader_subtitle {
-    font-size: 18px;
-}
-
     .mx_Login_support {
         text-align: center;
         font-size: 13px;
@@ -319,3 +351,4 @@ limitations under the License.
       margin-bottom: 12px;
     }
 
+}

src/skins/vector/themes/status/css/_status.scss

@@ -29,13 +29,17 @@ $primary-bg-color: #EEF2F5;
 $header-color: #49555F;
 $header-font-family: PostGrotesk-Medium, Arial, Helvetica, Sans-Serif;
 
+$footer-color: #8D99A4;
+
 h1,h2,h3,h4,h5 {
     color: $header-color;
     font-family: $header-font-family;
     font-weight: 400 ! important;
 }
 
-$form-bg-color: #4360DF;
+$callout-color: #4360DF; // or #4957b8 from status.im homepage
+
+$form-bg-color: $callout-color;
 $form-fg-color: #ffffff;
 
 // ***** End of Status theme specifics ******