From 234d069f74499872a1d6612dc1c3dff418c52f20 Mon Sep 17 00:00:00 2001
From: Ariel Costas Guerrero <ariel@costas.dev>
Date: Wed, 5 Nov 2025 12:33:31 +0100
Subject: Refactor LineIcon component to display the original line name and
 adjust StopSheet styles for better layout

---
 src/frontend/app/components/LineIcon.css  | 14 +++++++++-----
 src/frontend/app/components/LineIcon.tsx  |  2 +-
 src/frontend/app/components/StopSheet.css |  3 ++-
 3 files changed, 12 insertions(+), 7 deletions(-)

(limited to 'src/frontend/app/components')

diff --git a/src/frontend/app/components/LineIcon.css b/src/frontend/app/components/LineIcon.css
index b52e566..94d5848 100644
--- a/src/frontend/app/components/LineIcon.css
+++ b/src/frontend/app/components/LineIcon.css
@@ -5,7 +5,9 @@
   --line-vigo-c3d: rgb(255, 204, 0);
   --line-vigo-c3i: rgb(255, 204, 0);
   --line-vigo-l4a: rgb(0, 153, 0);
+  --line-vigo-l4a-text: #ffffff;
   --line-vigo-l4c: rgb(0, 153, 0);
+  --line-vigo-l4c-text: #ffffff;
   --line-vigo-l5a: rgb(0, 176, 240);
   --line-vigo-l5b: rgb(0, 176, 240);
   --line-vigo-l6: rgb(204, 51, 153);
@@ -19,10 +21,12 @@
   --line-vigo-l12b: rgb(106, 150, 190);
   --line-vigo-l13: rgb(0, 176, 240);
   --line-vigo-l14: rgb(129, 142, 126);
+  --line-vigo-l14-text: #ffffff;
   --line-vigo-l15a: rgb(216, 168, 206);
   --line-vigo-l15b: rgb(216, 168, 206);
   --line-vigo-l15c: rgb(216, 168, 168);
   --line-vigo-l16: rgb(129, 142, 126);
+  --line-vigo-l16-text: #ffffff;
   --line-vigo-l17: rgb(214, 245, 31);
   --line-vigo-l18a: rgb(212, 80, 168);
   --line-vigo-l18a-text: #ffffff;
@@ -103,17 +107,17 @@
 
 .line-icon-rounded {
   display: block;
-  width: 54px;
-  height: 54px;
+  width: 5ch;
+  height: 5ch;
   box-sizing: border-box;
 
   background-color: var(--line-colour);
   color: var(--line-text-colour);
-  padding: 1.25rem 0.5rem;
+  padding: 1.75ch 1ch;
   text-align: center;
   border-radius: 50%;
 
-  font: 600 14px/1 monospace;
-  letter-spacing: 0.05em;
+  font: 600 14px / 1 monospace;
+  letter-spacing: .05em;
 }
 
diff --git a/src/frontend/app/components/LineIcon.tsx b/src/frontend/app/components/LineIcon.tsx
index 55e38c2..ef05987 100644
--- a/src/frontend/app/components/LineIcon.tsx
+++ b/src/frontend/app/components/LineIcon.tsx
@@ -20,7 +20,7 @@ const LineIcon: React.FC<LineIconProps> = ({ line, region = "vigo", rounded = fa
       className={rounded ? 'line-icon-rounded' : 'line-icon'}
       style={{ '--line-colour': `var(${cssVarName})`, '--line-text-colour': `var(${cssTextVarName}, unset)` } as React.CSSProperties}
     >
-      {formattedLine}
+      {line}
     </span>
   );
 };
diff --git a/src/frontend/app/components/StopSheet.css b/src/frontend/app/components/StopSheet.css
index 931dcc3..e9c04fb 100644
--- a/src/frontend/app/components/StopSheet.css
+++ b/src/frontend/app/components/StopSheet.css
@@ -31,7 +31,8 @@
 
 .stop-sheet-lines-container {
   display: flex;
-  gap: 0.75rem;
+  gap: 0.5rem;
+  flex-wrap: wrap;
 }
 
 .stop-sheet-loading {
-- 
cgit v1.3