From 4ded2ea20336cdbd80f45794025dec54cd93821a Mon Sep 17 00:00:00 2001
From: =?UTF-8?q?Pau=20Ferrer=20Oca=C3=B1a?= <crazyserver@gmail.com>
Date: Wed, 2 Jun 2021 12:01:26 +0200
Subject: [PATCH] MOBILE-3320 login: Improve login styles

---
 src/core/features/login/login.scss                    | 11 ++++++++---
 .../features/login/pages/reconnect/reconnect.html     | 10 +++++-----
 src/theme/theme.light.scss                            |  3 +--
 3 files changed, 14 insertions(+), 10 deletions(-)

diff --git a/src/core/features/login/login.scss b/src/core/features/login/login.scss
index f3f652d1c..351295e3d 100644
--- a/src/core/features/login/login.scss
+++ b/src/core/features/login/login.scss
@@ -12,7 +12,7 @@
         --color: var(--core-login-text-color);
 
         p, h2, h3, .core-oauth-icon {
-            color: var(--core-login-text-color);
+            color: var(--color);
         }
     }
     ion-button.core-button-as-link {
@@ -29,13 +29,17 @@
         margin-bottom: 16px;
     }
 
-    form .item {
+    form .item,
+    form .item ion-label {
         --background: var(--core-login-input-background);
         --color: var(--core-login-input-color);
     }
 
     form .core-username.item p {
         font-size: 16px;
+    }
+
+    form .core-username.item.md p {
         @include padding-horizontal(8px, null);
     }
 
@@ -62,8 +66,9 @@
         text-decoration: underline;
     }
 
-    .core-login-reconnect-warning {
+    .core-login-reconnect-warning ion-item {
         font-size: 0.9em;
+        --background: var(--core-login-input-background);
     }
 
     @if ($core-fixed-url) {
diff --git a/src/core/features/login/pages/reconnect/reconnect.html b/src/core/features/login/pages/reconnect/reconnect.html
index 03de280fa..d64bbe29a 100644
--- a/src/core/features/login/pages/reconnect/reconnect.html
+++ b/src/core/features/login/pages/reconnect/reconnect.html
@@ -24,12 +24,12 @@
         </p>
         <p class="core-siteurl">{{siteUrl}}</p>
 
-        <ion-item *ngIf="!isLoggedOut" class="ion-text-center core-login-reconnect-warning" lines="none">
-            <ion-label color="danger" class="ion-text-wrap">
+        <ion-card *ngIf="!isLoggedOut" class="core-danger-card core-login-reconnect-warning">
+            <ion-item>
                 <ion-icon name="fas-exclamation-circle" slot="start" aria-hidden="true"></ion-icon>
-                {{ 'core.login.reconnectdescription' | translate }}
-            </ion-label>
-        </ion-item>
+                <ion-label color="danger">{{ 'core.login.reconnectdescription' | translate }}</ion-label>
+            </ion-item>
+        </ion-card>
     </div>
     <form *ngIf="!isOAuth" [formGroup]="credForm" (ngSubmit)="login($event)" class="core-login-form" #reconnectForm>
         <ion-item class="ion-text-wrap core-username item-interactive">
diff --git a/src/theme/theme.light.scss b/src/theme/theme.light.scss
index 85c1d11dc..8e1044e95 100644
--- a/src/theme/theme.light.scss
+++ b/src/theme/theme.light.scss
@@ -206,10 +206,9 @@
 
     --spacer-background: #{$core-spacer-background};
     core-spacer {
-    --item-divider-background: var(--spacer-background);
+        --item-divider-background: var(--spacer-background);
     }
 
-
     --core-combobox-background: var(--ion-item-background);
     --core-combobox-color: #{$core-combobox-color};