changed color theme to be black and added the ability to enter the amount in the recipient’s currency

frontend/pweb/lib/pages/dashboard/payouts/amount/feild.dart

@@ -2,36 +2,49 @@ import 'package:flutter/material.dart';
 
 import 'package:provider/provider.dart';
 
-import 'package:pshared/controllers/balance_mask/wallets.dart';
-import 'package:pshared/models/currency.dart';
 import 'package:pshared/utils/currency.dart';
 
 import 'package:pweb/controllers/payments/amount_field.dart';
+import 'package:pweb/models/payment/amount/mode.dart';
+import 'package:pweb/pages/dashboard/payouts/amount/mode/selector.dart';
 
 import 'package:pweb/generated/i18n/app_localizations.dart';
 
-
 class PaymentAmountField extends StatelessWidget {
   const PaymentAmountField();
 
   @override
   Widget build(BuildContext context) {
-    final currency = context.select<WalletsController, Currency?>(
-      (c) => c.selectedWallet?.currency,
-    );
-    final symbol = currency == null ? null : currencyCodeToSymbol(currency);
-
     final ui = context.watch<PaymentAmountFieldController>();
+    final loc = AppLocalizations.of(context)!;
+    final symbol = currencySymbolFromCode(ui.activeCurrencyCode);
 
-    return TextField(
-      controller: ui.textController,
-      keyboardType: const TextInputType.numberWithOptions(decimal: true),
-      decoration: InputDecoration(
-        labelText: AppLocalizations.of(context)!.amount,
-        border: const OutlineInputBorder(),
-        prefixText: symbol == null ? null : '$symbol\u00A0',
-      ),
-      onChanged: ui.handleChanged,
+    return Column(
+      crossAxisAlignment: CrossAxisAlignment.start,
+      children: [
+        if (ui.isReverseModeAvailable) ...[
+          PaymentAmountModeSelector(
+            selectedMode: ui.mode,
+            onModeChanged: ui.handleModeChanged,
+          ),
+          const SizedBox(height: 6),
+        ],
+        TextField(
+          controller: ui.textController,
+          focusNode: ui.focusNode,
+          keyboardType: const TextInputType.numberWithOptions(decimal: true),
+          decoration: InputDecoration(
+            labelText: loc.amount,
+            border: const OutlineInputBorder(),
+            prefixText: symbol == null ? null : '$symbol\u00A0',
+            helperText: switch (ui.mode) {
+              PaymentAmountMode.debit => loc.debitAmountLabel,
+              PaymentAmountMode.settlement => loc.expectedSettlementAmountLabel,
+            },
+          ),
+          onChanged: ui.handleChanged,
+        ),
+      ],
     );
   }
-}
+}