From da2fb1f41c29e5288720ca297a9caee2cbbfd316 Mon Sep 17 00:00:00 2001
From: Adrien <me@adrien.run>
Date: Sat, 22 Apr 2023 16:51:06 +0200
Subject: [PATCH] =?UTF-8?q?=E2=9A=A1=EF=B8=8F=20Replace=20hope-ui=20Input?=
 =?UTF-8?q?=20with=20a=20custom=20component=20in=20StopSearchMenu?=
MIME-Version: 1.0
Content-Type: text/plain; charset=UTF-8
Content-Transfer-Encoding: 8bit

---
 frontend/src/App.scss             |  4 ++++
 frontend/src/stopsSearchMenu.scss | 30 +++++++++++++++++++++++++++---
 frontend/src/stopsSearchMenu.tsx  | 16 ++++++++--------
 3 files changed, 39 insertions(+), 11 deletions(-)

diff --git a/frontend/src/App.scss b/frontend/src/App.scss
index 9506539..0d0fbef 100644
--- a/frontend/src/App.scss
+++ b/frontend/src/App.scss
@@ -2,6 +2,10 @@
 	--idfm-black: #2c2e35;
 	--idfm-white: #ffffff;
 
+	--neutral-color: #d7dbdf;
+
+	--border-radius: calc(15/1920*100%);
+
 	height: inherit;
 	width: inherit;
 
diff --git a/frontend/src/stopsSearchMenu.scss b/frontend/src/stopsSearchMenu.scss
index 6c2cecb..fa7667b 100644
--- a/frontend/src/stopsSearchMenu.scss
+++ b/frontend/src/stopsSearchMenu.scss
@@ -4,17 +4,41 @@
 .stopSearchMenu {
 	@extend %widget;
 
-	.inputGroup {
+	.stopNameInput {
 		width: 50%;
-		// height: 5%;
+		height: 60%;
+
+		display: flex;
+		flex-flow: row;
+
+		border: solid var(--neutral-color) calc(0.01*1vh);
+		border-radius: var(--border-radius);
+
+		background-color: transparent;
+
+		.leftAddon {
+			width: 17%;
+
+			display: flex;
+			align-items: center;
+			justify-content: center;
+
+			background-color: var(--idfm-white);
+		}
 
-		// TODO: Setup hop-ui to avoid to have to overrride rules.
 		input {
+			width: 83%;
+
+			padding-left: 3%;
+			padding-right: 3%;
+
 			color: var(--idfm-white);
 			font-family: IDFVoyageur-regular;
+			background-color: transparent;
 		}
 	}
 
+
 	.title {
 		@extend %title;
 
diff --git a/frontend/src/stopsSearchMenu.tsx b/frontend/src/stopsSearchMenu.tsx
index e978cf7..6625016 100644
--- a/frontend/src/stopsSearchMenu.tsx
+++ b/frontend/src/stopsSearchMenu.tsx
@@ -2,8 +2,6 @@ import { createContext, createEffect, createResource, createSignal, For, JSX, on
 import { createStore } from "solid-js/store";
 import { createScrollPosition } from "@solid-primitives/scroll";
 
-import { Input, InputLeftAddon, InputGroup } from "@hope-ui/solid";
-
 import OlFeature from 'ol/Feature';
 import OlMap from 'ol/Map';
 import OlView from 'ol/View';
@@ -183,6 +181,13 @@ function SearchProvider(props: { children: JSX.Element }) {
 	);
 }
 
+const StopNameInput: VoidComponent<{ onInput: JSX.EventHandler<HTMLInputElement, InputEvent>, leftAddon: string, placeholder: string }> = (props) => {
+	return (
+		<div class="stopNameInput">
+			<div class="leftAddon">{props.leftAddon}</div>
+			<input type="text" oninput={props.onInput} placeholder={props.placeholder} />
+		</div>);
+};
 
 const Header: VoidComponent<{ title: string, minCharsNb: number }> = (props) => {
 
@@ -211,12 +216,7 @@ const Header: VoidComponent<{ title: string, minCharsNb: number }> = (props) =>
 					</text>
 				</svg>
 			</div>
-			<div class="inputGroup">
-				<InputGroup >
-					<InputLeftAddon>🚉 🚏</InputLeftAddon>
-					<Input onInput={onStopNameInput} placeholder="Stop name..." />
-				</InputGroup>
-			</div>
+			<StopNameInput onInput={onStopNameInput} leftAddon="🚉 🚏" placeholder="Stop name..." />
 		</div >
 	);
 };