💄 Replace css files with scss and factorize CSS rules

frontend/src/App.tsx

@@ -3,11 +3,12 @@ import { IVisibilityActionRequest, MatrixCapabilities, WidgetApi, WidgetApiToWid
 import { HopeProvider } from "@hope-ui/solid";
 
 import { BusinessDataProvider } from './businessData';
-import { SearchProvider } from './search';
-import { PassagesDisplay } from './passagesDisplay';
-import { StopsManager } from './stopsManager';
+import { AppContextProvider } from './appContext';
 
-import styles from './App.module.css';
+import { PassagesDisplay } from './passagesDisplay';
+import { StopsSearchMenu } from './stopsSearchMenu';
+
+import "./App.scss";
 
 
 function parseFragment() {
@@ -44,18 +45,18 @@ const App: Component = () => {
 
 	return (
 		<BusinessDataProvider>
-			<SearchProvider>
+			<AppContextProvider>
 				<HopeProvider>
-					<div class={styles.App} data-panelsnap-id="1">
-						<div class={styles.panel}>
-							<StopsManager />
+					<div class="App">
+						<div class="panel">
+							<StopsSearchMenu />
 						</div>
-						<div class={styles.panel}>
+						<div class="panel">
 							<PassagesDisplay />
 						</div>
 					</div>
 				</HopeProvider>
-			</SearchProvider>
+			</AppContextProvider>
 		</BusinessDataProvider>
 	);
 };