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:
parent
36c8cb8c7a
commit
276e1a8135
1 changed files with 2 additions and 2 deletions
|
|
@ -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>
|
||||||
|
|
|
||||||
Loading…
Add table
Add a link
Reference in a new issue