Skip to content

Commit 514c80b

Browse files
farehaaslamfarehaaslam
committed
improved ui and ux
1 parent 6d95df7 commit 514c80b

File tree

10 files changed

+125
-56
lines changed

10 files changed

+125
-56
lines changed

‎frontend/src/components/Layout.jsx‎

Lines changed: 22 additions & 21 deletions
Original file line numberDiff line numberDiff line change
@@ -1,43 +1,41 @@
1-
import React from 'react';
2-
import { Outlet, NavLink, useNavigate } from 'react-router-dom'; // 1. Import Link
3-
import useAuth from '../hooks/useAuth';
4-
import CurrencySelector from './CurrencySelector';
5-
import ThemeToggle from './ThemeToggle';
1+
import React from "react";
2+
import { Outlet, NavLink, useNavigate } from "react-router-dom"; // 1. Import Link
3+
import useAuth from "../hooks/useAuth";
4+
import CurrencySelector from "./CurrencySelector";
5+
import ThemeToggle from "./ThemeToggle";
66

77
const Layout = () => {
88
const { logout } = useAuth();
99
const navigate = useNavigate();
1010

11-
1211
const getNavLinkClass = ({ isActive }) => {
13-
const baseClasses = 'px-3 py-2 rounded-md text-sm font-medium';
12+
const baseClasses = "px-3 py-2 rounded-md text-sm font-medium";
1413
if (isActive) {
1514
return `${baseClasses} bg-blue-600 text-white`;
1615
}
1716
return `${baseClasses} text-gray-600 dark:text-gray-300 hover:bg-gray-200 dark:hover:bg-gray-700 hover:text-black dark:hover:text-white`;
1817
};
1918

20-
const handleClick = (e) => {
21-
navigate("/");
19+
const handleClick = () => {
20+
navigate("/");
2221
};
2322

24-
2523
return (
26-
<div className="min-h-screen bg-gray-100 dark:bg-gray-900">
27-
<nav className="bg-white dark:bg-gray-800 shadow-md">
24+
<div className="min-h-screen flex flex-col bg-background">
25+
<nav className="bg-background shadow-md">
2826
<div className="max-w-7xl mx-auto px-4 sm:px-6 lg:px-8">
2927
<div className="flex items-center justify-between h-16">
3028
<div className="flex items-center">
3129
{/* 2. Wrap the span in a Link to the dashboard */}
32-
<span
33-
onClick={handleClick}
34-
className="font-bold text-xl text-blue-600 dark:text-blue-400 cursor-pointer transition-all duration-500 hover:scale-105 hover:drop-shadow-lg hover:text-blue-500 dark:hover:text-blue-300"
35-
title="Go to home"
36-
>
37-
Paisable
38-
</span>
30+
<span
31+
onClick={handleClick}
32+
className="font-bold text-2xl text-blue-600 dark:text-blue-400 cursor-pointer transition-all duration-500 hover:scale-105 hover:drop-shadow-lg hover:text-blue-500 dark:hover:text-blue-300"
33+
title="Go to home"
34+
>
35+
Paisable
36+
</span>
3937

40-
<div className="hidden lg:block">
38+
<div className="hidden lg:block text-xl">
4139
<div className="ml-10 flex items-baseline space-x-4">
4240
<NavLink to="/dashboard" className={getNavLinkClass}>
4341
Dashboard
@@ -77,11 +75,14 @@ const Layout = () => {
7775
</div>
7876
</nav>
7977

80-
<main>
78+
<main className="flex-grow">
8179
<div className="max-w-7xl mx-auto py-6 sm:px-6 lg:px-8">
8280
<Outlet />
8381
</div>
8482
</main>
83+
<footer className="py-8 text-center text-gray-500 dark:text-gray-400 bg-secondary">
84+
<p>&copy; {new Date().getFullYear()} Paisable. All Rights Reserved.</p>
85+
</footer>
8586
</div>
8687
);
8788
};

‎frontend/src/index.css‎

Lines changed: 18 additions & 1 deletion
Original file line numberDiff line numberDiff line change
@@ -2,4 +2,21 @@
22

33
@tailwind base;
44
@tailwind components;
5-
@tailwind utilities;
5+
@tailwind utilities;
6+
:root {
7+
--background: #ffffff;
8+
--foreground: #111111;
9+
--border: #e5e7eb;
10+
--primary: #0f172a;
11+
--secondary: oklch(39.8% 0.07 227.392);
12+
--accent: oklch(82.8% 0.189 84.429);
13+
}
14+
15+
.dark {
16+
--background: #0b0f19;
17+
--foreground: #ffffff;
18+
--border: #1e293b;
19+
--primary: #ffffff;
20+
--secondary: #1e293b;
21+
--accent: #38bdf8;
22+
}

‎frontend/src/pages/Budgets.jsx‎

Lines changed: 1 addition & 1 deletion
Original file line numberDiff line numberDiff line change
@@ -84,7 +84,7 @@ const Budgets = () => {
8484
return (
8585
<>
8686
<div className="flex flex-wrap gap-4 justify-between items-center mb-6">
87-
<h1 className="text-3xl font-bold text-gray-900">Budgets</h1>
87+
<h1 className="text-3xl font-bold text-foreground">Budgets</h1>
8888
<div className="flex gap-4">
8989
<button
9090
onClick={() => handleOpenBudgetModal()}

‎frontend/src/pages/LoginPage.jsx‎

Lines changed: 1 addition & 1 deletion
Original file line numberDiff line numberDiff line change
@@ -36,7 +36,7 @@ export default function LoginPage() {
3636
}; */
3737

3838
return (
39-
<div className="flex flex-col items-center justify-center min-h-screen bg-gradient-to-br from-gray-50 to-gray-100 dark:from-gray-900 dark:to-gray-800 px-4 py-8">
39+
<div className="flex flex-col items-center justify-center min-h-screen bg-background px-4 py-8">
4040
{/* Logo/Brand */}
4141
<Link
4242
to="/"

‎frontend/src/pages/RecurringTransactions.jsx‎

Lines changed: 1 addition & 1 deletion
Original file line numberDiff line numberDiff line change
@@ -76,7 +76,7 @@ const RecurringTransactions = () => {
7676
return (
7777
<>
7878
<div className="flex justify-between items-center mb-6">
79-
<h1 className="text-3xl font-bold text-gray-900">
79+
<h1 className="text-3xl font-bold text-foreground">
8080
Recurring Transactions
8181
</h1>
8282
<button

‎frontend/src/pages/RegisterPage.jsx‎

Lines changed: 1 addition & 1 deletion
Original file line numberDiff line numberDiff line change
@@ -94,7 +94,7 @@ export default function RegisterPage() {
9494
);
9595

9696
return (
97-
<div className="flex flex-col items-center justify-center min-h-screen bg-gradient-to-br from-gray-50 to-gray-100 dark:from-gray-900 dark:to-gray-800 px-4 py-8">
97+
<div className="flex flex-col items-center justify-center min-h-screen bg-background px-4 py-8">
9898
{/* Logo/Brand */}
9999
<Link
100100
to="/"

‎frontend/src/pages/SetupPage.jsx‎

Lines changed: 1 addition & 1 deletion
Original file line numberDiff line numberDiff line change
@@ -31,7 +31,7 @@ const SetupPage = () => {
3131
}
3232

3333
return (
34-
<div className="flex flex-col items-center justify-center min-h-screen bg-gray-100 dark:bg-gray-900 px-4">
34+
<div className="flex flex-col items-center justify-center min-h-screen bg-background px-4">
3535
<div className="w-full max-w-md bg-white dark:bg-gray-800 rounded-lg shadow-md p-8">
3636
<div className="text-center mb-8">
3737
<h1 className="text-3xl font-bold text-gray-900 dark:text-white mb-2">

‎frontend/src/pages/TransactionsPage.jsx‎

Lines changed: 1 addition & 1 deletion
Original file line numberDiff line numberDiff line change
@@ -238,7 +238,7 @@ const TransactionsPage = () => {
238238
return (
239239
<>
240240
<div className="flex flex-wrap gap-4 justify-between items-center mb-6">
241-
<h1 className="text-3xl font-bold text-gray-900">Transactions</h1>
241+
<h1 className="text-3xl font-bold text-foreground">Transactions</h1>
242242
<div className="flex flex-wrap gap-4">
243243
{selectedTransactionIds.length > 0 &&
244244
<button onClick={handleBulkDelete} className="px-4 py-2 bg-red-600 text-white rounded-lg hover:bg-red-700">

‎frontend/src/pages/WelcomePage.jsx‎

Lines changed: 69 additions & 28 deletions
Original file line numberDiff line numberDiff line change
@@ -11,9 +11,11 @@ const CategoryIcon = () => <svg className="h-12 w-12 text-purple-500" fill="none
1111

1212
const FeatureCard = ({ icon, title, children }) => {
1313
return (
14-
<div className="relative group cursor-pointer">
14+
<Link to="/login">
15+
16+
<div className="relative group cursor-pointer ">
1517
{/* Glow effect on hover */}
16-
<div className="absolute inset-0 rounded-2xl opacity-0 group-hover:opacity-100 blur-xl bg-gradient-to-r from-sky-400/40 via-purple-400/40 to-pink-400/40 transition-opacity duration-500" />
18+
<div className="absolute inset-0 rounded-2xl opacity-0 group-hover:opacity-100 blur-l bg-gradient-to-r from-sky-400/40 via-purple-400/40 to-pink-400/40 transition-opacity duration-500" />
1719

1820
{/* Actual Card */}
1921
<div className="relative p-8 bg-white dark:bg-gray-900 rounded-2xl shadow-md hover:shadow-2xl transition-all duration-300 transform group-hover:-translate-y-2 border border-gray-200 dark:border-gray-700">
@@ -35,6 +37,7 @@ const FeatureCard = ({ icon, title, children }) => {
3537
</p>
3638
</div>
3739
</div>
40+
</Link>
3841
);
3942
};
4043

@@ -43,38 +46,76 @@ export default function WelcomePage() {
4346
const { logout } = useAuth();
4447

4548
return (
46-
<div className="bg-gray-50 dark:bg-gray-900 min-h-screen font-montserrat text-gray-800 dark:text-gray-200">
47-
{/* Header */}
48-
<header className="py-4 px-8 flex justify-between items-center bg-white dark:bg-gray-800 shadow-md">
49-
<Link to="/" className="text-2xl font-bold text-blue-600 dark:text-blue-400">
50-
Paisable
51-
</Link>
52-
<div className="flex items-center gap-4">
53-
<ThemeToggle />
54-
{user ? (
49+
<div className="bg-background">
50+
51+
<nav className="border-b border-border ">
52+
<div className="mx-auto max-w-7xl px-4 sm:px-6 lg:px-8 py-4 flex items-center justify-between">
53+
<div className="text-2xl font-bold text-primary">Paisable</div>
54+
<div className="flex items-center gap-4">
55+
<ThemeToggle />
56+
{user ? (
5557
<>
56-
<Link to="/dashboard" className="text-gray-600 dark:text-gray-300 hover:text-blue-600 dark:hover:text-blue-400 font-semibold">Dashboard</Link>
57-
<button onClick={logout} className="bg-red-500 text-white px-4 py-2 rounded-md font-semibold hover:bg-red-600">Logout</button>
58+
<Link to="/dashboard" className="text-gray-600 dark:text-gray-300 hover:bg-background/80 transition font-semibold">Dashboard</Link>
59+
<button onClick={logout} className="bg-secondary text-white px-4 py-2 rounded-md font-semibold hover:bg-red-600">Logout</button>
5860
</>
5961
) : (
6062
<>
61-
<Link to="/login" className="text-gray-600 dark:text-gray-300 hover:text-blue-600 dark:hover:text-blue-400 font-semibold">Login</Link>
62-
<Link to="/register" className="bg-blue-600 text-white px-4 py-2 rounded-md font-semibold hover:bg-blue-700">Sign Up</Link>
63+
<Link to="/login" className="text-gray-600 dark:text-gray-300 hover:text-[#155e75] dark:hover:text-gray-700 font-semibold">Login</Link>
64+
<Link to="/register" className="bg-secondary text-white px-4 py-2 rounded-md font-semibold hover:bg-[#155e75] dark:hover:bg-gray-700">Sign Up</Link>
6365
</>
6466
)}
67+
68+
</div>
69+
</div>
70+
</nav>
71+
<section className="mx-auto max-w-7xl px-4 sm:px-6 lg:px-8 py-16 sm:py-24">
72+
<div className="grid grid-cols-1 lg:grid-cols-2 gap-12 items-center">
73+
{/* Left Content */}
74+
<div className="space-y-8">
75+
<div className="space-y-4">
76+
<div className="inline-block px-4 py-2 bg-secondary rounded-full">
77+
</div>
78+
<h1 className="text-5xl sm:text-6xl font-bold text-primary text-balance leading-tight">
79+
Take Control of Your Finances
80+
</h1>
81+
<p className="text-lg text-foreground leading-relaxed max-w-lg">
82+
The simple, smart, and secure way to manage your income and expenses, visualize your spending, and achieve your financial goals.
83+
</p>
84+
</div>
85+
86+
87+
88+
89+
</div>
90+
91+
{/* Right Visual */}
92+
<div className="relative h-96 sm:h-full min-h-96 bg-gradient-to-br from-secondary to-slate-100 rounded-3xl overflow-hidden shadow-2xl">
93+
<div className="absolute inset-0 opacity-10 bg-" />
94+
<div className="absolute top-8 left-8 right-8 space-y-4">
95+
<div className="bg-secondary rounded-xl p-6 shadow-lg space-y-3">
96+
<p className="text-sm text-foreground">Total Balance</p>
97+
<p className="text-3xl font-bold text-primary">$24,582.50</p>
98+
<div className="flex gap-2 pt-2">
99+
<div className="h-1 flex-1 bg-accent rounded-full" />
100+
<div className="h-1 flex-1 bg-secondary rounded-full" />
101+
</div>
102+
</div>
103+
<div className="grid grid-cols-2 gap-3">
104+
<div className="bg-secondary rounded-lg p-4 shadow-lg">
105+
<p className="text-xs text-foreground mb-1">Income</p>
106+
<p className="text-xl font-bold text-primary">+$5,200</p>
107+
</div>
108+
<div className="bg-secondary rounded-lg p-4 shadow-lg">
109+
<p className="text-xs text-muted-foreground mb-1">Expenses</p>
110+
<p className="text-xl font-bold text-primary">-$1,840</p>
111+
</div>
112+
</div>
113+
</div>
114+
</div>
65115
</div>
66-
</header>
67-
68-
{/* Hero Section */}
69-
<main className="text-center py-20 px-4">
70-
<h2 className="text-5xl font-bold text-gray-900 dark:text-white">Take Control of Your Finances</h2>
71-
<p className="mt-4 text-lg text-gray-600 dark:text-gray-400 max-w-2xl mx-auto">The simple, smart, and secure way to manage your income and expenses, visualize your spending, and achieve your financial goals.</p>
72-
{user ? (
73-
<Link to="/dashboard" className="mt-8 inline-block bg-blue-600 text-white px-8 py-3 rounded-lg font-bold text-lg hover:bg-blue-700">Go to Dashboard</Link>
74-
) : (
75-
<Link to="/register" className="mt-8 inline-block bg-blue-600 text-white px-8 py-3 rounded-lg font-bold text-lg hover:bg-blue-700">Get Started for Free</Link>
76-
)}
77-
</main>
116+
</section>
117+
118+
78119

79120
{/* Features Section */}
80121
<section className="py-20 bg-gray-100 dark:bg-gray-800/50">
@@ -105,7 +146,7 @@ export default function WelcomePage() {
105146
</section>
106147

107148
{/* Footer */}
108-
<footer className="py-8 text-center text-gray-500 dark:text-gray-400">
149+
<footer className="py-8 text-center text-gray-500 dark:text-gray-400 bg-secondary">
109150
<p>&copy; {new Date().getFullYear()} Paisable. All Rights Reserved.</p>
110151
</footer>
111152
</div>

‎frontend/tailwind.config.js‎

Lines changed: 10 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -5,11 +5,21 @@ export default {
55
"./index.html",
66
"./src/**/*.{js,ts,jsx,tsx}",
77
],
8+
89
theme: {
910
extend: {
1011
fontFamily: {
1112
sans: ['Josefin Sans', 'sans-serif'],
1213
},
14+
colors:{
15+
background: "var(--background)",
16+
foreground: "var(--foreground)",
17+
border: "var(--border)",
18+
primary: "var(--primary)",
19+
secondary: "var(--secondary)",
20+
accent: "var(--accent)",
21+
22+
}
1323
},
1424
},
1525
plugins: [],

0 commit comments

Comments
 (0)