feat(ux/ui): UI improvements

enrique-lozano · Nov 1, 2023 · 5728094 · 5728094
1 parent 80dd0a6
commit 5728094
Show file tree

Hide file tree

Showing 2 changed files with 63 additions and 42 deletions.
diff --git a/lib/app/stats/stats_page.dart b/lib/app/stats/stats_page.dart
@@ -184,14 +184,12 @@ class _StatsPageState extends State<StatsPage> {
                   const SizedBox(height: 16),
                   CardWithHeader(
                     title: t.stats.by_periods,
-                    body: Padding(
-                      padding: const EdgeInsets.only(bottom: 10, top: 16),
-                      child: BalanceBarChart(
-                        startDate: currentStartDate,
-                        endDate: currentEndDate,
-                        dateRange: currentDateRange,
-                        filters: filters,
-                      ),
+                    bodyPadding: const EdgeInsets.only(bottom: 12, top: 16),
+                    body: BalanceBarChart(
+                      startDate: currentStartDate,
+                      endDate: currentEndDate,
+                      dateRange: currentDateRange,
+                      filters: filters,
                     ),
                   )
                 ]),

diff --git a/lib/app/stats/widgets/income_expense_comparason.dart b/lib/app/stats/widgets/income_expense_comparason.dart
@@ -81,44 +81,67 @@ class IncomeExpenseComparason extends StatelessWidget {
             final expense = snapshot.data![1].abs();
 
             return Column(children: [
-              ListTile(
-                  title: Column(
-                      crossAxisAlignment: CrossAxisAlignment.start,
-                      children: [
-                    Row(
-                      mainAxisAlignment: MainAxisAlignment.spaceBetween,
-                      children: [
-                        Text(t.transaction.types.income(n: 1)),
-                        CurrencyDisplayer(amountToConvert: income)
-                      ],
-                    ),
-                    AnimatedProgressBar(
-                        value: income + expense > 0
-                            ? (income / (income + expense))
-                            : 0,
-                        color: CustomColors.of(context).success),
-                  ])),
-              ListTile(
-                  title: Column(
-                      crossAxisAlignment: CrossAxisAlignment.start,
-                      children: [
-                    Row(
-                      mainAxisAlignment: MainAxisAlignment.spaceBetween,
-                      children: [
-                        Text(t.transaction.types.expense(n: 1)),
-                        CurrencyDisplayer(amountToConvert: expense)
-                      ],
-                    ),
-                    AnimatedProgressBar(
-                        value: income + expense > 0
-                            ? (expense / (income + expense))
-                            : 0,
-                        color: CustomColors.of(context).danger),
-                  ]))
+              IncomeExpenseTile(
+                type: TransactionType.income,
+                value: income,
+                total: income + expense,
+              ),
+              IncomeExpenseTile(
+                type: TransactionType.expense,
+                value: expense,
+                total: income + expense,
+              ),
             ]);
           },
         ),
       ],
     );
   }
 }
+
+class IncomeExpenseTile extends StatelessWidget {
+  const IncomeExpenseTile({
+    super.key,
+    required this.value,
+    required this.total,
+    required this.type,
+  });
+
+  final TransactionType type;
+  final double value;
+  final double total;
+
+  @override
+  Widget build(BuildContext context) {
+    final t = Translations.of(context);
+
+    return ListTile(
+      leading: Container(
+        padding: const EdgeInsets.all(4),
+        decoration: BoxDecoration(
+          color: appColorScheme(context).surfaceVariant,
+          borderRadius: BorderRadius.circular(4),
+        ),
+        child: Icon(
+          type.icon,
+          color: type.color(context),
+        ),
+      ),
+      title: Column(crossAxisAlignment: CrossAxisAlignment.start, children: [
+        Row(
+          mainAxisAlignment: MainAxisAlignment.spaceBetween,
+          children: [
+            Text(type == TransactionType.expense
+                ? t.transaction.types.expense(n: 1)
+                : t.transaction.types.income(n: 1)),
+            CurrencyDisplayer(amountToConvert: value)
+          ],
+        ),
+      ]),
+      subtitle: AnimatedProgressBar(
+        value: total > 0 ? (value / total) : 0,
+        color: type.color(context),
+      ),
+    );
+  }
+}