feat(ui): padroniza avatares e paleta visual da interface

src/features/dashboard/components/payment-overview/payment-breakdown-list-item.tsx

@@ -5,9 +5,10 @@ import {
 } from "@/features/dashboard/payment-breakdown-formatters";
 import MoneyValues from "@/shared/components/money-values";
 import { Progress } from "@/shared/components/ui/progress";
-
-const ICON_WRAPPER_CLASS =
-	"flex size-9.5 shrink-0 items-center justify-center rounded-full bg-muted text-foreground";
+import {
+	getCategoryBgColorFromName,
+	getCategoryColorFromName,
+} from "@/shared/utils/category-colors";
 
 export type PaymentBreakdownListItemData = {
 	id: string;
@@ -27,7 +28,15 @@ export function PaymentBreakdownListItem({
 }: PaymentBreakdownListItemProps) {
 	return (
 		<div className="flex items-center gap-3 transition-all duration-300 py-1.5">
-			<div className={ICON_WRAPPER_CLASS}>{item.icon}</div>
+			<div
+				className="flex size-9.5 shrink-0 items-center justify-center rounded-full"
+				style={{
+					backgroundColor: getCategoryBgColorFromName(item.id),
+					color: getCategoryColorFromName(item.id),
+				}}
+			>
+				{item.icon}
+			</div>
 
 			<div className="min-w-0 flex-1">
 				<div className="flex items-center justify-between">