Merge pull request #109 from AndreaDiazCorreia/feat/issue-105

Fix UI improvements in the Create Order screen

Author: grunch

lib/features/order/screens/add_order_screen.dart

@@ -1,4 +1,5 @@
 import 'package:flutter/material.dart';
+import 'package:flutter/services.dart';
 import 'package:flutter_riverpod/flutter_riverpod.dart';
 import 'package:go_router/go_router.dart';
 import 'package:mostro_mobile/data/models/enums/order_type.dart';
@@ -187,8 +188,15 @@ class _AddOrderScreenState extends ConsumerState<AddOrderScreen> {
                                 if (!_marketRate && (value == null || value.isEmpty)) {
                                   return 'Please enter sats amount';
                                 }
+                                if (!_marketRate && !RegExp(r'^[0-9]+$').hasMatch(value!)) {
+                                  return 'Please enter numbers only';
+                                }
                                 return null;
                               },
+                              // Restricting input to numbers only
+                              inputFormatters: [
+                                FilteringTextInputFormatter.digitsOnly,
+                              ],
                             ),
                           ),
                         ],

lib/features/order/widgets/form_section.dart

@@ -7,6 +7,7 @@ class FormSection extends StatelessWidget {
   final Color iconBackgroundColor;
   final Widget child;
   final Widget? extraContent;
+  final String? infoTooltip;
 
   const FormSection({
     super.key,
@@ -15,6 +16,7 @@ class FormSection extends StatelessWidget {
     required this.iconBackgroundColor,
     required this.child,
     this.extraContent,
+    this.infoTooltip,
   });
 
   @override
@@ -29,12 +31,69 @@ class FormSection extends StatelessWidget {
         children: [
           Padding(
             padding: const EdgeInsets.fromLTRB(16, 16, 16, 8),
-            child: Text(
-              title,
-              style: TextStyle(
-                color: Colors.white.withOpacity(0.7),
-                fontSize: 14,
-              ),
+            child: Row(
+              children: [
+                Text(
+                  title,
+                  style: TextStyle(
+                    color: Colors.white.withOpacity(0.7),
+                    fontSize: 14,
+                  ),
+                ),
+                if (infoTooltip != null) ...[  
+                  const SizedBox(width: 4),
+                  GestureDetector(
+                    onTap: () {
+                      showDialog(
+                        context: context,
+                        builder: (context) => Dialog(
+                          shape: RoundedRectangleBorder(
+                            borderRadius: BorderRadius.circular(12),
+                          ),
+                          backgroundColor: const Color(0xFF1E2230),
+                          child: Padding(
+                            padding: const EdgeInsets.all(20.0),
+                            child: Column(
+                              mainAxisSize: MainAxisSize.min,
+                              children: [
+                                Padding(
+                                  padding: const EdgeInsets.symmetric(horizontal: 8.0, vertical: 12.0),
+                                  child: Text(
+                                    infoTooltip!,
+                                    style: const TextStyle(color: Colors.white, fontSize: 16, height: 1.4),
+                                    textAlign: TextAlign.center,
+                                  ),
+                                ),
+                                const SizedBox(height: 16),
+                                SizedBox(
+                                  width: double.infinity,
+                                  child: ElevatedButton(
+                                    style: ElevatedButton.styleFrom(
+                                      backgroundColor: const Color(0xFF8CC63F),
+                                      foregroundColor: Colors.black,
+                                      shape: RoundedRectangleBorder(
+                                        borderRadius: BorderRadius.circular(8),
+                                      ),
+                                      padding: const EdgeInsets.symmetric(vertical: 12),
+                                    ),
+                                    onPressed: () => Navigator.of(context).pop(),
+                                    child: const Text('OK', style: TextStyle(fontWeight: FontWeight.bold)),
+                                  ),
+                                ),
+                              ],
+                            ),
+                          ),
+                        ),
+                      );
+                    },
+                    child: Icon(
+                      Icons.info_outline,
+                      size: 14,
+                      color: AppTheme.textSubtle,
+                    ),
+                  ),
+                ],
+              ],
             ),
           ),
           Container(

lib/features/order/widgets/premium_section.dart

@@ -14,9 +14,9 @@ class PremiumSection extends StatelessWidget {
 
   @override
   Widget build(BuildContext context) {
-    // Define the premium value display as the icon
+    // Define the premium value display as the icon - showing only whole numbers
     final premiumValueIcon = Text(
-      value.toStringAsFixed(1),
+      value.round().toString(),
       style: const TextStyle(color: AppTheme.textPrimary, fontSize: 14),
     );
 
@@ -25,6 +25,7 @@ class PremiumSection extends StatelessWidget {
       title: 'Premium (%) ',
       icon: premiumValueIcon,
       iconBackgroundColor: AppTheme.purpleAccent, // Purple color for premium
+      infoTooltip: 'Adjust how much above or below the market price you want your offer. By default, it\'s set to 0%, with no premium or discount, so if you don\'t want to change the price, you can leave it as is.',
       child: Column(
         crossAxisAlignment: CrossAxisAlignment.start,
         children: [
@@ -64,18 +65,6 @@ class PremiumSection extends StatelessWidget {
           ),
         ],
       ),
-      // Add an info icon as extra content
-      extraContent: Padding(
-        padding: const EdgeInsets.only(right: 16, bottom: 8),
-        child: Align(
-          alignment: Alignment.centerRight,
-          child: Icon(
-            Icons.info_outline,
-            size: 14,
-            color: AppTheme.textSubtle,
-          ),
-        ),
-      ),
     );
   }
 }

lib/features/order/widgets/price_type_section.dart

@@ -25,12 +25,13 @@ class PriceTypeSection extends StatelessWidget {
       title: 'Price type',
       icon: priceTypeIcon,
       iconBackgroundColor: AppTheme.purpleAccent.withOpacity(0.3), // Purple color consistent with other sections
+      infoTooltip: '• Select Market Price if you want to use the price that Bitcoin has when someone takes your offer.\n• Select Fixed Price if you want to define the exact amount of Bitcoin you will exchange.',
       child: Row(
         mainAxisAlignment: MainAxisAlignment.spaceBetween,
         children: [
-          const Text(
-            'Market price',
-            style: TextStyle(
+          Text(
+            isMarketRate ? 'Market price' : 'Fixed price',
+            style: const TextStyle(
                 color: AppTheme.textPrimary, fontWeight: FontWeight.w500),
           ),
           Row(
@@ -53,18 +54,6 @@ class PriceTypeSection extends StatelessWidget {
           ),
         ],
       ),
-      // Add info icon as extra content
-      extraContent: Padding(
-        padding: const EdgeInsets.only(right: 16, bottom: 8),
-        child: Align(
-          alignment: Alignment.centerRight,
-          child: Icon(
-            Icons.info_outline,
-            size: 14,
-            color: AppTheme.textSubtle,
-          ),
-        ),
-      ),
     );
   }
 }