From 4a89f22885215414c2dbdb1b1d49abf60dcd71e5 Mon Sep 17 00:00:00 2001
From: Gregor Vostrak <gregor@solidtime.io>
Date: Thu, 18 Apr 2024 23:39:04 +0200
Subject: [PATCH] fix/refactor dashboard card separators

---
 .../js/Components/Dashboard/DashboardCard.vue |  4 +---
 .../Dashboard/DayOverviewCardEntry.vue        |  3 ++-
 .../Dashboard/LastSevenDaysCard.vue           |  1 +
 .../Dashboard/RecentlyTrackedTasksCard.vue    | 23 ++++++++++++-------
 .../RecentlyTrackedTasksCardEntry.vue         |  3 ++-
 .../Components/Dashboard/TeamActivityCard.vue |  1 +
 .../Dashboard/TeamActivityCardEntry.vue       |  5 ++--
 7 files changed, 25 insertions(+), 15 deletions(-)

diff --git a/resources/js/Components/Dashboard/DashboardCard.vue b/resources/js/Components/Dashboard/DashboardCard.vue
index 3bf5eebd..e492657f 100644
--- a/resources/js/Components/Dashboard/DashboardCard.vue
+++ b/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>
diff --git a/resources/js/Components/Dashboard/DayOverviewCardEntry.vue b/resources/js/Components/Dashboard/DayOverviewCardEntry.vue
index dc5e24eb..8854a71e 100644
--- a/resources/js/Components/Dashboard/DayOverviewCardEntry.vue
+++ b/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) }}
diff --git a/resources/js/Components/Dashboard/LastSevenDaysCard.vue b/resources/js/Components/Dashboard/LastSevenDaysCard.vue
index 123f00a8..66c35272 100644
--- a/resources/js/Components/Dashboard/LastSevenDaysCard.vue
+++ b/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>
diff --git a/resources/js/Components/Dashboard/RecentlyTrackedTasksCard.vue b/resources/js/Components/Dashboard/RecentlyTrackedTasksCard.vue
index c39d91fd..6421ce42 100644
--- a/resources/js/Components/Dashboard/RecentlyTrackedTasksCard.vue
+++ b/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"
diff --git a/resources/js/Components/Dashboard/RecentlyTrackedTasksCardEntry.vue b/resources/js/Components/Dashboard/RecentlyTrackedTasksCardEntry.vue
index 94c8cf52..7bb60520 100644
--- a/resources/js/Components/Dashboard/RecentlyTrackedTasksCardEntry.vue
+++ b/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 }}
diff --git a/resources/js/Components/Dashboard/TeamActivityCard.vue b/resources/js/Components/Dashboard/TeamActivityCard.vue
index 9f262cd7..f6da7773 100644
--- a/resources/js/Components/Dashboard/TeamActivityCard.vue
+++ b/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>
diff --git a/resources/js/Components/Dashboard/TeamActivityCardEntry.vue b/resources/js/Components/Dashboard/TeamActivityCardEntry.vue
index e9480ea3..81fdb6b1 100644
--- a/resources/js/Components/Dashboard/TeamActivityCardEntry.vue
+++ b/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>