⚡️ Replace hope-ui Input with a custom component in StopSearchMenu

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;
 

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;
 

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">
+			<StopNameInput onInput={onStopNameInput} leftAddon="🚉 🚏" placeholder="Stop name..." />
-				<InputGroup >
-					<InputLeftAddon>🚉 🚏</InputLeftAddon>
-					<Input onInput={onStopNameInput} placeholder="Stop name..." />
-				</InputGroup>
-			</div>
 		</div >
 	);
 };