Style tweaks

entur · Oct 5, 2023 · 29a2058 · 29a2058
1 parent e2512ce
commit 29a2058
Show file tree

Hide file tree

Showing 7 changed files with 29 additions and 9 deletions.
diff --git a/client-next/src/components/SearchBar/DateInputField.tsx b/client-next/src/components/SearchBar/DateInputField.tsx
@@ -31,7 +31,9 @@ export function DateInputField({
 
   return (
     <Form.Group>
-      <Form.Label htmlFor="datePicker">Date</Form.Label>
+      <Form.Label column="sm" htmlFor="datePicker">
+        Date
+      </Form.Label>
       <Form.Control type="date" id="datePicker" size="sm" onChange={onChange} value={current} />
     </Form.Group>
   );

diff --git a/client-next/src/components/SearchBar/DepartureArrivalSelect.tsx b/client-next/src/components/SearchBar/DepartureArrivalSelect.tsx
@@ -17,8 +17,11 @@ export function DepartureArrivalSelect({
 
   return (
     <Form.Group>
-      <Form.Label htmlFor="departureArrivalSelect">Departure/Arrival</Form.Label>
+      <Form.Label column="sm" htmlFor="departureArrivalSelect">
+        Departure/Arrival
+      </Form.Label>
       <Form.Select
+        size="sm"
         onChange={(e) => (e.target.value === 'arrival' ? onChange(true) : onChange(false))}
         value={tripQueryVariables.arriveBy ? 'arrival' : 'departure'}
       >

diff --git a/client-next/src/components/SearchBar/LocationInputField.tsx b/client-next/src/components/SearchBar/LocationInputField.tsx
@@ -5,7 +5,9 @@ import { Location } from '../../gql/graphql.ts';
 export function LocationInputField({ location, id, label }: { location: Location; id: string; label: string }) {
   return (
     <Form.Group>
-      <Form.Label htmlFor={id}>{label}</Form.Label>
+      <Form.Label column="sm" htmlFor={id}>
+        {label}
+      </Form.Label>
       <Form.Control
         type="text"
         id={id}

diff --git a/client-next/src/components/SearchBar/SearchBar.tsx b/client-next/src/components/SearchBar/SearchBar.tsx
@@ -24,9 +24,11 @@ export function SearchBar({
         <TimeInputField tripQueryVariables={tripQueryVariables} setTripQueryVariables={setTripQueryVariables} />
         <DateInputField tripQueryVariables={tripQueryVariables} setTripQueryVariables={setTripQueryVariables} />
         <SearchWindowInput tripQueryVariables={tripQueryVariables} setTripQueryVariables={setTripQueryVariables} />
-        <Button variant="primary" onClick={onRoute}>
-          Route
-        </Button>
+        <div className="search-bar-route-button-wrapper">
+          <Button variant="primary" onClick={onRoute}>
+            Route
+          </Button>
+        </div>
       </Stack>
     </section>
   );

diff --git a/client-next/src/components/SearchBar/SearchWindowInput.tsx b/client-next/src/components/SearchBar/SearchWindowInput.tsx
@@ -10,13 +10,17 @@ export function SearchWindowInput({
 }) {
   return (
     <Form.Group>
-      <Form.Label htmlFor="searchWindowInput">Search window (seconds)</Form.Label>
+      <Form.Label column="sm" htmlFor="searchWindowInput">
+        Search window
+      </Form.Label>
       <Form.Control
         type="number"
         id="searchWindowInput"
         size="sm"
         placeholder="3600"
-        value={tripQueryVariables.searchWindow || undefined}
+        prefix="seconds"
+        min={0}
+        value={tripQueryVariables.searchWindow || ''}
         onChange={(event) =>
           setTripQueryVariables({
             ...tripQueryVariables,

diff --git a/client-next/src/components/SearchBar/TimeInputField.tsx b/client-next/src/components/SearchBar/TimeInputField.tsx
@@ -30,7 +30,9 @@ export function TimeInputField({
 
   return (
     <Form.Group>
-      <Form.Label htmlFor="timePicker">Time</Form.Label>
+      <Form.Label column="sm" htmlFor="timePicker">
+        Time
+      </Form.Label>
       <Form.Control type="time" id="timePicker" size="sm" onChange={onChange} value={current} />
     </Form.Group>
   );

diff --git a/client-next/src/style.css b/client-next/src/style.css
@@ -15,6 +15,11 @@
   padding-left: 1rem;
 }
 
+.search-bar-route-button-wrapper {
+  height: 5rem;
+  padding-top: 2rem;
+}
+
 .itinerary-list-container {
   width: 36rem;
   height: calc(100vh - 200px);