Fix empty state icon: use CalendarSearch with element opacity

Replaces Calendar with CalendarSearch for better empty-state semantics.
Uses opacity-30 on the element instead of text color opacity to avoid
visible stroke overlaps on SVG icons.

Co-Authored-By: Claude Opus 4.6 (1M context) <noreply@anthropic.com>
This commit is contained in:
Padreug 2026-04-20 15:43:57 +02:00
commit 276e1a8135

View file

@ -1,6 +1,6 @@
<script setup lang="ts"> <script setup lang="ts">
import { useI18n } from 'vue-i18n' import { useI18n } from 'vue-i18n'
import { Calendar } from 'lucide-vue-next' import { CalendarSearch } from 'lucide-vue-next'
import ActivityCard from './ActivityCard.vue' import ActivityCard from './ActivityCard.vue'
import type { Activity } from '../types/activity' import type { Activity } from '../types/activity'
@ -38,7 +38,7 @@ const { t } = useI18n()
v-else-if="activities.length === 0" v-else-if="activities.length === 0"
class="flex flex-col items-center justify-center py-16 text-center" class="flex flex-col items-center justify-center py-16 text-center"
> >
<Calendar class="w-16 h-16 text-muted-foreground/30 mb-4" /> <CalendarSearch class="w-16 h-16 text-muted-foreground opacity-30 mb-4" />
<h3 class="text-lg font-medium text-foreground mb-1"> <h3 class="text-lg font-medium text-foreground mb-1">
{{ t('activities.noActivities') }} {{ t('activities.noActivities') }}
</h3> </h3>