From 75afcb15348308561a4a98408a9101e484f23e5f Mon Sep 17 00:00:00 2001
From: =?UTF-8?q?Pau=20Ferrer=20Oca=C3=B1a?= <crazyserver@gmail.com>
Date: Thu, 22 Feb 2024 11:38:38 +0100
Subject: [PATCH] MOBILE-4458 design: Renew empty box styles

---
 .../components/empty-box/core-empty-box.html  |  7 ++--
 src/core/components/empty-box/empty-box.scss  | 35 ++++++++-----------
 src/core/components/empty-box/empty-box.ts    |  7 ++--
 .../components/split-view/split-view.html     |  2 +-
 src/theme/theme.dark.scss                     |  2 ++
 src/theme/theme.light.scss                    |  2 ++
 6 files changed, 29 insertions(+), 26 deletions(-)

diff --git a/src/core/components/empty-box/core-empty-box.html b/src/core/components/empty-box/core-empty-box.html
index 29d45bbee..6d877d502 100644
--- a/src/core/components/empty-box/core-empty-box.html
+++ b/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 />
diff --git a/src/core/components/empty-box/empty-box.scss b/src/core/components/empty-box/empty-box.scss
index db3208472..4c2566770 100644
--- a/src/core/components/empty-box/empty-box.scss
+++ b/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;
-    }
 }
diff --git a/src/core/components/empty-box/empty-box.ts b/src/core/components/empty-box/empty-box.ts
index cffaa295a..1507ab73f 100644
--- a/src/core/components/empty-box/empty-box.ts
+++ b/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 {
diff --git a/src/core/components/split-view/split-view.html b/src/core/components/split-view/split-view.html
index df5108b8c..d9fc7aaf0 100644
--- a/src/core/components/split-view/split-view.html
+++ b/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" />
diff --git a/src/theme/theme.dark.scss b/src/theme/theme.dark.scss
index 7ee163002..eab185287 100644
--- a/src/theme/theme.dark.scss
+++ b/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);
diff --git a/src/theme/theme.light.scss b/src/theme/theme.light.scss
index 4b8940fcc..dbc63e7fa 100644
--- a/src/theme/theme.light.scss
+++ b/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);