From cf0aac9bcbceb89a1f55cb79931827ee8bd2dd99 Mon Sep 17 00:00:00 2001 From: binh-dam-ibigroup <56846598+binh-dam-ibigroup@users.noreply.github.com> Date: Thu, 13 Jun 2024 11:58:24 -0400 Subject: [PATCH 1/7] style(TripMonitoredDays): Shuffle imports and types --- .../user/monitored-trip/trip-monitored-days.tsx | 10 ++++------ 1 file changed, 4 insertions(+), 6 deletions(-) diff --git a/lib/components/user/monitored-trip/trip-monitored-days.tsx b/lib/components/user/monitored-trip/trip-monitored-days.tsx index 81376a1dd..a752619b4 100644 --- a/lib/components/user/monitored-trip/trip-monitored-days.tsx +++ b/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[] @@ -41,7 +39,7 @@ const MonitoredDayCircle = styled.span<{ } ` -const MonitoredDays = ({ days }: Props) => { +const MonitoredDays = ({ days }: Props): JSX.Element => { const monitoredDaysList = ( Date: Thu, 13 Jun 2024 17:58:48 -0400 Subject: [PATCH 2/7] refactor(TripBasicsPane): Apply round styles to availble days --- .../user/monitored-trip/trip-basics-pane.tsx | 69 ++++++++++--------- .../monitored-trip/trip-monitored-days.tsx | 2 +- 2 files changed, 37 insertions(+), 34 deletions(-) diff --git a/lib/components/user/monitored-trip/trip-basics-pane.tsx b/lib/components/user/monitored-trip/trip-basics-pane.tsx index 76dcf1df4..1fe5ef300 100644 --- a/lib/components/user/monitored-trip/trip-basics-pane.tsx +++ b/lib/components/user/monitored-trip/trip-basics-pane.tsx @@ -26,6 +26,7 @@ import { } from '../../../util/monitored-trip' import { AppReduxState } from '../../../util/state-types' import { FieldSet } from '../styled' +import { getBaseColor } from '../../util/colors' import { getErrorStates } from '../../../util/ui' import { ItineraryExistence, MonitoredTrip } from '../types' import FormattedDayOfWeek from '../../util/formatted-day-of-week' @@ -34,6 +35,7 @@ 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 +57,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,18 +72,7 @@ const AvailableDays = styled(FieldSet)` } } & > span { - border: 1px solid ${BORDER_COLOR}; - border-left: none; - box-sizing: border-box; - display: inline-block; - height: 3em; - max-width: 150px; - min-width: 14.28%; - position: relative; - text-align: center; - } - & > span:first-of-type { - border-left: 1px solid ${BORDER_COLOR}; + display: inline-flex; } .glyphicon { @@ -88,14 +82,8 @@ const AvailableDays = styled(FieldSet)` } input { - display: block; - } - - input, - .glyphicon { - bottom: 6px; - position: absolute; - width: 100%; + /* Remove bootstrap's vertical margin */ + margin: 0; } /* Check boxes for disabled days are replaced with the cross mark. */ @@ -110,11 +98,18 @@ const AvailableDays = styled(FieldSet)` display: block; } - /* Make labels occupy the whole space, so the entire block is clickable. */ label { + border-radius: 3rem; font-weight: inherit; - height: 100%; - width: 100%; + margin: 0; + height: 3rem; + min-width: 5rem; + width: auto; + } + label span[aria-hidden='true']::after { + content: ''; + display: inline-block; + width: 0.25rem; } ` @@ -320,21 +315,19 @@ class TripBasicsPane extends Component { ) : '' + const baseColor = getBaseColor() return ( - - - + + + + {notAvailableText} diff --git a/lib/components/user/monitored-trip/trip-monitored-days.tsx b/lib/components/user/monitored-trip/trip-monitored-days.tsx index a752619b4..63f5f35f6 100644 --- a/lib/components/user/monitored-trip/trip-monitored-days.tsx +++ b/lib/components/user/monitored-trip/trip-monitored-days.tsx @@ -17,7 +17,7 @@ const DayCircleContainer = styled.div` gap: 4px; ` -const MonitoredDayCircle = styled.span<{ +export const MonitoredDayCircle = styled.span<{ baseColor: string monitored: boolean }>` From e55cf0be665493cd4f4657a0bffefa8a0dac08f8 Mon Sep 17 00:00:00 2001 From: binh-dam-ibigroup <56846598+binh-dam-ibigroup@users.noreply.github.com> Date: Fri, 14 Jun 2024 11:57:25 -0400 Subject: [PATCH 3/7] refactor(TripBasicsPane): Improve styling --- .../user/monitored-trip/trip-basics-pane.tsx | 108 +++++++++++------- 1 file changed, 64 insertions(+), 44 deletions(-) diff --git a/lib/components/user/monitored-trip/trip-basics-pane.tsx b/lib/components/user/monitored-trip/trip-basics-pane.tsx index 1fe5ef300..6aee83100 100644 --- a/lib/components/user/monitored-trip/trip-basics-pane.tsx +++ b/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,7 +26,7 @@ import { } from '../../../util/monitored-trip' import { AppReduxState } from '../../../util/state-types' import { FieldSet } from '../styled' -import { getBaseColor } from '../../util/colors' +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' @@ -34,7 +34,6 @@ 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' @@ -72,44 +71,71 @@ const AvailableDays = styled(FieldSet)` } } & > span { + align-items: center; + border-radius: 3rem; + box-sizing: border-box; display: inline-flex; + flex-direction: row-reverse; + height: 3rem; + min-width: 4.5rem; + position: relative; + text-align: center; + width: auto; } - .glyphicon { display: none; + flex-shrink: 0; + margin: 0 3px; + /* Remove top attribute set by Bootstrap. */ top: inherit; + width: 1.3rem; + z-index: -1; } input { + flex-shrink: 0; /* Remove bootstrap's vertical margin */ - margin: 0; + margin: 0 3px; } /* 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 { display: block; } + label.disabled { + .glyphicon { + display: block; + } + } + + /* Add oblique strike for disabled days */ + label.disabled::after { + content: ''; + position: absolute; + top: 40%; + left: 0; + right: 1.3rem; + border-top: 3px solid ${RED_ON_WHITE}; + transform: rotate(-30deg); + transform-origin: center; + } + label { - border-radius: 3rem; + flex-grow: 1; font-weight: inherit; + height: 100%; + line-height: 3rem; margin: 0; - height: 3rem; - min-width: 5rem; - width: auto; + width: 100%; } - label span[aria-hidden='true']::after { - content: ''; - display: inline-block; - width: 0.25rem; + span.day { + flex-grow: 1; + text-align: center; } ` @@ -299,11 +325,7 @@ class TripBasicsPane extends Component { day, finalItineraryExistence ) - const boxClass = isDayDisabled - ? 'alert-danger' - : monitoredTrip[day] - ? 'bg-primary' - : '' + const labelClass = isDayDisabled ? 'disabled' : '' const notAvailableText = isDayDisabled ? intl.formatMessage( { @@ -317,17 +339,26 @@ class TripBasicsPane extends Component { const baseColor = getBaseColor() return ( - - + + + - - - - - + {notAvailableText} - + ) })} From 8c3cef1248871810c4d58bae7cc1aaf6fdb5c77f Mon Sep 17 00:00:00 2001 From: binh-dam-ibigroup <56846598+binh-dam-ibigroup@users.noreply.github.com> Date: Fri, 14 Jun 2024 12:37:22 -0400 Subject: [PATCH 4/7] refactor(TripBasicsPane): Tweak styles --- .../user/monitored-trip/trip-basics-pane.tsx | 43 ++++++------------- 1 file changed, 14 insertions(+), 29 deletions(-) diff --git a/lib/components/user/monitored-trip/trip-basics-pane.tsx b/lib/components/user/monitored-trip/trip-basics-pane.tsx index 6aee83100..6c69cc575 100644 --- a/lib/components/user/monitored-trip/trip-basics-pane.tsx +++ b/lib/components/user/monitored-trip/trip-basics-pane.tsx @@ -82,18 +82,16 @@ const AvailableDays = styled(FieldSet)` text-align: center; width: auto; } - .glyphicon { + svg { + color: ${RED_ON_WHITE}; display: none; - flex-shrink: 0; - margin: 0 3px; - /* Remove top attribute set by Bootstrap. */ top: inherit; width: 1.3rem; - z-index: -1; } - input { + input, + svg { flex-shrink: 0; /* Remove bootstrap's vertical margin */ margin: 0 3px; @@ -103,24 +101,18 @@ const AvailableDays = styled(FieldSet)` input[disabled] { display: none; } - input[disabled] ~ .glyphicon { + input[disabled] ~ svg { display: block; } - label.disabled { - .glyphicon { - display: block; - } - } - /* Add oblique strike for disabled days */ - label.disabled::after { + .disabled-day::after { + border-top: 2px solid ${RED_ON_WHITE}; content: ''; + left: 0; position: absolute; + right: 0; top: 40%; - left: 0; - right: 1.3rem; - border-top: 3px solid ${RED_ON_WHITE}; transform: rotate(-30deg); transform-origin: center; } @@ -131,12 +123,9 @@ const AvailableDays = styled(FieldSet)` height: 100%; line-height: 3rem; margin: 0; + position: relative; width: 100%; } - span.day { - flex-grow: 1; - text-align: center; - } ` function isDisabled(day: string, itineraryExistence?: ItineraryExistence) { @@ -325,7 +314,7 @@ class TripBasicsPane extends Component { day, finalItineraryExistence ) - const labelClass = isDayDisabled ? 'disabled' : '' + const labelClass = isDayDisabled ? 'disabled-day' : '' const notAvailableText = isDayDisabled ? intl.formatMessage( { @@ -353,16 +342,12 @@ class TripBasicsPane extends Component { name={day} type="checkbox" /> - -