From 29a20580fda5d274c0aa69456fc631c9130166fc Mon Sep 17 00:00:00 2001
From: =?UTF-8?q?Tom=20Erik=20St=C3=B8wer?= <testower@gmail.com>
Date: Thu, 5 Oct 2023 11:46:07 +0200
Subject: [PATCH] Style tweaks

---
 client-next/src/components/SearchBar/DateInputField.tsx   | 4 +++-
 .../src/components/SearchBar/DepartureArrivalSelect.tsx   | 5 ++++-
 .../src/components/SearchBar/LocationInputField.tsx       | 4 +++-
 client-next/src/components/SearchBar/SearchBar.tsx        | 8 +++++---
 .../src/components/SearchBar/SearchWindowInput.tsx        | 8 ++++++--
 client-next/src/components/SearchBar/TimeInputField.tsx   | 4 +++-
 client-next/src/style.css                                 | 5 +++++
 7 files changed, 29 insertions(+), 9 deletions(-)

diff --git a/client-next/src/components/SearchBar/DateInputField.tsx b/client-next/src/components/SearchBar/DateInputField.tsx
index 42cec85b19c..0b0eca38869 100644
--- 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
index 0f55b29b5f2..b6a92cdd495 100644
--- 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
index 424219df14f..ffa66702e81 100644
--- 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
index 91452a2e290..4ece669ab17 100644
--- 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
index 69f439e9962..22ffe865cbc 100644
--- 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
index b5a95822ef4..71bb7325340 100644
--- 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
index 158946133db..9936ea3e2a1 100644
--- 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);