From d952b4698445fd2bcd5f3dea66926f38444e73c5 Mon Sep 17 00:00:00 2001
From: Gregor Vostrak <gregor@solidtime.io>
Date: Wed, 13 Mar 2024 15:59:09 +0100
Subject: [PATCH] make dashboard cards more compact

---
 .../Components/Dashboard/ActivityGraphCard.vue  |  2 +-
 .../Dashboard/DayOverviewCardEntry.vue          |  6 +++---
 .../Dashboard/RecentlyTrackedTasksCardEntry.vue |  2 +-
 .../Dashboard/TeamActivityCardEntry.vue         |  2 +-
 .../Components/Dashboard/ThisWeekOverview.vue   |  2 +-
 resources/js/Pages/Dashboard.vue                | 17 +++++++++--------
 resources/js/Pages/MainContainer.vue            | 13 +++++++++++++
 7 files changed, 29 insertions(+), 15 deletions(-)
 create mode 100644 resources/js/Pages/MainContainer.vue

diff --git a/resources/js/Components/Dashboard/ActivityGraphCard.vue b/resources/js/Components/Dashboard/ActivityGraphCard.vue
index e0f9fb95..066ae6e8 100644
--- a/resources/js/Components/Dashboard/ActivityGraphCard.vue
+++ b/resources/js/Components/Dashboard/ActivityGraphCard.vue
@@ -79,7 +79,7 @@ const option = ref({
 <template>
     <DashboardCard title="Activity Graph" :icon="BoltIcon">
         <div class="px-2">
-            <v-chart class="chart" :option="option" style="height: 310px" />
+            <v-chart class="chart" :option="option" style="height: 290px" />
         </div>
     </DashboardCard>
 </template>
diff --git a/resources/js/Components/Dashboard/DayOverviewCardEntry.vue b/resources/js/Components/Dashboard/DayOverviewCardEntry.vue
index df8be660..9d9b5c96 100644
--- a/resources/js/Components/Dashboard/DayOverviewCardEntry.vue
+++ b/resources/js/Components/Dashboard/DayOverviewCardEntry.vue
@@ -26,13 +26,13 @@ function dayFormat(date: string) {
 <template>
     <div class="px-4 py-2 grid grid-cols-3">
         <div class="flex items-center">
-            <p class="font-semibold text-white pb-1">
+            <p class="font-medium text-base text-white">
                 {{ dayFormat(date) }}
             </p>
         </div>
-        <div class="flex items-center">
+        <div class="flex items-center justify-center">
             <svg
-                class="w-20"
+                class="w-20 opacity-70 transition hover:opacity-100"
                 viewBox="0 0 42 10"
                 fill="none"
                 xmlns="http://www.w3.org/2000/svg">
diff --git a/resources/js/Components/Dashboard/RecentlyTrackedTasksCardEntry.vue b/resources/js/Components/Dashboard/RecentlyTrackedTasksCardEntry.vue
index 2356acfd..65c5c830 100644
--- a/resources/js/Components/Dashboard/RecentlyTrackedTasksCardEntry.vue
+++ b/resources/js/Components/Dashboard/RecentlyTrackedTasksCardEntry.vue
@@ -9,7 +9,7 @@ defineProps<{
 </script>
 
 <template>
-    <div class="px-4 py-2.5 grid grid-cols-5">
+    <div class="px-4 py-1.5 grid grid-cols-5">
         <div class="col-span-4">
             <p class="font-semibold text-white pb-1">
                 {{ title }}
diff --git a/resources/js/Components/Dashboard/TeamActivityCardEntry.vue b/resources/js/Components/Dashboard/TeamActivityCardEntry.vue
index eeb5fb36..a359d475 100644
--- a/resources/js/Components/Dashboard/TeamActivityCardEntry.vue
+++ b/resources/js/Components/Dashboard/TeamActivityCardEntry.vue
@@ -9,7 +9,7 @@ defineProps<{
 <template>
     <div class="px-4 py-3 grid grid-cols-3">
         <div class="col-span-2">
-            <p class="font-semibold text-white pb-1">
+            <p class="font-semibold text-white ">
                 {{ name }}
             </p>
             <div class="text-muted font-medium">
diff --git a/resources/js/Components/Dashboard/ThisWeekOverview.vue b/resources/js/Components/Dashboard/ThisWeekOverview.vue
index ad4fefaa..75a191ce 100644
--- a/resources/js/Components/Dashboard/ThisWeekOverview.vue
+++ b/resources/js/Components/Dashboard/ThisWeekOverview.vue
@@ -130,7 +130,7 @@ const option = ref({
 </script>
 
 <template>
-    <div class="grid gap-x-6 grid-cols-4">
+    <div class="grid gap-x-6 xl:gap-x-8 grid-cols-4">
         <div class="col-span-3">
             <CardTitle
                 title="This Week"
diff --git a/resources/js/Pages/Dashboard.vue b/resources/js/Pages/Dashboard.vue
index 41745c27..4c223661 100644
--- a/resources/js/Pages/Dashboard.vue
+++ b/resources/js/Pages/Dashboard.vue
@@ -10,6 +10,7 @@ import type { Organization, User } from '@/types/models';
 import { onMounted } from 'vue';
 import { useProjectsStore } from '@/utils/useProjects';
 import ActivityGraphCard from '@/Components/Dashboard/ActivityGraphCard.vue';
+import MainContainer from "@/Pages/MainContainer.vue";
 
 const page = usePage<{
     auth: {
@@ -67,12 +68,12 @@ const props = defineProps<{
 
 <template>
     <AppLayout title="Dashboard" data-testid="dashboard_view">
-        <div
-            class="py-8 sm:px-6 lg:px-8 mx-auto border-b border-default-background-seperator">
+        <MainContainer
+            class="py-8 border-b border-default-background-seperator">
             <TimeTracker></TimeTracker>
-        </div>
-        <div
-            class="grid gap-x-6 grid-cols-4 sm:px-6 lg:px-8 pt-6 pb-7 border-b border-default-background-seperator">
+        </MainContainer>
+        <MainContainer
+            class="grid gap-x-6 xl:gap-x-8 grid-cols-4 pt-6 pb-7 border-b border-default-background-seperator">
             <RecentlyTrackedTasksCard
                 :latestTasks="props.latestTasks"></RecentlyTrackedTasksCard>
             <LastSevenDaysCard
@@ -85,14 +86,14 @@ const props = defineProps<{
                 :latestTeamActivity="
                     props.latestTeamActivity
                 "></TeamActivityCard>
-        </div>
-        <div class="sm:px-6 lg:px-8 py-6">
+        </MainContainer>
+        <MainContainer class="py-6">
             <ThisWeekOverview
                 :weeklyProjectOverview="props.weeklyProjectOverview"
                 :total-weekly-billable-amount="props.totalWeeklyBillableAmount"
                 :total-weekly-billable-time="props.totalWeeklyBillableTime"
                 :total-weekly-time="props.totalWeeklyTime"
                 :weekly-history="props.weeklyHistory"></ThisWeekOverview>
-        </div>
+        </MainContainer>
     </AppLayout>
 </template>
diff --git a/resources/js/Pages/MainContainer.vue b/resources/js/Pages/MainContainer.vue
new file mode 100644
index 00000000..a3c7dcf4
--- /dev/null
+++ b/resources/js/Pages/MainContainer.vue
@@ -0,0 +1,13 @@
+<script setup lang="ts">
+
+</script>
+
+<template>
+    <div class="sm:px-6 lg:px-8 xl:px-12 mx-auto">
+        <slot></slot>
+    </div>
+</template>
+
+<style scoped>
+
+</style>