From ec1f63c818189d5a548119cf6429edc5dd51ee9e Mon Sep 17 00:00:00 2001
From: =?UTF-8?q?Pau=20Ferrer=20Oca=C3=B1a?= <crazyserver@gmail.com>
Date: Thu, 5 Nov 2020 14:37:33 +0100
Subject: [PATCH] MOBILE-3565 login: Fix some login styles

---
 .../site-onboarding/site-onboarding.html      |  2 +-
 .../site-onboarding/site-onboarding.scss      |  7 ++---
 .../login/pages/credentials/credentials.html  |  2 +-
 src/app/core/login/pages/site/site.html       |  2 +-
 src/app/core/login/pages/site/site.scss       | 29 ++++++++++---------
 src/app/core/login/pages/sites/sites.html     |  2 +-
 6 files changed, 23 insertions(+), 21 deletions(-)

diff --git a/src/app/core/login/components/site-onboarding/site-onboarding.html b/src/app/core/login/components/site-onboarding/site-onboarding.html
index 9c34463e2..0db7e52f6 100644
--- a/src/app/core/login/components/site-onboarding/site-onboarding.html
+++ b/src/app/core/login/components/site-onboarding/site-onboarding.html
@@ -45,7 +45,7 @@
         </div>
 
         <div *ngIf="step == 2" class="core-login-onboarding-step">
-            <ul class="core-login-onboarding-text">
+            <ul class="core-login-onboarding-text ion-text-start">
                 <li><ion-icon name="far-check-circle"></ion-icon> {{ 'core.login.onboardingcreatemanagecourses' | translate }}</li>
                 <li><ion-icon name="far-check-circle"></ion-icon> {{ 'core.login.onboardingenrolmanagestudents' | translate }}</li>
                 <li><ion-icon name="far-check-circle"></ion-icon> {{ 'core.login.onboardingprovidefeedback' | translate }}</li>
diff --git a/src/app/core/login/components/site-onboarding/site-onboarding.scss b/src/app/core/login/components/site-onboarding/site-onboarding.scss
index 1bbab53c3..102760920 100644
--- a/src/app/core/login/components/site-onboarding/site-onboarding.scss
+++ b/src/app/core/login/components/site-onboarding/site-onboarding.scss
@@ -2,9 +2,9 @@
     .core-login-onboarding-step {
         padding: 10px 20px;
         text-align: center;
-        /* @todo @include media-breakpoint-up(md) {
+        @media (min-width: 768px) {
             max-width: 80%;
-        }*/
+        }
         margin: 0 auto;
 
         p {
@@ -14,8 +14,7 @@
         ul {
             margin-bottom: 30px;
             list-style-type: none;
-            // @todo @include text-align('start');
-            // @todo @include padding-horizontal(10px, null);
+            padding-inline-start: 10px;
             li {
                 margin-bottom: 10px;
             }
diff --git a/src/app/core/login/pages/credentials/credentials.html b/src/app/core/login/pages/credentials/credentials.html
index e9a66b194..c753c36c4 100644
--- a/src/app/core/login/pages/credentials/credentials.html
+++ b/src/app/core/login/pages/credentials/credentials.html
@@ -7,7 +7,7 @@
         <ion-title>{{ 'core.login.login' | translate }}</ion-title>
 
         <ion-buttons slot="end">
-            <ion-button router-direction="forward" routerLink="/settings/app"
+            <ion-button router-direction="forward" routerLink="/settings"
                 [attr.aria-label]="'core.settings.appsettings' | translate">
                 <ion-icon slot="icon-only" name="fa-cog"></ion-icon>
             </ion-button>
diff --git a/src/app/core/login/pages/site/site.html b/src/app/core/login/pages/site/site.html
index 61d2434f0..dfcc17abd 100644
--- a/src/app/core/login/pages/site/site.html
+++ b/src/app/core/login/pages/site/site.html
@@ -7,7 +7,7 @@
         <ion-title>{{ 'core.login.connecttomoodle' | translate }}</ion-title>
 
         <ion-buttons slot="end">
-            <ion-button router-direction="forward" routerLink="/settings/app"
+            <ion-button router-direction="forward" routerLink="/settings"
                 [attr.aria-label]="'core.settings.appsettings' | translate">
                 <ion-icon slot="icon-only" name="fa-cog"></ion-icon>
             </ion-button>
diff --git a/src/app/core/login/pages/site/site.scss b/src/app/core/login/pages/site/site.scss
index 681180f31..31d2a2823 100644
--- a/src/app/core/login/pages/site/site.scss
+++ b/src/app/core/login/pages/site/site.scss
@@ -80,7 +80,10 @@
 
 .core-login-site-list-loading {
     position: absolute;
-    //@todo @include position(0, 0, 0, 0);
+    top: 0;
+    bottom: 0;
+    left: 0;
+    right: 0;
     width: 100%;
     height: 100%;
     display: flex;
@@ -89,11 +92,12 @@
     background-color: rgba(255, 255, 255, 0.5);
     z-index: 1;
     ion-spinner {
-        flex: 1;
+        margin: 0 auto;
     }
 }
 
 .core-login-site-nolist-loading {
+    margin-top: 16px;
     text-align: center;
 }
 
@@ -102,30 +106,29 @@
         margin-top: 0;
     }
 }
-/* @todo
-@include media-breakpoint-up(md) {
-    .scroll-content > * {
+
+@media (min-width: 768px) {
+    ion-content > * {
         max-width: 600px;
         margin: 0 auto;
         width: 100%;
     }
-    .core-login-site-logo {
-        margin-top: 20%;
-    }
 
-    &.hidden {
-        margin: 0;
+    ion-content .core-login-site-logo {
+        margin-top: 20%;
+        &.hidden {
+            margin-top: 0;
+        }
     }
 }
-*/
+
 .core-login-entered-site {
-    background-color: gray; // @todo $gray-lighter;
+    background-color: var(--gray-lighter);
     ion-thumbnail {
         box-shadow: 0 0 4px #ddd;
     }
 }
 
-
 .core-login-default-icon {
     filter: grayscale(100%);
 }
diff --git a/src/app/core/login/pages/sites/sites.html b/src/app/core/login/pages/sites/sites.html
index e80ca602e..726b56252 100644
--- a/src/app/core/login/pages/sites/sites.html
+++ b/src/app/core/login/pages/sites/sites.html
@@ -10,7 +10,7 @@
             <ion-button *ngIf="sites && sites.length > 0" (click)="toggleDelete()" [attr.aria-label]="'core.delete' | translate">
                 <ion-icon slot="icon-only" name="fa-pencil-alt"></ion-icon>
             </ion-button>
-            <ion-button router-direction="forward" routerLink="/settings/app"
+            <ion-button router-direction="forward" routerLink="/settings"
                 [attr.aria-label]="'core.settings.appsettings' | translate">
                 <ion-icon slot="icon-only" name="fa-cog"></ion-icon>
             </ion-button>