From 86b5669947579085a4773ba49af108b63fc5bed1 Mon Sep 17 00:00:00 2001
From: Arthur DANJOU <arthurdanjou@outlook.fr>
Date: Tue, 28 Jan 2025 16:47:53 +0100
Subject: [PATCH] Update header styles and improve visitor tooltip design

Adjusted header alignment for better responsiveness. Enhanced visitor tooltip by refining spacing, adding background color, and improving text readability for both light and dark themes.
---
 app/components/AppHeader.vue   | 2 +-
 app/components/AppVisitors.vue | 8 +++++---
 2 files changed, 6 insertions(+), 4 deletions(-)

diff --git a/app/components/AppHeader.vue b/app/components/AppHeader.vue
index 00475a9..e8f412d 100644
--- a/app/components/AppHeader.vue
+++ b/app/components/AppHeader.vue
@@ -108,7 +108,7 @@ defineShortcuts({
 </script>
 
 <template>
-  <header class="flex items-center justify-between my-8 gap-2">
+  <header class="flex md:items-center justify-between my-8 gap-2">
     <NuxtLinkLocale
       class="handwriting text-xl sm:text-3xl text-nowrap gap-2 font-bold duration-300 text-gray-600 hover:text-black dark:text-gray-400 dark:hover:text-white"
       to="/"
diff --git a/app/components/AppVisitors.vue b/app/components/AppVisitors.vue
index 1728148..41e3c35 100644
--- a/app/components/AppVisitors.vue
+++ b/app/components/AppVisitors.vue
@@ -3,10 +3,12 @@ const { isLoading, visitors } = useVisitors()
 </script>
 
 <template>
-  <div class="fixed bottom-4 right-8">
+  <div class="fixed bottom-4 right-4">
     <UTooltip text="Visitors currently on my portfolio" placement="left">
-      <nav v-if="!isLoading" class="text-xs flex space-x-1 items-center border border-green-400 dark:border-green-600 px-2 rounded-xl">
-        <div>{{ visitors }}</div>
+      <nav v-if="!isLoading" class="text-xs flex space-x-1 items-center border border-green-400 dark:border-green-600 px-2 rounded-xl  bg-white dark:bg-black">
+        <p class="text-neutral-700 dark:text-neutral-300">
+          {{ visitors }}
+        </p>
         <div class="h-3 w-3 bg-green-200 dark:bg-green-600 rounded-full border-2 border-green-400 dark:border-green-800" />
       </nav>
     </UTooltip>