Skip to content

Commit 960bf44

Browse files
nayarakarinesilvanayarakarinesilva
committed
refactor: ( ui )
- 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
1 parent ab542b6 commit 960bf44

9 files changed

Lines changed: 2977 additions & 4730 deletions

File tree

‎frontend/package-lock.json‎

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

‎frontend/src/App.tsx‎

Lines changed: 3 additions & 3 deletions
Original file line numberDiff line numberDiff line change
@@ -68,10 +68,10 @@ function App() {
6868
}, [triggerScraper]);
6969

7070
return (
71-
<main className="relative min-h-screen overflow-hidden bg-background px-4 py-8 transition-colors duration-300 md:px-8">
71+
<main className="relative min-h-screen overflow-hidden bg-background px-4 transition-colors duration-300 md:px-8">
7272
<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%)]" />
7373

74-
<section className="mx-auto flex w-full max-w-7xl flex-col gap-6">
74+
<section className="mx-auto flex w-full flex-col gap-6">
7575
<JobsHeaderCard
7676
meta={meta}
7777
actions={
@@ -80,7 +80,7 @@ function App() {
8080
<RefreshCcw className={`h-4 w-4 ${scraping ? "animate-spin" : ""}`} />
8181
{scraping ? "Buscando vagas..." : "Buscar vagas"}
8282
</Button>
83-
<ThemeToggle theme={resolvedTheme} onToggle={toggleTheme} />
83+
{/* <ThemeToggle theme={resolvedTheme} onToggle={toggleTheme} /> */}
8484
</>
8585
}
8686
/>

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

Lines changed: 9 additions & 0 deletions
Loading

‎frontend/src/components/JobsFiltersCard.tsx‎

Lines changed: 16 additions & 5 deletions
Original file line numberDiff line numberDiff line change
@@ -1,5 +1,8 @@
11
import { Button } from "@/components/ui/button";
2-
import { Card, CardContent } from "@/components/ui/card";
2+
import {
3+
CardContent,
4+
Card
5+
} from "@/components/ui/card";
36
import { Input } from "@/components/ui/input";
47
import type { JobFile } from "@/types/jobs";
58
import { RefreshCcw, Search } from "lucide-react";
@@ -44,7 +47,7 @@ export function JobsFiltersCard({
4447
</div>
4548

4649
<select
47-
className="h-10 w-full rounded-md border border-input bg-background px-3 text-sm"
50+
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"
4851
value={keywordFilter}
4952
onChange={(event) => setKeywordFilter(event.target.value)}
5053
>
@@ -58,7 +61,7 @@ export function JobsFiltersCard({
5861

5962
<div className="flex gap-2">
6063
<select
61-
className="h-10 w-full rounded-md border border-input bg-background px-3 text-sm"
64+
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"
6265
value={selectedFile}
6366
onChange={(event) => setSelectedFile(event.target.value)}
6467
>
@@ -68,11 +71,19 @@ export function JobsFiltersCard({
6871
</option>
6972
))}
7073
</select>
71-
<Button variant="outline" size="sm" onClick={onRefresh} disabled={loading}>
72-
<RefreshCcw className={`h-4 w-4 ${loading ? "animate-spin" : ""}`} />
74+
<Button
75+
variant="outline"
76+
size="sm"
77+
onClick={onRefresh}
78+
disabled={loading}
79+
>
80+
<RefreshCcw
81+
className={`h-4 w-4 ${loading ? "animate-spin" : ""}`}
82+
/>
7383
</Button>
7484
</div>
7585
</CardContent>
86+
<Card className="border-border/70 bg-card/85 backdrop-blur dark:bg-card/95"></Card>
7687
</Card>
7788
);
7889
}

‎frontend/src/components/JobsHeaderCard.tsx‎

Lines changed: 37 additions & 19 deletions
Original file line numberDiff line numberDiff line change
@@ -1,34 +1,52 @@
11
import { Badge } from "@/components/ui/badge";
2-
import { Card, CardDescription, CardHeader, CardTitle } from "@/components/ui/card";
2+
import {
3+
Card,
4+
CardDescription,
5+
CardHeader,
6+
CardTitle,
7+
} from "@/components/ui/card";
38
import type { JobsMeta } from "@/types/jobs";
49
import { BriefcaseBusiness, FileSpreadsheet } from "lucide-react";
510
import type { ReactNode } from "react";
11+
import Logo from "../assets/logo-painel-vagas.svg";
12+
import { ThemeToggle } from "@/components/ui/theme-toggle";
13+
import { useTheme } from "@/hooks/useTheme";
614

715
interface JobsHeaderCardProps {
816
meta: JobsMeta;
917
actions?: ReactNode;
1018
}
1119

1220
export function JobsHeaderCard({ meta, actions }: JobsHeaderCardProps) {
21+
const { resolvedTheme, toggleTheme } = useTheme();
1322
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>
23+
<>
24+
<div className="w-screen bg-[#004726] dark:bg-[#003318] p-6 -mx-8 flex items-end">
25+
<CardTitle className="text-3xl text-white">
26+
<img src={Logo} />
27+
</CardTitle>
28+
<CardDescription className="text-white">
29+
Leitura automatica dos arquivos XLSX gerados em output.
30+
</CardDescription>
31+
<div className="ml-auto self-start mr-8">
32+
<ThemeToggle theme={resolvedTheme} onToggle={toggleTheme} />
1933
</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>
34+
</div>
35+
<Card className="border-border/70 bg-card/85 backdrop-blur dark:bg-card/95">
36+
<CardHeader className="gap-4 pb-4 md:flex-row md:items-center md:justify-between">
37+
<div className="flex flex-wrap items-center gap-2">
38+
{actions}
39+
<Badge variant="secondary" className="gap-1 text-xs">
40+
<FileSpreadsheet className="h-3.5 w-3.5" />
41+
{meta.file || "Sem arquivo"}
42+
</Badge>
43+
<Badge className="gap-1 text-xs">
44+
<BriefcaseBusiness className="h-3.5 w-3.5" />
45+
{meta.total} vagas
46+
</Badge>
47+
</div>
48+
</CardHeader>
49+
</Card>
50+
</>
3351
);
3452
}

‎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: 14 additions & 9 deletions
Original file line numberDiff line numberDiff line change
@@ -4,23 +4,28 @@
44
@tailwind components;
55
@tailwind utilities;
66

7+
option:hover {
8+
background-color: hsl(var(--accent));
9+
color: white;
10+
}
11+
712
@layer base {
813
:root {
9-
--background: 33 53% 96%;
14+
--background: 33 53% 100%;
1015
--foreground: 210 30% 15%;
1116
--card: 0 0% 100%;
1217
--card-foreground: 210 30% 15%;
13-
--primary: 198 63% 36%;
18+
--primary: 140 70% 20%;
1419
--primary-foreground: 0 0% 100%;
1520
--secondary: 38 52% 86%;
1621
--secondary-foreground: 210 30% 15%;
1722
--muted: 36 35% 91%;
1823
--muted-foreground: 210 15% 40%;
19-
--accent: 24 67% 81%;
20-
--accent-foreground: 210 35% 17%;
21-
--border: 30 28% 82%;
24+
--accent: 140 75% 38%;
25+
--accent-foreground: 0 0% 100%;
26+
--border: 0 0% 82%;
2227
--input: 30 28% 82%;
23-
--ring: 198 63% 36%;
28+
--ring: 140 75% 38%;
2429
--radius: 0.8rem;
2530
color-scheme: light;
2631
}
@@ -30,13 +35,13 @@
3035
--foreground: 210 30% 95%;
3136
--card: 216 26% 14%;
3237
--card-foreground: 210 30% 95%;
33-
--primary: 198 78% 63%;
38+
--primary: 140 70% 20%;
3439
--primary-foreground: 218 35% 12%;
3540
--secondary: 216 20% 23%;
3641
--secondary-foreground: 210 20% 94%;
3742
--muted: 216 20% 19%;
3843
--muted-foreground: 215 20% 72%;
39-
--accent: 25 75% 58%;
44+
--accent: 140 50% 45%;
4045
--accent-foreground: 0 0% 100%;
4146
--border: 216 16% 30%;
4247
--input: 216 16% 30%;
@@ -49,6 +54,6 @@
4954
}
5055

5156
body {
52-
@apply bg-background font-sans text-foreground antialiased;
57+
@apply m-0 p-0 bg-background font-sans text-foreground antialiased;
5358
}
5459
}

0 commit comments

Comments
 (0)