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] 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<TripBasicsProps, State> {
                       day,
                       finalItineraryExistence
                     )
-                    const labelClass = isDayDisabled ? 'disabled' : ''
+                    const labelClass = isDayDisabled ? 'disabled-day' : ''
                     const notAvailableText = isDayDisabled
                       ? intl.formatMessage(
                           {
@@ -353,16 +342,12 @@ class TripBasicsPane extends Component<TripBasicsProps, State> {
                           name={day}
                           type="checkbox"
                         />
-                        <Ban
-                          aria-hidden
-                          className="glyphicon"
-                          color={RED_ON_WHITE}
-                        />
-                        <label className={labelClass} htmlFor={day}>
+                        <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>