feat: Refactor layout and styles for StopList and related components; add ThemeColorManager for dynamic theme support

2 files changed, 61 insertions, 60 deletions

diff --git a/src/frontend/app/routes/home.css b/src/frontend/app/routes/home.css
index 3d5ba3a..b935518 100644
--- a/src/frontend/app/routes/home.css
+++ b/src/frontend/app/routes/home.css
@@ -1,33 +1,59 @@
 /* Common page styles */
-.page-title {
-  font-size: 1.4rem;
-  margin-bottom: 1rem;
-  font-weight: 600;
+.stoplist-page {
+  display: flex;
+  flex-direction: column;
+  gap: 1.5rem;
+  padding: 1rem 0 2rem;
+}
+
+.stoplist-section {
+  width: 100%;
+  padding: 0 1rem;
+  box-sizing: border-box;
+}
+
+.search-container {
+  display: flex;
+  flex-direction: column;
+  gap: 0.5rem;
+}
+
+.search-bar {
+  width: 100%;
+  padding: 0.75rem 1rem;
+  font-size: 1rem;
+  border: 1px solid var(--border-color);
+  border-radius: 0.75rem;
+  background-color: var(--card-background, var(--background-color));
   color: var(--text-color);
+  transition: border-color 0.2s ease, box-shadow 0.2s ease;
 }
 
-.page-subtitle {
-  font-size: 1.4rem;
-  margin-top: 1.5rem;
-  margin-bottom: 0.75rem;
-  font-weight: 500;
+.search-bar::placeholder {
   color: var(--subtitle-color);
+  opacity: 0.8;
+}
+
+.search-bar:focus {
+  outline: none;
+  border-color: var(--button-background-color);
+  box-shadow: 0 0 0 2px rgba(0, 0, 0, 0.05);
 }
 
 /* Form styles */
 .search-form {
-  margin-bottom: 1.5rem;
+  margin: 0;
 }
 
 .form-group {
-  margin-bottom: 1rem;
+  margin: 0;
   display: flex;
   flex-direction: column;
 }
 
 .form-label {
-  font-size: 0.9rem;
-  margin-bottom: 0.25rem;
+  font-size: 0.85rem;
+  margin-bottom: 0.5rem;
   font-weight: 500;
 }
 
@@ -38,41 +64,25 @@
   border-radius: 8px;
 }
 
-.form-button {
-  display: inline-flex;
-  align-items: center;
-  justify-content: center;
-  gap: 1rem;
-
-  padding: 0.75rem 1rem;
-  background-color: var(--button-background-color);
-  color: white;
-  border: none;
-  border-radius: 8px;
-  font-size: 1rem;
-  font-weight: 500;
-  cursor: pointer;
-  width: 100%;
-  margin-top: 0.5rem;
-}
-
-.form-button:hover {
-  background-color: var(--button-hover-background-color);
-}
-
 /* List styles */
 .list-container {
-  margin-bottom: 1.5rem;
+  margin: 0;
+  display: flex;
+  flex-direction: column;
+  gap: 0.75rem;
 }
 
 .list {
   list-style: none;
   padding: 0;
   margin: 0;
+  display: flex;
+  flex-direction: column;
+  gap: 0.75rem;
 }
 
 .list-item {
-  padding: 1rem;
+  padding: 0.75rem;
   border-bottom: 1px solid var(--border-color);
 }
 
@@ -80,7 +90,7 @@
   display: block;
   color: var(--text-color);
   text-decoration: none;
-  font-size: 1.1rem; /* Increased font size for stop name */
+  font-size: 1rem; /* Reduced font size */
 }
 
 .list-item-link:hover {
diff --git a/src/frontend/app/routes/home.tsx b/src/frontend/app/routes/home.tsx
index 8a1e3b3..ca6a20b 100644
--- a/src/frontend/app/routes/home.tsx
+++ b/src/frontend/app/routes/home.tsx
@@ -2,10 +2,8 @@
 import Fuse from "fuse.js";
 import { useCallback, useEffect, useMemo, useRef, useState } from "react";
 import { useTranslation } from "react-i18next";
-import { REGIONS } from "~/config/RegionConfig";
 import { usePageTitle } from "~/contexts/PageTitleContext";
 import { useApp } from "../AppContext";
-import ServiceAlerts from "../components/ServiceAlerts";
 import StopGallery from "../components/StopGallery";
 import StopItem from "../components/StopItem";
 import StopItemSkeleton from "../components/StopItemSkeleton";
@@ -249,26 +247,19 @@ export default function StopList() {
   };
 
   return (
-    <div className="page-container stoplist-page">
-      <h1 className="page-title">BusUrbano - {REGIONS[region].name}</h1>
-
-      <form className="search-form">
-        <div className="form-group">
-          <label className="form-label" htmlFor="stopName">
-            {t("stoplist.search_label", "Buscar paradas")}
-          </label>
-          <input
-            className="form-input"
-            type="text"
-            placeholder={randomPlaceholder}
-            id="stopName"
-            onChange={handleStopSearch}
-          />
-        </div>
-      </form>
+    <div className="stoplist-page">
+      <div className="stoplist-section search-container">
+        <h3 className="page-subtitle">{t("stoplist.search_label", "Buscar paradas")}</h3>
+        <input
+          type="search"
+          placeholder={randomPlaceholder}
+          onChange={handleStopSearch}
+          className="search-bar"
+        />
+      </div>
 
       {searchResults && searchResults.length > 0 && (
-        <div className="list-container">
+        <div className="stoplist-section list-container">
           <h2 className="page-subtitle">
             {t("stoplist.search_results", "Resultados de la búsqueda")}
           </h2>
@@ -295,9 +286,9 @@ export default function StopList() {
         />
       )}
 
-      <ServiceAlerts />
+      {/*<ServiceAlerts />*/}
 
-      <div className="list-container">
+      <div className="stoplist-section list-container">
         <h2 className="page-subtitle">
           {userLocation
             ? t("stoplist.nearby_stops", "Nearby stops")