Minor Pattern Viewer Overhaul #1467
Conversation
There was a problem hiding this comment.
Overall this is quite a good cleanup. Well implemented. Just a few small issues!
However, I would like to maybe ask for the old colored background mode to be configurable (even if off by default)? Just because on some configurations which have a whiter map the amount of white on the screen is pretty glaring, especially when the nearby view sidebar, the itinerary selection sidebar, and schedule view sidebar each have strong background colors.
lib/components/viewers/styled.ts
Outdated
| @@ -23,8 +20,19 @@ export const RouteNameContainer = styled.div` | |||
| ` | |||
| export const LogoLinkContainer = styled.div` | |||
| display: flex; | |||
| box-shadow: rgba(50, 50, 93, 0.25) 0px 13px 27px -5px, | |||
There was a problem hiding this comment.
This is a new shadow that's not seen anywhere else in our design. I'm ok to introduce a new pattern, but if we do that then shouldn't we add it some other places as well? The trip viewer and the line between the itinerary planner and the itinerary list could probably use this shadow as well
There was a problem hiding this comment.
Okay I've done something controversial and taken the slight border which was in the route viewer and added it here and to the trip viewer. I think it looks a little cleaner on patterns with no overflow but lmk what you think! Pics in the PR description
| <HeaderText className="header-text"> | ||
| <FormattedMessage id="components.TripViewer.header" /> | ||
| </HeaderText> | ||
| <div className="back-button-container"> |
There was a problem hiding this comment.
Alignment here is very off
There was a problem hiding this comment.
Cleaner now! And I fixed the header on mobile
Description:
hideBackButtonprop (it didn't do anything)Also I removed the background color on the pattern viewer and changed the route color into more of an accent color. I also moved the operator and external link to the bottom of the page (in line with some previous designs) but I am open to feedback.
RouteRowDetailscomponent that can be used in the route viewer and pattern viewerPR Checklist: