From 107e2d0a1d67adb48a069d4790f4fc14136c3787 Mon Sep 17 00:00:00 2001
From: jeremy bayse <jeremy.bayse@gmail.com>
Date: Tue, 14 Apr 2026 19:08:06 +0200
Subject: [PATCH] design: darken nav bar elements for high contrast - Dashboard
 and NavLink text fix

---
 resources/js/Components/DropdownLink.vue     | 3 ++-
 resources/js/Components/NavLink.vue          | 4 ++--
 resources/js/Layouts/AuthenticatedLayout.vue | 4 ++--
 3 files changed, 6 insertions(+), 5 deletions(-)

diff --git a/resources/js/Components/DropdownLink.vue b/resources/js/Components/DropdownLink.vue
index fee0aad..705f59b 100644
--- a/resources/js/Components/DropdownLink.vue
+++ b/resources/js/Components/DropdownLink.vue
@@ -12,7 +12,8 @@ defineProps({
 <template>
     <Link
         :href="href"
-        class="block w-full px-4 py-2 text-start text-sm leading-5 text-slate-700 dark:text-slate-300 transition duration-150 ease-in-out hover:bg-slate-100 dark:hover:bg-slate-800 focus:bg-slate-100 dark:focus:bg-slate-800 focus:outline-none"
+        class="block w-full px-4 py-2 text-start text-sm font-semibold leading-5 transition duration-150 ease-in-out focus:outline-none"
+        style="color:#1e293b;"
     >
         <slot />
     </Link>
diff --git a/resources/js/Components/NavLink.vue b/resources/js/Components/NavLink.vue
index 817ac51..627c364 100644
--- a/resources/js/Components/NavLink.vue
+++ b/resources/js/Components/NavLink.vue
@@ -14,8 +14,8 @@ const props = defineProps({
 
 const classes = computed(() =>
     props.active
-        ? 'inline-flex items-center px-1 pt-1 border-b-2 border-indigo-500 dark:border-indigo-400 text-sm font-bold leading-5 text-slate-900 dark:text-slate-100 focus:outline-none transition duration-150 ease-in-out'
-        : 'inline-flex items-center px-1 pt-1 border-b-2 border-transparent text-sm font-bold leading-5 text-slate-500 dark:text-slate-400 hover:text-slate-700 dark:hover:text-slate-200 hover:border-slate-300 dark:hover:border-slate-700 focus:outline-none transition duration-150 ease-in-out',
+        ? 'inline-flex items-center px-1 pt-1 border-b-2 border-indigo-600 text-sm font-bold leading-5 text-indigo-700 focus:outline-none transition duration-150 ease-in-out'
+        : 'inline-flex items-center px-1 pt-1 border-b-2 border-transparent text-sm font-bold leading-5 text-slate-700 hover:text-indigo-600 hover:border-indigo-400 focus:outline-none transition duration-150 ease-in-out',
 );
 </script>
 
diff --git a/resources/js/Layouts/AuthenticatedLayout.vue b/resources/js/Layouts/AuthenticatedLayout.vue
index 1df35f6..148bd6a 100644
--- a/resources/js/Layouts/AuthenticatedLayout.vue
+++ b/resources/js/Layouts/AuthenticatedLayout.vue
@@ -24,7 +24,7 @@ const showingNavigationDropdown = ref(false);
                             <div class="flex shrink-0 items-center">
                                 <Link :href="route('dashboard')">
                                     <ApplicationLogo
-                                        class="block h-9 w-auto fill-indigo-600 dark:fill-indigo-400"
+                                        class="block h-9 w-auto fill-indigo-600"
                                     />
                                 </Link>
                             </div>
@@ -50,7 +50,7 @@ const showingNavigationDropdown = ref(false);
                                         <span class="inline-flex rounded-md">
                                             <button
                                                 type="button"
-                                                style="display:inline-flex; align-items:center; border-radius:0.75rem; border:1.5px solid #e2e8f0; background:#f8fafc; padding:0.5rem 1rem; font-size:0.875rem; font-weight:700; color:#1e293b; transition:all 0.15s ease;"
+                                                style="display:inline-flex; align-items:center; border-radius:0.75rem; border:1.5px solid #e2e8f0; background:#f1f5f9; padding:0.5rem 1rem; font-size:0.875rem; font-weight:700; color:#0f172a; transition:all 0.15s ease;"
                                             >
                                                 {{ $page.props.auth.user.name }}