From b4aea2a6fd9c22e93d5049e4aba40aa9847d9b37 Mon Sep 17 00:00:00 2001
From: gnezim <gnezim@gmail.com>
Date: Mon, 20 Apr 2026 13:56:54 +0300
Subject: [PATCH] FlightList: empty state matches Angular page-empty-list (icon
 + title + text, desktop/mobile layouts)

---
 src/ui/flights/FlightList.scss | 44 ++++++++++++++++++++++++++++------
 src/ui/flights/FlightList.tsx  |  9 ++++---
 2 files changed, 43 insertions(+), 10 deletions(-)

diff --git a/src/ui/flights/FlightList.scss b/src/ui/flights/FlightList.scss
index c4be55d2..926c9eb5 100644
--- a/src/ui/flights/FlightList.scss
+++ b/src/ui/flights/FlightList.scss
@@ -1,14 +1,44 @@
 @use "../../styles/colors" as colors;
 @use "../../styles/fonts" as fonts;
+@use "../../styles/variables" as vars;
+@use "../../styles/screen" as screen;
 
-.flight-list {
-  &--empty {
-    padding: 40px 20px;
-    text-align: center;
+// Mirrors Angular `page-empty-list.component.scss` 1:1: 50px/40px/50px/124px
+// padding on desktop with a 55px-wide icon anchored at 40px-left, and a
+// mobile override that stacks icon-above-text at centered alignment.
+.page-empty {
+  background-color: colors.$white;
+  padding: 50px 40px 50px 124px;
+  background-image: url('/assets/img/icon-not-found.svg');
+  background-position: 40px center;
+  background-repeat: no-repeat;
+  background-size: 55px auto;
+
+  @include screen.mobile {
+    padding: 124px 40px 50px 40px;
+    background-position: center 40px;
   }
 
-  &__empty-message {
-    color: colors.$light-gray;
-    font-size: fonts.$font-size-l;
+  &__title {
+    margin-bottom: vars.$space-s;
+    font-size: fonts.$font-size-xl;
+    font-weight: fonts.$font-bold;
+    color: colors.$text-color;
+
+    @include screen.mobile {
+      text-align: center;
+    }
+  }
+
+  &__text {
+    max-width: 80%;
+    font-size: fonts.$font-size-m;
+    line-height: 22px;
+    color: colors.$gray;
+
+    @include screen.mobile {
+      text-align: center;
+      max-width: initial;
+    }
   }
 }
diff --git a/src/ui/flights/FlightList.tsx b/src/ui/flights/FlightList.tsx
index 73b82f49..4c97114a 100644
--- a/src/ui/flights/FlightList.tsx
+++ b/src/ui/flights/FlightList.tsx
@@ -67,10 +67,13 @@ export const FlightList: FC<FlightListProps> = ({
   }
 
   if (flights.length === 0) {
+    // Mirrors Angular `page-empty-list`: icon (left / top on mobile) +
+    // title + body copy. Matches the same translation keys.
     return (
-      <div className="flight-list flight-list--empty">
-        <p className="flight-list__empty-message">{t("SHARED.FLIGHTS-NOT-FOUND")}</p>
-      </div>
+      <section className="page-empty" data-testid="page-empty">
+        <div className="page-empty__title">{t("SHARED.FLIGHTS-NOT-FOUND")}</div>
+        <div className="page-empty__text">{t("SHARED.FLIGHTS-NOT-FOUND-TEXT")}</div>
+      </section>
     );
   }