From 1a670ca33b3a6b5e057b8b4aff2e7cfe962c35df Mon Sep 17 00:00:00 2001
From: Michael Liendo <michael.m.liendo.r@gmail.com>
Date: Sat, 20 Jan 2024 22:03:20 -0400
Subject: [PATCH 1/3] Refactor Header component styling and language menu

---
 src/lib/components/Header.svelte | 28 ++++++++++++++++------------
 1 file changed, 16 insertions(+), 12 deletions(-)

diff --git a/src/lib/components/Header.svelte b/src/lib/components/Header.svelte
index 73cab05..a04660e 100644
--- a/src/lib/components/Header.svelte
+++ b/src/lib/components/Header.svelte
@@ -99,9 +99,11 @@
       </li>
     </ul>
   </nav>
-  <div class="flex sm:space-x-4 items-center">
+  <div
+    class="flex sm:space-x-4 items-center text-[#313131] dark:text-[#dddddd]"
+  >
     <button
-      class="mr-2 p-4 rounded-full"
+      class="mr-2 p-1.5 rounded-full"
       title="Change website into dark or white mode"
       on:click={toggleDarkMode}
     >
@@ -111,16 +113,16 @@
         <Moon />
       {/if}
     </button>
-    <div class="flex justify-center items-center space-x-6">
-      <figure class="h-8 w-8">
-        <button
-          class="h-8 w-8 rounded-full"
-          on:click={toggleLanguageMenu}
-          aria-label="Toggle language menu"
-          title="Toggle language menu"
-        >
-          <Translate class="h-6 w-6" />
-        </button>
+    <button
+      class="p-1.5 rounded-full"
+      on:click={toggleLanguageMenu}
+      aria-label="Toggle language menu"
+      title="Toggle language menu"
+    >
+      <Translate class="h-5 w-5" />
+    </button>
+    <div class="flex justify-center items-center">
+      <figure>
         {#if isLangMenuOpen}
           <div class="relative z-20">
             <ul
@@ -128,6 +130,7 @@
             >
               <li class="lang-opt">
                 <button
+                  aria-label="Change language to English"
                   class:lang-active={$locale === 'en'}
                   on:click={() => changeLanguage('en')}
                 >
@@ -136,6 +139,7 @@
               </li>
               <li>
                 <button
+                  aria-label="Cambiar language a Spanish"
                   class:lang-active={$locale === 'es'}
                   on:click={() => changeLanguage('es')}
                 >

From c73296a0712d5beba05da8e06c763aefbbd51107 Mon Sep 17 00:00:00 2001
From: Michael Liendo <michael.m.liendo.r@gmail.com>
Date: Sat, 20 Jan 2024 22:19:10 -0400
Subject: [PATCH 2/3] Update Header component styles

---
 src/lib/components/Header.svelte | 4 ++--
 1 file changed, 2 insertions(+), 2 deletions(-)

diff --git a/src/lib/components/Header.svelte b/src/lib/components/Header.svelte
index a04660e..68d33c2 100644
--- a/src/lib/components/Header.svelte
+++ b/src/lib/components/Header.svelte
@@ -72,7 +72,7 @@
   <!-- only desktop -->
   <nav class="flex">
     <ul
-      class="hidden sm:flex text-xl items-center sm:space-x-10 md:space-x-16 px-10 py-2 bg-white dark:bg-black border border-black dark:border-white rounded-full"
+      class="hidden sm:flex text-xl items-center sm:space-x-10 md:space-x-16 px-10 py-2 bg-[#f5f5f5] dark:bg-slate-900 border border-black dark:border-white rounded-full"
     >
       <li>
         <a href="{baseLocaleUrl}/">{$LL.LAYOUT.NAV.HOME()}</a>
@@ -85,7 +85,7 @@
       </li>
     </ul>
     <ul
-      class="text-xl flex sm:hidden items-center space-x-6 px-5 py-2 bg-white dark:bg-black border border-black dark:border-white rounded-full"
+      class="text-xl flex sm:hidden items-center space-x-6 px-5 py-2 bg-[#f5f5f5] dark:bg-slate-900 border border-black dark:border-white rounded-full"
       aria-label="Main navigation"
     >
       <li><a href="{baseLocaleUrl}/" aria-label="Home"><Home /></a></li>

From 16fa1fbfd74cdeaf0c5e3c6e15eca8906cb6ccf0 Mon Sep 17 00:00:00 2001
From: Michael Liendo <michael.m.liendo.r@gmail.com>
Date: Sat, 20 Jan 2024 22:29:27 -0400
Subject: [PATCH 3/3] Update header text color

---
 src/lib/components/Header.svelte | 8 ++++++--
 1 file changed, 6 insertions(+), 2 deletions(-)

diff --git a/src/lib/components/Header.svelte b/src/lib/components/Header.svelte
index 68d33c2..fe9188c 100644
--- a/src/lib/components/Header.svelte
+++ b/src/lib/components/Header.svelte
@@ -66,8 +66,12 @@
 </script>
 
 <header class="px-5 sm:px-10 md:px-20 py-4 flex justify-between items-center">
-  <h1 class="text-xl hidden sm:block">Michael Liendo</h1>
-  <h1 class="text-xl block sm:hidden">Michael L</h1>
+  <h1 class="text-xl hidden sm:block text-sky-900 dark:text-sky-500">
+    Michael Liendo
+  </h1>
+  <h1 class="text-xl block sm:hidden text-sky-900 dark:text-sky-500">
+    Michael L
+  </h1>
 
   <!-- only desktop -->
   <nav class="flex">