jeremy/RecruIT
1
0
Fork 0
Code Issues Pull Requests Actions Packages Projects Releases Wiki Activity

design: darken nav bar elements for high contrast - Dashboard and NavLink text fix

Browse Source
This commit is contained in:
jeremy bayse
2026-04-14 19:08:06 +02:00
parent 71672509b6
commit 107e2d0a1d
3 changed files with 6 additions and 5 deletions
Download Patch File Download Diff File Expand all files Collapse all files

3
resources/js/Components/DropdownLink.vue
View File

@@ -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>

4
resources/js/Components/NavLink.vue
View File

@@ -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>

4
resources/js/Layouts/AuthenticatedLayout.vue
View File

@@ -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 }}