MOBILE-3585 files: Fix styles on file media

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>
+</ion-content>

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',

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>

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.
-                        // 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.add('core-loading-content');
-                        this.content?.nativeElement.classList.remove('core-loading-content-loading');
+                    this.content?.nativeElement.classList.remove('core-loading-content-loading');
-                    }, 500);
                 });
             } else {
                 this.element.classList.remove('core-loading-loaded');

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

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