rodrigo/budget-view-finance
1
0
Fork 0
Code Issues Pull Requests Actions Packages Projects Releases Wiki Activity

Apply modern design theme

Browse Source 
Update app's visual theme to be modern and dynamic, using a blue color palette and dynamic styling.
This commit is contained in:
gpt-engineer-app[bot] 2025-08-08 07:49:29 +00:00
parent 317596e4ae
commit 01ae3d877b
7 changed files with 66 additions and 17 deletions
Show Stats Download Patch File Download Diff File Expand all files Collapse all files

8
index.html
View File

@ -4,14 +4,18 @@
<head> <head>
<meta charset="UTF-8" /> <meta charset="UTF-8" />
<meta name="viewport" content="width=device-width, initial-scale=1.0" /> <meta name="viewport" content="width=device-width, initial-scale=1.0" />
<title>Dashboard Financeiro</title> <title>Finance Home — Gestão Financeira Inteligente</title>
<meta name="description" content="Dashboard para gerenciamento de finanças pessoais" /> <meta name="description" content="Gerencie suas finanças com o Finance Home. Login e dashboard intuitivos." />
<meta name="author" content="Finance Home" /> <meta name="author" content="Finance Home" />
<meta property="og:title" content="Finance Home" /> <meta property="og:title" content="Finance Home" />
<meta property="og:description" content="Dashboard para gerenciamento de finanças pessoais" /> <meta property="og:description" content="Dashboard para gerenciamento de finanças pessoais" />
<meta property="og:type" content="website" /> <meta property="og:type" content="website" />
<link rel="preconnect" href="https://fonts.googleapis.com" />
<link rel="preconnect" href="https://fonts.gstatic.com" crossorigin />
<link rel="stylesheet" href="https://fonts.googleapis.com/css2?family=Plus+Jakarta+Sans:wght@500;700;800&display=swap" />
<style> <style>
/* Hide Lovable badge completely */ /* Hide Lovable badge completely */
a[href*="lovable.dev"], a[href*="lovable.dev"],

2
src/components/auth/LoginForm.tsx
View File

@ -98,7 +98,7 @@ const LoginForm = ({ isLoading, setIsLoading, onForgotPassword }: LoginFormProps
</Alert> </Alert>
)} )}
<Button type="submit" className="w-full" disabled={isLoading}> <Button type="submit" className="w-full btn-gradient" disabled={isLoading}>
{isLoading ? "Entrando..." : "Entrar"} {isLoading ? "Entrando..." : "Entrar"}
</Button> </Button>

6
src/components/layout/NewModernLayout.tsx
View File

@ -52,7 +52,7 @@ const Logo = () => {
alt="Finance Home Logo" alt="Finance Home Logo"
className="h-8 w-8 shrink-0" className="h-8 w-8 shrink-0"
/> />
<span className="font-medium whitespace-pre text-blue-700 dark:text-white"> <span className="font-medium whitespace-pre text-primary dark:text-white">
Finance Home Finance Home
</span> </span>
</div> </div>
@ -207,7 +207,7 @@ const HeaderContent = () => {
<TooltipProvider> <TooltipProvider>
<Tooltip> <Tooltip>
<TooltipTrigger asChild> <TooltipTrigger asChild>
<SidebarTrigger className="-ml-1 hover:bg-blue-50 rounded-lg p-2" /> <SidebarTrigger className="-ml-1 hover:bg-primary/10 rounded-lg p-2" />
</TooltipTrigger> </TooltipTrigger>
<TooltipContent> <TooltipContent>
<p>Abrir/Fechar Menu</p> <p>Abrir/Fechar Menu</p>
@ -215,7 +215,7 @@ const HeaderContent = () => {
</Tooltip> </Tooltip>
</TooltipProvider> </TooltipProvider>
<span <span
className="text-sm font-medium text-gray-600 cursor-pointer hover:text-blue-600 transition-colors" className="text-sm font-medium text-muted-foreground cursor-pointer hover:text-primary transition-colors"
onClick={toggleSidebar} onClick={toggleSidebar}
> >
Menu Menu

2
src/components/ui/modern-sidebar.tsx
View File

@ -128,7 +128,7 @@ export const MobileSidebar = ({
alt="Finance Home Logo" alt="Finance Home Logo"
className="h-8 w-8 shrink-0" className="h-8 w-8 shrink-0"
/> />
<span className="text-lg font-semibold text-blue-700">Finance Home</span> <span className="text-lg font-semibold text-primary">Finance Home</span>
</div> </div>
<div className="flex justify-end z-20"> <div className="flex justify-end z-20">
<div <div

39
src/index.css
View File

@ -12,7 +12,7 @@
--card-foreground: 240 10% 3.9%; --card-foreground: 240 10% 3.9%;
--popover: 0 0% 100%; --popover: 0 0% 100%;
--popover-foreground: 240 10% 3.9%; --popover-foreground: 240 10% 3.9%;
--primary: 240 5.9% 10%; --primary: 217.2 91.2% 59.8%;
--primary-foreground: 0 0% 98%; --primary-foreground: 0 0% 98%;
--secondary: 240 4.8% 95.9%; --secondary: 240 4.8% 95.9%;
--secondary-foreground: 240 5.9% 10%; --secondary-foreground: 240 5.9% 10%;
@ -32,6 +32,12 @@
--chart-5: 27 87% 67%; --chart-5: 27 87% 67%;
--radius: 0.5rem; --radius: 0.5rem;
/* Dynamic blue theme enhancements */
--primary-strong: 222 89% 63%;
--gradient-primary: linear-gradient(135deg, hsl(var(--primary)), hsl(var(--primary-strong)));
--shadow-elegant: 0 10px 30px -10px hsl(var(--primary) / 0.3);
--transition-smooth: all 0.3s cubic-bezier(0.4, 0, 0.2, 1);
/* Sidebar variables */ /* Sidebar variables */
--sidebar-background: 0 0% 98%; --sidebar-background: 0 0% 98%;
--sidebar-foreground: 240 5.3% 26.1%; --sidebar-foreground: 240 5.3% 26.1%;
@ -105,3 +111,34 @@
.sidebar-border { .sidebar-border {
border-color: hsl(var(--sidebar-border)); border-color: hsl(var(--sidebar-border));
} }
@layer utilities {
.bg-gradient-primary {
background-image: var(--gradient-primary);
}
.btn-gradient {
color: hsl(var(--primary-foreground));
background-image: var(--gradient-primary);
box-shadow: var(--shadow-elegant);
transition: var(--transition-smooth);
}
.btn-gradient:hover {
filter: brightness(0.95);
}
.glass-card {
background-color: hsl(var(--card) / 0.8);
backdrop-filter: blur(12px);
border: 1px solid hsl(var(--border) / 0.4);
box-shadow: var(--shadow-elegant);
}
.brand-text {
font-family: "Plus Jakarta Sans", Inter, system-ui, sans-serif;
background-image: var(--gradient-primary);
-webkit-background-clip: text;
background-clip: text;
color: transparent;
}
}

23
src/pages/Auth.tsx
View File

@ -33,6 +33,11 @@ const Auth = () => {
} }
}, [location.state]); }, [location.state]);
// SEO
useEffect(() => {
document.title = "Login | Finance Home";
}, []);
const handleForgotPassword = () => { const handleForgotPassword = () => {
setShowForgotPassword(true); setShowForgotPassword(true);
}; };
@ -44,18 +49,18 @@ const Auth = () => {
if (showForgotPassword) { if (showForgotPassword) {
return ( return (
<div className="min-h-screen relative w-full overflow-hidden bg-slate-900 flex items-center justify-center px-4"> <div className="min-h-screen relative w-full overflow-hidden bg-gradient-primary flex items-center justify-center px-4">
<div className="absolute inset-0 w-full h-full bg-slate-900 z-10 [mask-image:radial-gradient(transparent,white)] pointer-events-none" /> <div className="absolute inset-0 w-full h-full bg-background z-10 [mask-image:radial-gradient(transparent,white)] pointer-events-none" />
<Boxes /> <Boxes />
<Link to="/" className="absolute top-4 left-4 z-30"> <Link to="/" className="absolute top-4 left-4 z-30">
<Button variant="ghost" size="sm" className="text-white hover:bg-white/10"> <Button variant="ghost" size="sm" className="text-primary-foreground hover:bg-primary-foreground/10">
<ArrowLeft className="h-4 w-4 mr-2" /> <ArrowLeft className="h-4 w-4 mr-2" />
Voltar Voltar
</Button> </Button>
</Link> </Link>
<div className="relative z-20 bg-white/95 backdrop-blur-sm border-white/20 rounded-lg"> <div className="relative z-20 glass-card rounded-lg">
<ForgotPasswordForm onBackToLogin={handleBackToLogin} /> <ForgotPasswordForm onBackToLogin={handleBackToLogin} />
</div> </div>
</div> </div>
@ -63,20 +68,20 @@ const Auth = () => {
} }
return ( return (
<div className="min-h-screen relative w-full overflow-hidden bg-slate-900 flex items-center justify-center px-4"> <div className="min-h-screen relative w-full overflow-hidden bg-gradient-primary flex items-center justify-center px-4">
<div className="absolute inset-0 w-full h-full bg-slate-900 z-10 [mask-image:radial-gradient(transparent,white)] pointer-events-none" /> <div className="absolute inset-0 w-full h-full bg-background z-10 [mask-image:radial-gradient(transparent,white)] pointer-events-none" />
<Boxes /> <Boxes />
{/* Botão para voltar à landing page */} {/* Botão para voltar à landing page */}
<Link to="/" className="absolute top-4 left-4 z-30"> <Link to="/" className="absolute top-4 left-4 z-30">
<Button variant="ghost" size="sm" className="text-white hover:bg-white/10"> <Button variant="ghost" size="sm" className="text-primary-foreground hover:bg-primary-foreground/10">
<ArrowLeft className="h-4 w-4 mr-2" /> <ArrowLeft className="h-4 w-4 mr-2" />
Voltar Voltar
</Button> </Button>
</Link> </Link>
<Card className="w-full max-w-md relative z-20 bg-white/95 backdrop-blur-sm border-white/20"> <Card className="w-full max-w-md relative z-20 glass-card">
<CardHeader className="space-y-1 text-center"> <CardHeader className="space-y-1 text-center">
<div className="flex items-center justify-center space-x-2 mb-4"> <div className="flex items-center justify-center space-x-2 mb-4">
<img <img
@ -84,7 +89,7 @@ const Auth = () => {
alt="Finance Home Logo" alt="Finance Home Logo"
className="h-10 w-10" className="h-10 w-10"
/> />
<CardTitle className="text-2xl font-bold text-blue-700">Finance Home</CardTitle> <CardTitle className="text-2xl font-extrabold brand-text">Finance Home</CardTitle>
</div> </div>
<CardDescription>Gerencie suas finanças de forma simples e eficiente</CardDescription> <CardDescription>Gerencie suas finanças de forma simples e eficiente</CardDescription>
</CardHeader> </CardHeader>

3
tailwind.config.ts
View File

@ -95,6 +95,9 @@ const config: Config = {
"accordion-up": "accordion-up 0.2s ease-out", "accordion-up": "accordion-up 0.2s ease-out",
"caret-blink": "caret-blink 1.25s ease-out infinite", "caret-blink": "caret-blink 1.25s ease-out infinite",
}, },
fontFamily: {
jakarta: ["Plus Jakarta Sans", "Inter", "system-ui", "sans-serif"],
},
}, },
}, },
plugins: [require("tailwindcss-animate")], plugins: [require("tailwindcss-animate")],