From c2ec52584ce16b6b2abc1d6025ec7e623048d2b5 Mon Sep 17 00:00:00 2001
From: =?UTF-8?q?Pau=20Ferrer=20Oca=C3=B1a?= <crazyserver@gmail.com>
Date: Thu, 17 Feb 2022 13:22:49 +0100
Subject: [PATCH] MOBILE-3931 login: Style oauth providers as buttons

---
 .../login/pages/credentials/credentials.html       |  6 +++---
 .../features/login/pages/reconnect/reconnect.html  |  8 ++++----
 src/theme/theme.base.scss                          | 14 ++++++++++++--
 3 files changed, 19 insertions(+), 9 deletions(-)

diff --git a/src/core/features/login/pages/credentials/credentials.html b/src/core/features/login/pages/credentials/credentials.html
index ce0c56988..b9a85c9d3 100644
--- a/src/core/features/login/pages/credentials/credentials.html
+++ b/src/core/features/login/pages/credentials/credentials.html
@@ -73,11 +73,11 @@
                     <h3 class="item-heading">{{ 'core.login.potentialidps' | translate }}</h3>
                 </ion-label>
             </ion-item>
-            <ion-item button *ngFor="let provider of identityProviders" class="ion-text-wrap core-oauth-icon"
-                (click)="oauthClicked(provider)" [attr.aria-label]="provider.name" detail="false">
+            <ion-button fill="outline" *ngFor="let provider of identityProviders" class="ion-text-wrap core-oauth-provider"
+                (click)="oauthClicked(provider)" [attr.aria-label]="provider.name" expand="block">
                 <img [src]="provider.iconurl" alt="" width="32" height="32" slot="start">
                 <ion-label>{{provider.name}}</ion-label>
-            </ion-item>
+            </ion-button>
         </ion-list>
 
         <ion-list *ngIf="canSignup" class="ion-padding-top core-login-sign-up">
diff --git a/src/core/features/login/pages/reconnect/reconnect.html b/src/core/features/login/pages/reconnect/reconnect.html
index 6d7ae2d7a..3a37bd1f0 100644
--- a/src/core/features/login/pages/reconnect/reconnect.html
+++ b/src/core/features/login/pages/reconnect/reconnect.html
@@ -87,11 +87,11 @@
                 <h3 class="item-heading">{{ 'core.login.potentialidps' | translate }}</h3>
             </ion-label>
         </ion-item>
-        <ion-item button *ngFor="let provider of identityProviders" class="ion-text-wrap core-oauth-icon" (click)="oauthClicked(provider)"
-            detail="false">
-            <img [src]="provider.iconurl" alt="" role="presentation" width="32" height="32" slot="start">
+        <ion-button fill="outline" *ngFor="let provider of identityProviders" class="ion-text-wrap core-oauth-provider"
+            (click)="oauthClicked(provider)" [attr.aria-label]="provider.name" expand="block">
+            <img [src]="provider.iconurl" alt="" width="32" height="32" slot="start">
             <ion-label>{{provider.name}}</ion-label>
-        </ion-item>
+        </ion-button>
     </ion-list>
 
     <!-- If OAuth, display cancel button since the form isn't displayed. -->
diff --git a/src/theme/theme.base.scss b/src/theme/theme.base.scss
index a2f2df66f..55ba3c65c 100644
--- a/src/theme/theme.base.scss
+++ b/src/theme/theme.base.scss
@@ -298,11 +298,13 @@ button,
 ion-button {
     margin: 4px 8px;
 
-    ion-spinner[slot=start] {
+    ion-spinner[slot=start],
+    img[slot=start] {
         @include margin-horizontal(-0.3em, 0.3em);
     }
 
-    ion-spinner[slot=end] {
+    ion-spinner[slot=end],
+    img[slot=end] {
         @include margin-horizontal(-0.3em, 0.3em);
     }
 }
@@ -468,6 +470,14 @@ ion-alert {
     }
 }
 
+ion-loading {
+    --border-radius: var(--huge-radius);
+
+    .loading-wrapper {
+        border-radius: var(--border-radius) !important;
+    }
+}
+
 // Ionic list.
 ion-list {
     padding: 0 !important;