Saved trip days styles

lib/components/user/monitored-trip/trip-basics-pane.tsx

@@ -1,9 +1,9 @@
+import { Ban } from '@styled-icons/fa-solid/Ban'
 import { connect } from 'react-redux'
 import {
   ControlLabel,
   FormControl,
   FormGroup,
-  Glyphicon,
   HelpBlock,
   ProgressBar,
   Radio
@@ -26,14 +26,15 @@ import {
 } from '../../../util/monitored-trip'
 import { AppReduxState } from '../../../util/state-types'
 import { FieldSet } from '../styled'
+import { getBaseColor, RED_ON_WHITE } from '../../util/colors'
 import { getErrorStates } from '../../../util/ui'
 import { ItineraryExistence, MonitoredTrip } from '../types'
 import FormattedDayOfWeek from '../../util/formatted-day-of-week'
 import FormattedDayOfWeekCompact from '../../util/formatted-day-of-week-compact'
 import FormattedValidationError from '../../util/formatted-validation-error'
 import InvisibleA11yLabel from '../../util/invisible-a11y-label'
 
-import { BORDER_COLOR } from './trip-summary-pane'
+import { MonitoredDayCircle } from './trip-monitored-days'
 import TripStatus from './trip-status'
 import TripSummary from './trip-duration-summary'
 
@@ -55,6 +56,9 @@ interface State {
 
 // Styles.
 const AvailableDays = styled(FieldSet)`
+  display: flex;
+  gap: 4px;
+
   // Targets the formik checkboxes to provide better contrast on focus styles
   input {
     &:focus-visible,
@@ -67,54 +71,60 @@ const AvailableDays = styled(FieldSet)`
     }
   }
   & > span {
-    border: 1px solid ${BORDER_COLOR};
-    border-left: none;
+    align-items: center;
+    border-radius: 3rem;
     box-sizing: border-box;
-    display: inline-block;
-    height: 3em;
-    max-width: 150px;
-    min-width: 14.28%;
+    display: inline-flex;
+    flex-direction: row-reverse;
+    height: 3rem;
+    min-width: 4.5rem;
     position: relative;
     text-align: center;
+    width: 5rem;
   }
-  & > span:first-of-type {
-    border-left: 1px solid ${BORDER_COLOR};
-  }
-
-  .glyphicon {
+  svg {
+    color: ${RED_ON_WHITE};
     display: none;
     /* Remove top attribute set by Bootstrap. */
     top: inherit;
-  }
-
-  input {
-    display: block;
+    width: 1.3rem;
   }
 
   input,
-  .glyphicon {
-    bottom: 6px;
-    position: absolute;
-    width: 100%;
+  svg {
+    flex-shrink: 0;
+    /* Remove bootstrap's vertical margin */
+    margin: 0 7px 0 2px;
   }
 
   /* Check boxes for disabled days are replaced with the cross mark. */
   input[disabled] {
-    clip: rect(0, 0, 0, 0);
-    height: 0;
-    margin: 0;
-    width: 0;
-    z-index: -1;
+    display: none;
   }
-  input[disabled] ~ .glyphicon {
+  input[disabled] ~ svg {
     display: block;
   }
 
-  /* Make labels occupy the whole space, so the entire block is clickable. */
+  /* Add oblique strike for disabled days */
+  .disabled-day::after {
+    border-top: 2px solid ${RED_ON_WHITE};
+    content: '';
+    left: 0;
+    position: absolute;
+    right: 0;
+    top: 45%;
+    transform: rotate(-30deg);
+    transform-origin: center;
+  }
+
   label {
+    flex-grow: 1;
     font-weight: inherit;
     height: 100%;
-    width: 100%;
+    line-height: 3rem;
+    margin: 0;
+    position: relative;
+    text-align: center;
   }
 `
 
@@ -304,11 +314,7 @@ class TripBasicsPane extends Component<TripBasicsProps, State> {
                       day,
                       finalItineraryExistence
                     )
-                    const boxClass = isDayDisabled
-                      ? 'alert-danger'
-                      : monitoredTrip[day]
-                      ? 'bg-primary'
-                      : ''
+                    const labelClass = isDayDisabled ? 'disabled-day' : ''
                     const notAvailableText = isDayDisabled
                       ? intl.formatMessage(
                           {
@@ -320,10 +326,12 @@ class TripBasicsPane extends Component<TripBasicsProps, State> {
                         )
                       : ''
 
+                    const baseColor = getBaseColor()
                     return (
-                      <span
-                        className={boxClass}
+                      <MonitoredDayCircle
+                        baseColor={baseColor}
                         key={day}
+                        monitored={!isDayDisabled && monitoredTrip[day]}
                         title={notAvailableText}
                       >
                         <Field
@@ -334,20 +342,20 @@ class TripBasicsPane extends Component<TripBasicsProps, State> {
                           name={day}
                           type="checkbox"
                         />
+                        <Ban aria-hidden />
                         <label htmlFor={day}>
                           <InvisibleA11yLabel>
                             <FormattedDayOfWeek day={day} />
                           </InvisibleA11yLabel>
-                          <span aria-hidden>
+                          <span aria-hidden className={labelClass}>
                             {/* The abbreviated text is visual only. Screen readers should read out the full day. */}
                             <FormattedDayOfWeekCompact day={day} />
                           </span>
                         </label>
-                        <Glyphicon aria-hidden glyph="ban-circle" />
                         <InvisibleA11yLabel>
                           {notAvailableText}
                         </InvisibleA11yLabel>
-                      </span>
+                      </MonitoredDayCircle>
                     )
                   })}
                 </AvailableDays>

lib/components/user/monitored-trip/trip-monitored-days.tsx

@@ -1,14 +1,12 @@
-import { FormattedList, FormattedMessage, useIntl } from 'react-intl'
-
-import InvisibleA11yLabel from '../../util/invisible-a11y-label'
+import { FormattedList, FormattedMessage } from 'react-intl'
 import React from 'react'
+import styled from 'styled-components'
 
 import { ALL_DAYS } from '../../../util/monitored-trip'
 import { getBaseColor } from '../../util/colors'
 import FormattedDayOfWeek from '../../util/formatted-day-of-week'
 import FormattedDayOfWeekCompact from '../../util/formatted-day-of-week-compact'
-
-import styled from 'styled-components'
+import InvisibleA11yLabel from '../../util/invisible-a11y-label'
 
 interface Props {
   days: string[]
@@ -19,7 +17,7 @@ const DayCircleContainer = styled.div`
   gap: 4px;
 `
 
-const MonitoredDayCircle = styled.span<{
+export const MonitoredDayCircle = styled.span<{
   baseColor: string
   monitored: boolean
 }>`
@@ -41,7 +39,7 @@ const MonitoredDayCircle = styled.span<{
   }
 `
 
-const MonitoredDays = ({ days }: Props) => {
+const MonitoredDays = ({ days }: Props): JSX.Element => {
   const monitoredDaysList = (
     <FormattedList
       type="conjunction"