Reformat UI for Trip-bar

[3vivekb]

The current UI is not very compact which isn't great for mobile. We've surveyed a few different designs from the original contractor to UE group and google maps and the decided the next design should arranged as so:

[3vivekb]

When we update the UI we should also update the branding.

[3vivekb]

Branding was updated, we still need to make sure messages don't get hidden by the details tab.

[3vivekb]

• [x] For the first step of cleaning up the UI, figure out where we are getting CSS issues (like details covers up the distance) and clean up accordingly.
• [x] Add some sort of indicator for walking/biking/traveling distance, perhaps on the right side? For the turn by turn directions.

[3vivekb]

• [x] Clean up cases where it says .01 mi walking, 3 miles biking case
• [ ] Clean up symbol pictures, when it says walk -> Bus -> Bike, or other situations.

[3vivekb]

• [x] Add time as well, based on times used by OTP.

[3vivekb]

When cleaning up .01 mi, 3 miles biking, clean by only having the mode choice displayed.

• [x] investigate why Walking is showing up in Bike + Bus trips.

[3vivekb]

• [x] Remove time and dash from next to turn by turn directions (In user testing we discovered this wasn't super helpful, but distance was helpful)
• [x] Add time to the top. For example, when giving directions say 2.6 mi, about 10 min biking. Do the same for walking. If it's a single mode trip like just walking or just biking, don't add this additional information.

[3vivekb]

The pictures can be weird sometimes but overall it looks good!

[3vivekb]

f68e93a09c1dcd3c589c193177bdcc174a083f43