Refactor styles and add alert color variables; implement scroll management for timetable

6 files changed, 71 insertions, 51 deletions

diff --git a/src/frontend/app/components/SchedulesTable.css b/src/frontend/app/components/SchedulesTable.css
index 8980fb4..6d2f201 100644
--- a/src/frontend/app/components/SchedulesTable.css
+++ b/src/frontend/app/components/SchedulesTable.css
@@ -7,7 +7,7 @@
   margin-bottom: 1rem;
   text-align: left;
   font-size: 1.1rem;
-  color: var(--text-primary, #333);
+  color: var(--text-primary);
 }
 
 .timetable-cards {
@@ -18,17 +18,36 @@
 }
 
 .timetable-card {
-  background-color: var(--surface-future, #fff);
-  border: 1px solid var(--card-border, #e0e0e0);
+  background-color: var(--surface-future);
+  border: 1px solid var(--card-border);
   border-radius: 10px;
   padding: 1.25rem;
   transition: background-color 0.2s ease, border 0.2s ease;
 }
 
+/* Next upcoming service: slight emphasis */
+.timetable-card.timetable-next {
+  background-color: var(--surface-next);
+  border-color: var(--card-border);
+  position: relative;
+}
+
+.timetable-card.timetable-next::before {
+  content: "";
+  position: absolute;
+  left: 0;
+  top: 0;
+  bottom: 0;
+  width: 4px;
+  border-top-left-radius: 10px;
+  border-bottom-left-radius: 10px;
+  background: var(--accent-next);
+}
+
 .timetable-card.timetable-past {
-  background-color: var(--surface-past, #f3f3f3);
-  color: var(--text-secondary, #aaa);
-  border: 1px solid #e0e0e0;
+  background-color: var(--surface-past);
+  color: var(--text-secondary);
+  border: 1px solid var(--card-border);
 }
 
 .card-header {
@@ -46,7 +65,7 @@
   flex: 1;
   text-align: left;
   margin: 0 1rem;
-  color: var(--text-primary, #333);
+  color: var(--text-primary);
 }
 
 .destination-info strong {
@@ -54,7 +73,7 @@
 }
 
 .timetable-card.timetable-past .destination-info {
-  color: var(--text-secondary, #aaa);
+  color: var(--text-secondary);
 }
 
 .time-info {
@@ -68,11 +87,11 @@
   font-weight: bold;
   font-family: monospace;
   font-size: 1.1rem;
-  color: var(--text-primary, #333);
+  color: var(--text-primary);
 }
 
 .timetable-card.timetable-past .departure-time {
-  color: var(--text-secondary, #aaa);
+  color: var(--text-secondary);
 }
 
 .card-body {
@@ -81,7 +100,7 @@
 
 .route-streets {
   font-size: 0.85rem;
-  color: var(--text-secondary, #666);
+  color: var(--text-secondary);
   line-height: 1.8;
   word-break: break-word;
 }
@@ -89,8 +108,8 @@
 .service-id {
   font-family: monospace;
   font-size: 0.8rem;
-  color: var(--text-secondary, #666);
-  background: var(--service-background, #f0f0f0);
+  color: var(--text-secondary);
+  background: var(--service-background);
   padding: 0.15rem 0.4rem;
   border-radius: 3px;
   font-weight: 500;
@@ -99,18 +118,18 @@
 }
 
 .timetable-card.timetable-past .service-id {
-  color: var(--text-secondary, #bbb);
-  background: #e8e8e8;
+  color: var(--text-secondary);
+  background: var(--service-background-past);
 }
 
 .no-data {
   text-align: center;
-  color: var(--text-secondary, #666);
+  color: var(--text-secondary);
   font-style: italic;
   padding: 2rem;
-  background: var(--card-background, #f8f9fa);
+  background: var(--card-background);
   border-radius: 8px;
-  border: 1px solid var(--card-border, #e0e0e0);
+  border: 1px solid var(--card-border);
 }
 
 /* Responsive design */
diff --git a/src/frontend/app/components/StopAlert.css b/src/frontend/app/components/StopAlert.css
index 0032d09..2ba3baa 100644
--- a/src/frontend/app/components/StopAlert.css
+++ b/src/frontend/app/components/StopAlert.css
@@ -1,3 +1,25 @@
+/* Alert color variables */
+:root {
+  --alert-info-bg: rgba(59, 130, 246, 0.1);
+  --alert-info-border: rgba(59, 130, 246, 0.5);
+  --alert-info-text: #1e40af;
+
+  --alert-error-bg: rgba(239, 68, 68, 0.1);
+  --alert-error-border: rgba(239, 68, 68, 0.5);
+  --alert-error-text: #991b1b;
+}
+
+/* Dark mode overrides use data-mode */
+[data-mode="dark"] {
+  --alert-info-bg: rgba(59, 130, 246, 0.15);
+  --alert-info-border: rgba(59, 130, 246, 0.4);
+  --alert-info-text: #93c5fd;
+
+  --alert-error-bg: rgba(239, 68, 68, 0.15);
+  --alert-error-border: rgba(239, 68, 68, 0.4);
+  --alert-error-text: #fca5a5;
+}
+
 .stop-alert {
   display: flex;
   align-items: flex-start;
@@ -9,20 +31,20 @@
 }
 
 .stop-alert-info {
-  background-color: rgba(59, 130, 246, 0.1);
-  border-color: rgba(59, 130, 246, 0.3);
-  color: #1e40af;
+  background-color: var(--alert-info-bg);
+  border-color: var(--alert-info-border);
+  color: var(--alert-info-text);
 }
 
 .stop-alert-error {
-  background-color: rgba(239, 68, 68, 0.1);
-  border-color: rgba(239, 68, 68, 0.3);
-  color: #991b1b;
+  background-color: var(--alert-error-bg);
+  border-color: var(--alert-error-border);
+  color: var(--alert-error-text);
 }
 
 .stop-alert-compact {
   padding: 0.5rem;
-  margin: 0.5rem 0;
+  margin: 1.5rem 0 0.5rem 0;
   font-size: 0.875rem;
 }
 
@@ -73,17 +95,3 @@
   font-size: 0.75rem;
 }
 
-/* Dark mode support */
-@media (prefers-color-scheme: dark) {
-  .stop-alert-info {
-    background-color: rgba(59, 130, 246, 0.15);
-    border-color: rgba(59, 130, 246, 0.4);
-    color: #93c5fd;
-  }
-
-  .stop-alert-error {
-    background-color: rgba(239, 68, 68, 0.15);
-    border-color: rgba(239, 68, 68, 0.4);
-    color: #fca5a5;
-  }
-}
diff --git a/src/frontend/app/components/StopAlert.tsx b/src/frontend/app/components/StopAlert.tsx
index 69ecc22..a96f93e 100644
--- a/src/frontend/app/components/StopAlert.tsx
+++ b/src/frontend/app/components/StopAlert.tsx
@@ -19,17 +19,10 @@ export const StopAlert: React.FC<StopAlertProps> = ({ stop, compact = false }) =
 
   return (
     <div className={`stop-alert ${isError ? 'stop-alert-error' : 'stop-alert-info'} ${compact ? 'stop-alert-compact' : ''}`}>
-      <div className="stop-alert-icon">
-        {isError ? <AlertCircle /> : <Info />}
-      </div>
+      {isError ? <AlertCircle /> : <Info />}
       <div className="stop-alert-content">
         {stop.title && <div className="stop-alert-title">{stop.title}</div>}
         {stop.message && <div className="stop-alert-message">{stop.message}</div>}
-        {stop.alternateCodes && stop.alternateCodes.length > 0 && (
-          <div className="stop-alert-alternate-codes">
-            Alternative stops: {stop.alternateCodes.join(", ")}
-          </div>
-        )}
       </div>
     </div>
   );
diff --git a/src/frontend/app/components/StopItemSkeleton.tsx b/src/frontend/app/components/StopItemSkeleton.tsx
index 72f7506..9133393 100644
--- a/src/frontend/app/components/StopItemSkeleton.tsx
+++ b/src/frontend/app/components/StopItemSkeleton.tsx
@@ -12,7 +12,7 @@ const StopItemSkeleton: React.FC<StopItemSkeletonProps> = ({
     stopId
 }) => {
     return (
-        <SkeletonTheme baseColor="#f0f0f0" highlightColor="#e0e0e0">
+        <SkeletonTheme baseColor="var(--skeleton-base)" highlightColor="var(--skeleton-highlight)">
             <li className="list-item">
                 <div className="list-item-link">
                     <span>
diff --git a/src/frontend/app/components/StopSheetSkeleton.tsx b/src/frontend/app/components/StopSheetSkeleton.tsx
index 651efa5..6870af2 100644
--- a/src/frontend/app/components/StopSheetSkeleton.tsx
+++ b/src/frontend/app/components/StopSheetSkeleton.tsx
@@ -13,7 +13,7 @@ export const StopSheetSkeleton: React.FC<StopSheetSkeletonProps> = ({
   const { t } = useTranslation();
 
   return (
-    <SkeletonTheme baseColor="#f0f0f0" highlightColor="#e0e0e0">
+    <SkeletonTheme baseColor="var(--skeleton-base)" highlightColor="var(--skeleton-highlight)">
       <div className="stop-sheet-estimates">
         <h3 className="stop-sheet-subtitle">
           {t("estimates.next_arrivals", "Next arrivals")}
@@ -53,7 +53,7 @@ export const StopSheetSkeleton: React.FC<StopSheetSkeletonProps> = ({
           </div>
 
           <div className="stop-sheet-view-all" style={{
-            background: "#f0f0f0",
+            background: "var(--service-background)",
             cursor: "not-allowed",
             pointerEvents: "none"
           }}>
diff --git a/src/frontend/app/components/TimetableSkeleton.tsx b/src/frontend/app/components/TimetableSkeleton.tsx
index 01956ee..79c7725 100644
--- a/src/frontend/app/components/TimetableSkeleton.tsx
+++ b/src/frontend/app/components/TimetableSkeleton.tsx
@@ -13,7 +13,7 @@ export const TimetableSkeleton: React.FC<TimetableSkeletonProps> = ({
   const { t } = useTranslation();
 
   return (
-    <SkeletonTheme baseColor="#f0f0f0" highlightColor="#e0e0e0">
+    <SkeletonTheme baseColor="var(--skeleton-base)" highlightColor="var(--skeleton-highlight)">
       <div className="timetable-container">
         <div className="timetable-caption">
           <Skeleton width="250px" height="1.1rem" />