MOBILE-4458 design: Renew empty box styles

src/core/components/empty-box/core-empty-box.html

@@ -1,4 +1,7 @@
-<img *ngIf="image && !icon" [src]="image" role="presentation" alt="">
-<ion-icon *ngIf="icon" [name]="icon" aria-hidden="true" />
+@if (icon) {
+    <ion-icon [name]="icon" aria-hidden="true" />
+} @else if (image) {
+    <img [src]="image" role="presentation" alt="">
+}
 <p *ngIf="message">{{ message }}</p>
 <ng-content />

src/core/components/empty-box/empty-box.scss

@@ -1,8 +1,16 @@
 @use "theme/globals" as *;
 
 :host {
-    --image-size: 120px;
-    --icon-color: var(--subdued-text-color);
+    --image-size: 80px;
+    --icon-color: var(--core-empty-box-icon-color);
+
+    &.core-empty-box-clickable {
+        z-index: 0;
+    }
+
+    &.dimmed {
+        --text-color: var(--gray-700);
+    }
 
     display: flex;
     flex-direction: column;
@@ -22,31 +30,16 @@
     img {
         height: var(--image-size);
     }
-    p {
-        font-size: 120%;
-    }
 
-    &.core-empty-box-clickable {
-        z-index: 0;
+    p,
+    ::ng-deep p {
+        font-size: var(--heading-6-font-size);
+        color: var(--text-color);
     }
-
-    &.dimmed {
-        --icon-color: var(--gray-400);
-        --text-color: var(--gray-700);
-    }
-
 }
 
 :host-context(html.dark) {
-
     &.dimmed {
         --text-color: var(--gray-300);
     }
-
-}
-
-@include media-breakpoint-down(sm) {
-    :host {
-        --image-size: 100px;
-    }
 }

src/core/components/empty-box/empty-box.ts

@@ -25,7 +25,7 @@ import { Component, HostBinding, Input } from '@angular/core';
 @Component({
     selector: 'core-empty-box',
     templateUrl: 'core-empty-box.html',
-    styleUrls: ['empty-box.scss'],
+    styleUrl: 'empty-box.scss',
 })
 export class CoreEmptyBoxComponent {
 
@@ -33,7 +33,10 @@ export class CoreEmptyBoxComponent {
     @Input() dimmed = false; // Wether the box is dimmed or not.
     @Input() icon?: string; // Name of the icon to use.
     @Input() image?: string; // Image source. If an icon is provided, image won't be used.
-    @Input() flipIconRtl = false; // Whether to flip the icon in RTL. Defaults to false.
+    /**
+     * @deprecated since 4.4. Not used anymore.
+     */
+    @Input() flipIconRtl = false;
 
     @HostBinding('class.dimmed')
     get isDimmed(): boolean {

src/core/components/split-view/split-view.html

@@ -2,4 +2,4 @@
     <ng-content />
 </ion-content>
 <ion-router-outlet class="content-outlet" />
-<core-empty-box class="content-placeholder" icon="fas-circle-arrow-left" [message]="placeholderText | translate" [flipIconRtl]="true" />
+<core-empty-box class="content-placeholder" icon="fas-circle-arrow-left" [message]="placeholderText | translate" />

src/theme/theme.dark.scss

@@ -97,6 +97,8 @@ html.dark {
 
     --core-progressbar-text-color: var(--gray-100);
 
+    --core-empty-box-icon-color: var(--gray-700);
+
     --ion-item-background: #{$ion-item-background-dark};
     --ion-item-icon-color: var(--medium);
     --ion-item-detail-icon-color: var(--dark);

src/theme/theme.light.scss

@@ -272,6 +272,8 @@ html {
     --core-progressbar-text-color: var(--medium);
     --core-progressbar-background: var(--primary-tint);
 
+    --core-empty-box-icon-color: var(--gray-300);
+
     --ion-item-background:        #{$ion-item-background};
     --ion-item-icon-color: var(--medium);
     --ion-item-detail-icon-color: var(--dark);