Social Login and login delight tweaks

res/css/_components.scss

@@ -45,8 +45,6 @@
 @import "./views/auth/_InteractiveAuthEntryComponents.scss";
 @import "./views/auth/_LanguageSelector.scss";
 @import "./views/auth/_PassphraseField.scss";
-@import "./views/auth/_ServerConfig.scss";
-@import "./views/auth/_ServerTypeSelector.scss";
 @import "./views/auth/_Welcome.scss";
 @import "./views/avatars/_BaseAvatar.scss";
 @import "./views/avatars/_DecoratedRoomAvatar.scss";
@@ -78,11 +76,13 @@
 @import "./views/dialogs/_MessageEditHistoryDialog.scss";
 @import "./views/dialogs/_ModalWidgetDialog.scss";
 @import "./views/dialogs/_NewSessionReviewDialog.scss";
+@import "./views/dialogs/_RegistrationEmailPromptDialog.scss";
 @import "./views/dialogs/_RoomSettingsDialog.scss";
 @import "./views/dialogs/_RoomSettingsDialogBridges.scss";
 @import "./views/dialogs/_RoomUpgradeDialog.scss";
 @import "./views/dialogs/_RoomUpgradeWarningDialog.scss";
 @import "./views/dialogs/_ServerOfflineDialog.scss";
+@import "./views/dialogs/_ServerPickerDialog.scss";
 @import "./views/dialogs/_SetEmailDialog.scss";
 @import "./views/dialogs/_SettingsDialog.scss";
 @import "./views/dialogs/_ShareDialog.scss";
@@ -124,6 +124,8 @@
 @import "./views/elements/_RichText.scss";
 @import "./views/elements/_RoleButton.scss";
 @import "./views/elements/_RoomAliasField.scss";
+@import "./views/elements/_SSOButtons.scss";
+@import "./views/elements/_ServerPicker.scss";
 @import "./views/elements/_Slider.scss";
 @import "./views/elements/_Spinner.scss";
 @import "./views/elements/_StyledCheckbox.scss";

res/css/structures/auth/_Login.scss

@@ -18,7 +18,7 @@ limitations under the License.
 .mx_Login_submit {
     @mixin mx_DialogButton;
     width: 100%;
-    margin-top: 35px;
+    margin-top: 24px;
     margin-bottom: 24px;
     box-sizing: border-box;
     text-align: center;
@@ -33,12 +33,6 @@ limitations under the License.
     cursor: default;
 }
 
-.mx_AuthBody a.mx_Login_sso_link:link,
-.mx_AuthBody a.mx_Login_sso_link:hover,
-.mx_AuthBody a.mx_Login_sso_link:visited {
-    color: $button-primary-fg-color;
-}
-
 .mx_Login_loader {
     display: inline;
     position: relative;
@@ -91,6 +85,8 @@ limitations under the License.
 }
 
 div.mx_AccessibleButton_kind_link.mx_Login_forgot {
+    display: block;
+    margin: 0 auto;
     // style it as a link
     font-size: inherit;
     padding: 0;

res/css/views/auth/_AuthBody.scss

@@ -37,6 +37,10 @@ limitations under the License.
         color: $authpage-primary-color;
     }
 
+    h3.mx_AuthBody_centered {
+        text-align: center;
+    }
+
     a:link,
     a:hover,
     a:visited {
@@ -96,12 +100,6 @@ limitations under the License.
     }
 }
 
-.mx_AuthBody_editServerDetails {
-    padding-left: 1em;
-    font-size: $font-12px;
-    font-weight: normal;
-}
-
 .mx_AuthBody_fieldRow {
     display: flex;
     margin-bottom: 10px;
@@ -146,6 +144,14 @@ limitations under the License.
     display: block;
     text-align: center;
     width: 100%;
+
+    > a {
+        font-weight: $font-semi-bold;
+    }
+}
+
+.mx_SSOButtons + .mx_AuthBody_changeFlow {
+    margin-top: 24px;
 }
 
 .mx_AuthBody_spinner {

res/css/views/auth/_ServerConfig.scss → res/css/views/dialogs/_RegistrationEmailPromptDialog.scss

@@ -1,6 +1,5 @@
 /*
-Copyright 2015, 2016 OpenMarket Ltd
-Copyright 2019 The Matrix.org Foundation C.I.C.
+Copyright 2020 The Matrix.org Foundation C.I.C.
 
 Licensed under the Apache License, Version 2.0 (the "License");
 you may not use this file except in compliance with the License.
@@ -15,21 +14,15 @@ See the License for the specific language governing permissions and
 limitations under the License.
 */
 
-.mx_ServerConfig_help:link {
-    opacity: 0.8;
-}
-
-.mx_ServerConfig_error {
-    display: block;
-    color: $warning-color;
-}
+.mx_RegistrationEmailPromptDialog {
+    width: 417px;
 
-.mx_ServerConfig_identityServer {
-    transform: scaleY(0);
-    transform-origin: top;
-    transition: transform 0.25s;
+    .mx_Dialog_content {
+        margin-bottom: 24px;
+        color: $tertiary-fg-color;
+    }
 
-    &.mx_ServerConfig_identityServer_shown {
-        transform: scaleY(1);
+    .mx_Dialog_primary {
+        width: 100%;
     }
 }

res/css/views/dialogs/_ServerPickerDialog.scss

@@ -0,0 +1,78 @@
+/*
+Copyright 2020 The Matrix.org Foundation C.I.C.
+
+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.
+*/
+
+.mx_ServerPickerDialog {
+    width: 468px;
+    box-sizing: border-box;
+
+    .mx_Dialog_content {
+        margin-bottom: 0;
+
+        > p {
+            color: $secondary-fg-color;
+            font-size: $font-14px;
+            margin: 16px 0;
+
+            &:first-of-type {
+                margin-bottom: 40px;
+            }
+
+            &:last-of-type {
+                margin: 0 24px 24px;
+            }
+        }
+
+        > h4 {
+            font-size: $font-15px;
+            font-weight: $font-semi-bold;
+            color: $secondary-fg-color;
+            margin-left: 8px;
+        }
+
+        > a {
+            color: $accent-color;
+            margin-left: 8px;
+        }
+    }
+
+    .mx_ServerPickerDialog_otherHomeserverRadio {
+        input[type="radio"] + div {
+            margin-top: auto;
+            margin-bottom: auto;
+        }
+    }
+
+    .mx_ServerPickerDialog_otherHomeserver {
+        border-top: none;
+        border-left: none;
+        border-right: none;
+        border-radius: unset;
+
+        > input {
+            padding-left: 0;
+        }
+
+        > label {
+            margin-left: 0;
+        }
+    }
+
+    .mx_AccessibleButton_kind_primary {
+        width: calc(100% - 64px);
+        margin: 0 8px;
+        padding: 15px 18px;
+    }
+}

res/css/views/elements/_SSOButtons.scss

@@ -0,0 +1,49 @@
+/*
+Copyright 2020 The Matrix.org Foundation C.I.C.
+
+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.
+*/
+
+.mx_SSOButtons {
+    display: flex;
+    justify-content: center;
+
+    .mx_SSOButton {
+        position: relative;
+        width: 100%;
+        padding-left: 32px;
+        padding-right: 32px;
+
+        > img {
+            object-fit: contain;
+            position: absolute;
+            left: 8px;
+            top: 4px;
+        }
+    }
+
+    .mx_SSOButton_mini {
+        box-sizing: border-box;
+        width: 50px; // 48px + 1px border on all sides
+        height: 50px; // 48px + 1px border on all sides
+
+        > img {
+            left: 12px;
+            top: 12px;
+        }
+
+        & + .mx_SSOButton_mini {
+            margin-left: 24px;
+        }
+    }
+}