Feature/nayara dark mode UI by Benevanio · Pull Request #33 · Cla-Code-Community/candidate

Benevanio · 2026-03-25T23:21:39Z

No description provided.

- Atualiza App.tsx, JobsHeaderCard.tsx e JobsFiltersCard.tsx com melhorias visuais e estruturais - Refatora componentes compartilhados (ui/button.tsx, ui/theme-toggle.tsx) - Ajusta estilos globais em index.css (cores, tema e consistência visual) - Adiciona novo logotipo (logo-painel-vagas.svg) para o cabeçalho

- JobsFiltersCard: - Move ações do cabeçalho e exibição de metadados para este card. - Busca em linha com ações. - Seleção de palavra-chave e arquivo reorganizada. - JobsHeaderCard: - Simplificado para exibir apenas logotipo e alternância de tema. - Remove importação não utilizada do ThemeToggle. - JobsTableCard: - Adiciona margem inferior e espaçamento para banner de erro. - Reordena colunas da tabela: palavra-chave e fonte para o final. - Ajusta cor do link no modo escuro. - CSS/Tailwind: - Ajusta a cor do anel (--ring) para foco.

… feature/nayara-dark-mode-ui

…-mode-ui

Copilot

Pull request overview

This PR updates the frontend UI to better support a new dark-mode visual identity, including refreshed theme colors and a restructured header/filters layout.

Changes:

Updated CSS theme tokens (light/dark) and refined global body styling.
Refactored the header/filters composition: moved meta badges/actions into JobsFiltersCard and introduced a logo-based header with an in-header theme toggle.
Tweaked interaction styles (button hover opacity, theme toggle hover state) and table column ordering/styling.

Reviewed changes

Copilot reviewed 7 out of 10 changed files in this pull request and generated 9 comments.

Show a summary per file

File	Description
frontend/src/index.css	Updates theme CSS variables and global body base styles.
frontend/src/components/ui/theme-toggle.tsx	Adds hover/transition/rounding styles to the theme toggle button.
frontend/src/components/ui/button.tsx	Adjusts default button hover opacity.
frontend/src/components/JobsTableCard.tsx	Reorders table columns and tweaks spacing/link styling.
frontend/src/components/JobsHeaderCard.tsx	Refactors header into a logo bar with theme toggle and new styling.
frontend/src/components/JobsFiltersCard.tsx	Refactors filters layout, adds meta badges and `actions` slot; changes component props.
frontend/src/App.tsx	Updates page layout and rewires header/filters/actions composition.
frontend/package-lock.json	Removes workspace-level lockfile.

💡 Add Copilot custom instructions for smarter, more guided reviews. Learn how to get started.

Copilot · 2026-03-25T23:27:01Z

 import type { JobsMeta } from "@/types/jobs";
-import { BriefcaseBusiness, FileSpreadsheet } from "lucide-react";
 import type { ReactNode } from "react";
+import Logo from "../assets/logo-painel-vagas.svg";
+import { ThemeToggle } from "@/components/ui/theme-toggle";
+import { useTheme } from "@/hooks/useTheme";

 interface JobsHeaderCardProps {
  meta: JobsMeta;
  actions?: ReactNode;
 }


JobsHeaderCardProps (and the JobsMeta / ReactNode imports) are now unused after changing JobsHeaderCard to take no props. With the current ESLint rule @typescript-eslint/no-unused-vars, this will fail lint. Either remove the unused interface/imports, or restore the component props and use them.

Copilot · 2026-03-25T23:27:01Z

+    <>
+      <div className="w-screen bg-[#004726] dark:bg-[#003318] p-6 -mx-8 flex items-end">
+        <CardTitle className="text-3xl text-white">
+          <img src={Logo} />


JobsHeaderCard now renders a logo image without an alt attribute. Add meaningful alt text (or alt="" if decorative) to avoid accessibility issues for screen readers.

Suggested change

<img src={Logo} />

<img src={Logo} alt="Painel Vagas logo" />

Copilot · 2026-03-25T23:27:01Z

-          <CardTitle className="text-3xl">Painel de Vagas</CardTitle>
-          <CardDescription>Leitura automatica dos arquivos XLSX gerados em output.</CardDescription>
+    <>
+      <div className="w-screen bg-[#004726] dark:bg-[#003318] p-6 -mx-8 flex items-end">


The header background uses hard-coded hex colors (bg-[#004726] / dark:bg-[#003318]), bypassing the design tokens defined via CSS variables/Tailwind theme. Consider using token-based classes (e.g., bg-primary / bg-background / bg-card) or introducing a dedicated CSS variable so the dark-mode palette stays centralized and adjustable.

Suggested change

<div className="w-screen bg-[#004726] dark:bg-[#003318] p-6 -mx-8 flex items-end">

<div className="w-screen bg-primary p-6 -mx-8 flex items-end">

Copilot · 2026-03-25T23:27:02Z

              <TableHead>Titulo</TableHead>
              <TableHead>Empresa</TableHead>
-              <TableHead>Fonte</TableHead>
              <TableHead>Local</TableHead>
              <TableHead>Link</TableHead>
+              <TableHead>Palavra-chave</TableHead>
+              <TableHead>Fonte</TableHead>
            </TableRow>


This table header now defines 6 columns, but the empty-state row further down still uses a colSpan sized for the previous column count. That will break alignment when there are no results. Update the empty-state TableCell colSpan to match the new 6-column layout.

Copilot · 2026-03-25T23:27:02Z

                      target="_blank"
                      rel="noreferrer"
-                      className="text-primary underline-offset-4 hover:underline"
+                      className="text-primary underline-offset-4 hover:underline dark:text-[#14AE5C]"


The link color adds a hard-coded dark:text-[#14AE5C], which bypasses the theme tokens defined via CSS variables and makes future palette changes harder. Prefer adjusting the dark theme --primary (or introducing a token for link color) so text-primary works consistently in both themes.

Suggested change

className="text-primary underline-offset-4 hover:underline dark:text-[#14AE5C]"

className="text-primary underline-offset-4 hover:underline"

Copilot · 2026-03-25T23:27:02Z

 }

-export function JobsHeaderCard({ meta, actions }: JobsHeaderCardProps) {
+export function JobsHeaderCard() {


JobsHeaderCard no longer accepts meta/actions props, but the repository still has unit tests/usages that render it with those props (e.g. frontend/tests/unit/components/JobsHeaderCard.test.tsx). Update the tests/usages (or keep the props for backward compatibility) to avoid CI failures.

Suggested change

export function JobsHeaderCard() {

export function JobsHeaderCard(_props: JobsHeaderCardProps) {

Copilot · 2026-03-25T23:27:02Z

@@ -14,8 +15,8 @@ interface JobsFiltersCardProps {
  selectedFile: string;
  setSelectedFile: Dispatch<SetStateAction<string>>;
  files: JobFile[];
-  loading: boolean;
-  onRefresh: () => void;
+  meta: JobsMeta;
+  actions?: ReactNode;
 }


JobsFiltersCard props were changed (removed loading/onRefresh, added required meta and optional actions). The existing unit tests for this component still pass the old props, so they will fail to compile/run. Update the tests to pass meta and assert the new UI/behavior.

Copilot · 2026-03-25T23:27:02Z

+import { Search } from "lucide-react";
+import type { Dispatch, ReactNode, SetStateAction } from "react";

+import { BriefcaseBusiness, FileSpreadsheet } from "lucide-react";


There are two separate imports from lucide-react in this file. Consolidating them into a single import keeps imports cleaner and avoids accidental duplication as the icon list grows.

Suggested change

import { Search } from "lucide-react";

import type { Dispatch, ReactNode, SetStateAction } from "react";

import { BriefcaseBusiness, FileSpreadsheet } from "lucide-react";

import { Search, BriefcaseBusiness, FileSpreadsheet } from "lucide-react";

import type { Dispatch, ReactNode, SetStateAction } from "react";

Copilot · 2026-03-25T23:27:03Z

+      <section className="mx-auto flex w-full flex-col gap-6">
+        <JobsHeaderCard />

        <JobsFiltersCard


App now renders JobsHeaderCard without the previous title text/props and moved the primary action into JobsFiltersCard. The existing frontend/tests/unit/pages/App.test.tsx assertions/mocks (e.g., expecting "Painel de Vagas" and mocking useJobsData without scraping/triggerScraper) will need updating to match this new composition, otherwise CI will fail.

test: update JobsHeaderCard tests for accessibility and theme toggle test: enhance JobsFiltersCard tests with meta data and actions fix: update vitest configuration for setup files chore: add vitest setup for matchMedia polyfill

Benevanio

OK

Benevanio and others added 9 commits March 24, 2026 17:44

Develop (#24)

eb577ac

Develop (#26)

f6fdee6

Develop (#28)

ab542b6

Develop (#32)

2aa4efb

Merge remote-tracking branch 'nayara/feat/css-layout-adjustment' into…

52d2457

… feature/nayara-dark-mode-ui

Merge remote-tracking branch 'origin/master' into feature/nayara-dark…

c8e9d84

…-mode-ui

fix(frontend): resolve lint issues after nayara merge

b081101

Copilot AI review requested due to automatic review settings March 25, 2026 23:21

Copilot started reviewing on behalf of Benevanio March 25, 2026 23:22 View session

Copilot AI reviewed Mar 25, 2026

View reviewed changes

Benevanio commented Mar 25, 2026

View reviewed changes

Benevanio merged commit c6bda93 into develop Mar 25, 2026
1 check passed

Benevanio deleted the feature/nayara-dark-mode-ui branch March 25, 2026 23:30

Provide feedback

Saved searches

Use saved searches to filter your results more quickly

Uh oh!

Feature/nayara dark mode UI#33

Feature/nayara dark mode UI#33
Benevanio merged 10 commits into
developfrom
feature/nayara-dark-mode-ui

Benevanio commented Mar 25, 2026

Uh oh!

Copilot AI left a comment

Uh oh!

Copilot AI Mar 25, 2026

Uh oh!

Copilot AI Mar 25, 2026

Uh oh!

Copilot AI Mar 25, 2026

Uh oh!

Copilot AI Mar 25, 2026

Uh oh!

Copilot AI Mar 25, 2026

Uh oh!

Copilot AI Mar 25, 2026

Uh oh!

Copilot AI Mar 25, 2026

Uh oh!

Copilot AI Mar 25, 2026

Uh oh!

Copilot AI Mar 25, 2026

Uh oh!

Benevanio left a comment

Uh oh!

Uh oh!

Reviewers

Assignees

Labels

Projects

Milestone

Development

Uh oh!

3 participants

	<img src={Logo} />
	<img src={Logo} alt="Painel Vagas logo" />

	<div className="w-screen bg-[#004726] dark:bg-[#003318] p-6 -mx-8 flex items-end">
	<div className="w-screen bg-primary p-6 -mx-8 flex items-end">

	className="text-primary underline-offset-4 hover:underline dark:text-[#14AE5C]"
	className="text-primary underline-offset-4 hover:underline"

	export function JobsHeaderCard() {
	export function JobsHeaderCard(_props: JobsHeaderCardProps) {

Uh oh!

Conversation

Benevanio commented Mar 25, 2026

Uh oh!

Copilot AI left a comment

Choose a reason for hiding this comment

Pull request overview

Reviewed changes

Uh oh!

Copilot AI Mar 25, 2026

Choose a reason for hiding this comment

Uh oh!

Copilot AI Mar 25, 2026

Choose a reason for hiding this comment

Uh oh!

Copilot AI Mar 25, 2026

Choose a reason for hiding this comment

Uh oh!

Copilot AI Mar 25, 2026

Choose a reason for hiding this comment

Uh oh!

Copilot AI Mar 25, 2026

Choose a reason for hiding this comment

Uh oh!

Copilot AI Mar 25, 2026

Choose a reason for hiding this comment

Uh oh!

Copilot AI Mar 25, 2026

Choose a reason for hiding this comment

Uh oh!

Copilot AI Mar 25, 2026

Choose a reason for hiding this comment

Uh oh!

Copilot AI Mar 25, 2026

Choose a reason for hiding this comment

Uh oh!

Benevanio left a comment

Choose a reason for hiding this comment

Uh oh!

Uh oh!

Reviewers

Assignees

Labels

Projects

Milestone

Development

Uh oh!

3 participants