padreug/web-app
1
0
Fork 0
Code Issues Pull requests Projects Releases Packages Wiki Activity Actions

Refactor StallView styles for improved visual consistency

Browse source 
- 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.
This commit is contained in:
padreug 2025-09-26 00:49:43 +02:00
parent 39ecba581f
commit 5d55dfe9d1
1 changed files with 15 additions and 15 deletions
Download patch file Download diff file Expand all files Collapse all files

30
src/modules/market/views/StallView.vue
View file

@ -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' }}