+ class="relative flex w-full items-center border-s-2 border-transparent bg-white p-2 ps-2 hover:border-teal-600 hover:bg-teal-600 hover:text-teal-100 dark:bg-gray-800 dark:hover:border-teal-400 dark:hover:bg-teal-400 dark:hover:text-teal-900">
{{ option.name }}
diff --git a/resources/js/Components/NavLink.vue b/resources/js/Components/NavLink.vue
index 2bd50bc82df..d61d9c28d3e 100644
--- a/resources/js/Components/NavLink.vue
+++ b/resources/js/Components/NavLink.vue
@@ -9,8 +9,8 @@ const props = defineProps({
const classes = computed(() => {
return props.active
- ? 'inline-flex items-center px-1 pt-1 border-b-2 border-indigo-400 dark:border-indigo-600 text-sm font-medium leading-5 text-gray-900 dark:text-gray-100 focus:outline-none focus:border-indigo-700 focus:dark:border-indigo-300 transition'
- : '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:dark:text-gray-300 hover:border-gray-300 hover:dark:border-gray-700 focus:outline-none focus:text-gray-700 focus:dark:text-gray-300 focus:border-gray-300 focus:dark:border-gray-700 transition';
+ ? 'inline-flex items-center px-1 pt-1 border-b-2 border-indigo-400 dark:border-indigo-600 text-sm font-medium leading-5 text-gray-900 dark:text-gray-100 focus:outline-hidden focus:border-indigo-700 dark:focus:border-indigo-300 transition'
+ : '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 dark:hover:text-gray-300 hover:border-gray-300 dark:hover:border-gray-700 focus:outline-hidden focus:text-gray-700 dark:focus:text-gray-300 focus:border-gray-300 dark:focus:border-gray-700 transition';
});
diff --git a/resources/js/Components/Pagination.vue b/resources/js/Components/Pagination.vue
index 9550bd1a552..7435e54e18c 100644
--- a/resources/js/Components/Pagination.vue
+++ b/resources/js/Components/Pagination.vue
@@ -14,7 +14,7 @@ defineProps({
const commonClasses =
'relative inline-flex items-center px-4 py-2 text-sm font-medium bg-white border border-gray-300 dark:border-gray-700 leading-5';
const linkClasses =
- 'hover:text-gray-500 focus:outline-none focus:ring ring-gray-300 dark:ring-gray-700 focus:border-blue-300 focus:dark:border-blue-700 active:bg-gray-100 active:dark:bg-gray-900 active:text-gray-700 active:dark:text-gray-300 transition ease-in-out duration-150';
+ 'hover:text-gray-500 focus:outline-hidden focus:ring-3 ring-gray-300 dark:ring-gray-700 focus:border-blue-300 dark:focus:border-blue-700 active:bg-gray-100 dark:active:bg-gray-900 active:text-gray-700 dark:active:text-gray-300 transition ease-in-out duration-150';
@@ -80,7 +80,7 @@ const linkClasses =
-
+
@@ -170,7 +170,7 @@ const linkClasses =
'text-gray-500',
'dark:bg-gray-900',
'hover:text-gray-400',
- 'hover:dark:text-gray-600',
+ 'dark:hover:text-gray-600',
'focus:z-10',
]"
:aria-label="$t('Next')">
diff --git a/resources/js/Components/ResponsiveNavLink.vue b/resources/js/Components/ResponsiveNavLink.vue
index 4e1d42af8a1..b65d75e4b08 100644
--- a/resources/js/Components/ResponsiveNavLink.vue
+++ b/resources/js/Components/ResponsiveNavLink.vue
@@ -10,8 +10,8 @@ const props = defineProps({
const classes = computed(() => {
return props.active
- ? 'block ps-3 pe-4 py-2 border-s-4 border-indigo-400 dark:border-indigo-600 text-base font-medium text-indigo-700 dark:text-indigo-300 bg-indigo-50 dark:bg-indigo-900 focus:outline-none focus:text-indigo-800 focus:dark:text-indigo-200 focus:bg-indigo-100 focus:dark:bg-indigo-900 focus:border-indigo-700 focus:dark:border-indigo-300 transition'
- : 'block ps-3 pe-4 py-2 border-s-4 border-transparent text-base font-medium text-gray-600 dark:text-gray-400 hover:text-gray-800 hover:dark:text-gray-200 hover:bg-gray-50 hover:dark:bg-gray-900 hover:border-gray-300 hover:dark:border-gray-700 focus:outline-none focus:text-gray-800 focus:dark:text-gray-200 focus:bg-gray-50 focus:dark:bg-gray-900 focus:border-gray-300 focus:dark:border-gray-700 transition';
+ ? 'block ps-3 pe-4 py-2 border-s-4 border-indigo-400 dark:border-indigo-600 text-base font-medium text-indigo-700 dark:text-indigo-300 bg-indigo-50 dark:bg-indigo-900 focus:outline-hidden focus:text-indigo-800 dark:focus:text-indigo-200 focus:bg-indigo-100 dark:focus:bg-indigo-900 focus:border-indigo-700 dark:focus:border-indigo-300 transition'
+ : 'block ps-3 pe-4 py-2 border-s-4 border-transparent text-base font-medium text-gray-600 dark:text-gray-400 hover:text-gray-800 dark:hover:text-gray-200 hover:bg-gray-50 dark:hover:bg-gray-900 hover:border-gray-300 dark:hover:border-gray-700 focus:outline-hidden focus:text-gray-800 dark:focus:text-gray-200 focus:bg-gray-50 dark:focus:bg-gray-900 focus:border-gray-300 dark:focus:border-gray-700 transition';
});
diff --git a/resources/js/Layouts/AppLayout.vue b/resources/js/Layouts/AppLayout.vue
index d0d4058da49..dbb98b1b34a 100644
--- a/resources/js/Layouts/AppLayout.vue
+++ b/resources/js/Layouts/AppLayout.vue
@@ -46,7 +46,7 @@ const logout = () => {