Port Schedule and Popular Requests page styles

Added SCSS for ScheduleStartPage (form fields, schedule controls),
ScheduleSearchPage (calendar, outbound/inbound sections),
PopularRequestsPanel (grid layout, title), PopularRequestItem, and
RequestInfo (link styling). Replaced inline styles with SCSS class
names matching Angular source.

src/features/popular-requests/components/PopularRequestItem.scss

@@ -0,0 +1,7 @@
+@use "../../../styles/variables" as vars;
+@use "../../../styles/fonts" as fonts;
+
+.popular-request {
+  font-size: fonts.$font-size-m;
+  padding-bottom: vars.$space-xl;
+}

src/features/popular-requests/components/PopularRequestItem.tsx

@@ -12,6 +12,7 @@
 import { useTranslation } from "@/i18n/provider.js";
 import { useCityName } from "@/shared/hooks/useDictionaries.js";
 import { RequestInfo } from "./RequestInfo.js";
+import "./PopularRequestItem.scss";
 import type { PopularRequest } from "../types.js";
 
 export interface PopularRequestItemProps {

src/features/popular-requests/components/PopularRequestsPanel.scss

@@ -0,0 +1,37 @@
+@use "../../../styles/colors" as colors;
+@use "../../../styles/variables" as vars;
+@use "../../../styles/fonts" as fonts;
+@use "../../../styles/screen" as screen;
+
+.popular-requests {
+  background-color: colors.$blue-extra-light;
+  border-top: 1px solid colors.$border;
+  padding: 50px 50px 30px;
+  border-radius: 0 0 vars.$border-radius vars.$border-radius;
+
+  @include screen.mobile {
+    padding: 20px;
+    padding-bottom: 10px;
+  }
+
+  &__title {
+    font-size: 20px;
+    margin: 0;
+    padding-bottom: 50px;
+    font-weight: fonts.$font-regular;
+
+    @include screen.mobile {
+      padding-bottom: 20px;
+    }
+  }
+
+  &__item {
+    display: inline-flex;
+    flex-wrap: wrap;
+    width: 50%;
+
+    @include screen.mobile {
+      width: 100%;
+    }
+  }
+}

src/features/popular-requests/components/PopularRequestsPanel.tsx

@@ -12,6 +12,7 @@
 import { useTranslation } from "@/i18n/provider.js";
 import { usePopularRequests } from "../hooks/usePopularRequests.js";
 import { PopularRequestItem } from "./PopularRequestItem.js";
+import "./PopularRequestsPanel.scss";
 import type { PopularRequest } from "../types.js";
 
 export interface PopularRequestsPanelProps {

src/features/popular-requests/components/RequestInfo.scss

@@ -0,0 +1,6 @@
+@use "../../../styles/colors" as colors;
+
+.request-info {
+  color: colors.$blue-link;
+  cursor: pointer;
+}

src/features/popular-requests/components/RequestInfo.tsx

@@ -6,6 +6,7 @@
  */
 
 import type { ReactNode, MouseEvent } from "react";
+import "./RequestInfo.scss";
 
 export interface RequestInfoProps {
   children: ReactNode;
@@ -15,7 +16,7 @@ export interface RequestInfoProps {
 export function RequestInfo({ children, onClick }: RequestInfoProps): JSX.Element {
   return (
     <span
-      className="popular-request__link"
+      className="request-info"
       role="button"
       tabIndex={0}
       onClick={onClick}
@@ -25,10 +26,6 @@ export function RequestInfo({ children, onClick }: RequestInfoProps): JSX.Elemen
           onClick(e as unknown as MouseEvent<HTMLSpanElement>);
         }
       }}
-      style={{
-        color: "var(--color-blue-link, #0645ad)",
-        cursor: "pointer",
-      }}
     >
       {children}
     </span>

src/features/schedule/components/ScheduleSearchPage.scss

@@ -0,0 +1,31 @@
+@use "../../../styles/variables" as vars;
+@use "../../../styles/colors" as colors;
+@use "../../../styles/screen" as screen;
+
+.schedule-search {
+  &__calendar {
+    display: flex;
+    gap: vars.$space-s;
+    padding: vars.$space-xl;
+    overflow-x: auto;
+  }
+
+  &__error {
+    padding: vars.$space-xl;
+    color: colors.$red;
+  }
+
+  &__outbound,
+  &__inbound {
+    padding: vars.$space-xl 0;
+
+    h2 {
+      padding: 0 vars.$space-xl;
+      margin: 0 0 vars.$space-m;
+    }
+  }
+
+  &__inbound {
+    border-top: 1px solid colors.$border;
+  }
+}

src/features/schedule/components/ScheduleSearchPage.tsx

@@ -12,6 +12,7 @@ import type { FC } from "react";
 import { useCallback } from "react";
 import { useNavigate, useParams } from "@modern-js/runtime/router";
 import { FlightList } from "@/ui/flights/FlightList.js";
+import "./ScheduleSearchPage.scss";
 import { JsonLdRenderer } from "@/shared/seo/json-ld.js";
 import { useScheduleSearch } from "../hooks/useScheduleSearch.js";
 import { useScheduleCalendar } from "../hooks/useScheduleCalendar.js";

src/features/schedule/components/ScheduleStartPage.scss

@@ -0,0 +1,107 @@
+@use "../../../styles/variables" as vars;
+@use "../../../styles/colors" as colors;
+@use "../../../styles/screen" as screen;
+
+.schedule-start {
+  &__title {
+    font-size: 22px;
+    margin: 0 0 vars.$space-xl;
+  }
+
+  &__form {
+    display: flex;
+    flex-direction: column;
+    gap: vars.$space-m;
+
+    .card {
+      display: flex;
+      flex-direction: column;
+    }
+
+    @include screen.mobile {
+      .card {
+        padding: vars.$space-xl vars.$space-xl 0;
+      }
+    }
+  }
+
+  &__field {
+    display: flex;
+    flex-direction: column;
+    gap: vars.$space-s;
+
+    label {
+      font-weight: 500;
+    }
+
+    input[type="text"],
+    input[type="date"] {
+      height: vars.$standard-button-height;
+      padding: 0 vars.$space-l;
+      border: 1px solid colors.$border-input;
+      border-radius: vars.$border-radius;
+      font-size: 16px;
+      transition: border-color 0.2s;
+
+      &:focus {
+        outline: none;
+        border-color: colors.$blue-light;
+        box-shadow: 0 0 0 0.2em colors.$focus-shadow;
+      }
+    }
+  }
+
+  &__submit {
+    height: vars.$standard-button-height;
+    background-color: colors.$blue-light;
+    color: colors.$white;
+    border: none;
+    border-radius: vars.$border-radius;
+    font-size: 16px;
+    cursor: pointer;
+
+    &:hover {
+      background-color: colors.$blue-light--hover;
+    }
+
+    &:focus {
+      box-shadow: 0 0 0 0.2em colors.$focus-shadow;
+    }
+  }
+}
+
+.schedule-home-page-header {
+  display: flex;
+  margin: vars.$space-xl;
+
+  @include screen.mobile {
+    margin-left: 0;
+    margin-right: 0;
+  }
+}
+
+.schedule-home-page-header-border {
+  border-bottom: 1px solid colors.$border;
+
+  @include screen.mobile {
+    display: none;
+  }
+}
+
+.schedule-controls {
+  .card {
+    display: flex;
+    flex-direction: column;
+  }
+
+  @include screen.mobile {
+    .card {
+      padding: vars.$space-xl vars.$space-xl 0;
+    }
+
+    &__tabs {
+      display: flex;
+      flex-direction: column;
+    }
+  }
+}

src/features/schedule/components/ScheduleStartPage.tsx

@@ -10,6 +10,7 @@
 import { type FC, useState, useCallback, type FormEvent } from "react";
 import { useNavigate, useParams } from "@modern-js/runtime/router";
 import { buildScheduleUrl } from "../url.js";
+import "./ScheduleStartPage.scss";
 
 /**
  * Format today's date as yyyyMMdd.