feat: implement Capsule branding kit with custom colors and typography
- Add CSS variables for brand colors: Primary Blue (#1E73BE), Finance Green (#28A745), Cloud Blue (#A7D8F8), Dark Navy (#0F2C4C), Neutral Gray (#F4F4F4) - Import Montserrat and Roboto fonts from Google Fonts - Update navigation bar with brand colors (navy logo, blue active state, green Get Paid button) - Update landing page hero section with brand color accents and button styling - Update AuthModal, GetPaid, Settings, and DemoWizard components to use CSS variables - Apply brand colors to info boxes and secondary UI elements - Improve visual consistency across all app screens with cohesive color palette
This commit is contained in:
nmemmert committed
1 parent
1b269dedd9
commit
2dcd7b29fb
7 files changed
+132
-61
No files matched your search
Binary file not shown.
|
After Width: | Height: | Size: 1.4 MiB |
+31
-3
@@ -1,6 +1,15 @@
|
||||
@import url('https://fonts.googleapis.com/css2?family=Montserrat:wght@400;600;700&family=Roboto:wght@400;500;700&family=Roboto+Mono:wght@400;700&display=swap');
|
||||
@import "tailwindcss";
|
||||
|
||||
:root {
|
||||
/* Capsule Brand Colors */
|
||||
--color-primary-blue: #1E73BE;
|
||||
--color-finance-green: #28A745;
|
||||
--color-cloud-blue: #A7D8F8;
|
||||
--color-dark-navy: #0F2C4C;
|
||||
--color-neutral-gray: #F4F4F4;
|
||||
|
||||
/* Legacy variables for compatibility */
|
||||
--background: #ffffff;
|
||||
--foreground: #171717;
|
||||
}
|
||||
@@ -8,8 +17,8 @@
|
||||
@theme inline {
|
||||
--color-background: var(--background);
|
||||
--color-foreground: var(--foreground);
|
||||
--font-sans: var(--font-geist-sans);
|
||||
--font-mono: var(--font-geist-mono);
|
||||
--font-sans: "Roboto", sans-serif;
|
||||
--font-mono: "Roboto Mono", monospace;
|
||||
}
|
||||
|
||||
@media (prefers-color-scheme: dark) {
|
||||
@@ -22,7 +31,25 @@
|
||||
body {
|
||||
background: var(--background);
|
||||
color: var(--foreground);
|
||||
font-family: Arial, Helvetica, sans-serif;
|
||||
font-family: "Roboto", Arial, sans-serif;
|
||||
}
|
||||
|
||||
/* Typography */
|
||||
h1, h2, h3, h4, h5, h6 {
|
||||
font-family: "Montserrat", sans-serif;
|
||||
font-weight: 600;
|
||||
}
|
||||
|
||||
.logo-text {
|
||||
font-family: "Montserrat", sans-serif;
|
||||
font-weight: 700;
|
||||
color: var(--color-dark-navy);
|
||||
}
|
||||
|
||||
.tagline {
|
||||
font-family: "Roboto", sans-serif;
|
||||
font-weight: 400;
|
||||
color: var(--color-finance-green);
|
||||
}
|
||||
|
||||
/* Ensure form controls stay readable across light/dark modes */
|
||||
@@ -32,6 +59,7 @@ textarea {
|
||||
color: #111827;
|
||||
background-color: #ffffff;
|
||||
border: 1px solid #d1d5db;
|
||||
font-family: "Roboto", sans-serif;
|
||||
}
|
||||
|
||||
input::placeholder,
|
||||
|
||||
+66
-34
@@ -406,8 +406,8 @@ export default function BudgetDashboard() {
|
||||
<div className="px-4 py-12 sm:px-6 lg:px-8">
|
||||
<div className="max-w-5xl mx-auto grid grid-cols-1 lg:grid-cols-2 gap-12 items-center">
|
||||
<div className="space-y-6">
|
||||
<span className="inline-flex items-center px-3 py-1 rounded-full text-sm font-medium bg-blue-50 text-blue-700">Capsule</span>
|
||||
<h1 className="text-4xl sm:text-5xl font-bold text-gray-900 leading-tight">
|
||||
<span className="inline-flex items-center px-3 py-1 rounded-full text-sm font-medium" style={{ backgroundColor: 'rgba(30, 115, 190, 0.1)', color: 'var(--color-primary-blue)' }}>Capsule</span>
|
||||
<h1 className="text-4xl sm:text-5xl font-bold leading-tight" style={{ color: 'var(--color-dark-navy)' }}>
|
||||
Take control of your money with smart envelopes
|
||||
</h1>
|
||||
<p className="text-lg text-gray-600 leading-relaxed">
|
||||
@@ -416,44 +416,46 @@ export default function BudgetDashboard() {
|
||||
<div className="flex flex-col sm:flex-row gap-3">
|
||||
<button
|
||||
onClick={() => setShowAuthModal(true)}
|
||||
className="inline-flex justify-center items-center px-5 py-3 rounded-lg bg-blue-600 text-white font-semibold shadow hover:bg-blue-700 transition-colors"
|
||||
className="inline-flex justify-center items-center px-5 py-3 rounded-lg text-white font-semibold shadow hover:opacity-90 transition-opacity"
|
||||
style={{ backgroundColor: 'var(--color-primary-blue)' }}
|
||||
>
|
||||
Get Started
|
||||
</button>
|
||||
<button
|
||||
onClick={() => setShowAuthModal(true)}
|
||||
className="inline-flex justify-center items-center px-5 py-3 rounded-lg border border-gray-300 text-gray-700 font-semibold hover:border-gray-400 hover:text-gray-900 transition-colors"
|
||||
className="inline-flex justify-center items-center px-5 py-3 rounded-lg border-2 font-semibold transition-colors"
|
||||
style={{ borderColor: 'var(--color-primary-blue)', color: 'var(--color-primary-blue)' }}
|
||||
>
|
||||
Sign In
|
||||
</button>
|
||||
</div>
|
||||
<div className="flex items-center gap-4 text-sm text-gray-500">
|
||||
<div className="flex items-center gap-2">
|
||||
<span className="w-2 h-2 bg-green-500 rounded-full" aria-hidden="true"></span>
|
||||
<span className="w-2 h-2 rounded-full" style={{ backgroundColor: 'var(--color-finance-green)' }} aria-hidden="true"></span>
|
||||
Auto-save & offline-ready data
|
||||
</div>
|
||||
<div className="flex items-center gap-2">
|
||||
<span className="w-2 h-2 bg-indigo-500 rounded-full" aria-hidden="true"></span>
|
||||
<span className="w-2 h-2 rounded-full" style={{ backgroundColor: 'var(--color-primary-blue)' }} aria-hidden="true"></span>
|
||||
Guided setup wizard
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
<div className="bg-white shadow-xl rounded-2xl p-6 border border-gray-100">
|
||||
<div className="grid grid-cols-1 gap-4">
|
||||
<div className="p-4 rounded-xl bg-gradient-to-br from-blue-50 to-blue-100 border border-blue-200">
|
||||
<p className="text-sm text-blue-800 font-medium">Total Balance</p>
|
||||
<p className="text-3xl font-bold text-blue-900 mt-2">$0.00</p>
|
||||
<p className="text-xs text-blue-700 mt-1">Link accounts to see your starting balance</p>
|
||||
<div className="p-4 rounded-xl border" style={{ backgroundColor: 'rgba(30, 115, 190, 0.05)', borderColor: 'var(--color-cloud-blue)' }}>
|
||||
<p className="text-sm font-medium" style={{ color: 'var(--color-primary-blue)' }}>Total Balance</p>
|
||||
<p className="text-3xl font-bold mt-2" style={{ color: 'var(--color-dark-navy)' }}>$0.00</p>
|
||||
<p className="text-xs mt-1" style={{ color: 'var(--color-primary-blue)' }}>Link accounts to see your starting balance</p>
|
||||
</div>
|
||||
<div className="p-4 rounded-xl bg-gradient-to-br from-green-50 to-green-100 border border-green-200">
|
||||
<p className="text-sm text-green-800 font-medium">Envelopes</p>
|
||||
<p className="text-3xl font-bold text-green-900 mt-2">Organize spending</p>
|
||||
<p className="text-xs text-green-700 mt-1">Create categories with color-coded envelopes</p>
|
||||
<div className="p-4 rounded-xl border" style={{ backgroundColor: 'rgba(40, 167, 69, 0.05)', borderColor: 'var(--color-finance-green)' }}>
|
||||
<p className="text-sm font-medium" style={{ color: 'var(--color-finance-green)' }}>Envelopes</p>
|
||||
<p className="text-3xl font-bold mt-2" style={{ color: 'var(--color-dark-navy)' }}>Organize spending</p>
|
||||
<p className="text-xs mt-1" style={{ color: 'var(--color-finance-green)' }}>Create categories with color-coded envelopes</p>
|
||||
</div>
|
||||
<div className="p-4 rounded-xl bg-gradient-to-br from-indigo-50 to-indigo-100 border border-indigo-200">
|
||||
<p className="text-sm text-indigo-800 font-medium">Income Auto-Allocation</p>
|
||||
<p className="text-3xl font-bold text-indigo-900 mt-2">Smart distribution</p>
|
||||
<p className="text-xs text-indigo-700 mt-1">Allocate paychecks by percentage or fixed amounts</p>
|
||||
<div className="p-4 rounded-xl border" style={{ backgroundColor: 'rgba(167, 216, 248, 0.1)', borderColor: 'var(--color-cloud-blue)' }}>
|
||||
<p className="text-sm font-medium" style={{ color: 'var(--color-primary-blue)' }}>Income Auto-Allocation</p>
|
||||
<p className="text-3xl font-bold mt-2" style={{ color: 'var(--color-dark-navy)' }}>Smart distribution</p>
|
||||
<p className="text-xs mt-1" style={{ color: 'var(--color-primary-blue)' }}>Allocate paychecks by percentage or fixed amounts</p>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
@@ -464,54 +466,81 @@ export default function BudgetDashboard() {
|
||||
return (
|
||||
<div className="min-h-screen bg-gray-50">
|
||||
{/* Navigation */}
|
||||
<nav className="bg-white shadow-sm border-b">
|
||||
<nav className="bg-white shadow-sm border-b" style={{ borderBottomColor: 'var(--color-cloud-blue)' }}>
|
||||
<div className="max-w-7xl mx-auto px-4 sm:px-6 lg:px-8">
|
||||
<div className="flex justify-between h-16">
|
||||
<div className="flex">
|
||||
<div className="flex-shrink-0 flex items-center">
|
||||
<div>
|
||||
<h1 className="text-xl font-bold text-gray-900">Capsule</h1>
|
||||
<p className="text-xs font-normal text-gray-500">by NeCloud</p>
|
||||
<h1 className="text-xl font-bold" style={{ color: 'var(--color-dark-navy)' }}>
|
||||
<span className="logo-text">Capsule</span>
|
||||
</h1>
|
||||
<p className="text-xs font-normal" style={{ color: 'var(--color-neutral-gray)' }}>by NeCloud</p>
|
||||
</div>
|
||||
</div>
|
||||
<div className="hidden sm:ml-6 sm:flex sm:space-x-8">
|
||||
<button
|
||||
onClick={() => setCurrentView('dashboard')}
|
||||
className={`border-transparent text-gray-500 hover:border-gray-300 hover:text-gray-700 inline-flex items-center px-1 pt-1 border-b-2 text-sm font-medium ${
|
||||
currentView === 'dashboard' ? 'border-indigo-500 text-gray-900' : ''
|
||||
className={`border-transparent inline-flex items-center px-1 pt-1 border-b-2 text-sm font-medium transition-colors ${
|
||||
currentView === 'dashboard'
|
||||
? 'border-b-2 text-gray-900'
|
||||
: 'text-gray-500 hover:text-gray-700'
|
||||
}`}
|
||||
style={{
|
||||
borderBottomColor: currentView === 'dashboard' ? 'var(--color-primary-blue)' : 'transparent'
|
||||
}}
|
||||
>
|
||||
Dashboard
|
||||
</button>
|
||||
<button
|
||||
onClick={() => setCurrentView('accounts')}
|
||||
className={`border-transparent text-gray-500 hover:border-gray-300 hover:text-gray-700 inline-flex items-center px-1 pt-1 border-b-2 text-sm font-medium ${
|
||||
currentView === 'accounts' ? 'border-indigo-500 text-gray-900' : ''
|
||||
className={`border-transparent inline-flex items-center px-1 pt-1 border-b-2 text-sm font-medium transition-colors ${
|
||||
currentView === 'accounts'
|
||||
? 'border-b-2 text-gray-900'
|
||||
: 'text-gray-500 hover:text-gray-700'
|
||||
}`}
|
||||
style={{
|
||||
borderBottomColor: currentView === 'accounts' ? 'var(--color-primary-blue)' : 'transparent'
|
||||
}}
|
||||
>
|
||||
Accounts
|
||||
</button>
|
||||
<button
|
||||
onClick={() => setCurrentView('transactions')}
|
||||
className={`border-transparent text-gray-500 hover:border-gray-300 hover:text-gray-700 inline-flex items-center px-1 pt-1 border-b-2 text-sm font-medium ${
|
||||
currentView === 'transactions' ? 'border-indigo-500 text-gray-900' : ''
|
||||
className={`border-transparent inline-flex items-center px-1 pt-1 border-b-2 text-sm font-medium transition-colors ${
|
||||
currentView === 'transactions'
|
||||
? 'border-b-2 text-gray-900'
|
||||
: 'text-gray-500 hover:text-gray-700'
|
||||
}`}
|
||||
style={{
|
||||
borderBottomColor: currentView === 'transactions' ? 'var(--color-primary-blue)' : 'transparent'
|
||||
}}
|
||||
>
|
||||
Transactions
|
||||
</button>
|
||||
<button
|
||||
onClick={() => setCurrentView('envelopes')}
|
||||
className={`border-transparent text-gray-500 hover:border-gray-300 hover:text-gray-700 inline-flex items-center px-1 pt-1 border-b-2 text-sm font-medium ${
|
||||
currentView === 'envelopes' ? 'border-indigo-500 text-gray-900' : ''
|
||||
className={`border-transparent inline-flex items-center px-1 pt-1 border-b-2 text-sm font-medium transition-colors ${
|
||||
currentView === 'envelopes'
|
||||
? 'border-b-2 text-gray-900'
|
||||
: 'text-gray-500 hover:text-gray-700'
|
||||
}`}
|
||||
style={{
|
||||
borderBottomColor: currentView === 'envelopes' ? 'var(--color-primary-blue)' : 'transparent'
|
||||
}}
|
||||
>
|
||||
Envelopes
|
||||
</button>
|
||||
<button
|
||||
onClick={() => setCurrentView('settings')}
|
||||
className={`border-transparent text-gray-500 hover:border-gray-300 hover:text-gray-700 inline-flex items-center px-1 pt-1 border-b-2 text-sm font-medium ${
|
||||
currentView === 'settings' ? 'border-indigo-500 text-gray-900' : ''
|
||||
className={`border-transparent inline-flex items-center px-1 pt-1 border-b-2 text-sm font-medium transition-colors ${
|
||||
currentView === 'settings'
|
||||
? 'border-b-2 text-gray-900'
|
||||
: 'text-gray-500 hover:text-gray-700'
|
||||
}`}
|
||||
style={{
|
||||
borderBottomColor: currentView === 'settings' ? 'var(--color-primary-blue)' : 'transparent'
|
||||
}}
|
||||
>
|
||||
Settings
|
||||
</button>
|
||||
@@ -521,7 +550,8 @@ export default function BudgetDashboard() {
|
||||
{user && setupCompleted && (
|
||||
<button
|
||||
onClick={() => setShowGetPaidModal(true)}
|
||||
className="bg-green-600 hover:bg-green-700 text-white px-3 py-2 rounded-md text-sm font-medium"
|
||||
className="text-white px-3 py-2 rounded-md text-sm font-medium hover:opacity-90 transition-opacity"
|
||||
style={{ backgroundColor: 'var(--color-finance-green)' }}
|
||||
>
|
||||
💰 Get Paid
|
||||
</button>
|
||||
@@ -529,14 +559,16 @@ export default function BudgetDashboard() {
|
||||
{user ? (
|
||||
<button
|
||||
onClick={handleSignOut}
|
||||
className="bg-red-600 hover:bg-red-700 text-white px-3 py-2 rounded-md text-sm font-medium"
|
||||
className="text-white px-3 py-2 rounded-md text-sm font-medium hover:opacity-90 transition-opacity"
|
||||
style={{ backgroundColor: '#DC2626' }}
|
||||
>
|
||||
Sign Out
|
||||
</button>
|
||||
) : (
|
||||
<button
|
||||
onClick={() => setShowAuthModal(true)}
|
||||
className="bg-blue-600 hover:bg-blue-700 text-white px-3 py-2 rounded-md text-sm font-medium"
|
||||
className="text-white px-3 py-2 rounded-md text-sm font-medium hover:opacity-90 transition-opacity"
|
||||
style={{ backgroundColor: 'var(--color-primary-blue)' }}
|
||||
>
|
||||
Sign In
|
||||
</button>
|
||||
|
||||
@@ -120,7 +120,8 @@ export default function AuthModal({ isOpen, onClose, onAuthSuccess }: AuthModalP
|
||||
<button
|
||||
type="submit"
|
||||
disabled={loading}
|
||||
className="w-full bg-blue-600 text-white py-2 px-4 rounded-md hover:bg-blue-700 focus:outline-none focus:ring-2 focus:ring-blue-500 disabled:opacity-50"
|
||||
className="w-full text-white py-2 px-4 rounded-md hover:opacity-90 focus:outline-none focus:ring-2 disabled:opacity-50 transition-opacity"
|
||||
style={{ backgroundColor: 'var(--color-primary-blue)' }}
|
||||
>
|
||||
{loading ? 'Please wait...' : (isLogin ? 'Sign In' : 'Create Account')}
|
||||
</button>
|
||||
|
||||
@@ -86,7 +86,8 @@ export default function DemoWizard({ onApplyDemo, onSkip, accountId }: DemoWizar
|
||||
<div className="flex gap-3 justify-center pt-4">
|
||||
<button
|
||||
onClick={() => setShowDemo(true)}
|
||||
className="bg-blue-600 text-white px-6 py-3 rounded-lg hover:bg-blue-700 transition-colors"
|
||||
className="text-white px-6 py-3 rounded-lg hover:opacity-90 transition-opacity"
|
||||
style={{ backgroundColor: 'var(--color-primary-blue)' }}
|
||||
>
|
||||
Show Me Demo Data
|
||||
</button>
|
||||
@@ -111,25 +112,25 @@ export default function DemoWizard({ onApplyDemo, onSkip, accountId }: DemoWizar
|
||||
</div>
|
||||
|
||||
<div className="grid grid-cols-1 md:grid-cols-2 gap-6">
|
||||
<div className="bg-blue-50 rounded-lg p-4 border border-blue-200">
|
||||
<h3 className="font-semibold text-blue-900 mb-3">🏦 Accounts</h3>
|
||||
<div className="rounded-lg p-4 border" style={{ backgroundColor: 'rgba(30, 115, 190, 0.05)', borderColor: 'var(--color-cloud-blue)' }}>
|
||||
<h3 className="font-semibold mb-3" style={{ color: 'var(--color-primary-blue)' }}>🏦 Accounts</h3>
|
||||
<ul className="space-y-2">
|
||||
{DEMO_DATA.accounts.map((acc) => (
|
||||
<li key={acc.name} className="text-sm text-blue-800">
|
||||
<li key={acc.name} className="text-sm text-gray-700">
|
||||
<span className="font-medium">{acc.name}</span> - ${acc.balance.toLocaleString()}
|
||||
</li>
|
||||
))}
|
||||
</ul>
|
||||
</div>
|
||||
|
||||
<div className="bg-green-50 rounded-lg p-4 border border-green-200">
|
||||
<h3 className="font-semibold text-green-900 mb-3">📦 Envelopes</h3>
|
||||
<div className="rounded-lg p-4 border" style={{ backgroundColor: 'rgba(40, 167, 69, 0.05)', borderColor: 'var(--color-finance-green)' }}>
|
||||
<h3 className="font-semibold mb-3" style={{ color: 'var(--color-finance-green)' }}>📦 Envelopes</h3>
|
||||
<ul className="space-y-2">
|
||||
{DEMO_DATA.envelopes.map((env) => (
|
||||
<li key={env.name} className="text-sm text-green-800">
|
||||
<li key={env.name} className="text-sm text-gray-700">
|
||||
<span className="font-medium">{env.name}</span> - ${env.allocated}/mo
|
||||
{env.isRecurring && (
|
||||
<span className="ml-2 text-xs bg-green-200 px-2 py-1 rounded">Recurring</span>
|
||||
<span className="ml-2 text-xs px-2 py-1 rounded" style={{ backgroundColor: 'var(--color-finance-green)', color: 'white' }}>Recurring</span>
|
||||
)}
|
||||
</li>
|
||||
))}
|
||||
@@ -152,7 +153,8 @@ export default function DemoWizard({ onApplyDemo, onSkip, accountId }: DemoWizar
|
||||
</button>
|
||||
<button
|
||||
onClick={handleApplyDemo}
|
||||
className="flex-1 bg-green-600 text-white py-3 px-4 rounded-lg hover:bg-green-700 transition-colors font-semibold"
|
||||
className="flex-1 text-white py-3 px-4 rounded-lg hover:opacity-90 transition-opacity font-semibold"
|
||||
style={{ backgroundColor: 'var(--color-finance-green)' }}
|
||||
>
|
||||
Apply Demo Data →
|
||||
</button>
|
||||
|
||||
@@ -251,7 +251,8 @@ export default function GetPaid({
|
||||
{!autoOpen && (
|
||||
<button
|
||||
onClick={() => setIsOpen(true)}
|
||||
className="bg-green-600 text-white px-4 py-2 rounded-md hover:bg-green-700 flex items-center space-x-2"
|
||||
className="text-white px-4 py-2 rounded-md hover:opacity-90 flex items-center space-x-2 transition-opacity"
|
||||
style={{ backgroundColor: 'var(--color-finance-green)' }}
|
||||
>
|
||||
<svg className="w-5 h-5" fill="none" stroke="currentColor" viewBox="0 0 24 24">
|
||||
<path
|
||||
@@ -271,7 +272,7 @@ export default function GetPaid({
|
||||
<h3 className="text-xl font-bold text-gray-900 mb-4">Record Paycheck</h3>
|
||||
|
||||
{savedTemplate && (
|
||||
<div className="bg-blue-50 border border-blue-200 rounded-lg p-3 mb-4">
|
||||
<div className="rounded-lg p-3 mb-4 border" style={{ backgroundColor: 'rgba(30, 115, 190, 0.05)', borderColor: 'var(--color-cloud-blue)' }}>
|
||||
<div className="flex items-center justify-between">
|
||||
<div>
|
||||
<p className="text-sm font-medium text-gray-900">Saved Template Available</p>
|
||||
@@ -282,7 +283,8 @@ export default function GetPaid({
|
||||
<button
|
||||
type="button"
|
||||
onClick={applySavedTemplate}
|
||||
className="px-3 py-1 text-sm bg-blue-600 text-white rounded hover:bg-blue-700 whitespace-nowrap"
|
||||
className="px-3 py-1 text-sm text-white rounded hover:opacity-90 whitespace-nowrap transition-opacity"
|
||||
style={{ backgroundColor: 'var(--color-primary-blue)' }}
|
||||
>
|
||||
Use Template
|
||||
</button>
|
||||
@@ -344,7 +346,8 @@ export default function GetPaid({
|
||||
<button
|
||||
type="button"
|
||||
onClick={handleSetDefaultAmount}
|
||||
className="px-3 py-1 text-sm bg-blue-600 text-white rounded hover:bg-blue-700"
|
||||
className="px-3 py-1 text-sm text-white rounded hover:opacity-90 transition-opacity"
|
||||
style={{ backgroundColor: 'var(--color-primary-blue)' }}
|
||||
>
|
||||
Set
|
||||
</button>
|
||||
@@ -510,7 +513,8 @@ export default function GetPaid({
|
||||
<button
|
||||
type="submit"
|
||||
disabled={!amount || !selectedAccountId || (accountEnvelopes.length > 0 && Math.abs(remaining) >= 0.01)}
|
||||
className="px-4 py-2 bg-green-600 text-white rounded-md hover:bg-green-700 disabled:bg-gray-400 disabled:cursor-not-allowed"
|
||||
className="px-4 py-2 text-white rounded-md hover:opacity-90 disabled:opacity-50 disabled:cursor-not-allowed transition-opacity"
|
||||
style={{ backgroundColor: 'var(--color-finance-green)' }}
|
||||
>
|
||||
Review & Confirm
|
||||
</button>
|
||||
@@ -526,7 +530,7 @@ export default function GetPaid({
|
||||
<h3 className="text-xl font-bold text-gray-900 mb-4">Confirm Paycheck Allocation</h3>
|
||||
|
||||
<div className="mb-6">
|
||||
<div className="bg-blue-50 border border-blue-200 rounded-lg p-4">
|
||||
<div className="rounded-lg p-4 border" style={{ backgroundColor: 'rgba(30, 115, 190, 0.05)', borderColor: 'var(--color-cloud-blue)' }}>
|
||||
<div className="flex justify-between items-center">
|
||||
<span className="text-sm font-medium text-gray-700">Paycheck Amount:</span>
|
||||
<span className="text-2xl font-bold text-blue-600">${numericAmount.toFixed(2)}</span>
|
||||
@@ -581,10 +585,10 @@ export default function GetPaid({
|
||||
})}
|
||||
</div>
|
||||
|
||||
<div className="bg-green-50 border border-green-200 rounded-lg p-4 mb-6">
|
||||
<div className="rounded-lg p-4 mb-6 border" style={{ backgroundColor: 'rgba(40, 167, 69, 0.05)', borderColor: 'var(--color-finance-green)' }}>
|
||||
<div className="flex justify-between items-center">
|
||||
<span className="font-semibold text-gray-900">Total Allocated:</span>
|
||||
<span className="text-xl font-bold text-green-600">
|
||||
<span className="text-xl font-bold" style={{ color: 'var(--color-finance-green)' }}>
|
||||
${Object.values(previewAllocations).reduce((sum, value) => sum + value, 0).toFixed(2)}
|
||||
</span>
|
||||
</div>
|
||||
@@ -631,7 +635,8 @@ export default function GetPaid({
|
||||
const remainingAmount = numericAmount - totalAllocatedPreview;
|
||||
return Math.abs(remainingAmount) >= 0.01;
|
||||
})()}
|
||||
className="px-4 py-2 bg-green-600 text-white rounded-md hover:bg-green-700 disabled:bg-gray-400 disabled:cursor-not-allowed"
|
||||
className="px-4 py-2 text-white rounded-md hover:opacity-90 disabled:opacity-50 disabled:cursor-not-allowed transition-opacity"
|
||||
style={{ backgroundColor: 'var(--color-finance-green)' }}
|
||||
>
|
||||
Confirm & Apply Paycheck
|
||||
</button>
|
||||
|
||||
@@ -257,7 +257,8 @@ export default function Settings({ user, onAccountDeleted }: SettingsProps) {
|
||||
<button
|
||||
type="submit"
|
||||
disabled={loading || !resetCode || !newPassword}
|
||||
className="w-full bg-blue-600 text-white py-2 px-4 rounded-md hover:bg-blue-700 disabled:opacity-50 transition-colors"
|
||||
className="w-full text-white py-2 px-4 rounded-md hover:opacity-90 disabled:opacity-50 transition-opacity"
|
||||
style={{ backgroundColor: 'var(--color-primary-blue)' }}
|
||||
>
|
||||
{loading ? 'Resetting...' : 'Reset Password'}
|
||||
</button>
|
||||
@@ -277,21 +278,23 @@ export default function Settings({ user, onAccountDeleted }: SettingsProps) {
|
||||
<div className="space-y-3">
|
||||
<button
|
||||
onClick={() => handleExportData('json')}
|
||||
className="w-full bg-green-600 text-white py-3 px-4 rounded-md hover:bg-green-700 transition-colors text-left flex justify-between items-center"
|
||||
className="w-full text-white py-3 px-4 rounded-md hover:opacity-90 transition-opacity text-left flex justify-between items-center"
|
||||
style={{ backgroundColor: 'var(--color-finance-green)' }}
|
||||
>
|
||||
<span>📋 Export as JSON (Full Backup)</span>
|
||||
<span className="text-sm">Recommended</span>
|
||||
</button>
|
||||
<button
|
||||
onClick={() => handleExportData('csv')}
|
||||
className="w-full bg-blue-600 text-white py-3 px-4 rounded-md hover:bg-blue-700 transition-colors text-left"
|
||||
className="w-full text-white py-3 px-4 rounded-md hover:opacity-90 transition-opacity text-left"
|
||||
style={{ backgroundColor: 'var(--color-primary-blue)' }}
|
||||
>
|
||||
📊 Export Transactions as CSV
|
||||
</button>
|
||||
</div>
|
||||
|
||||
<div className="mt-6 p-4 bg-blue-50 border border-blue-200 rounded-md">
|
||||
<p className="text-sm text-blue-800">
|
||||
<div className="mt-6 p-4 rounded-md border" style={{ backgroundColor: 'rgba(30, 115, 190, 0.05)', borderColor: 'var(--color-cloud-blue)' }}>
|
||||
<p className="text-sm" style={{ color: 'var(--color-primary-blue)' }}>
|
||||
<strong>💡 Tip:</strong> Regularly export your data as a backup. You can import it later if needed.
|
||||
</p>
|
||||
</div>
|
||||
|
||||
Reference in new issue
Block a user