feat: altera layout do feriado

src/components/charts/HolidaysCard.vue

@@ -13,32 +13,33 @@
       />
     </div>
 
-    <q-separator />
-
     <div
       v-if="currentMonthHolidays.length === 0"
-      class="text-caption text-grey-5 text-center q-mt-md"
+      class="text-caption text-grey-5 text-center q-mt-sm"
     >
       Sem feriados para este mês.
     </div>
 
-    <q-list v-else class="q-mt-md" dense>
-      <template v-for="(holiday, index) in currentMonthHolidays" :key="holiday.id">
-        <q-item class="q-px-none person-item cursor-pointer" clickable @click="openEdit(holiday)">
-          <q-item-section avatar style="min-width: 36px">
-            <div class="day-badge">{{ holiday.day }}</div>
-          </q-item-section>
-          <q-item-section>
-            <q-item-label class="text-body2">{{ holiday.description }}</q-item-label>
-            <q-item-label caption>{{ typeLabel(holiday.type) }}</q-item-label>
-          </q-item-section>
-          <q-item-section side>
-            <q-icon name="mdi-pencil-outline" color="grey-5" size="xs" />
-          </q-item-section>
-        </q-item>
-        <q-separator v-if="index < currentMonthHolidays.length - 1" />
-      </template>
-    </q-list>
+    <div v-else class="row q-gutter-sm q-mt-sm">
+      <div
+        v-for="holiday in currentMonthHolidays"
+        :key="holiday.id"
+        class="column items-center cursor-pointer"
+        style="min-width: 52px"
+        @click="openEdit(holiday)"
+      >
+        <q-badge
+          color="deep-orange"
+          class="text-subtitle1 text-bold q-pa-sm"
+          style="min-width: 40px; justify-content: center"
+        >
+          {{ holiday.day }}
+        </q-badge>
+        <div class="text-caption q-mt-xs text-center">
+          {{ holiday.description }}
+        </div>
+      </div>
+    </div>
   </q-card>
 </template>
 
@@ -76,10 +77,6 @@ const currentMonthHolidays = computed(() =>
     .sort((a, b) => a.day - b.day),
 );
 
-function typeLabel(type) {
-  return type === "facultativo" ? "Ponto Facultativo" : "Feriado";
-}
-
 function openDialog() {
   $q.dialog({
     component: HolidaysDialog,
@@ -113,23 +110,4 @@ function openEdit(holiday) {
   max-height: 370px;
   overflow: hidden;
 }
-
-.person-item {
-  padding-top: 6px;
-  padding-bottom: 6px;
-}
-
-.day-badge {
-  width: 30px;
-  height: 30px;
-  border-radius: 50%;
-  background-color: #e64a19;
-  color: #fff;
-  font-size: 12px;
-  font-weight: 600;
-  display: flex;
-  align-items: center;
-  justify-content: center;
-  flex-shrink: 0;
-}
 </style>