From 5b003ac9e01f399d7877e0d37728f7f6aa822078 Mon Sep 17 00:00:00 2001
From: Gabriel Ramos <luisgabrielramosrobles@gmail.com>
Date: Wed, 10 Jun 2026 15:55:52 -0400
Subject: [PATCH] fix(theme): fix dark mode, toggles & alignment

---
 app/(dashboard)/candidates/page.tsx |  6 ++---
 app/(dashboard)/interviews/page.tsx |  4 ++--
 app/(dashboard)/jobs/page.tsx       |  2 +-
 app/(dashboard)/layout.tsx          |  8 +++----
 app/globals.css                     | 34 +++++++++++++++++++++++++++--
 5 files changed, 42 insertions(+), 12 deletions(-)

diff --git a/app/(dashboard)/candidates/page.tsx b/app/(dashboard)/candidates/page.tsx
index cd3b9f2..3d76423 100644
--- a/app/(dashboard)/candidates/page.tsx
+++ b/app/(dashboard)/candidates/page.tsx
@@ -580,7 +580,7 @@ export default function CandidatesPage() {
                     className={`px-2 py-0.5 text-xs rounded transition font-medium border ${
                       searchField === "name"
                         ? "bg-blue-600 text-white border-blue-600"
-                        : "bg-slate-50 dark:bg-slate-850 text-slate-600 dark:text-slate-300 border-slate-200 dark:border-slate-700 hover:bg-slate-100 dark:hover:bg-slate-800"
+                        : "bg-slate-50 dark:bg-slate-800 text-slate-600 dark:text-slate-300 border-slate-200 dark:border-slate-700 hover:bg-slate-100 dark:hover:bg-slate-800"
                     }`}
                   >
                     {lang === "en" ? "Name" : "Nombre"}
@@ -590,7 +590,7 @@ export default function CandidatesPage() {
                     className={`px-2 py-0.5 text-xs rounded transition font-medium border ${
                       searchField === "email"
                         ? "bg-blue-600 text-white border-blue-600"
-                        : "bg-slate-50 dark:bg-slate-850 text-slate-600 dark:text-slate-300 border-slate-200 dark:border-slate-700 hover:bg-slate-100 dark:hover:bg-slate-800"
+                        : "bg-slate-50 dark:bg-slate-800 text-slate-600 dark:text-slate-300 border-slate-200 dark:border-slate-700 hover:bg-slate-100 dark:hover:bg-slate-800"
                     }`}
                   >
                     {lang === "en" ? "Email" : "Correo"}
@@ -600,7 +600,7 @@ export default function CandidatesPage() {
                     className={`px-2 py-0.5 text-xs rounded transition font-medium border ${
                       searchField === "skills"
                         ? "bg-blue-600 text-white border-blue-600"
-                        : "bg-slate-50 dark:bg-slate-850 text-slate-600 dark:text-slate-300 border-slate-200 dark:border-slate-700 hover:bg-slate-100 dark:hover:bg-slate-800"
+                        : "bg-slate-50 dark:bg-slate-800 text-slate-600 dark:text-slate-300 border-slate-200 dark:border-slate-700 hover:bg-slate-100 dark:hover:bg-slate-800"
                     }`}
                   >
                     {lang === "en" ? "Skills" : "Habilidades"}
diff --git a/app/(dashboard)/interviews/page.tsx b/app/(dashboard)/interviews/page.tsx
index b780739..ebe6d1f 100644
--- a/app/(dashboard)/interviews/page.tsx
+++ b/app/(dashboard)/interviews/page.tsx
@@ -232,7 +232,7 @@ export default function InterviewsPage() {
                       onChange={(e) =>
                         handleStateChange(interview.id, "stage", e.target.value)
                       }
-                      className="px-2 py-1 text-sm bg-white dark:bg-slate-850 border border-slate-200 dark:border-slate-700 rounded-md text-slate-900 dark:text-white focus:outline-none"
+                      className="px-2 py-1 text-sm bg-white dark:bg-slate-800 border border-slate-200 dark:border-slate-700 rounded-md text-slate-900 dark:text-white focus:outline-none"
                     >
                       <option value="Screening">{t.screening}</option>
                       <option value="Technical">{t.technical}</option>
@@ -260,7 +260,7 @@ export default function InterviewsPage() {
                     }
                     placeholder={t.feedbackPlaceholder}
                     rows={3}
-                    className="w-full px-3 py-2 border border-slate-200 dark:border-slate-700 rounded-md text-slate-900 dark:text-white bg-white dark:bg-slate-850 placeholder:text-slate-500 dark:placeholder:text-slate-400 text-sm focus:outline-none"
+                    className="w-full px-3 py-2 border border-slate-200 dark:border-slate-700 rounded-md text-slate-900 dark:text-white bg-white dark:bg-slate-800 placeholder:text-slate-500 dark:placeholder:text-slate-400 text-sm focus:outline-none"
                   />
                 </div>
 
diff --git a/app/(dashboard)/jobs/page.tsx b/app/(dashboard)/jobs/page.tsx
index 17e5ebf..d3b4d6b 100644
--- a/app/(dashboard)/jobs/page.tsx
+++ b/app/(dashboard)/jobs/page.tsx
@@ -930,7 +930,7 @@ export default function JobsPage() {
                           {missingSkills.map((skill: string) => (
                             <span
                               key={skill}
-                              className="px-2 py-0.5 bg-white dark:bg-slate-900 border border-slate-200 dark:border-slate-850 border-dashed text-slate-400 dark:text-slate-500 text-xs rounded-md"
+                              className="px-2 py-0.5 bg-white dark:bg-slate-900 border border-slate-200 dark:border-slate-700 border-dashed text-slate-400 dark:text-slate-500 text-xs rounded-md"
                             >
                               {skill} ({t.missing})
                             </span>
diff --git a/app/(dashboard)/layout.tsx b/app/(dashboard)/layout.tsx
index 7a6fa88..4af4d4b 100644
--- a/app/(dashboard)/layout.tsx
+++ b/app/(dashboard)/layout.tsx
@@ -58,16 +58,16 @@ export default function DashboardLayout({
             {/* Language Toggle */}
             <button
               onClick={toggleLanguage}
-              className="px-2.5 py-1 text-xs font-semibold rounded-md border border-slate-200 dark:border-slate-700 bg-white dark:bg-slate-800 hover:bg-slate-50 dark:hover:bg-slate-700 text-slate-600 dark:text-slate-300 transition-colors"
-              title={lang === "en" ? "Switch to Spanish" : "Cambiar a Inglés"}
+              className="h-8 px-2.5 text-xs font-bold rounded-md border border-slate-200 dark:border-slate-700 bg-white dark:bg-slate-800 hover:bg-slate-50 dark:hover:bg-slate-700 text-slate-600 dark:text-slate-300 transition-colors flex items-center justify-center cursor-pointer"
+              title={lang === "en" ? "Language: English (Click to switch to Spanish)" : "Idioma: Español (Clic para cambiar a Inglés)"}
             >
-              {lang === "en" ? "ES" : "EN"}
+              {lang === "en" ? "EN" : "ES"}
             </button>
 
             {/* Dark Mode Toggle */}
             <button
               onClick={toggleTheme}
-              className="p-1.5 rounded-md border border-slate-200 dark:border-slate-700 bg-white dark:bg-slate-800 hover:bg-slate-50 dark:hover:bg-slate-700 text-slate-600 dark:text-slate-300 transition-colors"
+              className="h-8 w-8 rounded-md border border-slate-200 dark:border-slate-700 bg-white dark:bg-slate-800 hover:bg-slate-50 dark:hover:bg-slate-700 text-slate-600 dark:text-slate-300 transition-colors flex items-center justify-center cursor-pointer"
               aria-label={lang === "en" ? "Toggle theme" : "Cambiar tema"}
               title={lang === "en" ? "Toggle light/dark mode" : "Cambiar modo claro/oscuro"}
             >
diff --git a/app/globals.css b/app/globals.css
index b19e23f..61460c1 100644
--- a/app/globals.css
+++ b/app/globals.css
@@ -1,5 +1,35 @@
 @import "tailwindcss";
 
-body {
-  @apply bg-slate-50 text-slate-600 antialiased;
+@custom-variant dark (&:where(.dark, .dark *));
+
+/* Scrollbars styling for light and dark modes */
+::-webkit-scrollbar {
+  width: 8px;
+  height: 8px;
+}
+
+::-webkit-scrollbar-track {
+  background: transparent;
+}
+
+::-webkit-scrollbar-thumb {
+  background: #cbd5e1; /* slate-300 */
+  border-radius: 4px;
+}
+
+::-webkit-scrollbar-thumb:hover {
+  background: #94a3b8; /* slate-400 */
+}
+
+.dark ::-webkit-scrollbar-thumb {
+  background: #334155; /* slate-700 */
+}
+
+.dark ::-webkit-scrollbar-thumb:hover {
+  background: #475569; /* slate-600 */
+}
+
+/* Base body styles */
+body {
+  @apply bg-slate-50 text-slate-600 antialiased transition-colors duration-200;
 }