feat: Style tweaks for the route schedule page headers

[joshlarson]

Scope

Asana Ticket: 💈 Visual styling tweaks

Note

There was a tiny bit of scope-shifting, due to some tokens that are desired for this not being available in the design system, and thus not available in Figma.

• For non-silver-line bus, the route pill and long-name text should all be in the h1, and should be 1.75rem (28px) on Desktop, and 1.5rem (24px) on Mobile. For all other modes, those font sizes should be the same as they currently are in prod, which is 2.5rem (40px) on Desktop, and 2rem (32px) on Mobile.
• In prod, we currently remove the " Line" suffix for commuter rail routes, but we decided not to do that anymore.

I added these notes to the ticket as well.

Implementation

I did this in three five+ commits:

1. Just the plain old CSS stuff - the font size and padding changes.
2. Refactor to create a HEEx component file, currently just for the <h1>{route_header_text}</h1>, but I imagine that we may want to eventually use it for the whole schedule route header.
3. Add the mode icon to the appropriate routes/modes.
4. Refactor to make the bus route sign (the black-background-white-text pill with the bus route number) be the route header icon instead of the route header text. (This preserves the readout, however, since that is important)
5. Move the bus route long-name (e.g. "Hull Ferry - Hingham Depot") into the <h1> title, and remove the <h2> description (this improves line-wrapping... see below, and aligns with the designs, which have both the route number and the long-name as <h1>'s).

... plus a few additional commits to fix tests, address design feedback, etc.

Screenshots

Subway

Commuter Rail

Silver Line Bus

Non-Silver Line Bus

Ferry

How to test

Look at the various route pages linked above, as well as any other route pages you can think of. Check bus routes with short route numbers, commuter rail routes with long names, bus routes with long long-names, etc. See how things look at different browser widths.

Note

👇 is the current line-wrapping behavior, compared to prod. Unlike below, I am happy with this.

Below is what it looked like before I added this change.

---

I'm not sure I love the wrapping behavior for bus routes with long names. It's not new, but the combination of the bottom-padding change and the fact that the bus route ID and the route description are the same font size now make the wrapping look more wrong (IMO). I'm interested in ideas for how to make that look better, and will likely explore those before merging.

[joshlarson]

Got a bit of design feedback, so pulling back to draft for a tiny bit in order to add that feedback in.