fix/refactor dashboard card separators

resources/js/Components/Dashboard/DashboardCard.vue

@@ -1,11 +1,9 @@
 <template>
     <section class="flex flex-col">
         <CardTitle :title="title" :icon="icon"></CardTitle>
-
         <div
             class="rounded-lg bg-card-background border border-card-border flex-1 flex items-stretch">
-            <div
-                class="divide-y divide-card-background-separator w-full flex flex-col">
+            <div class="w-full flex flex-col">
                 <slot></slot>
             </div>
         </div>

resources/js/Components/Dashboard/DayOverviewCardEntry.vue

@@ -10,7 +10,8 @@ import {
 </script>
 
 <template>
-    <div class="px-3.5 py-2 flex justify-between @container">
+    <div
+        class="px-3.5 py-2 flex justify-between @container border-b border-card-background-separator">
         <div class="flex items-center">
             <p class="font-semibold text-sm text-white">
                 {{ formatHumanReadableDate(date) }}

resources/js/Components/Dashboard/LastSevenDaysCard.vue

@@ -15,6 +15,7 @@ defineProps<{
     <DashboardCard title="Last 7 Days" :icon="CalendarIcon">
         <DayOverviewCardEntry
             v-for="day in last7Days"
+            :class="last7Days.length === 7 ? 'last:border-0' : ''"
             :key="day.date"
             :date="day.date"
             :duration="day.duration"></DayOverviewCardEntry>

resources/js/Components/Dashboard/RecentlyTrackedTasksCard.vue

@@ -20,18 +20,25 @@ const props = defineProps<{
     <DashboardCard title="Recently Tracked Tasks" :icon="CheckCircleIcon">
         <RecentlyTrackedTasksCardEntry
             v-for="lastTask in props.latestTasks"
+            :class="props.latestTasks.length === 4 ? 'last:border-0' : ''"
             :key="lastTask.id"
             :project_id="lastTask.project_id"
             :task_id="lastTask.id"
             :title="lastTask.name"></RecentlyTrackedTasksCardEntry>
-        <div v-if="props.latestTasks.length === 0" class="text-center">
-            <PlusCircleIcon
-                class="w-8 text-icon-default inline pb-2"></PlusCircleIcon>
-            <h3 class="text-white font-semibold">No recent tasks found</h3>
-            <p class="pb-5">Create tasks inside of a project!</p>
-            <SecondaryButton @click="router.visit(route('projects'))"
-                >Go to Projects
-            </SecondaryButton>
+        <div
+            v-if="props.latestTasks.length === 0"
+            class="text-center flex flex-1 justify-center items-center">
+            <div>
+                <PlusCircleIcon
+                    class="w-8 text-icon-default inline pb-2"></PlusCircleIcon>
+                <h3 class="text-white font-semibold text-sm">
+                    No recent tasks found
+                </h3>
+                <p class="pb-5 text-sm">Create tasks inside of a project!</p>
+                <SecondaryButton @click="router.visit(route('projects'))"
+                    >Go to Projects
+                </SecondaryButton>
+            </div>
         </div>
         <div
             v-if="props.latestTasks.length === 1"

resources/js/Components/Dashboard/RecentlyTrackedTasksCardEntry.vue

@@ -35,7 +35,8 @@ async function startTaskTimer() {
 </script>
 
 <template>
-    <div class="px-3.5 py-2 grid grid-cols-5">
+    <div
+        class="px-3.5 py-2 grid grid-cols-5 border-b border-b-card-background-separator">
         <div class="col-span-4">
             <p class="font-semibold text-white text-sm pb-1">
                 {{ title }}

resources/js/Components/Dashboard/TeamActivityCard.vue

@@ -20,6 +20,7 @@ defineProps<{
         <TeamActivityCardEntry
             v-for="activity in latestTeamActivity"
             :key="activity.user_id"
+            :class="latestTeamActivity.length === 4 ? 'last:border-0' : ''"
             :name="activity.name"
             :description="activity.description"
             :working="activity.status"></TeamActivityCardEntry>

resources/js/Components/Dashboard/TeamActivityCardEntry.vue

@@ -7,7 +7,7 @@ defineProps<{
 </script>
 
 <template>
-    <div class="px-4 py-2 2xl:py-3">
+    <div class="px-4 py-2 2xl:py-3 border-b border-card-background-separator">
         <div class="col-span-2">
             <div class="flex justify-between">
                 <p class="font-semibold text-sm text-white">
@@ -29,7 +29,8 @@ defineProps<{
                     </span>
                 </div>
             </div>
-            <div class="text-muted text-sm font-medium">
+            <div
+                class="text-muted text-sm font-medium text-ellipsis whitespace-nowrap max-w-full overflow-hidden">
                 {{ description }}
             </div>
         </div>