From f1af6e6a6e6b65547c554fab24958c1241e48ae7 Mon Sep 17 00:00:00 2001
From: =?UTF-8?q?Pau=20Ferrer=20Oca=C3=B1a?= <crazyserver@gmail.com>
Date: Thu, 12 Nov 2020 12:10:51 +0100
Subject: [PATCH] MOBILE-3585 files: Fix styles on file media

---
 .../addon/privatefiles/pages/index/index.html | 10 +--
 .../services/handlers/mainmenu.ts             |  2 +-
 src/app/components/file/core-file.html        |  2 +-
 src/app/components/loading/loading.ts         |  9 ++-
 .../capture-media/capture-media.scss          |  2 -
 src/theme/app.scss                            | 69 +++++++++++++++++++
 6 files changed, 81 insertions(+), 13 deletions(-)

diff --git a/src/app/addon/privatefiles/pages/index/index.html b/src/app/addon/privatefiles/pages/index/index.html
index e7aa95a36..cc6728c7b 100644
--- a/src/app/addon/privatefiles/pages/index/index.html
+++ b/src/app/addon/privatefiles/pages/index/index.html
@@ -22,14 +22,16 @@
         </div>
 
         <!-- Display info about space used and space left. -->
-        <p class="core-info-card" *ngIf="userQuota && filesInfo && filesInfo.filecount > 0">
+        <ion-card class="core-info-card" *ngIf="userQuota && filesInfo && filesInfo.filecount > 0">
+            <ion-item><ion-label>
             {{ 'core.quotausage' | translate:{$a: {used: spaceUsed, total: userQuotaReadable} } }}
-        </p>
+            </ion-label></ion-item>
+        </ion-card>
 
         <!-- List of files. -->
         <ion-list *ngIf="files && files.length > 0">
             <ng-container *ngFor="let file of files">
-                <ion-item button *ngIf="file.isdir" class="item-media" (click)="openFolder(file)">
+                <ion-item button *ngIf="file.isdir" class="item-file" (click)="openFolder(file)">
                     <ion-thumbnail slot="start">
                         <img [src]="file.imgPath" alt="" role="presentation">
                     </ion-thumbnail>
@@ -50,4 +52,4 @@
             <ion-icon name="fa-plus"></ion-icon>
         </ion-fab-button>
     </ion-fab>
-</ion-content>
\ No newline at end of file
+</ion-content>
diff --git a/src/app/addon/privatefiles/services/handlers/mainmenu.ts b/src/app/addon/privatefiles/services/handlers/mainmenu.ts
index 61e8d6ce2..d7c5c33d5 100644
--- a/src/app/addon/privatefiles/services/handlers/mainmenu.ts
+++ b/src/app/addon/privatefiles/services/handlers/mainmenu.ts
@@ -42,7 +42,7 @@ export class AddonPrivateFilesMainMenuHandler implements CoreMainMenuHandler {
      */
     getDisplayData(): CoreMainMenuHandlerData {
         return {
-            icon: 'fa-folder',
+            icon: 'fas-folder',
             title: 'addon.privatefiles.files',
             page: 'addon-privatefiles',
             subPage: 'root',
diff --git a/src/app/components/file/core-file.html b/src/app/components/file/core-file.html
index 03401dbda..71d1798c4 100644
--- a/src/app/components/file/core-file.html
+++ b/src/app/components/file/core-file.html
@@ -1,4 +1,4 @@
-<ion-item *ngIf="file" button class="ion-text-wrap item-media" (click)="download($event, true)" detail="false">
+<ion-item *ngIf="file" button class="ion-text-wrap item-file" (click)="download($event, true)" detail="false">
     <ion-thumbnail slot="start">
         <img [src]="fileIcon" alt="" role="presentation" />
     </ion-thumbnail>
diff --git a/src/app/components/loading/loading.ts b/src/app/components/loading/loading.ts
index a255e52d7..7e2557888 100644
--- a/src/app/components/loading/loading.ts
+++ b/src/app/components/loading/loading.ts
@@ -95,11 +95,10 @@ export class CoreLoadingComponent implements OnInit, OnChanges, AfterViewInit {
                 setTimeout(() => {
                     // Content is loaded so, center the spinner on the content itself.
                     this.element.classList.add('core-loading-loaded');
-                    setTimeout(() => {
-                        // Change CSS to force calculate height.
-                        this.content?.nativeElement.classList.add('core-loading-content');
-                        this.content?.nativeElement.classList.remove('core-loading-content-loading');
-                    }, 500);
+                    // Change CSS to force calculate height.
+                    // Removed 500ms timeout to avoid reallocating html.
+                    this.content?.nativeElement.classList.add('core-loading-content');
+                    this.content?.nativeElement.classList.remove('core-loading-content-loading');
                 });
             } else {
                 this.element.classList.remove('core-loading-loaded');
diff --git a/src/app/core/emulator/components/capture-media/capture-media.scss b/src/app/core/emulator/components/capture-media/capture-media.scss
index 8e911e0b4..58abf90e7 100644
--- a/src/app/core/emulator/components/capture-media/capture-media.scss
+++ b/src/app/core/emulator/components/capture-media/capture-media.scss
@@ -1,6 +1,5 @@
 :host {
     .core-av-wrapper {
-        // @todo: For some reason it takes a while to apply these styles, first it's displayed too big and then it's resized.
         width: 100%;
         height: 100%;
 
@@ -63,7 +62,6 @@
         }
     }
 
-
     ion-footer {
         background-color: var(--gray);
         border-top: 1px solid var(--gray-dark);
diff --git a/src/theme/app.scss b/src/theme/app.scss
index 61da86718..568622430 100644
--- a/src/theme/app.scss
+++ b/src/theme/app.scss
@@ -112,6 +112,75 @@ ion-list.list-md {
     --ion-safe-area-left: calc(-1 * var(--selected-item-border-width));
 }
 
+.item.item-file {
+    ion-thumbnail {
+        --size: 32px;
+        width: var(--size);
+        height: var(--size);
+    }
+}
+
+.item.core-primary-item,
+.item.core-info-item,
+.item.core-secondary-item,
+.item.core-tertiary-item,
+.item.core-success-item,
+.item.core-warning-item,
+.item.core-danger-item {
+    --inner-border-width: 0 0 3px 0;
+}
+.item.core-primary-item {
+    --border-color: var(--ion-color-primary);
+}
+.item.core-info-item,
+.item.core-secondary-item {
+    --border-color: var(--ion-color-secondary);
+}
+.item.core-tertiary-item {
+    --border-color: var(--ion-color-tertiary);
+}
+.item.core-success-item {
+    --border-color: var(--ion-color-success);
+}
+.item.core-warning-item {
+    --border-color: var(--ion-color-warning);
+}
+.item.core-danger-item {
+    --border-color: var(--ion-color-danger);
+}
+
+// Card styles
+
+// Message cards.
+ion-card.core-primary-card,
+ion-card.core-info-card,
+ion-card.core-secondary-card,
+ion-card.core-tertiary-card,
+ion-card.core-success-card,
+ion-card.core-warning-card,
+ion-card.core-danger-card {
+    border-bottom: 3px solid transparent;
+}
+ion-card.core-primary-card {
+    border-bottom-color: var(--ion-color-primary);
+}
+ion-card.core-info-card,
+ion-card.core-secondary-card {
+    border-bottom-color: var(--ion-color-secondary);
+}
+ion-card.core-tertiary-card {
+    border-bottom-color: var(--ion-color-tertiary);
+}
+ion-card.core-success-card {
+    border-bottom-color: var(--ion-color-success);
+}
+ion-card.core-warning-card {
+    border-bottom-color: var(--ion-color-warning);
+}
+ion-card.core-danger-card {
+    border-bottom-color: var(--ion-color-danger);
+}
+
 // Avatar
 // -------------------------
 // Large centered avatar