feat(SavedTripList): Updated trip card design #1151
Conversation
| width: 27px; | ||
| height: 27px; | ||
| border-radius: 50%; | ||
| background-color: ${(props) => (props.monitored ? '#4152a4' : 'transparent')}; |
There was a problem hiding this comment.
This is nice! I think a border of the same color should be shown for all cases, so that the outline of the circle is visible for non-monitored days.
There was a problem hiding this comment.
I added the borders (although I went with #333 for the color, to make it clear those days were not monitored). I think I prefer without but I'll leave it up to the 2nd reviewer to break the tie!
| Before | After |
|---|---|
 |
 |
There was a problem hiding this comment.
I prefer the "after" version!
There was a problem hiding this comment.
Am I missing CSS in the screenshot below?
There was a problem hiding this comment.
Rats, I thought beb2dd2 fixed this but I guess not. Is it because I'm calling getBaseColor at the top level instead of inside the MonitoredDays component?
There was a problem hiding this comment.
@miles-grant-ibigroup @binh-dam-ibigroup removed the border in accordance with our tech call conversation - we can use borders on the buttons inside the form, hopefully to show that those are interactive and these aren't?
There was a problem hiding this comment.
@amy-corson-ibigroup Hmm I think each day should still show the circle shape somehow. Maybe in some pale grey? Contrast-wise, it should be ok, as the high-contrast circle denotes a selected day vs. a low-contrast.
…/otp-react-redux into update-trip-card
| const SavedTripBody = styled.div` | ||
| display: flex; | ||
| justify-content: center; | ||
| padding: 0 15px; |
There was a problem hiding this comment.
Do you have a preference for having the location icons flush or indented with respect to the the trip name heading?
| width: 27px; | ||
| height: 27px; | ||
| border-radius: 50%; | ||
| background-color: ${(props) => (props.monitored ? '#4152a4' : 'transparent')}; |
| const TripDetailWithIcon = styled(TextWIcon)` | ||
| align-items: center; | ||
| gap: 12px; | ||
| // TODO: Do this in grid |
There was a problem hiding this comment.
Is this legal in styled-components? I'm nervous. Shouldn't it be /* comment */
There was a problem hiding this comment.
Styled components supports JS line comments! styled-components/stylelint-processor-styled-components#164
|
Thank you so much @binh-dam-ibigroup and @miles-grant-ibigroup!! |
Description:
PR Checklist:
|