From 5d55dfe9d199ae0c40093b81efc2b1a7868029cb Mon Sep 17 00:00:00 2001
From: padreug <padreug@aiolabs.dev>
Date: Fri, 26 Sep 2025 00:49:43 +0200
Subject: [PATCH] Refactor StallView styles for improved visual consistency

- Updated background and text colors in StallView to align with the new design system, enhancing overall aesthetics and readability.
- Adjusted styles for logo and product statistics to ensure better integration with the updated theme.
- Improved accessibility by refining text colors for better contrast and visibility.

These changes enhance the user experience by providing a more cohesive and visually appealing interface in the StallView component.
---
 src/modules/market/views/StallView.vue | 30 +++++++++++++-------------
 1 file changed, 15 insertions(+), 15 deletions(-)

diff --git a/src/modules/market/views/StallView.vue b/src/modules/market/views/StallView.vue
index 7f0c148..089a1c1 100644
--- a/src/modules/market/views/StallView.vue
+++ b/src/modules/market/views/StallView.vue
@@ -15,10 +15,10 @@
 
       <!-- Stall Info Card -->
       <Card class="overflow-hidden">
-        <div class="relative h-48 bg-gradient-to-r from-blue-500 to-purple-600">
+        <div class="relative h-48 bg-gradient-to-r from-primary/80 to-accent">
           <!-- Stall Banner/Logo -->
           <div class="absolute inset-0 flex items-center justify-center">
-            <div v-if="stall?.logo" class="w-32 h-32 rounded-full bg-white p-2 shadow-lg">
+            <div v-if="stall?.logo" class="w-32 h-32 rounded-full bg-background p-2 shadow-lg">
               <img
                 :src="stall.logo"
                 :alt="stall.name"
@@ -26,32 +26,32 @@
                 @error="handleLogoError"
               />
             </div>
-            <div v-else class="w-32 h-32 rounded-full bg-white/90 flex items-center justify-center shadow-lg">
-              <Store class="w-16 h-16 text-gray-600" />
+            <div v-else class="w-32 h-32 rounded-full bg-background/95 flex items-center justify-center shadow-lg">
+              <Store class="w-16 h-16 text-muted-foreground" />
             </div>
           </div>
         </div>
 
         <CardContent class="pt-20 pb-6">
           <div class="text-center">
-            <h1 class="text-3xl font-bold mb-2">{{ stall?.name || 'Unknown Stall' }}</h1>
-            <p v-if="stall?.description" class="text-gray-600 mb-4 max-w-2xl mx-auto">
+            <h1 class="text-3xl font-bold mb-2 text-foreground">{{ stall?.name || 'Unknown Stall' }}</h1>
+            <p v-if="stall?.description" class="text-muted-foreground mb-4 max-w-2xl mx-auto">
               {{ stall.description }}
             </p>
 
             <!-- Stall Stats -->
             <div class="flex justify-center gap-8 mt-6">
               <div class="text-center">
-                <div class="text-2xl font-bold text-blue-600">{{ productCount }}</div>
-                <div class="text-sm text-gray-600">Products</div>
+                <div class="text-2xl font-bold text-primary">{{ productCount }}</div>
+                <div class="text-sm text-muted-foreground">Products</div>
               </div>
               <div class="text-center">
-                <div class="text-2xl font-bold text-green-600">{{ stall?.currency || 'sats' }}</div>
-                <div class="text-sm text-gray-600">Currency</div>
+                <div class="text-2xl font-bold text-foreground">{{ stall?.currency || 'sats' }}</div>
+                <div class="text-sm text-muted-foreground">Currency</div>
               </div>
               <div v-if="stall?.shipping?.length" class="text-center">
-                <div class="text-2xl font-bold text-purple-600">{{ stall.shipping.length }}</div>
-                <div class="text-sm text-gray-600">Shipping Zones</div>
+                <div class="text-2xl font-bold text-foreground">{{ stall.shipping.length }}</div>
+                <div class="text-sm text-muted-foreground">Shipping Zones</div>
               </div>
             </div>
 
@@ -119,9 +119,9 @@
 
     <!-- Empty State -->
     <div v-else-if="!filteredProducts.length" class="text-center py-12">
-      <Package class="w-24 h-24 text-gray-300 mx-auto mb-4" />
-      <h2 class="text-xl font-semibold mb-2">No Products Found</h2>
-      <p class="text-gray-600">
+      <Package class="w-24 h-24 text-muted-foreground/50 mx-auto mb-4" />
+      <h2 class="text-xl font-semibold mb-2 text-foreground">No Products Found</h2>
+      <p class="text-muted-foreground">
         {{ searchQuery || selectedCategories.length > 0
           ? 'Try adjusting your filters or search terms'
           : 'This stall doesn\'t have any products yet' }}