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

design: complete UI harmonization with full dark mode support and high contrast for candidate dashboard

Browse Source
This commit is contained in:
jeremy bayse
2026-04-14 19:02:38 +02:00
parent 21d4aaee59
commit 351bdda2a1
4 changed files with 9 additions and 9 deletions
Download Patch File Download Diff File Expand all files Collapse all files

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

@@ -12,7 +12,7 @@ defineProps({
<template>
<Link
:href="href"
class="block w-full px-4 py-2 text-start text-sm leading-5 text-gray-700 transition duration-150 ease-in-out hover:bg-gray-100 focus:bg-gray-100 focus:outline-none"
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"
>
<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-400 text-sm font-medium leading-5 text-gray-900 focus:outline-none focus:border-indigo-700 transition duration-150 ease-in-out'
: 'inline-flex items-center px-1 pt-1 border-b-2 border-transparent text-sm font-medium leading-5 text-gray-500 hover:text-gray-700 hover:border-gray-300 focus:outline-none focus:text-gray-700 focus:border-gray-300 transition duration-150 ease-in-out',
? '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',
);
</script>

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

@@ -14,9 +14,9 @@ const showingNavigationDropdown = ref(false);
<template>
<EnvironmentBanner />
<div>
<div class="min-h-screen bg-gray-100">
<div class="min-h-screen bg-slate-50 dark:bg-slate-950 transition-colors duration-300">
<nav
class="border-b border-gray-100 bg-white"
class="border-b border-slate-200 dark:border-slate-800 bg-white dark:bg-slate-900/80 backdrop-blur-md sticky top-0 z-50"
>
<!-- Primary Navigation Menu -->
<div class="mx-auto max-w-7xl px-4 sm:px-6 lg:px-8">
@@ -26,7 +26,7 @@ const showingNavigationDropdown = ref(false);
<div class="flex shrink-0 items-center">
<Link :href="route('dashboard')">
<ApplicationLogo
class="block h-9 w-auto fill-current text-gray-800"
class="block h-9 w-auto fill-indigo-600 dark:fill-indigo-400"
/>
</Link>
</div>
@@ -52,7 +52,7 @@ const showingNavigationDropdown = ref(false);
<span class="inline-flex rounded-md">
<button
type="button"
class="inline-flex items-center rounded-md border border-transparent bg-white px-3 py-2 text-sm font-medium leading-4 text-gray-500 transition duration-150 ease-in-out hover:text-gray-700 focus:outline-none"
class="inline-flex items-center rounded-xl border border-transparent bg-slate-50 dark:bg-slate-800 px-4 py-2 text-sm font-bold leading-4 text-slate-700 dark:text-slate-200 transition duration-150 ease-in-out hover:text-indigo-600 dark:hover:text-indigo-400 focus:outline-none"
>
{{ $page.props.auth.user.name }}
@@ -183,7 +183,7 @@ const showingNavigationDropdown = ref(false);
<!-- Page Heading -->
<header
class="bg-white shadow"
class="bg-white dark:bg-slate-900 shadow-sm border-b border-slate-100 dark:border-slate-800"
v-if="$slots.header"
>
<div class="mx-auto max-w-7xl px-4 py-6 sm:px-6 lg:px-8">

2
resources/js/Pages/Dashboard.vue
View File

@@ -38,7 +38,7 @@ const getStatusColor = (status) => {
<span v-if="user.role === 'super_admin'" class="bg-gradient-to-r from-red-600 to-orange-500 text-white px-3 py-1 rounded-full text-[10px] font-black tracking-widest uppercase shadow-sm">
GOD MODE
</span>
<span v-else-if="user.tenant" class="bg-indigo-100 text-indigo-700 dark:bg-indigo-900/50 dark:text-indigo-400 border border-indigo-200 dark:border-indigo-800 px-3 py-1 rounded-full text-[10px] font-black tracking-widest uppercase">
<span v-else-if="user.tenant" class="bg-indigo-600 text-white dark:bg-indigo-500/20 dark:text-indigo-300 px-3 py-1 rounded-full text-[10px] font-black tracking-widest uppercase border border-indigo-700 dark:border-indigo-400/30">
Structure : {{ user.tenant.name }}
</span>
</div>