From 0e6a4a74515e70e68cf77ee2cb2e972b50e779a0 Mon Sep 17 00:00:00 2001
From: padreug <padreug@aiolabs.dev>
Date: Fri, 26 Sep 2025 10:49:37 +0200
Subject: [PATCH] Refactor StallView component for enhanced layout and visual
 appeal

- Redesigned the Stall Info Card to improve responsiveness and aesthetics, incorporating a more compact layout and enhanced logo display.
- Updated the styling of stall statistics and category badges for better alignment with the design system, improving user interaction.
- Enhanced the overall structure and clarity of stall information, making it more visually engaging and user-friendly.

These changes provide a more cohesive and appealing interface in the StallView component, improving the overall user experience.
---
 src/modules/market/views/StallView.vue | 95 ++++++++++++++------------
 1 file changed, 50 insertions(+), 45 deletions(-)

diff --git a/src/modules/market/views/StallView.vue b/src/modules/market/views/StallView.vue
index 0eb8162..bf73c17 100644
--- a/src/modules/market/views/StallView.vue
+++ b/src/modules/market/views/StallView.vue
@@ -13,65 +13,70 @@
         Back to Market
       </Button>
 
-      <!-- Stall Info Card -->
-      <Card class="overflow-hidden">
-        <div class="relative h-24 sm: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-16 h-16 sm:w-32 sm:h-32 rounded-full bg-background p-1 sm:p-2 shadow-lg">
-              <img
-                :src="stall.logo"
-                :alt="stall.name"
-                class="w-full h-full object-contain rounded-full"
-                @error="handleLogoError"
-              />
-            </div>
-            <div v-else class="w-16 h-16 sm:w-32 sm:h-32 rounded-full bg-background/95 flex items-center justify-center shadow-lg">
-              <Store class="w-8 h-8 sm:w-16 sm:h-16 text-muted-foreground" />
-            </div>
-          </div>
-        </div>
-
-        <CardContent class="pt-10 sm:pt-20 pb-4 sm:pb-6">
-          <div class="text-center">
-            <h1 class="text-lg sm:text-3xl font-bold mb-1 sm:mb-2 text-foreground">{{ stall?.name || 'Unknown Stall' }}</h1>
-            <p v-if="stall?.description" class="text-sm sm:text-base text-muted-foreground mb-3 sm:mb-4 max-w-2xl mx-auto px-2">
-              {{ stall.description }}
-            </p>
-
-            <!-- Stall Stats -->
-            <div class="flex justify-center gap-4 sm:gap-8 mt-3 sm:mt-6">
-              <div class="text-center">
-                <div class="text-lg sm:text-2xl font-bold text-primary">{{ productCount }}</div>
-                <div class="text-xs sm:text-sm text-muted-foreground">Products</div>
+      <!-- Compact Stall Info Card -->
+      <Card class="relative overflow-hidden border-l-4 border-l-primary/60 bg-gradient-to-r from-primary/5 via-background to-accent/5 shadow-md">
+        <div class="relative p-3 sm:p-4">
+          <div class="flex items-start gap-3">
+            <!-- Stall Logo (Enhanced) -->
+            <div class="flex-shrink-0">
+              <div v-if="stall?.logo" class="w-12 h-12 sm:w-14 sm:h-14 rounded-xl bg-gradient-to-br from-primary/20 to-accent/20 border-2 border-primary/20 shadow-lg overflow-hidden ring-2 ring-primary/10">
+                <img
+                  :src="stall.logo"
+                  :alt="stall.name"
+                  class="w-full h-full object-cover"
+                  @error="handleLogoError"
+                />
               </div>
-              <div class="text-center">
-                <div class="text-lg sm:text-2xl font-bold text-foreground">{{ stall?.currency || 'sats' }}</div>
-                <div class="text-xs sm:text-sm text-muted-foreground">Currency</div>
-              </div>
-              <div v-if="stall?.shipping?.length" class="text-center">
-                <div class="text-lg sm:text-2xl font-bold text-foreground">{{ stall.shipping.length }}</div>
-                <div class="text-xs sm:text-sm text-muted-foreground">Shipping Zones</div>
+              <div v-else class="w-12 h-12 sm:w-14 sm:h-14 rounded-xl bg-gradient-to-br from-primary/20 to-accent/20 flex items-center justify-center shadow-lg ring-2 ring-primary/10 border-2 border-primary/20">
+                <Store class="w-6 h-6 sm:w-7 sm:h-7 text-primary" />
               </div>
             </div>
 
-            <!-- Categories -->
-            <div v-if="stallCategories.length > 0" class="mt-3 sm:mt-6">
-              <div class="flex flex-wrap justify-center gap-1 sm:gap-2">
+            <!-- Stall Info -->
+            <div class="flex-1 min-w-0">
+              <!-- Title and Description -->
+              <div class="mb-2">
+                <h1 class="text-lg sm:text-xl font-bold bg-gradient-to-r from-foreground to-foreground/80 bg-clip-text text-transparent truncate">{{ stall?.name || 'Unknown Stall' }}</h1>
+                <p v-if="stall?.description" class="text-sm text-muted-foreground/90 line-clamp-2 mt-1">
+                  {{ stall.description }}
+                </p>
+              </div>
+
+              <!-- Enhanced Stats Row -->
+              <div class="flex flex-wrap gap-2 mb-3">
+                <Badge class="text-xs font-medium bg-gradient-to-r from-primary to-primary/80 text-primary-foreground shadow-sm hover:shadow-md transition-shadow">
+                  <span class="font-bold">{{ productCount }}</span>
+                  <span class="ml-1 opacity-90">Products</span>
+                </Badge>
+                <Badge class="text-xs font-medium bg-gradient-to-r from-accent to-accent/80 text-accent-foreground shadow-sm">
+                  <span class="font-bold">{{ stall?.currency || 'sats' }}</span>
+                  <span class="ml-1 opacity-90">Currency</span>
+                </Badge>
+                <Badge v-if="stall?.shipping?.length" class="text-xs font-medium bg-gradient-to-r from-green-500 to-green-600 text-white shadow-sm">
+                  <span class="font-bold">{{ stall.shipping.length }}</span>
+                  <span class="ml-1 opacity-90">Shipping</span>
+                </Badge>
+              </div>
+
+              <!-- Categories (Enhanced) -->
+              <div v-if="stallCategories.length > 0" class="flex flex-wrap gap-1">
                 <Badge
                   v-for="category in stallCategories"
                   :key="category"
-                  variant="secondary"
-                  class="text-xs sm:text-sm px-2 py-1 cursor-pointer hover:bg-primary hover:text-primary-foreground transition-colors"
+                  :variant="selectedCategories.includes(category) ? 'default' : 'secondary'"
+                  class="text-xs px-2 py-0.5 cursor-pointer transition-all duration-200 hover:scale-105 hover:shadow-sm"
+                  :class="{
+                    'bg-gradient-to-r from-primary to-primary/90 text-primary-foreground shadow-md': selectedCategories.includes(category),
+                    'hover:bg-primary/10 hover:border-primary/50': !selectedCategories.includes(category)
+                  }"
                   @click="toggleCategoryFilter(category)"
-                  :class="{ 'bg-primary text-primary-foreground': selectedCategories.includes(category) }"
                 >
                   {{ category }}
                 </Badge>
               </div>
             </div>
           </div>
-        </CardContent>
+        </div>
       </Card>
     </div>