From b5d797236a3568f7a2282971cef48e22b57439c5 Mon Sep 17 00:00:00 2001 From: gnezim Date: Wed, 15 Apr 2026 19:08:03 +0300 Subject: [PATCH] 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. --- .../components/PopularRequestItem.scss | 7 ++ .../components/PopularRequestItem.tsx | 1 + .../components/PopularRequestsPanel.scss | 37 ++++++ .../components/PopularRequestsPanel.tsx | 1 + .../components/RequestInfo.scss | 6 + .../components/RequestInfo.tsx | 7 +- .../components/ScheduleSearchPage.scss | 31 +++++ .../components/ScheduleSearchPage.tsx | 1 + .../components/ScheduleStartPage.scss | 107 ++++++++++++++++++ .../schedule/components/ScheduleStartPage.tsx | 1 + 10 files changed, 194 insertions(+), 5 deletions(-) create mode 100644 src/features/popular-requests/components/PopularRequestItem.scss create mode 100644 src/features/popular-requests/components/PopularRequestsPanel.scss create mode 100644 src/features/popular-requests/components/RequestInfo.scss create mode 100644 src/features/schedule/components/ScheduleSearchPage.scss create mode 100644 src/features/schedule/components/ScheduleStartPage.scss diff --git a/src/features/popular-requests/components/PopularRequestItem.scss b/src/features/popular-requests/components/PopularRequestItem.scss new file mode 100644 index 00000000..910e5922 --- /dev/null +++ b/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; +} diff --git a/src/features/popular-requests/components/PopularRequestItem.tsx b/src/features/popular-requests/components/PopularRequestItem.tsx index 14fa86df..65cefed8 100644 --- a/src/features/popular-requests/components/PopularRequestItem.tsx +++ b/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 { diff --git a/src/features/popular-requests/components/PopularRequestsPanel.scss b/src/features/popular-requests/components/PopularRequestsPanel.scss new file mode 100644 index 00000000..a365e659 --- /dev/null +++ b/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%; + } + } +} diff --git a/src/features/popular-requests/components/PopularRequestsPanel.tsx b/src/features/popular-requests/components/PopularRequestsPanel.tsx index d87c5306..5bbda069 100644 --- a/src/features/popular-requests/components/PopularRequestsPanel.tsx +++ b/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 { diff --git a/src/features/popular-requests/components/RequestInfo.scss b/src/features/popular-requests/components/RequestInfo.scss new file mode 100644 index 00000000..483f76de --- /dev/null +++ b/src/features/popular-requests/components/RequestInfo.scss @@ -0,0 +1,6 @@ +@use "../../../styles/colors" as colors; + +.request-info { + color: colors.$blue-link; + cursor: pointer; +} diff --git a/src/features/popular-requests/components/RequestInfo.tsx b/src/features/popular-requests/components/RequestInfo.tsx index 5235b683..508db7da 100644 --- a/src/features/popular-requests/components/RequestInfo.tsx +++ b/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 ( ); } }} - style={{ - color: "var(--color-blue-link, #0645ad)", - cursor: "pointer", - }} > {children} diff --git a/src/features/schedule/components/ScheduleSearchPage.scss b/src/features/schedule/components/ScheduleSearchPage.scss new file mode 100644 index 00000000..c243f73a --- /dev/null +++ b/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; + } +} diff --git a/src/features/schedule/components/ScheduleSearchPage.tsx b/src/features/schedule/components/ScheduleSearchPage.tsx index 76f94d8d..d70412da 100644 --- a/src/features/schedule/components/ScheduleSearchPage.tsx +++ b/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"; diff --git a/src/features/schedule/components/ScheduleStartPage.scss b/src/features/schedule/components/ScheduleStartPage.scss new file mode 100644 index 00000000..4fdb0240 --- /dev/null +++ b/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; + } + } +} diff --git a/src/features/schedule/components/ScheduleStartPage.tsx b/src/features/schedule/components/ScheduleStartPage.tsx index 20d26ba4..19e3d158 100644 --- a/src/features/schedule/components/ScheduleStartPage.tsx +++ b/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.