gabogg/semillero-2-AI-ATS
1
0
Fork 0
Code Issues Pull requests Projects Releases Packages Wiki Activity Actions

fix(theme): fix dark mode, toggles & alignment

Browse source
This commit is contained in:
Gabriel Ramos 2026-06-10 15:55:52 -04:00
parent 60fb20cc4b
commit 5b003ac9e0
5 changed files with 42 additions and 12 deletions
Show stats Download patch file Download diff file Expand all files Collapse all files

6
app/(dashboard)/candidates/page.tsx
View file

@ -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"}

4
app/(dashboard)/interviews/page.tsx
View file

@ -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>

2
app/(dashboard)/jobs/page.tsx
View file

@ -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>

8
app/(dashboard)/layout.tsx
View file

@ -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"}
>

34
app/globals.css
View file

@ -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;
}