feat: Style tweaks for the route schedule page headers

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

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"""
+    <h1 class="schedule__route-name notranslate">
+      <div class="flex gap-1 items-center">
+        <.route_header_icon route={@route} /> <span>{route_header_text(@route)}</span>
+      </div>
+    </h1>
+    """
+  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

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"""
     <div class={"schedule__header #{ header_class(@route) }"}>
       <div class="schedule__header-container">
-        <h1 class="schedule__route-name notranslate">{route_header_text(@route)}</h1>
+        <.route_header route={@route} />
         {route_header_description(@route)}
         {route_feature_badge(@route)}
         <div class="schedule__header-tabs">{header_tabs(assigns)}</div>

lib/dotcom_web/templates/schedule/_line_header.html.heex

@@ -1,6 +1,6 @@
 <div class={"schedule__header #{ header_class(@route) }"}>
   <div class="schedule__header-container">
-    <h1 class="schedule__route-name notranslate">{route_header_text(@route)}</h1>
+    <DotcomWeb.Components.ScheduleHeaderComponents.route_header route={@route} />
     {route_header_description(@route)}
     {route_feature_badge(@route)}
     <div class="schedule__header-tabs">