Changes
gpt-engineer-app[bot] committed
Nov 27, 2025 at 11:24 UTC
a6d049a2491ab8f334e82a9f34e5625e54620946
6 files changed
+146
-127
src/components/ui/button.tsx
+9
-9
@@ -5,22 +5,22 @@ import { cva, type VariantProps } from "class-variance-authority";
5
import { cn } from "@/lib/utils";
6
7
const buttonVariants = cva(
8
- "inline-flex items-center justify-center gap-2 whitespace-nowrap rounded-md text-sm font-medium ring-offset-background transition-colors focus-visible:outline-none focus-visible:ring-2 focus-visible:ring-ring focus-visible:ring-offset-2 disabled:pointer-events-none disabled:opacity-50 [&_svg]:pointer-events-none [&_svg]:size-4 [&_svg]:shrink-0",
8
+ "inline-flex items-center justify-center gap-2 whitespace-nowrap rounded-lg text-sm font-semibold ring-offset-background transition-all focus-visible:outline-none focus-visible:ring-2 focus-visible:ring-ring focus-visible:ring-offset-2 disabled:pointer-events-none disabled:opacity-50 [&_svg]:pointer-events-none [&_svg]:size-4 [&_svg]:shrink-0",
9
{
10
variants: {
11
variant: {
12
- default: "bg-primary text-primary-foreground hover:bg-primary/90",
13
- destructive: "bg-destructive text-destructive-foreground hover:bg-destructive/90",
14
- outline: "border border-input bg-background hover:bg-accent hover:text-accent-foreground",
12
+ default: "bg-primary text-primary-foreground hover:bg-primary/90 shadow-sm hover:shadow-md",
13
+ destructive: "bg-destructive text-destructive-foreground hover:bg-destructive/90 shadow-sm",
14
+ outline: "border-2 border-primary bg-background text-foreground hover:bg-primary hover:text-primary-foreground",
15
secondary: "bg-secondary text-secondary-foreground hover:bg-secondary/80",
16
- ghost: "hover:bg-accent hover:text-accent-foreground",
16
+ ghost: "hover:bg-muted hover:text-foreground",
17
link: "text-primary underline-offset-4 hover:underline",
18
},
19
size: {
20
- default: "h-10 px-4 py-2",
21
- sm: "h-9 rounded-md px-3",
22
- lg: "h-11 rounded-md px-8",
23
- icon: "h-10 w-10",
20
+ default: "h-12 px-6 py-3",
21
+ sm: "h-10 rounded-lg px-4",
22
+ lg: "h-14 rounded-lg px-8 text-base",
23
+ icon: "h-12 w-12",
24
},
25
},
26
defaultVariants: {
src/index.css
+48
-40
@@ -8,87 +8,95 @@ All colors MUST be HSL.
8
9
@layer base {
10
:root {
11
- --background: 210 20% 98%;
12
- --foreground: 215 25% 15%;
11
+ --background: 95 70% 85%;
12
+ --foreground: 0 0% 10%;
13
14
--card: 0 0% 100%;
15
- --card-foreground: 215 25% 15%;
15
+ --card-foreground: 0 0% 10%;
16
17
--popover: 0 0% 100%;
18
- --popover-foreground: 215 25% 15%;
18
+ --popover-foreground: 0 0% 10%;
19
20
- --primary: 142 76% 45%;
20
+ --primary: 0 0% 10%;
21
--primary-foreground: 0 0% 100%;
22
23
--secondary: 142 60% 96%;
24
--secondary-foreground: 142 76% 30%;
25
26
- --muted: 210 20% 95%;
27
- --muted-foreground: 215 15% 50%;
26
+ --muted: 95 50% 92%;
27
+ --muted-foreground: 0 0% 45%;
28
29
- --accent: 158 64% 52%;
30
- --accent-foreground: 0 0% 100%;
29
+ --accent: 142 76% 50%;
30
+ --accent-foreground: 0 0% 10%;
31
32
--destructive: 0 75% 55%;
33
--destructive-foreground: 0 0% 100%;
34
35
- --border: 210 20% 90%;
36
- --input: 210 20% 90%;
37
- --ring: 142 76% 45%;
35
+ --border: 0 0% 90%;
36
+ --input: 0 0% 100%;
37
+ --ring: 0 0% 10%;
38
39
- --radius: 1rem;
39
+ --radius: 0.75rem;
40
41
--toolbar-bg: 0 0% 100%;
42
- --toolbar-border: 210 20% 90%;
42
+ --toolbar-border: 0 0% 90%;
43
44
--nav-bg: 0 0% 100%;
45
- --nav-border: 210 20% 90%;
46
- --nav-active: 142 76% 45%;
45
+ --nav-border: 0 0% 90%;
46
+ --nav-active: 0 0% 10%;
47
48
- --expense-positive: 150 70% 45%;
48
+ --expense-positive: 142 76% 45%;
49
--expense-negative: 0 75% 55%;
50
51
--transition: all 0.3s cubic-bezier(0.4, 0, 0.2, 1);
52
+
53
+ --shadow-sm: 0 1px 2px 0 rgba(0, 0, 0, 0.05);
54
+ --shadow-md: 0 4px 6px -1px rgba(0, 0, 0, 0.1);
55
+ --shadow-lg: 0 10px 15px -3px rgba(0, 0, 0, 0.1);
56
}
57
58
.dark {
55
- --background: 215 30% 8%;
56
- --foreground: 210 20% 95%;
59
+ --background: 0 0% 10%;
60
+ --foreground: 0 0% 95%;
61
58
- --card: 215 25% 12%;
59
- --card-foreground: 210 20% 95%;
62
+ --card: 0 0% 15%;
63
+ --card-foreground: 0 0% 95%;
64
61
- --popover: 215 25% 12%;
62
- --popover-foreground: 210 20% 95%;
65
+ --popover: 0 0% 15%;
66
+ --popover-foreground: 0 0% 95%;
67
64
- --primary: 142 76% 55%;
65
- --primary-foreground: 0 0% 100%;
68
+ --primary: 95 70% 75%;
69
+ --primary-foreground: 0 0% 10%;
70
67
- --secondary: 215 25% 18%;
68
- --secondary-foreground: 142 76% 75%;
71
+ --secondary: 0 0% 20%;
72
+ --secondary-foreground: 95 70% 75%;
73
70
- --muted: 215 25% 18%;
71
- --muted-foreground: 215 15% 60%;
74
+ --muted: 0 0% 20%;
75
+ --muted-foreground: 0 0% 60%;
76
73
- --accent: 158 64% 58%;
74
- --accent-foreground: 0 0% 100%;
77
+ --accent: 142 76% 55%;
78
+ --accent-foreground: 0 0% 10%;
79
80
--destructive: 0 75% 60%;
81
--destructive-foreground: 0 0% 100%;
82
79
- --border: 215 25% 20%;
80
- --input: 215 25% 20%;
81
- --ring: 142 76% 55%;
83
+ --border: 0 0% 25%;
84
+ --input: 0 0% 20%;
85
+ --ring: 95 70% 75%;
86
83
- --toolbar-bg: 215 25% 12%;
84
- --toolbar-border: 215 25% 20%;
87
+ --toolbar-bg: 0 0% 15%;
88
+ --toolbar-border: 0 0% 25%;
89
86
- --nav-bg: 215 25% 12%;
87
- --nav-border: 215 25% 20%;
88
- --nav-active: 142 76% 55%;
90
+ --nav-bg: 0 0% 15%;
91
+ --nav-border: 0 0% 25%;
92
+ --nav-active: 95 70% 75%;
93
90
- --expense-positive: 150 70% 50%;
94
+ --expense-positive: 142 76% 50%;
95
--expense-negative: 0 75% 60%;
96
+
97
+ --shadow-sm: 0 1px 2px 0 rgba(0, 0, 0, 0.3);
98
+ --shadow-md: 0 4px 6px -1px rgba(0, 0, 0, 0.4);
99
+ --shadow-lg: 0 10px 15px -3px rgba(0, 0, 0, 0.4);
100
}
101
}
102
src/pages/Home.tsx
+33
-31
@@ -44,69 +44,71 @@ const Home = () => {
44
<Layout title="Expenses">
45
<div className="p-4 space-y-6">
46
{/* Balance Card */}
47
- <Card className="p-6 bg-gradient-to-br from-primary to-accent text-primary-foreground border-0">
48
- <div className="space-y-1">
49
- <p className="text-sm opacity-90">Available Balance</p>
50
- <h2 className="text-4xl font-bold">$2,450.00</h2>
47
+ <Card className="p-8 bg-card border-0 shadow-lg">
48
+ <div className="space-y-2">
49
+ <p className="text-sm text-muted-foreground font-medium">Available Balance</p>
50
+ <h2 className="text-5xl font-bold tracking-tight">$2,450.00</h2>
51
</div>
52
- <div className="flex gap-3 mt-6">
53
- <Button size="sm" variant="secondary" className="flex-1">
54
- <Plus className="h-4 w-4 mr-1" />
55
- Add Expense
52
+ <div className="mt-8">
53
+ <Button size="lg" className="w-full">
54
+ <Plus className="h-5 w-5 mr-2" />
55
+ Add New Expense
56
</Button>
57
</div>
58
</Card>
59
60
{/* Stats */}
61
<div className="grid grid-cols-2 gap-4">
62
- <Card className="p-4">
63
- <div className="flex items-start justify-between">
64
- <div>
65
- <p className="text-sm text-muted-foreground">This Month</p>
66
- <p className="text-2xl font-bold text-expense-negative">-$985</p>
62
+ <Card className="p-6 border-0 shadow-md">
63
+ <div className="space-y-2">
64
+ <p className="text-sm text-muted-foreground font-medium">This Month</p>
65
+ <p className="text-3xl font-bold text-foreground">$985</p>
66
+ <div className="flex items-center gap-1 text-expense-negative text-sm font-medium">
67
+ <ArrowUpRight className="h-4 w-4" />
68
+ <span>Spent</span>
69
</div>
68
- <ArrowUpRight className="h-5 w-5 text-expense-negative" />
70
</div>
71
</Card>
71
- <Card className="p-4">
72
- <div className="flex items-start justify-between">
73
- <div>
74
- <p className="text-sm text-muted-foreground">Saved</p>
75
- <p className="text-2xl font-bold text-expense-positive">+$450</p>
72
+ <Card className="p-6 border-0 shadow-md">
73
+ <div className="space-y-2">
74
+ <p className="text-sm text-muted-foreground font-medium">Saved</p>
75
+ <p className="text-3xl font-bold text-foreground">$450</p>
76
+ <div className="flex items-center gap-1 text-expense-positive text-sm font-medium">
77
+ <ArrowDownRight className="h-4 w-4" />
78
+ <span>This month</span>
79
</div>
77
- <ArrowDownRight className="h-5 w-5 text-expense-positive" />
80
</div>
81
</Card>
82
</div>
83
84
{/* Recent Transactions */}
83
- <div className="space-y-3">
84
- <h3 className="text-lg font-semibold">Recent Transactions</h3>
85
- <div className="space-y-2">
85
+ <div className="space-y-4">
86
+ <h3 className="text-xl font-bold">Recent Transactions</h3>
87
+ <div className="space-y-3">
88
{transactions.map((transaction) => (
87
- <Card key={transaction.id} className="p-4 hover:shadow-md transition-shadow">
89
+ <Card key={transaction.id} className="p-5 border-0 shadow-md hover:shadow-lg transition-all cursor-pointer">
90
<div className="flex items-center justify-between">
91
<div className="flex-1">
90
- <div className="flex items-center gap-2">
91
- <p className="font-medium">{transaction.name}</p>
92
+ <div className="flex items-center gap-3 mb-1">
93
+ <p className="font-semibold text-base">{transaction.name}</p>
94
{transaction.status === "pending" && (
93
- <Badge variant="outline" className="text-xs">
95
+ <Badge variant="outline" className="text-xs font-medium border-2">
96
Pending
97
</Badge>
98
)}
99
</div>
98
- <p className="text-sm text-muted-foreground">
100
+ <p className="text-sm text-muted-foreground font-medium">
101
{transaction.category} · {transaction.date}
102
</p>
103
</div>
104
<p
103
- className={`text-lg font-semibold ${
105
+ className={`text-xl font-bold ${
106
transaction.amount > 0
107
? "text-expense-positive"
106
- : "text-expense-negative"
108
+ : "text-foreground"
109
}`}
110
>
109
- {transaction.amount > 0 ? "+" : ""}${Math.abs(transaction.amount).toFixed(2)}
111
+ {transaction.amount > 0 ? "+" : "-"}${Math.abs(transaction.amount).toFixed(2)}
112
</p>
113
</div>
114
</Card>
src/pages/Pay.tsx
+27
-23
@@ -56,18 +56,18 @@ const Pay = () => {
56
<div className="p-4 space-y-6">
57
{/* Quick Actions */}
58
<div>
59
- <h3 className="text-lg font-semibold mb-3">Payment Methods</h3>
60
- <div className="grid grid-cols-2 gap-3">
59
+ <h3 className="text-xl font-bold mb-4">Payment Methods</h3>
60
+ <div className="grid grid-cols-2 gap-4">
61
{paymentMethods.map((method) => (
62
<Card
63
key={method.id}
64
- className="p-4 hover:shadow-lg transition-all cursor-pointer hover:scale-105 active:scale-95"
64
+ className="p-6 hover:shadow-lg transition-all cursor-pointer border-0 shadow-md active:scale-95"
65
>
66
- <div className="space-y-3">
67
- <method.icon className={`h-8 w-8 ${method.color}`} />
66
+ <div className="space-y-4">
67
+ <method.icon className={`h-10 w-10 ${method.color}`} />
68
<div>
69
- <p className="font-medium text-sm">{method.name}</p>
70
- <p className="text-xs text-muted-foreground">
69
+ <p className="font-semibold text-base mb-1">{method.name}</p>
70
+ <p className="text-xs text-muted-foreground font-medium">
71
{method.description}
72
</p>
73
</div>
@@ -79,29 +79,29 @@ const Pay = () => {
79
80
{/* Linked Cards */}
81
<div>
82
- <h3 className="text-lg font-semibold mb-3">Linked Cards</h3>
82
+ <h3 className="text-xl font-bold mb-4">Linked Cards</h3>
83
<div className="space-y-3">
84
{linkedCards.map((card) => (
85
<Card
86
key={card.id}
87
- className={`p-4 cursor-pointer hover:shadow-md transition-shadow ${
88
- card.primary ? "border-primary" : ""
87
+ className={`p-5 cursor-pointer hover:shadow-lg transition-all border-0 shadow-md ${
88
+ card.primary ? "ring-2 ring-primary" : ""
89
}`}
90
>
91
<div className="flex items-center justify-between">
92
- <div className="flex items-center gap-3">
93
- <div className="h-12 w-12 rounded-lg bg-gradient-to-br from-primary to-accent flex items-center justify-center">
94
- <CreditCard className="h-6 w-6 text-primary-foreground" />
92
+ <div className="flex items-center gap-4">
93
+ <div className="h-14 w-14 rounded-xl bg-primary flex items-center justify-center">
94
+ <CreditCard className="h-7 w-7 text-primary-foreground" />
95
</div>
96
<div>
97
- <p className="font-medium">{card.name}</p>
98
- <p className="text-sm text-muted-foreground">
97
+ <p className="font-semibold text-base">{card.name}</p>
98
+ <p className="text-sm text-muted-foreground font-medium">
99
{card.type} •••• {card.last4}
100
</p>
101
</div>
102
</div>
103
{card.primary && (
104
- <span className="text-xs font-medium text-primary">
104
+ <span className="text-sm font-bold text-primary">
105
Primary
106
</span>
107
)}
@@ -112,13 +112,17 @@ const Pay = () => {
112
</div>
113
114
{/* Quick Transfer */}
115
- <Card className="p-4 bg-secondary">
116
- <div className="text-center space-y-2">
117
- <QrCode className="h-16 w-16 mx-auto text-secondary-foreground" />
118
- <h4 className="font-semibold">Quick Pay QR Code</h4>
119
- <p className="text-sm text-muted-foreground">
120
- Scan this code to receive payments
121
- </p>
115
+ <Card className="p-8 bg-card border-0 shadow-md">
116
+ <div className="text-center space-y-4">
117
+ <div className="h-32 w-32 mx-auto bg-muted rounded-2xl flex items-center justify-center">
118
+ <QrCode className="h-20 w-20 text-foreground" />
119
+ </div>
120
+ <div>
121
+ <h4 className="font-bold text-lg mb-2">Quick Pay QR Code</h4>
122
+ <p className="text-sm text-muted-foreground font-medium">
123
+ Scan this code to receive payments instantly
124
+ </p>
125
+ </div>
126
</div>
127
</Card>
128
</div>
src/pages/Profile.tsx
+24
-24
@@ -35,52 +35,52 @@ const Profile = () => {
35
<Layout title="Profile">
36
<div className="p-4 space-y-6">
37
{/* Profile Header */}
38
- <Card className="p-6">
39
- <div className="flex items-center gap-4">
40
- <Avatar className="h-20 w-20">
41
- <AvatarFallback className="bg-gradient-to-br from-primary to-accent text-primary-foreground text-2xl font-bold">
38
+ <Card className="p-8 border-0 shadow-lg">
39
+ <div className="flex items-center gap-5">
40
+ <Avatar className="h-24 w-24">
41
+ <AvatarFallback className="bg-primary text-primary-foreground text-3xl font-bold">
42
JD
43
</AvatarFallback>
44
</Avatar>
45
<div className="flex-1">
46
- <h2 className="text-xl font-bold">John Doe</h2>
47
- <p className="text-sm text-muted-foreground">john.doe@company.com</p>
48
- <p className="text-sm text-muted-foreground mt-1">ID: EMP-001</p>
46
+ <h2 className="text-2xl font-bold mb-1">John Doe</h2>
47
+ <p className="text-sm text-muted-foreground font-medium">john.doe@company.com</p>
48
+ <p className="text-sm text-muted-foreground font-medium mt-1">ID: EMP-001</p>
49
</div>
50
</div>
51
</Card>
52
53
{/* Stats */}
54
- <div className="grid grid-cols-3 gap-3">
55
- <Card className="p-4 text-center">
56
- <p className="text-2xl font-bold text-primary">24</p>
57
- <p className="text-xs text-muted-foreground mt-1">Expenses</p>
54
+ <div className="grid grid-cols-3 gap-4">
55
+ <Card className="p-5 text-center border-0 shadow-md">
56
+ <p className="text-3xl font-bold text-foreground">24</p>
57
+ <p className="text-xs text-muted-foreground mt-2 font-medium">Expenses</p>
58
</Card>
59
- <Card className="p-4 text-center">
60
- <p className="text-2xl font-bold text-expense-positive">$2.4K</p>
61
- <p className="text-xs text-muted-foreground mt-1">Approved</p>
59
+ <Card className="p-5 text-center border-0 shadow-md">
60
+ <p className="text-3xl font-bold text-expense-positive">$2.4K</p>
61
+ <p className="text-xs text-muted-foreground mt-2 font-medium">Approved</p>
62
</Card>
63
- <Card className="p-4 text-center">
64
- <p className="text-2xl font-bold text-expense-negative">3</p>
65
- <p className="text-xs text-muted-foreground mt-1">Pending</p>
63
+ <Card className="p-5 text-center border-0 shadow-md">
64
+ <p className="text-3xl font-bold text-foreground">3</p>
65
+ <p className="text-xs text-muted-foreground mt-2 font-medium">Pending</p>
66
</Card>
67
</div>
68
69
{/* Menu Sections */}
70
{menuItems.map((section) => (
71
- <div key={section.section} className="space-y-2">
72
- <h3 className="text-sm font-semibold text-muted-foreground px-1">
71
+ <div key={section.section} className="space-y-3">
72
+ <h3 className="text-sm font-bold text-muted-foreground px-1 uppercase tracking-wider">
73
{section.section}
74
</h3>
75
- <Card className="divide-y">
75
+ <Card className="divide-y border-0 shadow-md">
76
{section.items.map((item) => (
77
<button
78
key={item.label}
79
- className="w-full px-4 py-3 flex items-center justify-between hover:bg-muted/50 transition-colors"
79
+ className="w-full px-5 py-4 flex items-center justify-between hover:bg-muted/50 transition-colors first:rounded-t-lg last:rounded-b-lg"
80
>
81
- <div className="flex items-center gap-3">
81
+ <div className="flex items-center gap-4">
82
<item.icon className="h-5 w-5 text-muted-foreground" />
83
- <span className="font-medium">{item.label}</span>
83
+ <span className="font-semibold">{item.label}</span>
84
</div>
85
<ChevronRight className="h-5 w-5 text-muted-foreground" />
86
</button>
@@ -95,7 +95,7 @@ const Profile = () => {
95
Log Out
96
</Button>
97
98
- <div className="text-center text-sm text-muted-foreground pb-4">
98
+ <div className="text-center text-sm text-muted-foreground font-medium pb-4">
99
Version 1.0.0
100
</div>
101
</div>
tailwind.config.ts
+5
@@ -64,6 +64,11 @@ export default {
64
negative: "hsl(var(--expense-negative))",
65
},
66
},
67
+ boxShadow: {
68
+ 'sm': 'var(--shadow-sm)',
69
+ 'md': 'var(--shadow-md)',
70
+ 'lg': 'var(--shadow-lg)',
71
+ },
72
transitionProperty: {
73
'all': 'var(--transition)',
74
},