chore: prepara versao 2.7.7

src/features/dashboard/components/widgets/purchases-by-category-widget.tsx

@@ -3,6 +3,7 @@
 import { RiFileList2Line, RiStore3Line } from "@remixicon/react";
 import { useEffect, useMemo, useRef, useState } from "react";
 import type { PurchasesByCategoryData } from "@/features/dashboard/categories/purchases-by-category-queries";
+import { dashboardWidgetListStyles as styles } from "@/features/dashboard/components/dashboard-widget-list-styles";
 import { EstablishmentLogo } from "@/shared/components/entity-avatar";
 import MoneyValues from "@/shared/components/money-values";
 import {
@@ -162,26 +163,21 @@ export function PurchasesByCategoryWidget({
 				<div className="flex flex-col">
 					{currentTransactions.map((transaction) => {
 						return (
-							<div
-								key={transaction.id}
-								className="flex items-center justify-between gap-2 transition-all duration-300 py-1.5"
-							>
-								<div className="flex min-w-0 flex-1 items-center gap-2">
+							<div key={transaction.id} className={styles.row}>
+								<div className={styles.main}>
 									<EstablishmentLogo name={transaction.name} size={37} />
 
-									<div className="min-w-0">
-										<p className="truncate text-sm font-medium text-foreground">
-											{transaction.name}
-										</p>
-										<p className="text-xs text-muted-foreground">
+									<div className={styles.textStack}>
+										<p className={styles.title}>{transaction.name}</p>
+										<p className={styles.meta}>
 											{formatTransactionDate(transaction.purchaseDate)}
 										</p>
 									</div>
 								</div>
 
-								<div className="shrink-0 text-foreground">
+								<div className={styles.trailing}>
 									<MoneyValues
-										className="font-medium"
+										className={styles.trailingValue}
 										amount={transaction.amount}
 									/>
 								</div>