From 2e9a65dd5a966339232194b26b013fa76ad6105a Mon Sep 17 00:00:00 2001
From: Leonard Ehrenfried <mail@leonard.io>
Date: Wed, 16 Oct 2024 17:27:48 +0200
Subject: [PATCH 1/3] Add button to swap from/to in debug UI

---
 client/src/components/SearchBar/SearchBar.tsx |  2 ++
 .../SearchBar/SwapLocationsButton.tsx         | 22 +++++++++++++++++++
 client/src/static/img/swap.svg                |  5 +++++
 client/src/style.css                          |  5 +++++
 4 files changed, 34 insertions(+)
 create mode 100644 client/src/components/SearchBar/SwapLocationsButton.tsx
 create mode 100644 client/src/static/img/swap.svg

diff --git a/client/src/components/SearchBar/SearchBar.tsx b/client/src/components/SearchBar/SearchBar.tsx
index 7b1ee58b902..73df12fe103 100644
--- a/client/src/components/SearchBar/SearchBar.tsx
+++ b/client/src/components/SearchBar/SearchBar.tsx
@@ -16,6 +16,7 @@ import { useRef, useState } from 'react';
 import logo from '../../static/img/otp-logo.svg';
 import GraphiQLRouteButton from './GraphiQLRouteButton.tsx';
 import WheelchairAccessibleCheckBox from './WheelchairAccessibleCheckBox.tsx';
+import { SwapLocationsButton } from './SwapLocationsButton.tsx';
 
 type SearchBarProps = {
   onRoute: () => void;
@@ -38,6 +39,7 @@ export function SearchBar({ onRoute, tripQueryVariables, setTripQueryVariables,
         </div>
       </Navbar.Brand>
       <LocationInputField location={tripQueryVariables.from} label="From" id="fromInputField" />
+      <SwapLocationsButton tripQueryVariables={tripQueryVariables} setTripQueryVariables={setTripQueryVariables} />
       <LocationInputField location={tripQueryVariables.to} label="To" id="toInputField" />
       <DepartureArrivalSelect tripQueryVariables={tripQueryVariables} setTripQueryVariables={setTripQueryVariables} />
       <DateTimeInputField tripQueryVariables={tripQueryVariables} setTripQueryVariables={setTripQueryVariables} />
diff --git a/client/src/components/SearchBar/SwapLocationsButton.tsx b/client/src/components/SearchBar/SwapLocationsButton.tsx
new file mode 100644
index 00000000000..2c99314477d
--- /dev/null
+++ b/client/src/components/SearchBar/SwapLocationsButton.tsx
@@ -0,0 +1,22 @@
+import { TripQueryVariables } from '../../gql/graphql.ts';
+import swapImg from '../../static/img/swap.svg';
+
+const HINT = 'Swap from/to';
+
+export function SwapLocationsButton({
+  tripQueryVariables,
+  setTripQueryVariables,
+}: {
+  tripQueryVariables: TripQueryVariables;
+  setTripQueryVariables: (tripQueryVariables: TripQueryVariables) => void;
+}) {
+  const onChange = () => {
+    setTripQueryVariables({
+      ...tripQueryVariables,
+      from: tripQueryVariables.to,
+      to: tripQueryVariables.from,
+    });
+  };
+
+  return <img className="swap-from-to" alt={HINT} title={HINT} src={swapImg} onClick={onChange} />;
+}
diff --git a/client/src/static/img/swap.svg b/client/src/static/img/swap.svg
new file mode 100644
index 00000000000..858e5e99831
--- /dev/null
+++ b/client/src/static/img/swap.svg
@@ -0,0 +1,5 @@
+<?xml version="1.0" encoding="UTF-8"?>
+<svg width="100pt" height="100pt" version="1.1" viewBox="0 0 100 100" xmlns="http://www.w3.org/2000/svg">
+ <path d="m92.223 50.707c-2.5234 0-4.5469 2.0195-4.5469 4.5469v13.938h-51.516l10.203-10.203c1.8164-1.8164 1.8164-4.6445 0-6.4648-1.8164-1.8164-4.6445-1.8164-6.4648 0l-18.082 18.082c-1.7188 1.7188-1.8164 4.6445 0 6.3633l18.082 18.383c0.91016 0.91016 2.0195 1.3125 3.2305 1.3125 1.1094 0 2.3242-0.40234 3.2305-1.3125 1.8164-1.7188 1.8164-4.6445 0.10156-6.4648l-10.703-10.605h56.465c2.5234 0 4.5469-2.0195 4.5469-4.5469v-18.48c0-2.5273-2.0234-4.5469-4.5469-4.5469z"/>
+ <path d="m63.738 29.695-10.305 10.406c-1.7188 1.8164-1.7188 4.6445 0.10156 6.4648 0.91016 0.91016 2.0195 1.3125 3.2305 1.3125s2.3242-0.40234 3.2305-1.3125l18.082-18.383c1.7188-1.8164 1.7188-4.6445 0-6.3633l-18.18-18.184c-1.8164-1.8164-4.6445-1.8164-6.4648 0-1.8164 1.8164-1.8164 4.6445 0 6.4648l10.504 10.504h-56.363c-2.5234 0-4.5469 2.0195-4.5469 4.5469v18.383c0 2.5234 2.0195 4.5469 4.5469 4.5469 2.5234 0 4.5469-2.0195 4.5469-4.5469v-13.84z"/>
+</svg>
diff --git a/client/src/style.css b/client/src/style.css
index 86310fd857d..d8d0313c288 100644
--- a/client/src/style.css
+++ b/client/src/style.css
@@ -67,6 +67,11 @@
   margin-top: -2px;
 }
 
+.search-bar .swap-from-to {
+  width: 15px;
+  margin: 37px 0 auto 0;
+}
+
 .itinerary-list-container {
   width: 36rem;
   overflow-y: auto;

From aa6713072c8a0a12ad9cfb8b2881f6fe55981bda Mon Sep 17 00:00:00 2001
From: Leonard Ehrenfried <mail@leonard.io>
Date: Wed, 16 Oct 2024 17:43:15 +0200
Subject: [PATCH 2/3] Wrap in button to satisy linter

---
 client/src/components/SearchBar/SwapLocationsButton.tsx | 8 ++++++--
 client/src/style.css                                    | 7 ++++++-
 2 files changed, 12 insertions(+), 3 deletions(-)

diff --git a/client/src/components/SearchBar/SwapLocationsButton.tsx b/client/src/components/SearchBar/SwapLocationsButton.tsx
index 2c99314477d..65385a162c2 100644
--- a/client/src/components/SearchBar/SwapLocationsButton.tsx
+++ b/client/src/components/SearchBar/SwapLocationsButton.tsx
@@ -10,7 +10,7 @@ export function SwapLocationsButton({
   tripQueryVariables: TripQueryVariables;
   setTripQueryVariables: (tripQueryVariables: TripQueryVariables) => void;
 }) {
-  const onChange = () => {
+  const swapFromTo = () => {
     setTripQueryVariables({
       ...tripQueryVariables,
       from: tripQueryVariables.to,
@@ -18,5 +18,9 @@ export function SwapLocationsButton({
     });
   };
 
-  return <img className="swap-from-to" alt={HINT} title={HINT} src={swapImg} onClick={onChange} />;
+  return (
+    <button className="swap-from-to" onClick={swapFromTo} title={HINT}>
+      <img alt={HINT} src={swapImg} />
+    </button>
+  );
 }
diff --git a/client/src/style.css b/client/src/style.css
index d8d0313c288..e5815d24c12 100644
--- a/client/src/style.css
+++ b/client/src/style.css
@@ -68,8 +68,13 @@
 }
 
 .search-bar .swap-from-to {
+  border: none;
+  background: none;
+  margin: 30px 0 auto 0;
+}
+
+.search-bar .swap-from-to img {
   width: 15px;
-  margin: 37px 0 auto 0;
 }
 
 .itinerary-list-container {

From 70b97da678456b2b83a868a00449ad1eaaa76a84 Mon Sep 17 00:00:00 2001
From: Leonard Ehrenfried <mail@leonard.io>
Date: Thu, 17 Oct 2024 07:05:08 +0200
Subject: [PATCH 3/3] Apply review feedback

---
 client/src/components/SearchBar/SwapLocationsButton.tsx | 8 +++-----
 1 file changed, 3 insertions(+), 5 deletions(-)

diff --git a/client/src/components/SearchBar/SwapLocationsButton.tsx b/client/src/components/SearchBar/SwapLocationsButton.tsx
index 65385a162c2..28d25f2fac7 100644
--- a/client/src/components/SearchBar/SwapLocationsButton.tsx
+++ b/client/src/components/SearchBar/SwapLocationsButton.tsx
@@ -1,7 +1,5 @@
 import { TripQueryVariables } from '../../gql/graphql.ts';
-import swapImg from '../../static/img/swap.svg';
-
-const HINT = 'Swap from/to';
+import icon from '../../static/img/swap.svg';
 
 export function SwapLocationsButton({
   tripQueryVariables,
@@ -19,8 +17,8 @@ export function SwapLocationsButton({
   };
 
   return (
-    <button className="swap-from-to" onClick={swapFromTo} title={HINT}>
-      <img alt={HINT} src={swapImg} />
+    <button className="swap-from-to" onClick={swapFromTo} title="Swap from/to">
+      <img alt="Swap from/to" src={icon} />
     </button>
   );
 }