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/mode/button.dart

@@ -0,0 +1,43 @@
+import 'package:flutter/material.dart';
+
+
+class ModeButton extends StatelessWidget {
+  final String label;
+  final bool isSelected;
+  final VoidCallback onTap;
+
+  const ModeButton({
+    required this.label,
+    required this.isSelected,
+    required this.onTap,
+  });
+
+  @override
+  Widget build(BuildContext context) {
+    final theme = Theme.of(context);
+    return Material(
+      color: isSelected
+          ? theme.colorScheme.primary
+          : theme.colorScheme.onSecondary,
+      borderRadius: BorderRadius.circular(8),
+      child: InkWell(
+        borderRadius: BorderRadius.circular(8),
+        onTap: onTap,
+        child: Padding(
+          padding: const EdgeInsets.symmetric(horizontal: 8, vertical: 5),
+          child: Text(
+            label,
+            maxLines: 1,
+            overflow: TextOverflow.ellipsis,
+            style: theme.textTheme.labelSmall?.copyWith(
+              fontWeight: FontWeight.w500,
+              color: isSelected
+                  ? theme.colorScheme.onSecondary
+                  : theme.colorScheme.primary,
+            ),
+          ),
+        ),
+      ),
+    );
+  }
+}

frontend/pweb/lib/pages/dashboard/payouts/amount/mode/selector.dart

@@ -0,0 +1,53 @@
+import 'package:flutter/material.dart';
+
+import 'package:pweb/models/payment/amount/mode.dart';
+import 'package:pweb/pages/dashboard/payouts/amount/mode/button.dart';
+
+import 'package:pweb/generated/i18n/app_localizations.dart';
+
+
+class PaymentAmountModeSelector extends StatelessWidget {
+  final PaymentAmountMode selectedMode;
+  final ValueChanged<PaymentAmountMode> onModeChanged;
+
+  const PaymentAmountModeSelector({
+    super.key,
+    required this.selectedMode,
+    required this.onModeChanged,
+  });
+
+  @override
+  Widget build(BuildContext context) {
+    final theme = Theme.of(context);
+    final loc = AppLocalizations.of(context)!;
+    return Container(
+      padding: const EdgeInsets.all(2),
+      decoration: BoxDecoration(
+        color: theme.colorScheme.onSecondary,
+        borderRadius: BorderRadius.circular(10),
+        border: Border.all(
+          color: theme.colorScheme.outline,
+        ),
+      ),
+      child: Row(
+        children: [
+          Expanded(
+            child: ModeButton(
+              label: loc.debitAmountLabel,
+              isSelected: selectedMode == PaymentAmountMode.debit,
+              onTap: () => onModeChanged(PaymentAmountMode.debit),
+            ),
+          ),
+          const SizedBox(width: 2),
+          Expanded(
+            child: ModeButton(
+              label: loc.expectedSettlementAmountLabel,
+              isSelected: selectedMode == PaymentAmountMode.settlement,
+              onTap: () => onModeChanged(PaymentAmountMode.settlement),
+            ),
+          ),
+        ],
+      ),
+    );
+  }
+}