benmvp / bart-salmon / 155

52%

push

travis-ci

Update salmon routes UI (#40)

## Problem

The salmon routes UI was the quick & dirty UI I built early on to iterate on the algorithm and test it out in the wild. It has wrapping problems, is missing the number of trains, and just wasn't visually appealing.

## Solution

Completely restyled the salmon routes UI to fix all the wrapping problems and to make it more visually appealing. Also made full use of [`material-ui`'s](https://material-ui.com/) component library and css-in-js [styling solution](https://material-ui.com/styles/basics/). The route UI is now an [`ExpansionPanel`](https://material-ui.com/components/expansion-panels/), using [`Box`](https://material-ui.com/components/box/) & [`Grid`](https://material-ui.com/components/grid/) to layout the UI. Wordy text has been replaced by [`Badge`s](https://material-ui.com/components/badges/), [`Chip`s](https://material-ui.com/components/chips/), and [iconography](https://material-ui.com/components/material-icons/). This allowed me to greatly simplify & limit the CSS used.

The backwards (aka salmon) station and the additional time taking the route are the two most important pieces of information and are what are shown for every route in the expansion panels. You must tap into a given panel to expose the backwards train, the returning train and the wait times for each. Only one set of details will show at a time, making the expansion panels act more like an accordion.

I also made the refresh button at the top size `'small'` so that it doesn't take up as much height.

NOTE: The [`Arrivals` section](https://github.com/benmvp/bart-salmon/blob/master/src/components/Arrivals.tsx) in the middle will be updated in a follow-up PR.

## Screenshots

| Before | After |
| ------ | ----- |
| <img width="380" alt="Screen Shot 2019-11-21 at 10 31 23 PM" src="https://user-images.githubusercontent.com/5714478/69403175-c2302780-0cae-11ea-9bc9-6ce726b4cabf.png"> | <img width="378" alt="Screen Shot 2019... (continued)

98 of 168 branches covered (58.33%)

215 of 374 relevant lines covered (57.49%)

9039.66 hits per line