Merge pull request #127 from PennyPilot/fix/ui-bugs

Fix/UI bugs

Author: mohamedshemees

assets/icons/ic_celebrate.svg

@@ -167,5 +167,14 @@
   "system": "النظام",
   "home": "الرئيسية",
   "top_spending_category": "أكثر فئات الإنفاق",
-  "spend": "إنفاق"
+  "spend": "إنفاق",
+  "selectMonthYear": "اختر الشهر والسنة",
+  "addIncome": "إضافة دخل",
+  "saving": "ادخار",
+  "spending": "إنفاق",
+  "incomeAddedSuccessfully": "تم إضافة الدخل بنجاح!",
+  "failedToAddIncome": "فشل في إضافة الدخل",
+  "whereDoYouUsuallySpendYourMoney": "أين تنفق أموالك عادة؟",
+  "suggestions": "اقتراحات",
+  "selectedCategories": "التصنيفات المختارة"
 }

lib/core/l10n/app_ar.arb

@@ -185,5 +185,6 @@
   "system": "System",
   "home": "Home",
   "top_spending_category": "Top spending category",
-  "spend": "Spend"
+  "spend": "Spend",
+  "selectMonthYear": "Select month & year"
 }

lib/core/l10n/app_en.arb

@@ -82,4 +82,5 @@ class AppAssets {
   static const String icEmptyRadioButton = '$_icons/ic_circle.svg';
   static const String icSelectedRadioButton = '$_icons/ic_check_circle.svg';
   static const String glowBackground = '$_images/money_background.png';
+  static const String icCelebrate = '$_images/ic_celebrate.svg';
 }

lib/design_system/assets/app_assets.dart

@@ -71,11 +71,14 @@
           width: 40,
           height: 40,
           decoration: BoxDecoration(
-            color: context.colors.surfaceHigh,
+            color: context.colors.surface,
             shape: BoxShape.circle,
           ),
           alignment: Alignment.center,
-          child: SvgPicture.asset(assetPath, width: 20, height: 20),
+          child: SvgPicture.asset(assetPath,
+             matchTextDirection: true,
+             colorFilter: ColorFilter.mode(context.colors.title,BlendMode.srcIn),
+              width: 20, height: 20),
         ),
       );
     }
@@ -103,7 +106,9 @@
             spacing: 4,
             children: [
               Text(date, style: typo.label.small.copyWith(color: contentColor)),
-              SvgPicture.asset(AppAssets.icNormalArrowDown, width: 20, height: 20),
+              SvgPicture.asset(AppAssets.icNormalArrowDown,
+                  colorFilter: ColorFilter.mode(contentColor,BlendMode.srcIn),
+                  width: 20, height: 20),
             ],
           ),
         ),

lib/design_system/widgets/app_bar.dart

@@ -9,24 +9,31 @@ Future<DateTime?> showMonthYearDialog(
     }) {
   int selectedMonth = initialMonth;
   int selectedYear = initialYear;
+  final localization = context.localizations;
+  final colors = context.colors;
+  final typography = context.typography;
 
   return showDialog<DateTime>(
     context: context,
     builder: (_) {
       return StatefulBuilder(
         builder: (context, setState) {
           return AlertDialog(
-            backgroundColor: context.colors.surface,
+            backgroundColor: colors.surface,
+            shape: RoundedRectangleBorder(borderRadius: BorderRadius.circular(24)),
             title: Text(
-              "Select month & year",
-              style: context.typography.title.medium,
+              localization.selectMonthYear,
+              style: typography.title.medium.copyWith(color: colors.title),
             ),
             content: Row(
               children: [
                 Expanded(
                   child: DropdownButton<int>(
                     value: selectedMonth,
                     isExpanded: true,
+                    dropdownColor: colors.surface,
+                    style: typography.body.medium.copyWith(color: colors.title),
+                    underline: Container(height: 1, color: colors.primary),
                     items: List.generate(12, (i) => i + 1)
                         .map(
                           (m) => DropdownMenuItem(
@@ -47,6 +54,9 @@ Future<DateTime?> showMonthYearDialog(
                   child: DropdownButton<int>(
                     value: selectedYear,
                     isExpanded: true,
+                    dropdownColor: colors.surface,
+                    style: typography.body.medium.copyWith(color: colors.title),
+                    underline: Container(height: 1, color: colors.primary),
                     items: List.generate(50, (i) => 2000 + i)
                         .map(
                           (y) => DropdownMenuItem(
@@ -67,14 +77,20 @@ Future<DateTime?> showMonthYearDialog(
             actions: [
               TextButton(
                 onPressed: () => Navigator.pop(context),
-                child: const Text("Cancel"),
+                child: Text(
+                  localization.cancel,
+                  style: typography.label.large.copyWith(color: colors.primary),
+                ),
               ),
               TextButton(
                 onPressed: () => Navigator.pop(
                   context,
                   DateTime(selectedYear, selectedMonth),
                 ),
-                child: const Text("OK"),
+                child: Text(
+                  localization.select,
+                  style: typography.label.large.copyWith(color: colors.primary),
+                ),
               ),
             ],
           );

lib/design_system/widgets/custom_date_picker.dart

@@ -32,7 +32,7 @@ enum NavBarTab {
       case NavBarTab.home:
         return l10n.home;
       case NavBarTab.transaction:
-        return l10n.transaction;
+        return l10n.transactions;
       case NavBarTab.statistics:
         return l10n.statistics;
       case NavBarTab.account:

lib/design_system/widgets/nav_bar.dart

@@ -73,7 +73,9 @@ class _TextFieldDatePickerState extends State<TextFieldDatePicker> {
           child: Row(
             crossAxisAlignment: CrossAxisAlignment.center,
             children: [
-              SvgPicture.asset(AppAssets.icCalender, width: 24, height: 24),
+              SvgPicture.asset(AppAssets.icCalender,
+                  colorFilter: ColorFilter.mode(colors.body,BlendMode.srcIn),
+                  width: 24, height: 24),
               SizedBox(width: 8),
               Expanded(
                 child: TextField(
@@ -99,7 +101,7 @@ class _TextFieldDatePickerState extends State<TextFieldDatePicker> {
                       builder: (context, child) {
                         return Theme(
                           data: Theme.of(context).copyWith(
-                            colorScheme: ColorScheme.light(
+                            colorScheme: Theme.of(context).colorScheme.copyWith(
                               primary: colors.primary,
                               onPrimary: colors.onPrimary,
                               onSurface: colors.title,
@@ -128,6 +130,7 @@ class _TextFieldDatePickerState extends State<TextFieldDatePicker> {
               ),
               SvgPicture.asset(
                 AppAssets.icArrowDownRound,
+                colorFilter: ColorFilter.mode(colors.body,BlendMode.srcIn),
                 width: 24,
                 height: 24,
               ),

lib/design_system/widgets/text_field_date_Picker.dart

@@ -2,6 +2,7 @@ import 'package:flutter/material.dart';
 import 'package:flutter_svg/svg.dart';
 import '../../../core/l10n/app_localizations.dart';
 import '../../../design_system/assets/app_assets.dart';
+import '../../../design_system/theme/money_extension_context.dart';
 import '../../../design_system/widgets/text_field.dart';
 
 class LoginForm extends StatefulWidget {
@@ -28,6 +29,7 @@ class _LoginFormState extends State<LoginForm> {
   @override
   Widget build(BuildContext context) {
     final localizations = AppLocalizations.of(context)!;
+    final colors = context.colors;
     return Column(
       children: [
         MTextField(
@@ -58,6 +60,8 @@ class _LoginFormState extends State<LoginForm> {
             child: Padding(
               padding: const EdgeInsets.symmetric(vertical: 14),
               child: SvgPicture.asset(
+                width: 20,height: 20,
+                colorFilter: ColorFilter.mode(colors.hint, BlendMode.srcIn),
                 _isPasswordVisible ? AppAssets.eyeOpen : AppAssets.eyeClose,
               ),
             ),

lib/presentation/login/widget/login_form.dart

@@ -8,7 +8,9 @@ import 'package:moneyplus/design_system/widgets/app_empty_view.dart';
 import 'package:moneyplus/design_system/widgets/app_error_view.dart';
 import 'package:moneyplus/design_system/widgets/app_loading_indicator.dart';
 import 'package:moneyplus/presentation/statistics/widgets/CategoryBreakdown.dart';
+import 'package:moneyplus/presentation/transactions/screen/transactions_screen.dart';
 
+import '../transactions/widget/add_transaction_bottom_sheet.dart';
 import '../widgets/drop_down_date_dialog.dart';
 import 'cubit/statistics_cubit.dart';
 import 'cubit/statistics_state.dart';
@@ -35,7 +37,7 @@ class StatisticsView extends StatefulWidget {
 
 class _StatisticsViewState extends State<StatisticsView> {
   void _onAddTransaction() {
-    // Navigate to add transaction
+    showAddTransactionBottomSheet(context);
   }
 
   void _onRetry() {
@@ -44,22 +46,32 @@ class _StatisticsViewState extends State<StatisticsView> {
 
   @override
   Widget build(BuildContext context) {
+    final state = context.watch<StatisticsCubit>().state;
+    final l10n = context.localizations;
+
     return Scaffold(
       backgroundColor: context.colors.surface,
+      appBar: CustomAppBar(
+        title: l10n.statistics,
+        trailing: switch (state) {
+          StatisticsSuccess(:final selectedMonth) => DropDownDateDialog(
+              onDatePick: (date) => context.read<StatisticsCubit>().changeMonth(date),
+              year: selectedMonth.year,
+              month: selectedMonth.month,
+            ),
+          _ => null,
+        },
+      ),
       body: SafeArea(
-        child: BlocBuilder<StatisticsCubit, StatisticsState>(
-          builder: (context, state) {
-            return switch (state) {
-              StatisticsIdle() => const SizedBox.shrink(),
-              StatisticsLoading() => const AppLoadingIndicator(),
-              StatisticsSuccess() => _buildSuccess(context, state),
-              StatisticsFailure(:final message) => AppErrorView(
-                message: message,
-                onRetry: _onRetry,
-              ),
-            };
-          },
-        ),
+        child: switch (state) {
+          StatisticsIdle() => const SizedBox.shrink(),
+          StatisticsLoading() => const AppLoadingIndicator(),
+          StatisticsSuccess() => _buildSuccess(context, state),
+          StatisticsFailure(:final message) => AppErrorView(
+              message: message,
+              onRetry: _onRetry,
+            ),
+        },
       ),
     );
   }
@@ -77,24 +89,17 @@ class _StatisticsViewState extends State<StatisticsView> {
     }
 
     return SingleChildScrollView(
-      padding: const EdgeInsets.all(16),
-      child: Column(
-        children: [
-          CustomAppBar(
-            title: l10n.statistics,
-            trailing: DropDownDateDialog(
-              onDatePick: (date) => {
-                context.read<StatisticsCubit>().changeMonth(date),
-              },
-              year: state.selectedMonth.year,
-              month: state.selectedMonth.month,
-            ),
-          ),
+      child: Padding(
+        padding: const EdgeInsets.all(16.0),
+        child: Column(
+          children: [
             MonthlyOverviewSection(overview: state.monthlyOverview),
+            const SizedBox(height: 16),
             CategoryBreakdownWidget(
               categoriesBreakdown: state.categoriesBreakdown,
             ),
-        ],
+          ],
+        ),
       ),
     );
   }