MOBILE-3320 login: Improve login styles

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) {

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-card *ngIf="!isLoggedOut" class="core-danger-card core-login-reconnect-warning">
-            <ion-label color="danger" class="ion-text-wrap">
+            <ion-item>
                 <ion-icon name="fas-exclamation-circle" slot="start" aria-hidden="true"></ion-icon>
-                {{ 'core.login.reconnectdescription' | translate }}
+                <ion-label color="danger">{{ 'core.login.reconnectdescription' | translate }}</ion-label>
-            </ion-label>
+            </ion-item>
-        </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">

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};