feat: mark card as overdue if passed due date. gustavosizilio#3

src/components/card/CardItem.vue

@@ -2,16 +2,25 @@
   <div
     data-cy="card"
     class="grid relative p-2 my-1.5 w-full bg-white hover:bg-gray1 rounded border border-gray1 border-solid drop-shadow-sm cursor-pointer card"
+    :class="!card.completed && isOverdue(card.deadline) ? 'overdue' : 'text-gray9'"
     @click="showCardModule(card.id, true)"
   >
     <div class="flex px-1.5 pl-0.5">
       <Checkbox :card="card" />
-      <div class="flex-grow pl-2 text-sm text-gray-800 select-none" style="white-space: break-spaces" data-cy="card-text">
+      <div
+        class="flex-grow pl-2 text-sm text-gray-800 select-none title"
+        style="white-space: break-spaces"
+        data-cy="card-text"
+      >
         {{ card.name }}
       </div>
       <Pen class="hidden absolute top-2 right-2 p-1 w-5 h-5 text-gray-700 bg-gray1 bg-opacity-60 pen" />
     </div>
-    <div class="py-1 px-1.5 mt-1 w-[fit-content] text-xs rounded-sm" data-cy="due-date" :class="card.completed ? 'completed' : 'text-gray9'">
+    <div
+      class="py-1 px-1.5 mt-1 w-[fit-content] text-xs rounded-sm due-date"
+      data-cy="due-date"
+      :class="card.completed ? 'completed' : 'text-gray9'"
+    >
       <Clock class="inline-block w-4 h-4 fill-current" />
       <span class="ml-2">{{ new Date(card.deadline).toDateString().substring(4) }}</span>
     </div>
@@ -27,6 +36,10 @@ import Clock from '@/assets/icons/clock.svg';
 import Pen from '@/assets/icons/pen.svg';
 import moment from 'moment';
 
+const isOverdue = (deadline: string) => {
+  return moment(deadline).isBefore(moment(), 'day');
+};
+
 defineProps({
   card: {
     default: null,
@@ -45,4 +58,12 @@ const { showCardModule } = useStore();
 .completed {
   @apply bg-green5 text-white;
 }
+
+.overdue {
+  @apply bg-red-500 text-white;
+}
+
+.overdue .due-date,.overdue .title{
+  @apply text-white;
+}
 </style>