From 7dec27239d0effedc5a67c5d2152dfe81960c605 Mon Sep 17 00:00:00 2001
From: =?UTF-8?q?Pau=20Ferrer=20Oca=C3=B1a?= <crazyserver@gmail.com>
Date: Fri, 8 Sep 2023 14:30:13 +0200
Subject: [PATCH] MOBILE-4201 login: Remove cancel button from reconnect page

---
 .../login/components/sites/sites.html         |  4 ++--
 .../login/pages/reconnect/reconnect.html      | 23 ++++++-------------
 src/theme/theme.base.scss                     |  5 ++++
 3 files changed, 14 insertions(+), 18 deletions(-)

diff --git a/src/core/features/login/components/sites/sites.html b/src/core/features/login/components/sites/sites.html
index b0e52ff2e..80e7ce643 100644
--- a/src/core/features/login/components/sites/sites.html
+++ b/src/core/features/login/components/sites/sites.html
@@ -1,8 +1,8 @@
 <ion-header>
     <ion-toolbar>
         <ion-buttons slot="start">
-            <ion-button fill="clear" (click)="close($event)" [attr.aria-label]="'core.back' | translate">
-                <ion-icon name="arrow-back" slot="icon-only" aria-hidden="true"></ion-icon>
+            <ion-button fill="clear" (click)="close($event)" [attr.aria-label]="'core.back' | translate" class="ion-back-button">
+                <ion-icon ios="chevron-back" md="arrow-back-sharp" slot="icon-only" aria-hidden="true"></ion-icon>
             </ion-button>
         </ion-buttons>
 
diff --git a/src/core/features/login/pages/reconnect/reconnect.html b/src/core/features/login/pages/reconnect/reconnect.html
index 5cd437bc8..02a5e8d3a 100644
--- a/src/core/features/login/pages/reconnect/reconnect.html
+++ b/src/core/features/login/pages/reconnect/reconnect.html
@@ -1,7 +1,9 @@
 <ion-header>
     <ion-toolbar>
         <ion-buttons slot="start">
-            <ion-back-button [text]="'core.back' | translate"></ion-back-button>
+            <ion-button fill="clear" (click)="cancel($event)" [attr.aria-label]="'core.back' | translate" class="ion-back-button">
+                <ion-icon ios="chevron-back" md="arrow-back-sharp" slot="icon-only" aria-hidden="true"></ion-icon>
+            </ion-button>
         </ion-buttons>
 
         <ion-title>
@@ -63,15 +65,10 @@
                         </ion-input>
                     </core-show-password>
                 </ion-item>
-                <div class="adaptable-buttons-row-reverse">
-                    <ion-button *ngIf="!isBrowserSSO" type="submit" expand="block" [disabled]="!credForm.valid"
-                        class="ion-margin core-login-login-button ion-text-wrap">
-                        {{ 'core.login.loginbutton' | translate }}
-                    </ion-button>
-                    <ion-button expand="block" fill="outline" (click)="cancel($event)" class="ion-margin ion-text-wrap">
-                        {{ 'core.login.cancel' | translate }}
-                    </ion-button>
-                </div>
+                <ion-button *ngIf="!isBrowserSSO" type="submit" expand="block" [disabled]="!credForm.valid"
+                    class="ion-margin core-login-login-button ion-text-wrap">
+                    {{ 'core.login.loginbutton' | translate }}
+                </ion-button>
 
                 <ion-button expand="block" *ngIf="isBrowserSSO" (click)="openBrowserSSO()"
                     class="ion-margin core-login-login-button ion-text-wrap">
@@ -89,12 +86,6 @@
             <core-login-methods *ngIf="siteConfig" [siteConfig]="siteConfig" [reconnect]="true" [siteUrl]="siteUrl"
                 [redirectData]="redirectData"></core-login-methods>
 
-            <!-- If OAuth, display cancel button since the form isn't displayed. -->
-            <ion-list *ngIf="isOAuth">
-                <ion-button expand="block" class="ion-margin" fill="outline" (click)="cancel($event)">
-                    {{ 'core.login.cancel' | translate }}
-                </ion-button>
-            </ion-list>
         </div>
     </core-loading>
 </ion-content>
diff --git a/src/theme/theme.base.scss b/src/theme/theme.base.scss
index 9a501ad6a..dafb8f140 100644
--- a/src/theme/theme.base.scss
+++ b/src/theme/theme.base.scss
@@ -173,6 +173,11 @@ ion-header {
             display: none;
         }
 
+        // Style fake back button like the original ones.
+        ion-button.ion-back-button {
+            width: 48px !important;
+        }
+
         .button.button-clear.button-has-icon-only,
         .button.button-solid.button-has-icon-only {
             width: var(--a11y-min-target-size);