Skip to content

Commit 52d2457

Browse files
BenevanioBenevanio
committed
Merge remote-tracking branch 'nayara/feat/css-layout-adjustment' into feature/nayara-dark-mode-ui
2 parents cfcc7ff + 6576ace commit 52d2457

10 files changed

Lines changed: 3018 additions & 4783 deletions

File tree

‎frontend/package-lock.json‎

Lines changed: 0 additions & 3857 deletions
This file was deleted.

‎frontend/src/App.tsx‎

Lines changed: 14 additions & 15 deletions
Original file line numberDiff line numberDiff line change
@@ -2,7 +2,6 @@ import { JobsFiltersCard } from "@/components/JobsFiltersCard";
22
import { JobsHeaderCard } from "@/components/JobsHeaderCard";
33
import { JobsTableCard } from "@/components/JobsTableCard";
44
import { Button } from "@/components/ui/button";
5-
import { ThemeToggle } from "@/components/ui/theme-toggle";
65
import { useJobsData } from "@/hooks/useJobsData";
76
import { useJobsFiltering } from "@/hooks/useJobsFiltering";
87
import { useJobsPagination } from "@/hooks/useJobsPagination";
@@ -68,22 +67,11 @@ function App() {
6867
}, [triggerScraper]);
6968

7069
return (
71-
<main className="relative min-h-screen overflow-hidden bg-background px-4 py-8 transition-colors duration-300 md:px-8">
70+
<main className="relative min-h-screen overflow-hidden bg-background px-4 transition-colors duration-300 md:px-8">
7271
<div className="pointer-events-none absolute inset-0 -z-10 bg-[radial-gradient(circle_at_20%_15%,rgba(236,195,117,0.35),transparent_30%),radial-gradient(circle_at_80%_10%,rgba(92,151,191,0.28),transparent_35%),radial-gradient(circle_at_50%_95%,rgba(201,120,99,0.22),transparent_40%)] dark:bg-[radial-gradient(circle_at_20%_15%,rgba(240,180,95,0.18),transparent_30%),radial-gradient(circle_at_80%_10%,rgba(92,151,191,0.18),transparent_35%),radial-gradient(circle_at_50%_95%,rgba(201,120,99,0.15),transparent_40%)]" />
7372

74-
<section className="mx-auto flex w-full max-w-7xl flex-col gap-6">
75-
<JobsHeaderCard
76-
meta={meta}
77-
actions={
78-
<>
79-
<Button onClick={handleScraper} disabled={loading || scraping}>
80-
<RefreshCcw className={`h-4 w-4 ${scraping ? "animate-spin" : ""}`} />
81-
{scraping ? "Buscando vagas..." : "Buscar vagas"}
82-
</Button>
83-
<ThemeToggle theme={resolvedTheme} onToggle={toggleTheme} />
84-
</>
85-
}
86-
/>
73+
<section className="mx-auto flex w-full flex-col gap-6">
74+
<JobsHeaderCard />
8775

8876
<JobsFiltersCard
8977
search={search}
@@ -96,6 +84,17 @@ function App() {
9684
files={files}
9785
loading={loading || scraping}
9886
onRefresh={() => loadJobs(selectedFile)}
87+
meta={meta}
88+
actions={
89+
<>
90+
<Button onClick={handleScraper} disabled={loading || scraping}>
91+
<RefreshCcw
92+
className={`h-4 w-4 ${scraping ? "animate-spin" : ""}`}
93+
/>
94+
{scraping ? "Buscando vagas..." : "Buscar vagas"}
95+
</Button>
96+
</>
97+
}
9998
/>
10099

101100
<JobsTableCard

‎frontend/src/assets/logo-painel-vagas.svg‎

Lines changed: 9 additions & 0 deletions
Loading

‎frontend/src/components/JobsFiltersCard.tsx‎

Lines changed: 56 additions & 34 deletions
Original file line numberDiff line numberDiff line change
@@ -1,10 +1,13 @@
1-
import { Button } from "@/components/ui/button";
21
import { Card, CardContent } from "@/components/ui/card";
32
import { Input } from "@/components/ui/input";
43
import type { JobFile } from "@/types/jobs";
5-
import { RefreshCcw, Search } from "lucide-react";
4+
import { Search } from "lucide-react";
65
import type { Dispatch, SetStateAction } from "react";
6+
import type { JobsMeta } from "@/types/jobs";
7+
import type { ReactNode } from "react";
8+
import { Badge } from "@/components/ui/badge";
79

10+
import { BriefcaseBusiness, FileSpreadsheet } from "lucide-react";
811
interface JobsFiltersCardProps {
912
search: string;
1013
setSearch: Dispatch<SetStateAction<string>>;
@@ -16,6 +19,8 @@ interface JobsFiltersCardProps {
1619
files: JobFile[];
1720
loading: boolean;
1821
onRefresh: () => void;
22+
meta: JobsMeta;
23+
actions?: ReactNode;
1924
}
2025

2126
export function JobsFiltersCard({
@@ -29,48 +34,65 @@ export function JobsFiltersCard({
2934
files,
3035
loading,
3136
onRefresh,
37+
meta,
38+
actions,
3239
}: JobsFiltersCardProps) {
3340
return (
3441
<Card className="border-border/70 bg-card/85 backdrop-blur dark:bg-card/95">
35-
<CardContent className="grid gap-3 pt-6 md:grid-cols-4">
36-
<div className="relative md:col-span-2">
37-
<Search className="pointer-events-none absolute left-3 top-3 h-4 w-4 text-muted-foreground" />
38-
<Input
39-
value={search}
40-
onChange={(event) => setSearch(event.target.value)}
41-
className="pl-9"
42-
placeholder="Buscar por titulo, empresa, local ou link"
43-
/>
42+
<CardContent className="flex flex-col gap-3 pt-6">
43+
{/* Campo de busca */}
44+
<div className="flex items-center gap-3">
45+
<div className="relative flex-1">
46+
<Search className="pointer-events-none absolute left-3 top-3 h-4 w-4 text-muted-foreground" />
47+
<Input
48+
value={search}
49+
onChange={(event) => setSearch(event.target.value)}
50+
className="pl-9 w-full"
51+
placeholder="Buscar por titulo, empresa, local ou link"
52+
/>
53+
</div>
54+
<div className="flex items-center gap-2">{actions}</div>
4455
</div>
4556

46-
<select
47-
className="h-10 w-full rounded-md border border-input bg-background px-3 text-sm"
48-
value={keywordFilter}
49-
onChange={(event) => setKeywordFilter(event.target.value)}
50-
>
51-
<option value="all">Todas as palavras-chave</option>
52-
{keywords.map((keyword) => (
53-
<option key={keyword} value={keyword}>
54-
{keyword}
55-
</option>
56-
))}
57-
</select>
58-
59-
<div className="flex gap-2">
57+
{/* Seção de filtros */}
58+
<div className="flex items-center gap-2 flex">
6059
<select
61-
className="h-10 w-full rounded-md border border-input bg-background px-3 text-sm"
62-
value={selectedFile}
63-
onChange={(event) => setSelectedFile(event.target.value)}
60+
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"
61+
value={keywordFilter}
62+
onChange={(event) => setKeywordFilter(event.target.value)}
6463
>
65-
{files.map((file) => (
66-
<option key={file.file} value={file.file}>
67-
{file.file}
64+
<option value="all">Todas as palavras-chave</option>
65+
{keywords.map((keyword) => (
66+
<option key={keyword} value={keyword}>
67+
{keyword}
6868
</option>
6969
))}
7070
</select>
71-
<Button variant="outline" size="sm" onClick={onRefresh} disabled={loading}>
72-
<RefreshCcw className={`h-4 w-4 ${loading ? "animate-spin" : ""}`} />
73-
</Button>
71+
72+
<div>
73+
<select
74+
className="h-10 w-full rounded-md border border-input bg-background px-3 text-sm focus:outline-none focus:ring-2 focus:ring-ring focus:border-ring"
75+
value={selectedFile}
76+
onChange={(event) => setSelectedFile(event.target.value)}
77+
>
78+
{files.map((file) => (
79+
<option key={file.file} value={file.file}>
80+
{file.file}
81+
</option>
82+
))}
83+
</select>
84+
</div>
85+
86+
<div className="flex items-center gap-2">
87+
<Badge variant="secondary" className="gap-1 text-xs">
88+
<FileSpreadsheet className="h-3.5 w-3.5" />
89+
{meta.file || "Sem arquivo"}
90+
</Badge>
91+
<Badge className="gap-1 text-xs">
92+
<BriefcaseBusiness className="h-3.5 w-3.5" />
93+
{meta.total} vagas
94+
</Badge>
95+
</div>
7496
</div>
7597
</CardContent>
7698
</Card>

‎frontend/src/components/JobsHeaderCard.tsx‎

Lines changed: 22 additions & 22 deletions
Original file line numberDiff line numberDiff line change
@@ -1,34 +1,34 @@
1-
import { Badge } from "@/components/ui/badge";
2-
import { Card, CardDescription, CardHeader, CardTitle } from "@/components/ui/card";
1+
import {
2+
CardDescription,
3+
CardTitle,
4+
} from "@/components/ui/card";
35
import type { JobsMeta } from "@/types/jobs";
4-
import { BriefcaseBusiness, FileSpreadsheet } from "lucide-react";
56
import type { ReactNode } from "react";
7+
import Logo from "../assets/logo-painel-vagas.svg";
8+
import { ThemeToggle } from "@/components/ui/theme-toggle";
9+
import { useTheme } from "@/hooks/useTheme";
610

711
interface JobsHeaderCardProps {
812
meta: JobsMeta;
913
actions?: ReactNode;
1014
}
1115

12-
export function JobsHeaderCard({ meta, actions }: JobsHeaderCardProps) {
16+
export function JobsHeaderCard() {
17+
const { resolvedTheme, toggleTheme } = useTheme();
1318
return (
14-
<Card className="border-border/70 bg-card/85 backdrop-blur dark:bg-card/95">
15-
<CardHeader className="gap-4 pb-4 md:flex-row md:items-center md:justify-between">
16-
<div>
17-
<CardTitle className="text-3xl">Painel de Vagas</CardTitle>
18-
<CardDescription>Leitura automatica dos arquivos XLSX gerados em output.</CardDescription>
19+
<>
20+
<div className="w-screen bg-[#004726] dark:bg-[#003318] p-6 -mx-8 flex items-end">
21+
<CardTitle className="text-3xl text-white">
22+
<img src={Logo} />
23+
</CardTitle>
24+
<CardDescription className="text-white">
25+
Leitura automatica dos arquivos XLSX gerados em output.
26+
</CardDescription>
27+
<div className="ml-auto self-start mr-8">
28+
<ThemeToggle theme={resolvedTheme} onToggle={toggleTheme} />
1929
</div>
20-
<div className="flex flex-wrap items-center gap-2">
21-
{actions}
22-
<Badge variant="secondary" className="gap-1 text-xs">
23-
<FileSpreadsheet className="h-3.5 w-3.5" />
24-
{meta.file || "Sem arquivo"}
25-
</Badge>
26-
<Badge className="gap-1 text-xs">
27-
<BriefcaseBusiness className="h-3.5 w-3.5" />
28-
{meta.total} vagas
29-
</Badge>
30-
</div>
31-
</CardHeader>
32-
</Card>
30+
</div>
31+
32+
</>
3333
);
3434
}

‎frontend/src/components/JobsTableCard.tsx‎

Lines changed: 7 additions & 7 deletions
Original file line numberDiff line numberDiff line change
@@ -35,7 +35,7 @@ export function JobsTableCard({
3535
onPageSizeChange,
3636
}: JobsTableCardProps) {
3737
return (
38-
<Card className="border-border/70 bg-card/90 backdrop-blur dark:bg-card/95">
38+
<Card className="border-border/70 bg-card/90 backdrop-blur dark:bg-card/95 mb-4">
3939
<CardHeader>
4040
<CardTitle className="text-lg">Vagas Encontradas</CardTitle>
4141
<CardDescription>
@@ -44,7 +44,7 @@ export function JobsTableCard({
4444
</CardHeader>
4545
<CardContent>
4646
{error ? (
47-
<div className="rounded-md border border-red-500/40 bg-red-500/10 p-4 text-sm text-red-700 dark:text-red-300">
47+
<div className="rounded-md border border-red-500/40 bg-red-500/10 p-4 text-sm text-red-700 dark:text-red-300 mb-4">
4848
{error}
4949
</div>
5050
) : null}
@@ -91,36 +91,36 @@ export function JobsTableCard({
9191
<Table>
9292
<TableHeader>
9393
<TableRow>
94-
<TableHead>Palavra-chave</TableHead>
9594
<TableHead>Titulo</TableHead>
9695
<TableHead>Empresa</TableHead>
97-
<TableHead>Fonte</TableHead>
9896
<TableHead>Local</TableHead>
9997
<TableHead>Link</TableHead>
98+
<TableHead>Palavra-chave</TableHead>
99+
<TableHead>Fonte</TableHead>
100100
</TableRow>
101101
</TableHeader>
102102
<TableBody>
103103
{paginatedJobs.map((job, index) => (
104104
<TableRow key={`${job.link || `${job.titulo || "vaga"}-${index}`}-${index}`}>
105-
<TableCell>{job.palavra || "-"}</TableCell>
106105
<TableCell className="font-medium">{job.titulo || "-"}</TableCell>
107106
<TableCell>{job.empresa || "-"}</TableCell>
108-
<TableCell>{job.source || "-"}</TableCell>
109107
<TableCell>{job.local || "-"}</TableCell>
110108
<TableCell>
111109
{job.link ? (
112110
<a
113111
href={job.link}
114112
target="_blank"
115113
rel="noreferrer"
116-
className="text-primary underline-offset-4 hover:underline"
114+
className="text-primary underline-offset-4 hover:underline dark:text-[#14AE5C]"
117115
>
118116
Abrir vaga
119117
</a>
120118
) : (
121119
"-"
122120
)}
123121
</TableCell>
122+
<TableCell>{job.palavra || "-"}</TableCell>
123+
<TableCell>{job.source || "-"}</TableCell>
124124
</TableRow>
125125
))}
126126

‎frontend/src/components/ui/button.tsx‎

Lines changed: 1 addition & 1 deletion
Original file line numberDiff line numberDiff line change
@@ -7,7 +7,7 @@ const buttonVariants = cva(
77
{
88
variants: {
99
variant: {
10-
default: "bg-primary text-primary-foreground hover:opacity-90",
10+
default: "bg-primary text-primary-foreground hover:opacity-75",
1111
outline: "border border-input bg-background hover:bg-accent hover:text-accent-foreground",
1212
},
1313
size: {

‎frontend/src/components/ui/theme-toggle.tsx‎

Lines changed: 1 addition & 1 deletion
Original file line numberDiff line numberDiff line change
@@ -18,7 +18,7 @@ export function ThemeToggle({ theme, onToggle }: ThemeToggleProps) {
1818
onClick={onToggle}
1919
aria-label={isDark ? "Ativar tema claro" : "Ativar tema escuro"}
2020
title={isDark ? "Ativar tema claro" : "Ativar tema escuro"}
21-
className="gap-2"
21+
className="gap-2 hover:bg-accent/40 transition-all duration-300 rounded-lg"
2222
>
2323
{isDark ? <Sun className="h-4 w-4" /> : <Moon className="h-4 w-4" />}
2424
<span className="hidden sm:inline">{isDark ? "Tema claro" : "Tema escuro"}</span>

‎frontend/src/index.css‎

Lines changed: 12 additions & 11 deletions
Original file line numberDiff line numberDiff line change
@@ -4,23 +4,24 @@
44
@tailwind components;
55
@tailwind utilities;
66

7+
78
@layer base {
89
:root {
9-
--background: 33 53% 96%;
10+
--background: 33 53% 100%;
1011
--foreground: 210 30% 15%;
1112
--card: 0 0% 100%;
1213
--card-foreground: 210 30% 15%;
13-
--primary: 198 63% 36%;
14+
--primary: 140 70% 20%;
1415
--primary-foreground: 0 0% 100%;
1516
--secondary: 38 52% 86%;
1617
--secondary-foreground: 210 30% 15%;
1718
--muted: 36 35% 91%;
1819
--muted-foreground: 210 15% 40%;
19-
--accent: 24 67% 81%;
20-
--accent-foreground: 210 35% 17%;
21-
--border: 30 28% 82%;
20+
--accent: 140 75% 38%;
21+
--accent-foreground: 0 0% 100%;
22+
--border: 0 0% 82%;
2223
--input: 30 28% 82%;
23-
--ring: 198 63% 36%;
24+
--ring: 140 75% 38%;
2425
--radius: 0.8rem;
2526
color-scheme: light;
2627
}
@@ -30,17 +31,17 @@
3031
--foreground: 210 30% 95%;
3132
--card: 216 26% 14%;
3233
--card-foreground: 210 30% 95%;
33-
--primary: 198 78% 63%;
34-
--primary-foreground: 218 35% 12%;
34+
--primary: 140 70% 20%;
35+
/* --primary-foreground: 218 35% 12%; */
3536
--secondary: 216 20% 23%;
3637
--secondary-foreground: 210 20% 94%;
3738
--muted: 216 20% 19%;
3839
--muted-foreground: 215 20% 72%;
39-
--accent: 25 75% 58%;
40+
--accent: 140 50% 45%;
4041
--accent-foreground: 0 0% 100%;
4142
--border: 216 16% 30%;
4243
--input: 216 16% 30%;
43-
--ring: 198 78% 63%;
44+
--ring: 140 75% 38%;
4445
color-scheme: dark;
4546
}
4647

@@ -49,6 +50,6 @@
4950
}
5051

5152
body {
52-
@apply bg-background font-sans text-foreground antialiased;
53+
@apply m-0 p-0 bg-background font-sans text-foreground antialiased;
5354
}
5455
}

0 commit comments

Comments
 (0)