Cla-Code-Community · Benevanio · Apr 23, 2026 · Apr 9, 2026 · Apr 22, 2026
@@ -1,9 +1,9 @@
 <!doctype html>
-<html lang="en">
+<html lang="pt-br">
   <head>
     <meta charset="UTF-8" />
     <!--C:\Users\benev\projetos\Node\vagas-full\frontend\src\assets\logo-painel-vagas.svg-->
-    <link rel="icon" type="image/svg+xml" href="/asset/logo-painel-vagas.svg" />
+    <link rel="icon" type="image/svg+xml" href="/logo.svg" />
     <meta name="viewport" content="width=device-width, initial-scale=1.0" />
     <script>
       (function () {

@@ -7,7 +7,7 @@ import { useJobsFiltering } from "@/hooks/useJobsFiltering";
 import { useJobsPagination } from "@/hooks/useJobsPagination";
 import type { JobsMeta } from "@/types/jobs";
 import { useCallback, type SetStateAction } from "react";
-import { FiRefreshCw } from "react-icons/fi";
+import { FiRefreshCw } from "react-icons/fi"; 
 
 function formatDate(timestamp: JobsMeta["modifiedAt"]): string {
   if (!timestamp) {
@@ -85,8 +85,7 @@ function App() {
               <Button
                 onClick={handleScraper}
                 disabled={scraping}
-                className="h-12 rounded-2xl bg-[#0c6b35] px-5 text-white shadow-sm hover:bg-[#0a5b2d]"
-              >
+                className="h-12 md:h-14 w-full sm:w-auto rounded-xl md:rounded-2xl bg-[#0c6b35] px-6 text-base text-white shadow-sm hover:bg-[#0a5b2d] whitespace-nowrap flex items-center gap-2"              >
                 <FiRefreshCw className={`h-4 w-4 ${scraping ? "animate-spin" : ""}`} />
                 {scraping ? "Buscando vagas..." : "Buscar vagas"}
               </Button>

@@ -82,7 +82,7 @@ export function JobsFiltersCard({
     <>
       <Card className="rounded-[24px] border border-slate-200 bg-white/95 shadow-[0_18px_45px_rgba(15,23,42,0.08)] backdrop-blur dark:border-[#2b3f58] dark:bg-[#131d31]/95 dark:shadow-[0_18px_45px_rgba(3,8,20,0.25)]">
         <CardContent className="flex flex-col gap-4 p-5 md:p-6">
-          <div className="flex flex-col gap-3 xl:flex-row xl:items-center">
+          <div className="flex flex-col md:flex-row gap-3 md:items-center">
             <div className="relative flex-1">
               <FiSearch className="pointer-events-none absolute left-4 top-1/2 h-4 w-4 -translate-y-1/2 text-slate-500 dark:text-slate-400" />
               <Input
@@ -96,7 +96,7 @@ export function JobsFiltersCard({
           </div>
 
           <div className="flex flex-col gap-3 xl:flex-row xl:items-center xl:justify-between">
-            <div className="flex flex-1 flex-wrap items-center gap-2">
+            <div className="flex flex-1 flex-col gap-2 md:flex-row md:flex-wrap md:items-center">
               <select
                 aria-label="Filtrar por palavra-chave"
                 className="h-12 min-w-[220px] rounded-2xl border border-slate-300 bg-white px-3 text-sm text-slate-900 focus:outline-none focus:ring-2 focus:ring-[#14AE5C]/40 dark:border-[#35506f] dark:bg-[#0b1527] dark:text-slate-100"
@@ -124,15 +124,17 @@ export function JobsFiltersCard({
                 ))}
               </select>
 
-              <Badge variant="secondary" className="gap-1.5 rounded-full border border-slate-300 bg-slate-100 px-3 py-1 text-xs text-slate-700 dark:border-[#35506f] dark:bg-[#24324c] dark:text-slate-100">
-                <FiFileText className="h-3.5 w-3.5" />
-                {meta.file || "Sem arquivo"}
-              </Badge>
-
-              <Badge className="gap-1.5 rounded-full bg-[#0c6b35] px-3 py-1 text-xs text-white">
-                <FiBriefcase className="h-3.5 w-3.5" />
-                {meta.total} vagas
-              </Badge>
+             <div> 
+                <Badge variant="secondary" className="gap-1.5 rounded-full border border-slate-300 bg-slate-100 px-3 py-1 text-xs text-slate-700 dark:border-[#35506f] dark:bg-[#24324c] dark:text-slate-100">
+                  <FiFileText className="h-3.5 w-3.5" />
+                    {meta.file || "Sem arquivo"}
+                </Badge>
+
+                <Badge className="gap-1.5 rounded-full bg-[#0c6b35] px-3 py-1 text-xs text-white">
+                  <FiBriefcase className="h-3.5 w-3.5" />
+                    {meta.total} vagas
+                </Badge>
+              </div>
             </div>
 
             <div className="flex items-center gap-2 self-start xl:self-auto">

@@ -8,20 +8,34 @@ import { useTheme } from "@/hooks/useTheme";
 
 export function JobsHeaderCard() {
   const { resolvedTheme, toggleTheme } = useTheme();
+
   return (
-    <>
-      <div className="w-screen bg-[#004726] dark:bg-[#003318] p-6 -mx-8 flex items-end">
+    <div className="w-screen bg-[#004726] dark:bg-[#003318] p-6 -mx-4 md:-mx-8 flex flex-col gap-4 md:flex-row md:items-end">
+      <div className="flex items-start justify-between w-full md:w-auto">
         <CardTitle className="text-3xl text-white">
-          <img src={Logo} alt="Painel de Vagas" />
+          <img src={Logo} alt="Painel de Vagas" className="w-16 md:w-auto" />
         </CardTitle>
-        <CardDescription className="text-white">
-          Leitura automatica dos arquivos XLSX gerados em output.
-        </CardDescription>
-        <div className="ml-auto self-start mr-8">
-          <ThemeToggle theme={resolvedTheme} onToggle={toggleTheme} />
+
+        <div className="md:hidden">
+          <ThemeToggle
+            theme={resolvedTheme}
+            onToggle={toggleTheme}
+          />
         </div>
       </div>
-
-    </>
+
+      <CardDescription className="text-white text-sm md:text-base">
+        Leitura automática dos arquivos
+        <br />
+        XLSX gerados em output.
+      </CardDescription>
+
+      <div className="hidden md:block ml-auto self-start mr-8">
+        <ThemeToggle
+          theme={resolvedTheme}
+          onToggle={toggleTheme}
+        />
+      </div>
+    </div>
   );
 }