change color palette, change user_id to member_id

resources/js/Components/Dashboard/ActivityGraphCard.vue

@@ -19,6 +19,7 @@ import {
     formatHumanReadableDuration,
     getDayJsInstance,
 } from '@/utils/time';
+import { useCssVar } from '@vueuse/core';
 
 const props = defineProps<{
     dailyHoursTracked: { duration: number; date: string }[];
@@ -40,6 +41,8 @@ const max = Math.max(
     1
 );
 
+const backgroundColor = useCssVar('--color-bg-secondary');
+const itemBackgroundColor = useCssVar('--color-bg-tertiary');
 const option = ref({
     tooltip: {},
     visualMap: {
@@ -50,7 +53,7 @@ const option = ref({
         left: 'center',
         top: 'center',
         inRange: {
-            color: ['#242940', '#2DBE45'],
+            color: [itemBackgroundColor.value, '#2DBE45'],
         },
         show: false,
     },
@@ -74,8 +77,9 @@ const option = ref({
                 .format('YYYY-MM-DD'),
         ],
         itemStyle: {
+            color: 'transparent',
             borderWidth: 8,
-            borderColor: '#13152B',
+            borderColor: backgroundColor.value,
         },
         yearLabel: { show: false },
     },
@@ -85,6 +89,8 @@ const option = ref({
         data: props.dailyHoursTracked.map((el) => [el.date, el.duration]),
         itemStyle: {
             borderRadius: 5,
+            borderColor: 'rgba(255,255,255,0.05)',
+            borderWidth: 1,
         },
         tooltip: {
             valueFormatter: (value: number, dataIndex: number) => {
@@ -104,10 +110,9 @@ const option = ref({
     <DashboardCard title="Activity Graph" :icon="BoltIcon">
         <div class="px-2">
             <v-chart
-                :autoresize="true"
                 class="chart"
                 :option="option"
-                style="height: 260px" />
+                style="height: 260px; background-color: transparent" />
         </div>
     </DashboardCard>
 </template>

resources/js/Components/Dashboard/DashboardCard.vue

@@ -2,7 +2,7 @@
     <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">
+            class="rounded-lg bg-card-background border border-card-border flex-1 flex items-stretch shadow-card">
             <div class="w-full flex flex-col">
                 <slot></slot>
             </div>

resources/js/Components/Dashboard/DayOverviewCardChart.vue

@@ -1,20 +1,23 @@
 <script setup lang="ts">
 import VChart from 'vue-echarts';
 import { ref } from 'vue';
+import { useCssVar } from '@vueuse/core';
 
 const props = defineProps<{
     history: number[];
 }>();
 
+const accentColor = useCssVar('--color-accent-quaternary');
+
 const seriesData = props.history.map((el) => {
     return {
         value: el,
         ...{
             itemStyle: {
                 borderWidth: 1,
-                borderColor: 'rgba(125,156,188,1)',
+                borderColor: 'rgba(' + accentColor.value + ',0.8)',
                 borderRadius: [2, 2, 0, 0],
-                color: 'rgba(125,156,188,1)',
+                color: 'rgba(' + accentColor.value + ',0.8)',
             },
         },
     };

resources/js/Components/Dashboard/ProjectsChartCard.vue

@@ -11,6 +11,8 @@ import {
     TitleComponent,
     TooltipComponent,
 } from 'echarts/components';
+import { useCssVar } from '@vueuse/core';
+import { formatHumanReadableDuration } from '@/utils/time';
 
 use([
     CanvasRenderer,
@@ -23,6 +25,8 @@ use([
 
 provide(THEME_KEY, 'dark');
 
+const backgroundColor = useCssVar('--theme-color-default-background');
+
 function hexToRGBA(hex: string, opacity = 1) {
     // Remove the hash at the start if it's there
     hex = hex.replace(/^#/, '');
@@ -60,7 +64,7 @@ const seriesData = props.weeklyProjectOverview.map((el) => {
             itemStyle: {
                 borderRadius: 15,
                 // TODO: Fix dynamic color
-                borderColor: '#0b0d1c',
+                borderColor: backgroundColor.value,
                 borderWidth: 18,
                 color: new LinearGradient(0, 0, 0, 1, [
                     {
@@ -77,13 +81,23 @@ const seriesData = props.weeklyProjectOverview.map((el) => {
     };
 });
 const option = ref({
+    tooltip: {
+        trigger: 'item',
+    },
+    legend: {
+        orient: 'vertical',
+        bottom: 'bottom',
+    },
     backgroundColor: 'transparent',
     series: [
         {
             label: {
-                // TODO: Muted color make dynamic
-                color: '#D9DCFB',
-                fontWeight: 'bold',
+                show: false,
+            },
+            tooltip: {
+                valueFormatter: (value: number) => {
+                    return formatHumanReadableDuration(value);
+                },
             },
             data: seriesData,
             radius: ['30%', '65%'],

resources/js/Components/Dashboard/ThisWeekOverview.vue

@@ -18,6 +18,7 @@ import ProjectsChartCard from '@/Components/Dashboard/ProjectsChartCard.vue';
 import { formatHumanReadableDuration } from '@/utils/time';
 import { formatCents } from '@/utils/money';
 import { getWeekStart } from '@/utils/useUser';
+import { useCssVar } from '@vueuse/core';
 
 use([
     CanvasRenderer,
@@ -47,6 +48,7 @@ const props = defineProps<{
         duration: number;
     }[];
 }>();
+const accentColor = useCssVar('--color-accent-quaternary');
 
 const seriesData = props.weeklyHistory.map((el) => {
     return {
@@ -56,23 +58,34 @@ const seriesData = props.weeklyHistory.map((el) => {
                 borderColor: new LinearGradient(0, 0, 0, 1, [
                     {
                         offset: 0,
-                        color: 'rgba(125,156,188,1)',
+                        color: 'rgba(' + accentColor.value + ',0.7)',
                     },
                     {
                         offset: 1,
-                        color: 'rgba(125,156,188,0.7)',
+                        color: 'rgba(' + accentColor.value + ',0.5)',
                     },
                 ]),
-                borderWidth: 3,
+                emphasis: {
+                    color: new LinearGradient(0, 0, 0, 1, [
+                        {
+                            offset: 0,
+                            color: 'rgba(' + accentColor.value + ',0.9)',
+                        },
+                        {
+                            offset: 1,
+                            color: 'rgba(' + accentColor.value + ',0.7)',
+                        },
+                    ]),
+                },
                 borderRadius: [12, 12, 0, 0],
                 color: new LinearGradient(0, 0, 0, 1, [
                     {
                         offset: 0,
-                        color: 'rgba(125,156,188,0.9)',
+                        color: 'rgba(' + accentColor.value + ',0.7)',
                     },
                     {
                         offset: 1,
-                        color: 'rgba(125,156,188,0.4)',
+                        color: 'rgba(' + accentColor.value + ',0.5)',
                     },
                 ]),
             },
@@ -106,6 +119,8 @@ const weekdays = computed(() => {
     }
 });
 
+const markLineColor = useCssVar('--color-border-secondary');
+
 const option = ref({
     tooltip: {
         trigger: 'item',
@@ -120,12 +135,6 @@ const option = ref({
     xAxis: {
         type: 'category',
         data: weekdays.value,
-        markLine: {
-            lineStyle: {
-                color: 'rgba(125,156,188,0.1)',
-                type: 'dashed',
-            },
-        },
         axisLine: {
             lineStyle: {
                 color: 'transparent', // Set desired color here
@@ -147,7 +156,7 @@ const option = ref({
         type: 'value',
         splitLine: {
             lineStyle: {
-                color: 'rgba(125,156,188,0.2)', // Set desired color here
+                color: markLineColor.value,
             },
         },
     },