💄 Replace css files with scss and factorize CSS rules

This commit is contained in:
2023-03-05 12:49:20 +01:00
parent a9d918fb0f
commit f09ba4cc58
15 changed files with 459 additions and 184 deletions

View File

@@ -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);
}
}