New dt selector

lib/components/form/advanced-settings-button.tsx

@@ -1,6 +1,7 @@
-import { ArrowRight } from '@styled-icons/fa-solid'
-import { FormattedMessage } from 'react-intl'
+import { Gear } from '@styled-icons/fa-solid'
+import { useIntl } from 'react-intl'
 
+import { Button } from './batch-styled'
 import { grey } from '../util/colors'
 import React from 'react'
 import styled from 'styled-components'
@@ -9,21 +10,29 @@ interface Props {
   onClick: () => void
 }
 
-const StyledTransparentButton = styled.button`
-  align-items: center;
-  background: transparent;
-  border: none;
-  color: ${grey[800]};
-  display: flex;
-  gap: 7px;
-  margin-bottom: 5px;
+const StyledAdvancedSettingsButton = styled(Button)`
+  border: 2px solid ${grey[700]};
+  color: ${grey[700]};
+  background: white;
 `
 
-const AdvancedSettingsButton = ({ onClick }: Props): JSX.Element => (
-  <StyledTransparentButton id="open-advanced-settings-button" onClick={onClick}>
-    <FormattedMessage id="components.BatchSearchScreen.moreOptions" />
-    <ArrowRight size={18} />
-  </StyledTransparentButton>
-)
+const AdvancedSettingsButton = ({ onClick }: Props): JSX.Element => {
+  const intl = useIntl()
+
+  const label = intl.formatMessage({
+    id: 'components.BatchSearchScreen.moreOptions'
+  })
+
+  return (
+    <StyledAdvancedSettingsButton
+      aria-label={label}
+      id="open-advanced-settings-button"
+      onClick={onClick}
+      title={label}
+    >
+      <Gear size={30} />
+    </StyledAdvancedSettingsButton>
+  )
+}
 
 export default AdvancedSettingsButton

lib/components/form/advanced-settings-panel.tsx

@@ -92,22 +92,6 @@ const ReturnToTripPlanButton = styled.button`
 
 const DtSelectorContainer = styled.div`
   margin: 2em 0;
-
-  .date-time-modal {
-    padding: 0;
-
-    .main-panel {
-      margin: 0;
-
-      button {
-        padding: 6px 0;
-      }
-
-      .date-time-selector {
-        margin: 15px 0;
-      }
-    }
-  }
 `
 
 const AdvancedSettingsPanel = ({

lib/components/form/batch-settings.tsx

@@ -25,10 +25,11 @@ import {
 import {
   MainSettingsRow,
   ModeSelectorContainer,
-  PlanTripButton
+  PlanTripButton,
+  TripFormButtonContainer
 } from './batch-styled'
 import AdvancedSettingsButton from './advanced-settings-button'
-import DateTimeButton from './date-time-button'
+import DateTimeModal from './date-time-modal'
 
 // TYPESCRIPT TODO: better types
 type Props = {
@@ -41,7 +42,6 @@ type Props = {
   openAdvancedSettings: () => void
   routingQuery: any
   setQueryParam: (evt: any) => void
-  spacedOutModeSelector?: boolean
 }
 
 export function setModeButtonEnabled(enabledKeys: string[]) {
@@ -65,14 +65,10 @@ function BatchSettings({
   onPlanTripClick,
   openAdvancedSettings,
   routingQuery,
-  setQueryParam,
-  spacedOutModeSelector
+  setQueryParam
 }: Props) {
   const intl = useIntl()
 
-  // Whether the date/time selector is open
-  const [dateTimeOpen, setDateTimeOpen] = useState(false)
-
   // @ts-expect-error Context not typed
   const { ModeIcon } = useContext(ComponentContext)
 
@@ -89,10 +85,9 @@ function BatchSettings({
   const accentColor = getDarkenedBaseColor()
 
   return (
-    <MainSettingsRow>
-      <DateTimeButton open={dateTimeOpen} setOpen={setDateTimeOpen} />
-      <AdvancedSettingsButton onClick={openAdvancedSettings} />
-      <ModeSelectorContainer squashed={!spacedOutModeSelector}>
+    <MainSettingsRow className="main-settings-row">
+      <DateTimeModal />
+      <ModeSelectorContainer>
         <MetroModeSelector
           accentColor={baseColor}
           activeHoverColor={accentColor.toHexString()}
@@ -107,23 +102,26 @@ function BatchSettings({
             onSettingsUpdate(setQueryParam)
           )}
         />
-        <PlanTripButton
-          id="plan-trip"
-          onClick={_planTrip}
-          title={intl.formatMessage({
-            id: 'components.BatchSettings.planTripTooltip'
-          })}
-        >
-          <StyledIconWrapper style={{ fontSize: '1.6em' }}>
-            {hasValidLocation(currentQuery, 'from') &&
-            hasValidLocation(currentQuery, 'to') &&
-            !!activeSearch ? (
-              <SyncAlt />
-            ) : (
-              <Search />
-            )}
-          </StyledIconWrapper>
-        </PlanTripButton>
+        <TripFormButtonContainer className="trip-form-buttons">
+          <AdvancedSettingsButton onClick={openAdvancedSettings} />
+          <PlanTripButton
+            id="plan-trip"
+            onClick={_planTrip}
+            title={intl.formatMessage({
+              id: 'components.BatchSettings.planTripTooltip'
+            })}
+          >
+            <StyledIconWrapper style={{ fontSize: '1.6em' }}>
+              {hasValidLocation(currentQuery, 'from') &&
+              hasValidLocation(currentQuery, 'to') &&
+              !!activeSearch ? (
+                <SyncAlt />
+              ) : (
+                <Search />
+              )}
+            </StyledIconWrapper>
+          </PlanTripButton>
+        </TripFormButtonContainer>
       </ModeSelectorContainer>
     </MainSettingsRow>
   )
@@ -145,8 +143,7 @@ const mapStateToProps = (state: any) => {
       modes?.initialState?.enabledModeButtons ||
       {},
     fillModeIcons: state.otp.config.itinerary?.fillModeIcons,
-    modeButtonOptions: modes?.modeButtons || [],
-    spacedOutModeSelector: modes?.spacedOut
+    modeButtonOptions: modes?.modeButtons || []
   }
 }
 

lib/components/form/batch-styled.ts

@@ -44,6 +44,11 @@ export const Button = styled.button`
   ${buttonCss}
 `
 
+export const TripFormButtonContainer = styled.div`
+  display: flex;
+  gap: 2px;
+`
+
 export const PlanTripButton = styled(Button)`
   background-color: green;
   color: #ffffffdd;
@@ -61,22 +66,15 @@ export const PlanTripButton = styled(Button)`
   }
 `
 
-export const ModeSelectorContainer = styled.div<{ squashed?: boolean }>`
+export const ModeSelectorContainer = styled.div`
   align-items: flex-start;
   display: flex;
   float: right;
   justify-content: space-between;
   width: 100%;
 
   ${PlanTripButton} {
-    border-bottom-left-radius: ${(props) => (props.squashed ? 0 : 'invalid')};
-    border-top-left-radius: ${(props) => (props.squashed ? 0 : 'invalid')};
     margin-top: 0px;
-    margin-left: ${(props) => (props.squashed ? 0 : '3px')};
-  }
-  label:last-of-type {
-    border-bottom-right-radius: ${(props) => (props.squashed ? 0 : 'invalid')};
-    border-top-right-radius: ${(props) => (props.squashed ? 0 : 'invalid')};
   }
   fieldset {
     gap: 0 2px;
@@ -89,15 +87,7 @@ export const ModeSelectorContainer = styled.div<{ squashed?: boolean }>`
 `
 
 export const MainSettingsRow = styled.div`
-  align-items: top;
   display: flex;
-  flex-flow: wrap;
-  gap: 5px 0;
-  justify-content: space-between;
-  margin-bottom: 5px;
-
-  label {
-    /* Cancel bottom margin of bootstrap labels in mode selector. */
-    margin-bottom: 0;
-  }
+  flex-direction: column;
+  gap: 10px;
 `