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

1 files changed, 31 insertions, 20 deletions

diff --git a/src/frontend/app/components/StopGallery.css b/src/frontend/app/components/StopGallery.css
index bc9b955..070a01f 100644
--- a/src/frontend/app/components/StopGallery.css
+++ b/src/frontend/app/components/StopGallery.css
@@ -1,13 +1,16 @@
 /* Gallery Container */
 .gallery-container {
-  margin-bottom: 1.5rem;
+  margin: 0;
+  display: flex;
+  flex-direction: column;
+  gap: 0.75rem;
 }
 
 .gallery-header {
   display: flex;
   align-items: center;
   justify-content: space-between;
-  margin-bottom: 0.75rem;
+  margin-bottom: 0.5rem;
 }
 
 .gallery-counter {
@@ -24,6 +27,15 @@
   font-weight: 600;
 }
 
+/* Empty State */
+.gallery-empty-state {
+  text-align: center;
+}
+
+.gallery-empty-state .message {
+  font-size: 0.85rem;
+}
+
 /* Scroll Container */
 .gallery-scroll-container {
   overflow-x: auto;
@@ -32,7 +44,6 @@
   scroll-snap-type: x mandatory;
   scrollbar-width: none; /* Firefox */
   -ms-overflow-style: none; /* IE and Edge */
-  padding: 0 1rem;
 }
 
 .gallery-scroll-container::-webkit-scrollbar {
@@ -48,14 +59,15 @@
 
 /* Gallery Item */
 .gallery-item {
-  flex: 0 0 100%;
+  flex: 0 0 90%;
+  max-width: 320px;
   scroll-snap-align: start;
   scroll-snap-stop: always;
 }
 
 .gallery-item-link {
   display: block;
-  padding: 1rem;
+  padding: 0.75rem;
   background-color: var(
     --card-background-color,
     var(--message-background-color)
@@ -64,7 +76,7 @@
   border-radius: 12px;
   text-decoration: none;
   color: var(--text-color);
-  min-height: 120px;
+  min-height: 100px;
   box-shadow: 0 1px 3px rgba(0, 0, 0, 0.1);
 }
 
@@ -72,24 +84,24 @@
   display: flex;
   align-items: center;
   gap: 0.5rem;
-  margin-bottom: 0.5rem;
+  margin-bottom: 0.25rem;
 }
 
 .gallery-item-header .favourite-icon {
   color: var(--star-color);
-  font-size: 1rem;
+  font-size: 0.9rem;
 }
 
 .gallery-item-code {
-  font-size: 0.85rem;
+  font-size: 0.8rem;
   color: var(--subtitle-color);
   font-weight: 500;
 }
 
 .gallery-item-name {
-  font-size: 1rem;
+  font-size: 0.95rem;
   font-weight: 600;
-  margin-bottom: 0.75rem;
+  margin-bottom: 0.5rem;
   line-height: 1.3;
   display: -webkit-box;
   /* Standard property for compatibility */
@@ -97,7 +109,7 @@
   -webkit-line-clamp: 2;
   -webkit-box-orient: vertical;
   overflow: hidden;
-  min-height: 2.6em;
+  min-height: 2.5em;
 }
 
 .gallery-item-lines {
@@ -117,23 +129,22 @@
 }
 
 /* Gallery Indicators */
-.gallery-indicators {
+.gallery-dots {
   display: flex;
   justify-content: center;
-  gap: 0.5rem;
-  margin-top: 1rem;
-  padding: 0.5rem 0;
+  gap: 0.35rem;
+  margin-top: 0.25rem;
 }
 
-.gallery-indicator {
-  width: 8px;
-  height: 8px;
+.dot {
+  width: 6px;
+  height: 6px;
   border-radius: 50%;
   background-color: var(--border-color);
   transition: background-color 0.2s ease-in-out;
 }
 
-.gallery-indicator.active {
+.dot.active {
   background-color: var(--button-background-color);
 }