FlightList: empty state matches Angular page-empty-list (icon + title + text, desktop/mobile layouts)

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;
+    }
   }
 }

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