Fix minor dark mode issues on dashboard and activities pages

range-of-motion · Dec 9, 2023 · b496b6b · b496b6b
1 parent 96885de
commit b496b6b
Show file tree

Hide file tree

Showing 2 changed files with 22 additions and 9 deletions.
diff --git a/resources/assets/js/prototype/screens/Activities.vue b/resources/assets/js/prototype/screens/Activities.vue
@@ -21,20 +21,20 @@ fetchActivities();
         <Navigation />
         <div class="my-10 mx-auto max-w-3xl">
             <div class="p-5 bg-white dark:bg-gray-800 border border-gray-200 dark:border-gray-700 rounded-lg">
-                <div class="relative ml-2.5 space-y-5 border-l border-gray-300">
+                <div class="relative ml-2.5 space-y-5 border-l border-gray-300 dark:border-gray-700">
                     <div v-for="(activity, i) in activities" :key="i">
                         <div class="flex items-start">
-                            <div class="absolute -left-2.5 w-5 h-5 bg-gray-100 border border-gray-300 ring-8 ring-white rounded-full"></div>
+                            <div class="absolute -left-2.5 w-5 h-5 bg-gray-100 dark:bg-gray-900 border border-gray-300 dark:border-gray-700 ring-8 ring-white dark:ring-gray-800 rounded-full"></div>
                             <div class="pl-5">
-                                <div class="-mt-px text-sm">
+                                <div class="-mt-px text-sm dark:text-white">
                                     <span>{{ activity.user ? activity.user.name : 'Budget' }} {{ activity.action.split('.')[1] }} {{ activity.action.split('.')[0] }} #{{ activity.entity_id }}</span>
                                 </div>
-                                <div class="mt-1 text-xs text-gray-500">{{ new Date(activity.occurred_at).toJSON().split('T')[0] }}</div>
+                                <div class="mt-1 text-xs text-gray-500 dark:text-gray-400">{{ new Date(activity.occurred_at).toJSON().split('T')[0] }}</div>
                             </div>
                         </div>
                     </div>
                     <!-- Patch (yes, it's ugly) -->
-                    <div class="absolute bottom-0 -left-2 w-4 h-4 bg-white"></div>
+                    <div class="absolute bottom-0 -left-2 w-4 h-4 bg-white dark:bg-gray-800"></div>
                 </div>
             </div>
         </div>

diff --git a/resources/assets/js/prototype/screens/Dashboard.vue b/resources/assets/js/prototype/screens/Dashboard.vue
@@ -1,8 +1,11 @@
 <script setup>
+import colors from 'tailwindcss/colors';
 import { onMounted } from 'vue';
 
 import Navigation from '../components/Navigation.vue';
 
+const isDarkMode = document.querySelector('html').classList.contains('dark');
+
 const getTimeSensitiveGreeting = () => {
     const hour = new Date().getHours();
 
@@ -40,15 +43,17 @@ const fetchChartData = () => {
                 ],
 
                 stroke: {
+                    colors: [isDarkMode ? colors.white : colors.black],
                     width: 2,
-                    colors: ['#000'],
                 },
 
                 tooltip: {
                     enabled: false,
                 },
 
                 grid: {
+                    borderColor: isDarkMode ? colors.gray[700] : null,
+
                     padding: {
                         top: -10,
                         bottom: -10,
@@ -69,7 +74,15 @@ const fetchChartData = () => {
                     axisTicks: {
                         show: false
                     }
-                }
+                },
+
+                yaxis: {
+                    labels: {
+                        style: {
+                            colors: [isDarkMode ? colors.gray[400] : null],
+                        },
+                    },
+                },
             };
 
             const chart = new ApexCharts(document.querySelector("#chart"), options);
@@ -88,8 +101,8 @@ onMounted(() => {
         <Navigation />
         <div class="my-10 mx-auto max-w-3xl">
             <div class="mb-5">
-                <div class="font-medium">{{ getTimeSensitiveGreeting() }}</div>
-                <div class="mt-1 text-sm text-gray-500">Here is your balance throughout the month</div>
+                <div class="font-medium dark:text-white">{{ getTimeSensitiveGreeting() }}</div>
+                <div class="mt-1 text-sm text-gray-500 dark:text-gray-400">Here is your balance throughout the month</div>
             </div>
             <div class="p-5 bg-white dark:bg-gray-800 border border-gray-200 dark:border-gray-700 rounded-lg">
                 <div id="chart"></div>