refactor: css tweaks

opentripplanner · Apr 22, 2024 · 926bb2a · 926bb2a
1 parent c2a3353
commit 926bb2a
Show file tree

Hide file tree

Showing 3 changed files with 5 additions and 8 deletions.
diff --git a/lib/components/user/monitored-trip/saved-trip-list.tsx b/lib/components/user/monitored-trip/saved-trip-list.tsx
@@ -132,6 +132,7 @@ class TripListItem extends Component<ItemProps, ItemState> {
             </Link>
           </TripPanelTitle>
           <RouteBlockGrid>
+            {/* TODO: Fix issues with custom route renderer */}
             <MetroItineraryRoutes
               expanded={false}
               itinerary={itinerary}

diff --git a/lib/components/user/monitored-trip/trip-duration-summary.tsx b/lib/components/user/monitored-trip/trip-duration-summary.tsx
@@ -7,7 +7,7 @@ import FormattedDuration from '../../util/formatted-duration'
 import InvisibleA11yLabel from '../../util/invisible-a11y-label'
 
 const Divider = styled.span`
-  margin: 0 5px;
+  margin: 0 7px;
 `
 
 const TripSummary = ({ monitoredTrip }: MonitoredTripProps): JSX.Element => {
@@ -25,7 +25,7 @@ const TripSummary = ({ monitoredTrip }: MonitoredTripProps): JSX.Element => {
       </InvisibleA11yLabel>
       <FormattedTime value={endTime} />
       <InvisibleA11yLabel>, </InvisibleA11yLabel>
-      <Divider> • </Divider>
+      <Divider>•</Divider>
       <span aria-hidden>
         <FormattedDuration duration={duration} />
       </span>

diff --git a/lib/components/user/monitored-trip/trip-monitored-days.tsx b/lib/components/user/monitored-trip/trip-monitored-days.tsx
@@ -25,7 +25,7 @@ const MonitoredDayCircle = styled.span<{
 }>`
   align-items: center;
   background-color: ${(props) =>
-    props.monitored ? props.baseColor : 'transparent'};
+    props.monitored ? props.baseColor : '#ECECEC'};
   border-radius: 50%;
   color: ${(props) => (props.monitored ? 'white' : 'inherit')};
   display: flex;
@@ -36,12 +36,8 @@ const MonitoredDayCircle = styled.span<{
   width: 3rem;
 
   span {
-    align-items: center;
-    display: flex;
-    height: 100%;
-    justify-content: center;
+    font-family: 'SF Pro Display', 'Inter', sans-serif;
     margin-top: 1px;
-    width: 100%;
   }
 `