Rename WorkerDateLabel and change colors

src/pages/Worker/Card/WorkerCalendarFilter.vue

@@ -1,5 +1,5 @@
 <script setup>
-import WorkerDateLabel from 'pages/Worker/Card/WorkerDateLabel.vue';
+import WorkerEventLabel from 'pages/Worker/Card/WorkerEventLabel.vue';
 import FetchData from 'components/FetchData.vue';
 import { useI18n } from 'vue-i18n';
 import VnSelectFilter from 'components/common/VnSelectFilter.vue';
@@ -186,24 +186,24 @@ const yearList = ref(generateYears());
     </QList>
     <QList dense class="list q-gutter-y-sm q-my-lg">
         <QItem v-for="type in absenceTypeList" :key="type.id">
-            <WorkerDateLabel
+            <WorkerEventLabel
                 :color="type.rgb"
                 :selected="selectedAbsenceType?.id === type.id"
                 @click="selectedAbsenceType = type"
             >
                 {{ type.name }}
-            </WorkerDateLabel>
+            </WorkerEventLabel>
         </QItem>
     </QList>
     <QSeparator />
     <QList dense class="list q-my-lg no-pointer-events">
         <QItem>
-            <WorkerDateLabel avatar-class="worker-calendar-festive">
+            <WorkerEventLabel avatar-class="worker-calendar-festive">
                 {{ t('Festive') }}
-            </WorkerDateLabel>
-            <WorkerDateLabel avatar-class="worker-calendar-today">
+            </WorkerEventLabel>
+            <WorkerEventLabel avatar-class="worker-calendar-today">
                 {{ t('Current day') }}
-            </WorkerDateLabel>
+            </WorkerEventLabel>
         </QItem>
     </QList>
 </template>

src/pages/Worker/Card/WorkerEventLabel.vue

@@ -18,9 +18,9 @@ defineEmits(['update:selected']);
 
 <template>
     <QChip
-        class="chip"
+        class="text-white"
         :selected="selected"
-        :style="selected ? { backgroundColor: color } : null"
+        :style="{ backgroundColor: selected ? color : 'black' }"
         @update:selected="$emit('update:selected', $event)"
     >
         <QAvatar
@@ -31,9 +31,3 @@ defineEmits(['update:selected']);
         <slot />
     </QChip>
 </template>
-
-<style scoped lang="scss">
-.chip {
-    color: var(--vn-text-color);
-}
-</style>