From b053f08991260755cb2015313bdcbe988363a83d Mon Sep 17 00:00:00 2001
From: Matthew Hodgson <matthew@matrix.org>
Date: Tue, 24 Oct 2017 23:42:52 +0100
Subject: [PATCH] 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

---
 .../themes/status/css/_StatusLogin.scss       | 553 ++++++++++--------
 .../vector/themes/status/css/_status.scss     |   6 +-
 2 files changed, 298 insertions(+), 261 deletions(-)

diff --git a/src/skins/vector/themes/status/css/_StatusLogin.scss b/src/skins/vector/themes/status/css/_StatusLogin.scss
index 7cdc69394..a32251f51 100644
--- a/src/skins/vector/themes/status/css/_StatusLogin.scss
+++ b/src/skins/vector/themes/status/css/_StatusLogin.scss
@@ -18,304 +18,337 @@ 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 {
-    flex-direction: column;
+.mx_StatusLogin {
+
+    width: 100%;
+    height: 100%;
+
+    display: flex;
     align-items: center;
     justify-content: center;
-}
 
-.mx_Login_box {
-    width: 350px;
-    min-height: initial;
-    padding-top: 20px;
-    padding-bottom: 10px;
-    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;
-}
+    overflow: auto;
 
-.mx_Login_logo {
-    background-color: #fff;
-    width: 74px;
-    height: 74px;
-    border-radius: 37px;
-    box-shadow: 0px 2px 4px 0px rgba(0,0,0,0.5);
-    position: absolute;
-    top: -36px;
-    left: 50%;
-    margin-left: -36px;
-}
+    .mx_StatusLogin_brand {
+        position: absolute;
+        top: 30px;
+        left: 30px;
+    }
 
-.mx_Login_logo img {
-    width: 36px;
-    height: 36px;
-    padding: 19px;
-}
+    .mx_StatusLogin_content {
+        margin: auto;
+    }
 
-.mx_Login_box h2 {
-    text-align: center;
-    color: $form-fg-color;
-    font-size: 25px;
-}
+    .mx_StatusLogin_header {
+        text-align: center;
+        margin-top: 70px;
+        margin-bottom: 50px;
+    }
 
-.mx_LoginPageHeader_brand {
-    position: absolute;
-    top: 30px;
-    left: 30px;
-}
+    .mx_StatusLogin_header h1 {
+        font-size: 29px;
+        margin-bottom: 3px;
+    }
 
-.mx_LoginPageHeader_title {
-    text-align: center;
-    margin-top: 90px;
-    margin-bottom: 50px;
-}
+    .mx_StatusLogin_subtitle {
+        font-size: 18px;
+    }
 
-.mx_LoginPageHeader_title h1 {
-    font-size: 29px;
-    margin-bottom: 3px;
-}
+    .mx_StatusLogin_footer {
+        margin-top: 30px;
+        margin-bottom: 30px;
+        text-align: center;
+        font-size: 16px;
+        color: $footer-color;
+    }
 
-.mx_LoginPageHeader_subtitle {
-    font-size: 18px;
-}
+    .mx_StatusLogin_footer p {
+        margin-top: 0.5em;
+        margin-bottom: 0.5em;
+    }
 
-.mx_Login_support {
-    text-align: center;
-    font-size: 13px;
-    margin-top: 0px;
-    opacity: 0.7;
-}
+    .mx_StatusLogin_footer_cta {
+        color: $callout-color;
+        font-family: $header-font-family;
+        letter-spacing: 1px;
+        font-size: 13px;
+        text-transform: uppercase;
+        text-decoration: none;
+    }
 
-.mx_Login_field {
-    width: 280px;
-    border-radius: 3px;
-    border: 1px solid $strong-input-border-color;
-    font-weight: 300;
-    font-size: 13px;
-    padding: 9px;
-    margin-bottom: 14px;
-}
+    // overrides of .mx_Login
 
-.mx_Login_field_disabled {
-    opacity: 0.3;
-}
+    .mx_Login_box {
+        width: 350px;
+        min-height: initial;
+        padding-top: 20px;
+        padding-bottom: 10px;
+        padding-left: 33px;
+        padding-right: 33px;
+        border-radius: 8px;
+        background-color: $form-bg-color;
+        box-shadow: 0px 5px 16px 0px rgba(25,12,46,0.16);    
+        position: relative;
+    }
 
-.mx_Login_fieldLabel {
-    margin-top: -10px;
-    margin-left: 8px;
-    margin-bottom: 14px;
-    font-size: 13px;
-    opacity: 0.8;
-}
+    .mx_Login_logo {
+        background-color: #fff;
+        width: 74px;
+        height: 74px;
+        border-radius: 37px;
+        box-shadow: 0px 2px 4px 0px rgba(0,0,0,0.5);
+        position: absolute;
+        top: -36px;
+        left: 50%;
+        margin-left: -36px;
+    }
 
-.mx_Login_submit {
-    margin-top: 35px;
-    margin-bottom: 24px;
-    width: 100%;
-    border-radius: 40px;
-    height: 40px;
-    border: 0px;
-    background-color: $accent-color;
-    font-size: 15px;
-    color: $accent-fg-color;
-}
+    .mx_Login_logo img {
+        width: 36px;
+        height: 36px;
+        padding: 19px;
+    }
 
-.mx_Login_submit:disabled {
-    opacity: 0.3;
-}
+    .mx_Login_box h2 {
+        text-align: center;
+        color: $form-fg-color;
+        font-size: 25px;
+    }
 
-.mx_Login_label {
-    font-size: 13px;
-    opacity: 0.8;
-}
+    .mx_Login_support {
+        text-align: center;
+        font-size: 13px;
+        margin-top: 0px;
+        opacity: 0.7;
+    }
 
-.mx_Login_checkbox,
-.mx_Login_radio {
-    margin-right: 10px;
-}
+    .mx_Login_field {
+        width: 280px;
+        border-radius: 3px;
+        border: 1px solid $strong-input-border-color;
+        font-weight: 300;
+        font-size: 13px;
+        padding: 9px;
+        margin-bottom: 14px;
+    }
 
-.mx_Login_create {
-    display: block;
-    text-align: center;
-    width: 100%;
-    font-size: 13px;
-    opacity: 0.8;
-}
+    .mx_Login_field_disabled {
+        opacity: 0.3;
+    }
 
-.mx_Login_create:link {
-    color: $primary-fg-color;
-}
+    .mx_Login_fieldLabel {
+        margin-top: -10px;
+        margin-left: 8px;
+        margin-bottom: 14px;
+        font-size: 13px;
+        opacity: 0.8;
+    }
 
-.mx_Login_links {
-    display: block;
-    text-align: center;
-    margin-top: 15px;
-    width: 100%;
-    font-size: 13px;
-    opacity: 0.8;
-}
+    .mx_Login_submit {
+        margin-top: 35px;
+        margin-bottom: 24px;
+        width: 100%;
+        border-radius: 40px;
+        height: 40px;
+        border: 0px;
+        background-color: $accent-color;
+        font-size: 15px;
+        color: $accent-fg-color;
+    }
 
-.mx_Login_links a:link {
-   color: $primary-fg-color;
-}
+    .mx_Login_submit:disabled {
+        opacity: 0.3;
+    }
 
-.mx_Login_prompt {
-    padding-top: 15px;
-    padding-bottom: 15px;
-    font-size: 13px;
-}
+    .mx_Login_label {
+        font-size: 13px;
+        opacity: 0.8;
+    }
 
-.mx_Login_forgot {
-    font-size: 13px;
-    opacity: 0.8;
-}
+    .mx_Login_checkbox,
+    .mx_Login_radio {
+        margin-right: 10px;
+    }
 
-.mx_Login_forgot:link {
-    color: $primary-fg-color;
-}
+    .mx_Login_create {
+        display: block;
+        text-align: center;
+        width: 100%;
+        font-size: 13px;
+        opacity: 0.8;
+    }
 
-.mx_Login_loader {
-    display: inline;
-    position: relative;
-    top: 2px;
-    left: 8px;
-}
+    .mx_Login_create:link {
+        color: $primary-fg-color;
+    }
 
-.mx_Login_loader .mx_Spinner {
-    display: inline;
-}
+    .mx_Login_links {
+        display: block;
+        text-align: center;
+        margin-top: 15px;
+        width: 100%;
+        font-size: 13px;
+        opacity: 0.8;
+    }
 
-.mx_Login_loader .mx_Spinner img {
-    width: 16px;
-    height: 16px;
-}
+    .mx_Login_links a:link {
+       color: $primary-fg-color;
+    }
 
-.mx_Login_error {
-    color: $warning-color;
-    font-weight: bold;
-    text-align: center;
-/*
-    height: 24px;
-*/
-    margin-top: 12px;
-    margin-bottom: 12px;
-}
+    .mx_Login_prompt {
+        padding-top: 15px;
+        padding-bottom: 15px;
+        font-size: 13px;
+    }
 
-.mx_Login_type_container {
-    display: flex;
-    margin-bottom: 14px;
-}
+    .mx_Login_forgot {
+        font-size: 13px;
+        opacity: 0.8;
+    }
 
-.mx_Login_type_label {
-    flex-grow: 1;
-    line-height: 35px;
-}
+    .mx_Login_forgot:link {
+        color: $primary-fg-color;
+    }
 
-.mx_Login_type_dropdown {
-    display: inline-block;
-    min-width: 170px;
-    align-self: flex-end;
-    flex: 1 1 auto;
-}
+    .mx_Login_loader {
+        display: inline;
+        position: relative;
+        top: 2px;
+        left: 8px;
+    }
 
-.mx_Login_field_group {
-    display: flex;
-}
+    .mx_Login_loader .mx_Spinner {
+        display: inline;
+    }
 
-.mx_Login_field_prefix {
-    height: 34px;
-    padding: 0px 5px;
-    line-height: 33px;
+    .mx_Login_loader .mx_Spinner img {
+        width: 16px;
+        height: 16px;
+    }
 
-    background-color: #eee;
-    border: 1px solid #c7c7c7;
-    border-right: 0px;
-    border-radius: 3px 0px 0px 3px;
-
-    text-align: center;
-}
-
-.mx_Login_field_suffix {
-    height: 34px;
-    padding: 0px 5px;
-    line-height: 33px;
-
-    background-color: #eee;
-    border: 1px solid #c7c7c7;
-    border-left: 0px;
-    border-radius: 0px 3px 3px 0px;
-
-    text-align: center;
-    flex-grow: 1;
-}
-
-.mx_Login_username {
-    height: 16px;
-    flex-shrink: 1;
-    min-width: 0px;
-    border-radius: 3px;
-}
-
-.mx_Login_phoneNumberField {
-    height: 16px;
-}
-
-.mx_Login_field_has_prefix {
-    border-top-left-radius: 0px;
-    border-bottom-left-radius: 0px;
-}
-
-.mx_Login_field_has_suffix {
-    border-top-right-radius: 0px;
-    border-bottom-right-radius: 0px;
-}
-
-.mx_Login_phoneSection {
-    display:flex;
-}
-
-.mx_Login_phoneCountry {
-    margin-bottom: 14px;
-    width: 150px;
-
-    /* To override mx_Login_field_prefix */
-    text-align: left;
-    padding: 0px;
-    background-color: $primary-bg-color;
-}
-
-.mx_Login_field_prefix .mx_Dropdown_input {
-    /* To use prefix border instead of dropdown border */
-    border: 0;
-}
-
-.mx_Login_phoneCountry .mx_Dropdown_option {
+    .mx_Login_error {
+        color: $warning-color;
+        font-weight: bold;
+        text-align: center;
     /*
-        To match height of mx_Login_field
-        33px + 2px border from mx_Dropdown_option = 35px
+        height: 24px;
     */
-    height: 33px;
-    line-height: 33px;
-}
+        margin-top: 12px;
+        margin-bottom: 12px;
+    }
 
-.mx_Login_phoneCountry .mx_Dropdown_option img {
-    margin: 3px;
-    vertical-align: top;
-}
+    .mx_Login_type_container {
+        display: flex;
+        margin-bottom: 14px;
+    }
 
-.mx_Login_language {
-  margin-left: auto;
-  margin-right: auto;
-  min-width: 60%;
-}
+    .mx_Login_type_label {
+        flex-grow: 1;
+        line-height: 35px;
+    }
 
-.mx_Login_language_div {
-  display: flex;
-  margin-top: 12px;
-  margin-bottom: 12px;
-}
+    .mx_Login_type_dropdown {
+        display: inline-block;
+        min-width: 170px;
+        align-self: flex-end;
+        flex: 1 1 auto;
+    }
 
+    .mx_Login_field_group {
+        display: flex;
+    }
+
+    .mx_Login_field_prefix {
+        height: 34px;
+        padding: 0px 5px;
+        line-height: 33px;
+
+        background-color: #eee;
+        border: 1px solid #c7c7c7;
+        border-right: 0px;
+        border-radius: 3px 0px 0px 3px;
+
+        text-align: center;
+    }
+
+    .mx_Login_field_suffix {
+        height: 34px;
+        padding: 0px 5px;
+        line-height: 33px;
+
+        background-color: #eee;
+        border: 1px solid #c7c7c7;
+        border-left: 0px;
+        border-radius: 0px 3px 3px 0px;
+
+        text-align: center;
+        flex-grow: 1;
+    }
+
+    .mx_Login_username {
+        height: 16px;
+        flex-shrink: 1;
+        min-width: 0px;
+        border-radius: 3px;
+    }
+
+    .mx_Login_phoneNumberField {
+        height: 16px;
+    }
+
+    .mx_Login_field_has_prefix {
+        border-top-left-radius: 0px;
+        border-bottom-left-radius: 0px;
+    }
+
+    .mx_Login_field_has_suffix {
+        border-top-right-radius: 0px;
+        border-bottom-right-radius: 0px;
+    }
+
+    .mx_Login_phoneSection {
+        display:flex;
+    }
+
+    .mx_Login_phoneCountry {
+        margin-bottom: 14px;
+        width: 150px;
+
+        /* To override mx_Login_field_prefix */
+        text-align: left;
+        padding: 0px;
+        background-color: $primary-bg-color;
+    }
+
+    .mx_Login_field_prefix .mx_Dropdown_input {
+        /* To use prefix border instead of dropdown border */
+        border: 0;
+    }
+
+    .mx_Login_phoneCountry .mx_Dropdown_option {
+        /*
+            To match height of mx_Login_field
+            33px + 2px border from mx_Dropdown_option = 35px
+        */
+        height: 33px;
+        line-height: 33px;
+    }
+
+    .mx_Login_phoneCountry .mx_Dropdown_option img {
+        margin: 3px;
+        vertical-align: top;
+    }
+
+    .mx_Login_language {
+      margin-left: auto;
+      margin-right: auto;
+      min-width: 60%;
+    }
+
+    .mx_Login_language_div {
+      display: flex;
+      margin-top: 12px;
+      margin-bottom: 12px;
+    }
+
+}
diff --git a/src/skins/vector/themes/status/css/_status.scss b/src/skins/vector/themes/status/css/_status.scss
index eb8f1d941..ceffa7a91 100644
--- a/src/skins/vector/themes/status/css/_status.scss
+++ b/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 ******