💄 Replace css files with scss and factorize CSS rules

frontend/package.json

@@ -28,6 +28,7 @@
     "date-fns": "^2.29.3",
     "leaflet": "^1.9.3",
     "matrix-widget-api": "^1.1.1",
+    "sass": "^1.58.3",
     "solid-js": "^1.6.6",
     "solid-transition-group": "^0.0.10"
   }

frontend/src/App.scss

@@ -10,7 +10,6 @@
 
 	display: flex;
 	text-align: center;
-}
 
 	.panel {
 		min-width: 100%;
@@ -18,4 +17,7 @@
 		width: inherit;
 
 		scroll-snap-align: center;
+
+		background-color: var(--idfm-black);
+	}
 }

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 { AppContextProvider } from './appContext';
-import { PassagesDisplay } from './passagesDisplay';
-import { StopsManager } from './stopsManager';
 
-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="App">
-						<div class={styles.panel}>
+						<div class="panel">
-							<StopsManager />
+							<StopsSearchMenu />
 						</div>
-						<div class={styles.panel}>
+						<div class="panel">
 							<PassagesDisplay />
 						</div>
 					</div>
 				</HopeProvider>
-			</SearchProvider>
+			</AppContextProvider>
 		</BusinessDataProvider>
 	);
 };

frontend/src/_common.scss

@@ -1,5 +1,5 @@
 /* Idfm: 1860x1080px */
-.passagesDisplay {
+%widget {
 	aspect-ratio: 16/9;
 	--reverse-aspect-ratio: 9/16;
 	/* height is set according to the aspect-ratio, don´t touch it */
@@ -7,8 +7,6 @@
 
 	display: flex;
 	flex-direction: column;
-
-	background-color: var(--idfm-black);
 }
 
 /* Idfm: 1800x100px (margin: 17px 60px) */
@@ -25,54 +23,18 @@
 	font-family: IDFVoyageur-bold;
 }
 
-.header .transportMode {
+// .header .title {
-	aspect-ratio: 1/1;
+%title {
-	height: 100%;
-	margin: 0;
-	margin-right: calc(23/1920*100%);
-}
-
-.header .title {
 	height: 50%;
 	width: 70%;
 
 	margin-right: auto;
 }
 
-.header .menu {
-	height: calc(80/100*100%);
-	aspect-ratio: 1;
-	margin-right: calc(30/1920*100%);
-}
 
-.header .menu button {
-	height: 100%;
-	aspect-ratio: 1;
-
-	background-color: var(--idfm-black);
-	border: solid var(--idfm-white) 3px;
-	border-radius: calc(9/86*100%);
-}
-
-.header .clock {
-	width: calc(175/1920*100%);
-	height: calc(80/100*100%);
-
-	display: flex;
-	align-items: center;
-	justify-content: center;
-	
-	border:solid var(--idfm-white) 3px;
-	border-radius: calc(9/86*100%);
-}
-
-.header .clock svg {
-	aspect-ratio: 2.45;
-	height: calc(0.7*100%);
-}
 
 /* Idfm: 1860x892px (margin: 0px 30px) */
-.panelsContainer {
+%body {
 	width: calc(1860/1920*100%);
 	height: calc(892/1080*100%);
 	margin: 0 calc(30/1920*100%);
@@ -83,10 +45,13 @@
 	background-color: white;
 
 	border-collapse:separate;
-	border:solid var(--idfm-black) 1px;
+	// border:solid var(--idfm-black) 1px;
 	border-radius: calc(15/1920*100%);
 }
 
+
+
+
 /* Idfm: 1800x54px (margin: 0px 50px) */
 .footer {
 	width: calc(1820/1920*100%);

frontend/src/_utils.scss

@@ -0,0 +1,31 @@
+%transportMode {
+	aspect-ratio : 1 / 1;
+}
+
+%linePicto {
+	font-family: IDFVoyageur-bold;
+}
+
+%tramLinePicto {
+	@extend %linePicto;
+
+	aspect-ratio : 1 / 1;
+}
+
+%trainLinePicto {
+	@extend %linePicto;
+
+	aspect-ratio : 1 / 1;
+}
+
+%metroLinePicto {
+	@extend %linePicto;
+
+	aspect-ratio : 1 / 1;
+}
+
+%busLinePicto {
+	@extend %linePicto;
+
+	aspect-ratio : 2.25;
+}

frontend/src/index.tsx

@@ -1,7 +1,7 @@
 /* @refresh reload */
 import { render } from 'solid-js/web';
 
-import './index.css';
+import './index.scss';
 import App from './App';
 
 render(() => (<App/>), document.getElementById('root') as HTMLElement);

frontend/src/passagesDisplay.scss

@@ -0,0 +1,60 @@
+@use "_common";
+@use "_utils";
+
+.passagesDisplay {
+	@extend %widget;
+
+	.header {
+		$header-element-height: calc(80/100*100%);
+		$component-border: solid var(--idfm-white) calc(0.25*1vh);
+		$component-border-radius: calc(9/86*100%);
+		.transportMode {
+			@extend %transportMode;
+
+			height: 100%;
+			margin: 0;
+			margin-right: calc(23/1920*100%);
+		}
+
+		.title {
+			@extend %title;
+		}
+
+		.menu {
+			height: $header-element-height;
+			aspect-ratio: 1;
+			margin-right: calc(30/1920*100%);
+			margin-left: auto;
+
+			button {
+				height: 100%;
+				aspect-ratio: 1;
+
+				background-color: var(--idfm-black);
+				border: $component-border;
+				border-radius: $component-border-radius;
+			}
+		}
+
+		.clock {
+			width: calc(175/1920*100%);
+			height: $header-element-height;
+
+			display: flex;
+			align-items: center;
+			justify-content: center;
+
+			border: $component-border;
+			border-radius: $component-border-radius;
+
+			svg {
+				aspect-ratio: 2.45;
+				height: calc(0.7*100%);
+			}
+		}
+	}
+
+	.body {
+		@extend %body
+	}
+}

frontend/src/passagesDisplay.tsx

@@ -11,7 +11,6 @@ import { getTransportModeSrc } from "./utils";
 import { PassagesPanel } from "./passagesPanel";
 import { IconHamburgerMenu } from './extra/iconHamburgerMenu';
 
-import styles from "./passagesDisplay.module.css";
 
 
 type PositionnedPanel = {
@@ -19,6 +18,7 @@ type PositionnedPanel = {
 	// TODO: Should be PassagesPanelComponent ?
 	panel: JSX.Element;
 };
+import "./passagesDisplay.scss";
 
 
 interface PassagesDisplayStore {
@@ -122,24 +122,24 @@ const Header: VoidComponent<{ title: string }> = (props) => {
 	});
 
 	return (
-		<div class={styles.header}>
+		<div class="header">
 			<Show when={transportModeUrls() !== undefined} >
 				<For each={transportModeUrls()}>
 					{(url) =>
-						<div class={styles.transportMode}>
+						<div class="transportMode">
 							<img src={url} />
 						</div>
 					}
 				</For>
 			</Show>
-			<div class={styles.title}>
+			<div class="title">
 				<svg viewBox="0 0 1260 50">
 					<text x="0" y="50%" dominant-baseline="middle" font-size="50" style="fill: #ffffff">
 						{props.title}
 					</text>
 				</svg>
 			</div>
-			<div class={styles.menu}>
+			<div class="menu">
 				<Menu>
 					<MenuTrigger
 						as={IconButton}
@@ -150,7 +150,7 @@ const Header: VoidComponent<{ title: string }> = (props) => {
 					</MenuContent>
 				</Menu>
 			</div>
-			<div class={styles.clock}>
+			<div class="clock">
 				<svg viewBox="0 0 115 43">
 					<text x="50%" y="55%" dominant-baseline="middle" text-anchor="middle" font-size="43" style="fill: #ffffff">
 						{format(dateNow(), "HH:mm")}
@@ -171,7 +171,7 @@ const Footer: VoidComponent<{}> = () => {
 	const { getDisplayedPanelId, getPanels } = passagesDisplayStore;
 
 	return (
-		<div class={styles.footer}>
+		<div class="footer">
 			<For each={getPanels()}>
 				{(panel) => {
 					const position = panel.position;
@@ -244,7 +244,7 @@ const Body: ParentComponent<{ maxPassagesPerPanel: number, syncPeriodMsec: numbe
 	});
 
 	return (
-		<div class={styles.panelsContainer}>
+		<div class="body">
 			{() => {
 				setPanels([]);
 
@@ -296,7 +296,7 @@ export const PassagesDisplay: ParentComponent = () => {
 	const panelSwitchPeriodMsec = 4 * 1000;
 
 	return (
-		<div class={styles.passagesDisplay}>
+		<div class="passagesDisplay">
 			<PassagesDisplayProvider>
 				<Header title="Prochains passages" />
 				<Body maxPassagesPerPanel={MAX_PASSAGES_PER_PANEL} syncPeriodMsec={syncPeriodMsec} panelSwitchPeriodMsec={panelSwitchPeriodMsec} />

frontend/src/passagesPanel.scss

@@ -1,3 +1,5 @@
+@use "_utils.scss";
+
 .passagesContainer {
 	height: 100%;
 	width: 100%;
@@ -40,13 +42,15 @@
 
 /* Idfm: 100x100px (margin: 0px 15px) */
 .transportMode {
-	aspect-ratio : 1 / 1;
+	@extend %transportMode;
+
 	height: calc(100/176*100%);
 	margin: 0 calc(15/1920*100%);
 }
 
 .busLinePicto {
-	aspect-ratio : 2.25;
+	@extend %busLinePicto;
+
 	height: calc(70/176*100%);
 	margin-right: calc(23/1920*100%);
 }
@@ -127,20 +131,23 @@
 	font-family: IDFVoyageur-regular;
 }
 
-.withPlatformFirstPassage {
+%withPlatformPassage {
 	height: calc(120/176*100%);
-	aspect-ratio: 250/120;
 
 	display: flex;
 	flex-direction: column;
-
-	padding-right: calc(30/1920*100%);
-
-	/* TODO: compute the border weight according to the parent width */
-	border-right: solid calc(5px);
 }
 
-.withPlatformFirstPassage .passage {
+.withPlatformFirstPassage {
+	@extend %withPlatformPassage;
+
+	aspect-ratio: 250/120;
+
+	padding-right: calc(30/1920*100%);
+	/* TODO: compute the border weight according to the parent width */
+	border-right: solid calc(5px);
+
+	.passage {
 		aspect-ratio: 215/50;
 		height: calc(1/2*100%);
 
@@ -151,31 +158,29 @@
 	.platform {
 		margin-top: auto;
 		margin-bottom: calc(5/176*100%);
-}
 
-.withPlatformFirstPassage .platform rect {
+		rect {
 			background-color: var(--idfm-black);
 		}
 
-.withPlatformFirstPassage .platform text {
+		text {
 			vertical-align: middle;
 			font-family: IDFVoyageur-bold;
 		}
-
+	}
-.withPlatformSecondPassage {
-	height: calc(120/176*100%);
-	aspect-ratio: 215/120;
-
-	display: flex;
-	align-items: end;
-	justify-content: center;
-	flex-direction: column;
-
-	margin-right: calc(30/1920*100%);
 }
 
+.withPlatformSecondPassage {
+	@extend %withPlatformPassage;
 
-.withPlatformSecondPassage .passage {
+	aspect-ratio: 215/120;
+
+	align-items: end;
+	justify-content: center;
+
+	margin-right: calc(30/1920*100%);
+
+	.passage {
 		aspect-ratio: 215/45;
 		height: calc(45/120*100%);
 		/* 5px + (first passage font size - second passage font size/2) to align passages... */
@@ -183,15 +188,18 @@
 		margin-top: calc(7.5/176*100%);
 	}
 
-.withPlatformSecondPassage svg {
+	svg {
 		font-family: IDFVoyageur-regular;
 	}
 
-.withPlatformSecondPassage .platform rect {
+	.platform {
+		rect {
 			background-color: var(--idfm-black);
 		}
 
-.withPlatformSecondPassage .platform text {
+		text {
 			vertical-align: middle;
 			font-family: IDFVoyageur-bold;
 		}
+	}
+}

frontend/src/passagesPanel.tsx

@@ -9,7 +9,7 @@ import { Line, TrafficStatus } from './types';
 import { renderLineTransportMode, renderLinePicto } from './utils';
 import { BusinessDataContext, BusinessDataStore } from "./businessData";
 
-import styles from './passagesPanel.module.css';
+import "./passagesPanel.scss";
 
 
 const UnavailablePassage: VoidComponent<{ style: string }> = (props) => {
@@ -45,7 +45,7 @@ const Platform: VoidComponent<{ name: string }> = (props) => {
 	});
 
 	return (
-		<svg class={styles.platform} viewBox={`0 0 ${viewBoxWidthPx} 40`}>
+		<svg class="platform" viewBox={`0 0 ${viewBoxWidthPx} 40`}>
 			<rect ref={rectRef} x="0" y="0" height="100%" rx="9" ry="9" />
 			<text ref={textRef} x="100%" y="55%" dominant-baseline="middle" text-anchor="end" font-size="25" style={{ fill: "#ffffff" }}>
 				QUAI {props.name}
@@ -77,7 +77,7 @@ const TtwPassage: VoidComponent<{
 		const ttwRepr = ttwSec < 3600 ? `${Math.floor(ttwSec / 60).toString().padStart(2, "0")} min` : format(refTs * 1000, "HH:mm");
 		const isApproaching = ttwSec <= 60;
 
-		const text = <svg class={styles.passage} viewBox={`0 0 215 ${props.fontSize}`}>
+		const text = <svg class="passage" viewBox={`0 0 215 ${props.fontSize}`}>
 			<Motion.text
 				x="100%" y="55%"
 				dominant-baseline="middle" text-anchor="end"
@@ -142,12 +142,12 @@ const DestinationPassages: VoidComponent<{ line: Line, destination: string }> =
 	});
 
 	return (
-		<div class={styles.line}>
+		<div class="line">
-			<div class={styles.transportMode}>
+			<div class="transportMode">
 				{renderLineTransportMode(props.line)}
 			</div>
-			{renderLinePicto(props.line, styles)}
+			{renderLinePicto(props.line)}
-			<div class={styles.destination}>
+			<div class="destination">
 				<svg ref={destinationViewboxRef} viewBox="0 0 600 40">
 					<text ref={destinationTextRef} x="0" y="50%"
 						dominant-baseline="middle"
@@ -157,17 +157,17 @@ const DestinationPassages: VoidComponent<{ line: Line, destination: string }> =
 					</text>
 				</svg>
 			</div>
-			<div class={styles.trafficStatus}>
+			<div class="trafficStatus">
 				<svg viewBox="0 0 51 51">
 					<circle cx="50%" cy="50%" r="24" stroke="#231f20" stroke-width="3" style={trafficStatusStyle} />
 				</svg>
 			</div>
 			<TtwPassage line={props.line} destination={props.destination} index={0}
-				style={styles.firstPassage} withPlatformStyle={styles.withPlatformFirstPassage}
+				style="firstPassage" withPlatformStyle="withPlatformFirstPassage"
-				fontSize={50} fallbackStyle={styles.unavailableFirstPassage} />
+				fontSize={50} fallbackStyle="unavailableFirstPassage" />
 			<TtwPassage line={props.line} destination={props.destination} index={1}
-				style={styles.secondPassage} withPlatformStyle={styles.withPlatformSecondPassage}
+				style="secondPassage" withPlatformStyle="withPlatformSecondPassage"
-				fontSize={45} fallbackStyle={styles.unavailableSecondPassage} />
+				fontSize={45} fallbackStyle="unavailableSecondPassage" />
 		</div >
 	);
 }
@@ -189,15 +189,13 @@ export const PassagesPanel: PassagesPanelComponent = (props) => {
 	const [lines] = createResource<Line[], string[]>(props.lineIds, getLines);
 
 	return (
-		<div classList={{ [styles.passagesContainer]: true, [styles.displayed]: props.show }} >
+		<div classList={{ ["passagesContainer"]: true, ["displayed"]: props.show }} >
 			<Show when={lines() !== undefined} >
 				<For each={lines()}>
 					{(line) =>
 						<Show when={getLineDestinations(line.id) !== undefined}>
 							<For each={getLineDestinations(line.id)}>
-								{(destination) =>
+								{(destination) => <DestinationPassages line={line} destination={destination} />}
-									<DestinationPassages line={line} destination={destination} />
-								}
 							</For>
 						</Show>
 					}

frontend/src/stopManager.module.css

@@ -1,33 +0,0 @@
-svg {
-	font-family: IDFVoyageur-bold;
-}
-
-.transportMode {
-	aspect-ratio : 1 / 1;
-	height: 70%;
-	margin-left: 1%;
-}
-
-.tramLinePicto {
-	height: 70%;
-	margin-left: 1%;
-	aspect-ratio : 1 / 1;
-}
-
-.trainLinePicto {
-	height: 70%;
-	margin-left: 1%;
-	aspect-ratio : 1 / 1;
-}
-
-.metroLinePicto {
-	height: 70%;
-	margin-left: 1%;
-	aspect-ratio : 1 / 1;
-}
-
-.busLinePicto {
-	height: 70%;
-	margin-left: 1%;
-	aspect-ratio : 2.25;
-}

frontend/src/stopsSearchMenu.scss

@@ -0,0 +1,242 @@
+@use "_common";
+@use "_utils";
+
+.stopSearchMenu {
+	@extend %widget;
+
+	.inputGroup {
+		width: 50%;
+		// height: 5%;
+
+		// TODO: Setup hop-ui to avoid to have to overrride rules.
+		input {
+			color: var(--idfm-white);
+			font-family: IDFVoyageur-regular;
+		}
+	}
+
+	.title {
+		@extend %title;
+
+		display: flex;
+		justify-content: center;
+	}
+
+	.body {
+		@extend %body;
+
+		flex-direction: row;
+
+		.stopsPanels {
+			width: 50%;
+			height: 100%;
+
+			scroll-snap-type: y mandatory;
+			overflow-y: scroll;
+
+			.stopPanel {
+				// display: None;
+				scroll-snap-align: center;
+
+				.stop {
+					width: calc(1880/1920*100%);
+					height: calc(100% / 5);
+					// margin: 0 calc(20/1920*100%);
+					margin: 0 calc(10/1920*100%);
+
+					display: flex;
+					align-items: center;
+					flex-direction: row;
+
+					/* TODO: compute the border weight according to the parent height */
+					/* TODO: Disable border-bottom for the last .line  */
+					border-bottom: solid calc(2px);
+
+					.name {
+						width: 60%;
+
+						font-family: IDFVoyageur-bold;
+					}
+
+					.lineRepr {
+						// height: 100%;
+						width: 40%;
+						aspect-ratio: 2.5;
+						// margin-left: auto;
+
+						display: flex;
+						flex-direction: row;
+						flex-wrap: wrap;
+						align-items: center;
+
+						.transportMode {
+							@extend %transportMode;
+
+							height: 50%;
+						}
+
+						.break {
+							flex-basis: 100%;
+							height: 0;
+						}
+
+						.linesRepresentationMatrix {
+							@extend %busLinePicto; // Use the larger picto aspect-ratio
+							width: 75%;
+							aspect-ratio: 3;
+
+							display: flex;
+							flex-flow: row;
+							flex-wrap: wrap;
+							// justify-content: space-around;
+
+							// .break {
+							// 	flex-basis: 100%;
+							// 	height: 0;
+							// }
+
+ 							%picto {
+								margin-left: 1%;
+								align-self: center;
+								justify-self: center;
+							}
+
+							%singleLinePicto {
+								@extend %picto;
+
+								height: 80%;
+							}
+
+							.transportMode {
+								@extend %transportMode;
+								@extend %picto;
+							}
+
+							.tramLinePicto {
+								@extendnd %tramLinePicto;
+								@extend %singleLinePicto;
+							}
+
+							.trainLinePicto {
+								@extend %trainLinePicto;
+								@extend %singleLinePicto;
+							}
+
+							.metroLinePicto {
+								@extendnd %metroLinePicto;
+								@extend %singleLinePicto;
+							}
+
+							.busLinePicto {
+								@extend %busLinePicto;
+								@extend %picto;
+							}
+						}
+					}
+				}
+				// .stop:last-child {
+				// 	border-bottom: 0;
+				// 	/* to make up for the bottom border deletion */
+				// 	padding-bottom: calc(2px);
+				// }
+			}
+			.displayed {
+				display: block;
+			}
+		}
+
+		.map {
+			height: 100%;
+			width: 50%;
+		}
+	}
+
+	// .lineTable {
+	// 	height: 100%;
+	// 	width: 50%;
+
+	// 	tr {
+	// 		height: 100%;
+
+	// 		display: flex;
+	// 		flex-flow: row;
+	// 	}
+
+	// 	td {
+	// 		height: 100%;
+
+	// 		display: flex;
+	// 		flex-flow: row;
+	// 	}
+	// }
+
+	// .stop {
+	// 	height: 100%;
+
+	// 	display: flex;
+	// 	flex-direction: row;
+	// 	align-items: center;
+
+	// 	.lineRepr {
+	// 		height: 100%;
+	// 		aspect-ratio: 5;
+
+	// 		display: flex;
+	// 		flex-direction: row;
+	// 		flex-wrap: wrap;
+	// 		align-items: center;
+
+	// 		.break {
+	// 			flex-basis: 100%;
+	// 			height: 0;
+	// 		}
+
+
+	// 		.linesRepresentationMatrix {
+	// 			@extend %busLinePicto; // Use the larger picto aspect-ratio
+	// 			height: 100%;
+	// 			aspect-ratio: 3;
+
+	// 			display: flex;
+	// 			flex-flow: row;
+	// 			flex-wrap: wrap;
+
+	// 			.break {
+	// 				flex-basis: 100%;
+	// 				height: 0;
+	// 			}
+
+ 	// 			%picto {
+	// 				margin-left: 1%;
+	// 				align-self: center;
+	// 				justify-self: center;
+	// 			}
+
+	// 			.transportMode {
+	// 				@extend %transportMode;
+	// 				@extend %picto;
+	// 			}
+
+	// 			.tramLinePicto {
+	// 				@extendnd %tramLinePicto;
+	// 				@extend %picto;
+	// 			}
+
+	// 			.trainLinePicto {
+	// 				@extend %trainLinePicto;
+	// 				@extend %picto;
+	// 			}
+
+	// 			.metroLinePicto {
+	// 				@extendnd %metroLinePicto;
+	// 				@extend %picto;
+	// 			}
+
+	// 			.busLinePicto {
+	// 				@extend %busLinePicto;
+	// 				@extend %picto;
+	// 			}
+	// 		}
+	// 	}
+	// }
+}

frontend/src/stopsSearchMenu.tsx

@@ -30,8 +30,8 @@ const StopRepr: VoidComponent<{ stop: Stop }> = (props) => {
 		for (const lineId of lineIds) {
 			const line = await getLine(lineId);
 			if (line !== undefined) {
-				reprs.push(<div class={styles.transportMode}>{renderLineTransportMode(line)}</div>);
+				reprs.push(<div class="transportMode">{renderLineTransportMode(line)}</div>);
-				reprs.push(renderLinePicto(line, styles));
+				reprs.push(renderLinePicto(line));
 			}
 		}
 		return reprs;
@@ -73,7 +73,7 @@ const StopAreaRepr: VoidComponent<{ stop: Stop }> = (props) => {
 			if (line !== undefined) {
 				if (!(line.transportMode in byModeReprs)) {
 					byModeReprs[line.transportMode] = {
-						mode: <div class={styles.transportMode}>{renderLineTransportMode(line)}</div>
+						mode: <div class="transportMode">{renderLineTransportMode(line)}</div>,
 					};
 				}
 				byModeReprs[line.transportMode][line.shortName] = renderLinePicto(line, styles);

frontend/src/utils.tsx

@@ -27,9 +27,9 @@ export function renderLineTransportMode(line: Line): JSX.Element {
 	return <img src={getTransportModeSrc(line.transportMode)} />
 }
 
-function renderBusLinePicto(line: Line, styles: CSSModuleClasses): JSX.Element {
+function renderBusLinePicto(line: Line): JSX.Element {
 	return (
-		<div class={styles.busLinePicto}>
+		<div class="busLinePicto">
 			<svg viewBox="0 0 31.5 14">
 				<rect x="0" y="0" width="31.5" height="14" rx="1.5" ry="1.5" style={{ fill: `#${line.backColorHexa}` }} />
 				<text x="50%"
@@ -45,10 +45,10 @@ function renderBusLinePicto(line: Line, styles: CSSModuleClasses): JSX.Element {
 	);
 }
 
-function renderTramLinePicto(line: Line, styles: CSSModuleClasses): JSX.Element {
+function renderTramLinePicto(line: Line): JSX.Element {
 	const lineStyle = { fill: `#${line.backColorHexa}` };
 	return (
-		<div class={styles.tramLinePicto}>
+		<div class="tramLinePicto">
 			<svg viewBox="0 0 20 20">
 				<rect x="0" y="0" width="20" height="3" rx="1" ry="1" style={lineStyle} />
 				<rect x="0" y="17" width="20" height="3" rx="1" ry="1" style={lineStyle} />
@@ -65,9 +65,9 @@ function renderTramLinePicto(line: Line, styles: CSSModuleClasses): JSX.Element
 	);
 }
 
-function renderMetroLinePicto(line: Line, styles: CSSModuleClasses): JSX.Element {
+function renderMetroLinePicto(line: Line): JSX.Element {
 	return (
-		<div class={styles.metroLinePicto}>
+		<div class="metroLinePicto">
 			<svg viewBox="0 0 20 20">
 				<circle cx="10" cy="10" r="10" style={{ fill: `#${line.backColorHexa}` }} />
 				<text x="50%"
@@ -82,9 +82,9 @@ function renderMetroLinePicto(line: Line, styles: CSSModuleClasses): JSX.Element
 	);
 }
 
-function renderTrainLinePicto(line: Line, styles: CSSModuleClasses): JSX.Element {
+function renderTrainLinePicto(line: Line): JSX.Element {
 	return (
-		<div class={styles.trainLinePicto}>
+		<div class="trainLinePicto">
 			<svg viewBox="0 0 20 20">
 				<rect x="0" y="0" width="20" height="20" rx="4.5" ry="4.5" style={{ fill: `#${line.backColorHexa}` }} />
 				<text x="50%"
@@ -100,19 +100,19 @@ function renderTrainLinePicto(line: Line, styles: CSSModuleClasses): JSX.Element
 	);
 }
 
-export function renderLinePicto(line: Line, styles: CSSModuleClasses): JSX.Element {
+export function renderLinePicto(line: Line): JSX.Element {
 	switch (line.transportMode) {
 		case "bus":
 		case "funicular":
-			return renderBusLinePicto(line, styles);
+			return renderBusLinePicto(line);
 		case "tram":
-			return renderTramLinePicto(line, styles);
+			return renderTramLinePicto(line);
 		/* case "val": */
 		case "metro":
-			return renderMetroLinePicto(line, styles);
+			return renderMetroLinePicto(line);
 		case "transilien":
 		case "rer":
 		case "ter":
-			return renderTrainLinePicto(line, styles);
+			return renderTrainLinePicto(line);
 	}
 }