diff --git a/assets/css/_schedule.scss b/assets/css/_schedule.scss
index a2dcbd301c..fcee5bae5c 100644
--- a/assets/css/_schedule.scss
+++ b/assets/css/_schedule.scss
@@ -5,9 +5,9 @@
.schedule__route-name {
display: inline-block;
- margin-bottom: calc(#{$base-spacing} / 2);
- margin-top: 1.75rem;
- text-transform: uppercase;
+ font-size: var(--font-size-2xl);
+ margin-bottom: 1rem;
+ margin-top: 1.5rem;
}
.schedule-date-picker {
@@ -308,6 +308,7 @@
.schedule__description {
display: inline-block;
+ font-size: 2rem;
margin-bottom: $base-spacing * 1.5;
margin-top: 0;
}
@@ -352,15 +353,6 @@
color: $white;
display: inline-block;
font-weight: bold;
- min-width: $base-spacing * 4;
- padding: calc(#{$base-spacing} / 4) $base-spacing;
+ padding: calc(#{$base-spacing} / 8) calc(3 * $base-spacing / 4);
text-align: center;
-
- @include media-breakpoint-down(xs) {
- min-width: $base-spacing * 3;
- }
-
- @include media-breakpoint-up(lg) {
- min-width: $base-spacing * 5;
- }
}
diff --git a/lib/dotcom_web/components/schedule_page/schedule_header_components.ex b/lib/dotcom_web/components/schedule_page/schedule_header_components.ex
new file mode 100644
index 0000000000..2a1503c7d5
--- /dev/null
+++ b/lib/dotcom_web/components/schedule_page/schedule_header_components.ex
@@ -0,0 +1,66 @@
+defmodule DotcomWeb.Components.ScheduleHeaderComponents do
+ @moduledoc """
+ Components for the shared header for the schedule pages (line, timetable, and route-level alerts pages).
+ """
+
+ use DotcomWeb, :component
+
+ import DotcomWeb.ScheduleView, only: [route_header_text: 1]
+
+ alias Routes.Route
+
+ def route_header(assigns) do
+ ~H"""
+
+
+ <.route_header_icon route={@route} /> {route_header_text(@route)}
+
+
+ """
+ end
+
+ defp route_header_icon(%{route: %Route{type: route_type}} = assigns)
+ when route_type in [0, 1] do
+ ~H"""
+ <.header_icon name="icon-subway-default" />
+ """
+ end
+
+ defp route_header_icon(%{route: %Route{type: 2}} = assigns) do
+ ~H"""
+ <.header_icon name="icon-commuter-rail-default" />
+ """
+ end
+
+ defp route_header_icon(%{route: %Route{type: 3} = route} = assigns) do
+ if Route.silver_line?(route) do
+ ~H"""
+ <.header_icon class="mr-1" name="icon-bus-default" />
+ """
+ else
+ ~H""
+ end
+ end
+
+ defp route_header_icon(%{route: %Route{type: 4}} = assigns) do
+ ~H"""
+ <.header_icon class="mr-1" name="icon-ferry-default" />
+ """
+ end
+
+ defp route_header_icon(assigns), do: ~H""
+
+ attr :class, :string, default: ""
+ attr :name, :string, required: true
+
+ defp header_icon(assigns) do
+ ~H"""
+ <.icon
+ aria-hidden
+ class={"fill-current size-8 shrink-0 #{@class}"}
+ type="icon-svg"
+ name={@name}
+ />
+ """
+ end
+end
diff --git a/lib/dotcom_web/live/line_diagram_live.ex b/lib/dotcom_web/live/line_diagram_live.ex
index fc0a4a683b..d3f308caa2 100644
--- a/lib/dotcom_web/live/line_diagram_live.ex
+++ b/lib/dotcom_web/live/line_diagram_live.ex
@@ -11,10 +11,11 @@ defmodule DotcomWeb.LineDiagramLive do
alias DotcomWeb.PartialView.{HeaderTab, HeaderTabs}
+ import DotcomWeb.Components.ScheduleHeaderComponents, only: [route_header: 1]
+
import DotcomWeb.ScheduleView,
only: [
header_class: 1,
- route_header_text: 1,
route_header_description: 1,
route_feature_badge: 1,
route_tab_class: 1
@@ -105,7 +106,7 @@ defmodule DotcomWeb.LineDiagramLive do
~H"""