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> <template>
<Link <Link
:href="href" :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 /> <slot />
</Link> </Link>

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

@@ -14,8 +14,8 @@ const props = defineProps({
const classes = computed(() => const classes = computed(() =>
props.active 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-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-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-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> </script>

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

@@ -24,7 +24,7 @@ const showingNavigationDropdown = ref(false);
<div class="flex shrink-0 items-center"> <div class="flex shrink-0 items-center">
<Link :href="route('dashboard')"> <Link :href="route('dashboard')">
<ApplicationLogo <ApplicationLogo
class="block h-9 w-auto fill-indigo-600 dark:fill-indigo-400" class="block h-9 w-auto fill-indigo-600"
/> />
</Link> </Link>
</div> </div>
@@ -50,7 +50,7 @@ const showingNavigationDropdown = ref(false);
<span class="inline-flex rounded-md"> <span class="inline-flex rounded-md">
<button <button
type="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 }} {{ $page.props.auth.user.name }}