diff --git a/app-9xzmfic2e4g1/src/components/planner/BudgetSelector.tsx b/app-9xzmfic2e4g1/src/components/planner/BudgetSelector.tsx index 8d09834..44dd49b 100644 --- a/app-9xzmfic2e4g1/src/components/planner/BudgetSelector.tsx +++ b/app-9xzmfic2e4g1/src/components/planner/BudgetSelector.tsx @@ -20,7 +20,7 @@ export const BudgetSelector = memo(({ selectedId, onSelect }: BudgetSelectorProp key={option.id} className={cn( 'h-1.5 flex-1 rounded-full transition-all duration-300', - i <= selectedIndex ? option.dot : 'bg-gray-100' + i <= selectedIndex ? option.bg : 'bg-gray-100' )} animate={{ scaleX: i <= selectedIndex ? 1 : 0.6 }} transition={{ duration: 0.3, delay: i * 0.05 }} @@ -46,7 +46,7 @@ export const BudgetSelector = memo(({ selectedId, onSelect }: BudgetSelectorProp className={cn( 'relative group flex items-center gap-4 px-5 py-4 rounded-2xl border-2 text-left transition-all duration-200 w-full overflow-hidden', isSelected - ? `${option.activeBorder} ${option.activeBg} shadow-md` + ? `${option.border} ${option.bg} shadow-md` : 'border-gray-100 bg-gray-50/60 hover:border-gray-200 hover:bg-white hover:shadow-sm' )} > @@ -57,8 +57,8 @@ export const BudgetSelector = memo(({ selectedId, onSelect }: BudgetSelectorProp key={i} className={cn( 'w-1.5 h-1.5 rounded-full transition-all duration-200', - i < option.tier - ? isSelected ? option.dot : 'bg-gray-300' + i < 3 + ? isSelected ? option.bg : 'bg-gray-300' : 'bg-gray-100' )} /> @@ -69,7 +69,7 @@ export const BudgetSelector = memo(({ selectedId, onSelect }: BudgetSelectorProp
{option.label}
@@ -91,9 +91,9 @@ export const BudgetSelector = memo(({ selectedId, onSelect }: BudgetSelectorProp {/* Price range */}{h}
))}