Improve Look and Feel of the Stop Pane

[aaronbrethorst]

Current State

The stop pane is the overlay depicted in the bottom left corner of the screenshot. It currently looks like the following screenshot:

Desired State

and we should reformat the data into something that looks more like the iOS app's arrivals and departures table:

ArrivalDeparture Component

Requirements

All of the necessary data has already been loaded in the component via its arrivals-and-departures API call. We can skip the pagination/load more feature for now. The only thing we need to focus on for the moment is improving the look and feel of StopPane.svelte

Acceptance criteria

• [x] Remove the textarea containing JSON.stringify() information (it's a placeholder for debugging purposes)
• [x] Create a new ArrivalDeparture component that resembles the iOS screenshot in the ArrivalDeparture Component section above
• [x] Render a list of ArrivalDeparture components from the data loaded from the server and display them in StopPane.

[aaronbrethorst]

@tarunsinghofficial a quick note for you: I may have given you the wrong impression about the styling of the stop pane. the screenshot I shared before was from the iOS app in dark mode. Here's what it looks like in light mode. the stop pane here should behave similarly.

We'll add proper support for dark mode in #5, though

[tarunsinghofficial]

@tarunsinghofficial a quick note for you: I may have given you the wrong impression about the styling of the stop pane. the screenshot I shared before was from the iOS app in dark mode. Here's what it looks like in light mode. the stop pane here should behave similarly.

We'll add proper support for dark mode in #5, though

Okay, great! I will work on this.