Refactor plus button style

- Modified the style of the plus button before "예산 수정하기"
- Removed the white circle and increased the size of the plus icon
- Kept the same color and animation
This commit is contained in:
gpt-engineer-app[bot]
2025-03-17 12:25:06 +00:00
parent 6884b68466
commit 07f87d8ec0

View File

@@ -3,17 +3,20 @@ import { CirclePlus, Save, Check } from 'lucide-react';
import BudgetInputCard from './BudgetInputCard';
import { Button } from '@/components/ui/button';
import CategoryBudgetInputs from './CategoryBudgetInputs';
interface BudgetData {
targetAmount: number;
spentAmount: number;
remainingAmount: number;
}
interface BudgetTabContentProps {
data: BudgetData;
formatCurrency: (amount: number) => string;
calculatePercentage: (spent: number, target: number) => number;
onSaveBudget: (amount: number, categoryBudgets?: Record<string, number>) => void;
}
const BudgetTabContent: React.FC<BudgetTabContentProps> = ({
data,
formatCurrency,
@@ -75,6 +78,7 @@ const BudgetTabContent: React.FC<BudgetTabContentProps> = ({
}
}
}, [showBudgetInput]);
return <div>
{targetAmount > 0 ? <>
<div className="flex justify-between items-center mb-3">
@@ -99,16 +103,14 @@ const BudgetTabContent: React.FC<BudgetTabContentProps> = ({
<div className="mt-6">
<button onClick={() => setShowBudgetInput(true)} className="text-neuro-income hover:underline flex items-center text-lg font-bold group">
<div className="mr-2 bg-neuro-income text-white rounded-full p-1 transition-transform group-hover:scale-110">
<CirclePlus size={20} className="animate-pulse" />
</div>
<CirclePlus size={26} className="mr-2 text-neuro-income animate-pulse transition-transform group-hover:scale-110" />
<span> </span>
</button>
</div>
</> : <div className="py-4 text-center">
<div className="text-gray-400 mb-4"> </div>
<Button onClick={() => setShowBudgetInput(true)} variant="default" className="bg-neuro-income hover:bg-neuro-income/90 animate-pulse shadow-lg">
<CirclePlus className="mr-2" size={20} />
<CirclePlus className="mr-2" size={24} />
</Button>
</div>}
@@ -137,4 +139,5 @@ const BudgetTabContent: React.FC<BudgetTabContentProps> = ({
</div>}
</div>;
};
export default BudgetTabContent;