Conversation
- 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
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
There was a problem hiding this comment.
Pull request overview
This PR updates the frontend UI layout/styling (header, filters, table), improves theme-toggle presentation, and adjusts the Vitest setup to support matchMedia-dependent code during tests.
Changes:
- Added a new Vitest setup file (TypeScript) with a
window.matchMediastub and switched Vitest to use it. - Refactored
JobsHeaderCard/JobsFiltersCardresponsibilities and updatedApp+ unit tests accordingly. - Updated theme colors and small UI styling tweaks (buttons, table spacing/link color).
Reviewed changes
Copilot reviewed 12 out of 15 changed files in this pull request and generated 4 comments.
Show a summary per file
| File | Description |
|---|---|
| frontend/vitest.setup.ts | Adds global test setup (jest-dom + matchMedia stub). |
| frontend/vitest.config.js | Switches setupFiles to the new setup module. |
| frontend/tests/unit/pages/App.test.tsx | Updates assertion to match the new header logo rendering. |
| frontend/tests/unit/components/JobsHeaderCard.test.tsx | Updates tests for the refactored header and mocks useTheme. |
| frontend/tests/unit/components/JobsFiltersCard.test.tsx | Updates tests for new props (meta, actions) and new UI structure. |
| frontend/src/index.css | Adjusts CSS variables and base body styles. |
| frontend/src/components/ui/theme-toggle.tsx | Adds hover/transition styling to the theme toggle button. |
| frontend/src/components/ui/button.tsx | Tweaks default hover opacity styling. |
| frontend/src/components/JobsTableCard.tsx | Adjusts spacing, column order, and link styling in dark mode. |
| frontend/src/components/JobsHeaderCard.tsx | Refactors header to a full-width banner with logo + theme toggle. |
| frontend/src/components/JobsFiltersCard.tsx | Refactors filters layout; adds badges for file/total and supports injected actions. |
| frontend/src/App.tsx | Wires the new header/filters structure and moves “Buscar vagas” into filters actions. |
| frontend/package-lock.json | Removes the frontend workspace lockfile. |
💡 Add Copilot custom instructions for smarter, more guided reviews. Learn how to get started.
| import "@testing-library/jest-dom/vitest"; | ||
|
|
||
| if (!window.matchMedia) { | ||
| Object.defineProperty(window, "matchMedia", { |
There was a problem hiding this comment.
window.matchMedia is defined via Object.defineProperty without configurable: true. Existing tests (e.g., useTheme.test.ts) stub/override matchMedia, and redefining a non-configurable property will throw. Define it with configurable: true (and ideally writable: true) so tests can safely override it.
| Object.defineProperty(window, "matchMedia", { | |
| Object.defineProperty(window, "matchMedia", { | |
| configurable: true, |
| import { Search } from "lucide-react"; | ||
| import type { Dispatch, ReactNode, SetStateAction } from "react"; | ||
|
|
||
| import { BriefcaseBusiness, FileSpreadsheet } from "lucide-react"; |
There was a problem hiding this comment.
There are two separate imports from lucide-react in this file. Consolidating them into a single import reduces noise and avoids accidental duplicate specifiers during future edits.
| 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"; |
| <div className="flex items-center gap-2 flex"> | ||
| <select | ||
| className="h-10 w-full rounded-md border border-input bg-background px-3 text-sm" | ||
| value={selectedFile} | ||
| onChange={(event) => setSelectedFile(event.target.value)} | ||
| className="h-10 rounded-md border border-input bg-background px-3 text-sm focus:outline-none focus:ring-2 focus:ring-ring focus:border-ring" | ||
| value={keywordFilter} |
There was a problem hiding this comment.
This className string contains redundant/typo spacing ("h-10 rounded-md") and an extra standalone flex token on the parent ("... gap-2 flex"). Cleaning these up makes the styling easier to read and avoids accidental class collisions later.
| </CardHeader> | ||
| </Card> | ||
| </div> | ||
|
|
There was a problem hiding this comment.
There is trailing whitespace / an effectively blank line here inside the component. Please remove it to keep the file clean and avoid noisy diffs in future formatting changes.
No description provided.