kasy-cli 1.37.1 → 1.39.0

package/templates/firebase/lib/features/settings/ui/components/admin/send_push_notification_page.dart

@@ -1,19 +1,31 @@
 import 'package:flutter/material.dart';
 import 'package:flutter_riverpod/flutter_riverpod.dart';
-import 'package:go_router/go_router.dart';
-import 'package:kasy_kit/components/kasy_app_bar.dart';
 import 'package:kasy_kit/components/kasy_button.dart';
+import 'package:kasy_kit/components/kasy_drop_down.dart';
+import 'package:kasy_kit/components/kasy_tabs.dart';
 import 'package:kasy_kit/components/kasy_text_area.dart';
 import 'package:kasy_kit/components/kasy_text_field.dart';
+import 'package:kasy_kit/core/config/features.dart';
 import 'package:kasy_kit/core/theme/theme.dart';
 import 'package:kasy_kit/core/toast/toast_service.dart';
 import 'package:kasy_kit/core/widgets/kasy_scroll_behavior.dart';
 import 'package:kasy_kit/features/notifications/api/notifications_api.dart';
 import 'package:kasy_kit/features/settings/ui/components/admin/send_push_notifier.dart';
-import 'package:kasy_kit/features/settings/ui/widgets/settings_tile.dart';
 import 'package:kasy_kit/i18n/translations.g.dart';
 import 'package:package_info_plus/package_info_plus.dart';
 
+/// Same canonical pattern the auth `Email` value object validates against — an
+/// address must be well-formed before it can join the recipient list.
+final RegExp _emailPattern = RegExp(
+  r'^(([^<>()[\]\\.,;:\s@\"]+(\.[^<>()[\]\\.,;:\s@\"]+)*)|(\".+\"))@((\[[0-9]{1,3}\.[0-9]{1,3}\.[0-9]{1,3}\.[0-9]{1,3}\])|(([a-zA-Z\-0-9]+\.)+[a-zA-Z]{2,}))$',
+);
+
+bool _isValidEmail(String value) => _emailPattern.hasMatch(value.trim());
+
+/// Default push destination: the in-app notifications list. Mirrors the
+/// fallback in `Notification.onTap` (no route sent → `/notifications`).
+const String _defaultRoute = '/notifications';
+
 class SendPushNotificationPage extends ConsumerStatefulWidget {
   const SendPushNotificationPage({super.key});
 
@@ -27,7 +39,6 @@ class _SendPushNotificationPageState
   final _titleCtrl = TextEditingController();
   final _bodyCtrl = TextEditingController();
   final _imageCtrl = TextEditingController();
-  final _routeCtrl = TextEditingController();
   final _emailCtrl = TextEditingController();
 
   // Explicit FocusNodes for all fields keeps the keyboard open when switching.
@@ -35,12 +46,16 @@ class _SendPushNotificationPageState
   final _titleFocus = FocusNode();
   final _bodyFocus = FocusNode();
   final _imageFocus = FocusNode();
-  final _routeFocus = FocusNode();
 
   bool _sendToAll = false;
   final List<String> _emails = [];
   String _appName = '';
 
+  /// Page the app opens when the user taps the notification. Defaults to the
+  /// notifications list (the same fallback `Notification.onTap` uses when no
+  /// route is sent), and the admin can repoint it to any available page.
+  String _route = _defaultRoute;
+
   @override
   void initState() {
     super.initState();
@@ -54,21 +69,26 @@ class _SendPushNotificationPageState
     _titleCtrl.dispose();
     _bodyCtrl.dispose();
     _imageCtrl.dispose();
-    _routeCtrl.dispose();
     _emailCtrl.dispose();
     _emailFocus.dispose();
     _titleFocus.dispose();
     _bodyFocus.dispose();
     _imageFocus.dispose();
-    _routeFocus.dispose();
     super.dispose();
   }
 
-  void _addEmail() {
+  /// The "add" button stays disabled until the field holds a well-formed,
+  /// not-yet-listed e-mail — so it never adds blanks, malformed strings, or
+  /// duplicates (the Enter key shares this guard via [_addEmail]).
+  bool get _canAddEmail {
     final email = _emailCtrl.text.trim();
-    if (email.isEmpty || _emails.contains(email)) return;
+    return _isValidEmail(email) && !_emails.contains(email);
+  }
+
+  void _addEmail() {
+    if (!_canAddEmail) return;
     setState(() {
-      _emails.add(email);
+      _emails.add(_emailCtrl.text.trim());
       _emailCtrl.clear();
     });
     _emailFocus.requestFocus();
@@ -78,6 +98,21 @@ class _SendPushNotificationPageState
     setState(() => _emails.remove(email));
   }
 
+  /// Clears every field after a successful send. The screen is a console
+  /// section (reached from the sidebar), so there is nothing to pop — we reset
+  /// in place so the admin can fire another notification right away.
+  void _resetForm() {
+    _titleCtrl.clear();
+    _bodyCtrl.clear();
+    _imageCtrl.clear();
+    _emailCtrl.clear();
+    setState(() {
+      _emails.clear();
+      _sendToAll = false;
+      _route = _defaultRoute;
+    });
+  }
+
   bool get _canSend {
     if (_titleCtrl.text.trim().isEmpty) return false;
     if (_bodyCtrl.text.trim().isEmpty) return false;
@@ -105,9 +140,7 @@ class _SendPushNotificationPageState
               : _imageCtrl.text.trim(),
           emails: List.from(_emails),
           sendToAll: _sendToAll,
-          route: _routeCtrl.text.trim().isEmpty
-              ? null
-              : _routeCtrl.text.trim(),
+          route: _route,
         );
   }
 
@@ -128,159 +161,367 @@ class _SendPushNotificationPageState
         ref
             .read(toastProvider)
             .success(title: tr.send_push_title, text: tr.send_push_success);
-        context.pop();
+        _resetForm();
       }
     });
 
-    final Widget submitButton = _canSend
-        ? KasyButton(
-            label: tr.send_push_send_button,
-            expand: true,
-            isLoading: state is AsyncLoading,
-            onPressed: _send,
+    Widget buildSubmit({required bool expand}) {
+      final KasyButton button = KasyButton(
+        label: tr.send_push_send_button,
+        expand: expand,
+        isLoading: state is AsyncLoading,
+        onPressed: _canSend ? _send : null,
+      );
+      // Disabled: tapping explains what's missing instead of doing nothing.
+      return _canSend
+          ? button
+          : GestureDetector(onTap: _onSendAttempt, child: button);
+    }
+
+    // Recipients: a segmented audience selector (everyone / specific) over the
+    // e-mail list, instead of a lone switch — reads as a deliberate choice.
+    final Widget recipients = Column(
+      crossAxisAlignment: CrossAxisAlignment.stretch,
+      mainAxisSize: MainAxisSize.min,
+      children: [
+        KasyTabs(
+          tabs: [tr.send_push_audience_all, tr.send_push_audience_specific],
+          selectedIndex: _sendToAll ? 0 : 1,
+          onTabSelected: (i) => setState(() => _sendToAll = i == 0),
+          mode: KasyTabsMode.fill,
+        ),
+        const SizedBox(height: KasySpacing.md),
+        if (_sendToAll)
+          Text(
+            tr.send_push_audience_all_hint,
+            style: context.textTheme.bodySmall?.copyWith(
+              color: context.colors.muted,
+              height: 1.35,
+            ),
           )
-        : GestureDetector(
-            onTap: _onSendAttempt,
-            child: KasyButton(
-              label: tr.send_push_send_button,
-              expand: true,
-              onPressed: null,
+        else
+          _EmailsSection(
+            emails: _emails,
+            controller: _emailCtrl,
+            focusNode: _emailFocus,
+            onAdd: _addEmail,
+            onRemove: _removeEmail,
+            // Rebuild as the admin types so the add button enables/disables live.
+            onChanged: () => setState(() {}),
+            canAdd: _canAddEmail,
+            label: tr.send_push_email_label,
+            hint: tr.send_push_email_hint,
+          ),
+      ],
+    );
+
+    final Widget contentFields = Column(
+      mainAxisSize: MainAxisSize.min,
+      children: [
+        KasyTextField(
+          label: tr.send_push_title_label,
+          hint: tr.send_push_title_hint,
+          controller: _titleCtrl,
+          focusNode: _titleFocus,
+          maxLength: 64,
+          showRequiredIndicator: true,
+          // Secondary fill contrasts against the surface-colored section card —
+          // the primary (surface) fill would blend white-on-white.
+          variant: KasyTextFieldVariant.secondary,
+          textInputAction: TextInputAction.next,
+          onChanged: (_) => setState(() {}),
+          onEditingComplete: () => _bodyFocus.requestFocus(),
+        ),
+        const SizedBox(height: KasySpacing.md),
+        KasyTextArea(
+          label: tr.send_push_body_label,
+          hint: tr.send_push_body_hint,
+          controller: _bodyCtrl,
+          focusNode: _bodyFocus,
+          maxLength: 250,
+          showRequiredIndicator: true,
+          variant: KasyTextFieldVariant.secondary,
+          minLines: 3,
+          maxLines: 5,
+          onChanged: (_) => setState(() {}),
+        ),
+        const SizedBox(height: KasySpacing.md),
+        KasyTextField(
+          label: tr.send_push_image_label,
+          hint: tr.send_push_image_hint,
+          controller: _imageCtrl,
+          focusNode: _imageFocus,
+          variant: KasyTextFieldVariant.secondary,
+          onChanged: (_) => setState(() {}),
+          // Last text input on the form — close the keyboard on submit.
+          textInputAction: TextInputAction.done,
+          onEditingComplete: () => _imageFocus.unfocus(),
+        ),
+      ],
+    );
+
+    // Pick the landing page from the routes this build actually ships (the
+    // optional ones are feature-flagged, exactly like the router), instead of
+    // typing a raw path. Leaving the default sends the user to /notifications.
+    final Widget advancedFields = KasyDropDown<String>(
+      label: tr.send_push_route_label,
+      description: tr.send_push_route_description,
+      value: _route,
+      variant: KasyTextFieldVariant.secondary,
+      onChanged: (route) => setState(() => _route = route),
+      items: <KasyDropDownItem<String>>[
+        KasyDropDownItem(
+          value: '/notifications',
+          label: tr.send_push_route_notifications,
+        ),
+        KasyDropDownItem(value: '/', label: tr.send_push_route_home),
+        KasyDropDownItem(
+          value: '/settings',
+          label: tr.send_push_route_settings,
+        ),
+        if (withRevenuecat)
+          KasyDropDownItem(
+            value: '/premium',
+            label: tr.send_push_route_premium,
+          ),
+        if (withLocalReminders)
+          KasyDropDownItem(
+            value: '/reminder',
+            label: tr.send_push_route_reminder,
+          ),
+        if (withFeedback)
+          KasyDropDownItem(
+            value: '/feedback',
+            label: tr.send_push_route_feedback,
+          ),
+      ],
+    );
+
+    final Widget formColumn = Column(
+      crossAxisAlignment: CrossAxisAlignment.stretch,
+      children: [
+        _FormSection(label: tr.send_push_section_recipients, child: recipients),
+        const SizedBox(height: KasySpacing.lg),
+        _FormSection(label: tr.send_push_section_content, child: contentFields),
+        const SizedBox(height: KasySpacing.lg),
+        _FormSection(label: tr.send_push_section_advanced, child: advancedFields),
+        // Send closes the form (route is optional), so the button flows right
+        // after the last section and scrolls with the content — not pinned.
+        const SizedBox(height: KasySpacing.lg),
+        buildSubmit(expand: true),
+      ],
+    );
+
+    final Widget previewPanel = Column(
+      crossAxisAlignment: CrossAxisAlignment.stretch,
+      mainAxisSize: MainAxisSize.min,
+      children: [
+        Padding(
+          padding: const EdgeInsets.only(
+            left: KasySpacing.xs,
+            bottom: KasySpacing.smd,
+          ),
+          child: Text(
+            tr.send_push_preview_label.toUpperCase(),
+            style: context.kasyTextTheme.sectionLabel.copyWith(
+              color: context.colors.muted,
             ),
-          );
+          ),
+        ),
+        _NotificationPreview(
+          appName: _appName,
+          title: _titleCtrl.text,
+          body: _bodyCtrl.text,
+          imageUrl: _imageCtrl.text,
+        ),
+      ],
+    );
 
-    return Scaffold(
-      // resizeToAvoidBottomInset: true (default) — button rises with keyboard.
-      body: Stack(
-        fit: StackFit.expand,
-        children: [
-          Positioned.fill(
-            child: ScrollConfiguration(
-              behavior: const KasyKitScrollBehavior(),
-              child: CustomScrollView(
-                // Drag down to dismiss keyboard — the professional standard.
-                keyboardDismissBehavior:
-                    ScrollViewKeyboardDismissBehavior.onDrag,
-                slivers: kasyOverlayPaddedSlivers(
-                  context,
-                  contentPadding: EdgeInsets.fromLTRB(
-                    KasySpacing.pageHorizontalGutter,
-                    KasySpacing.belowChromeContentGap,
-                    KasySpacing.pageHorizontalGutter,
-                    MediaQuery.paddingOf(context).bottom +
-                        52.0 +
-                        KasySpacing.md * 2,
+    const double gutter = KasySpacing.pageHorizontalGutter;
+
+    // Body-only: the admin shell supplies the chrome (web header on desktop,
+    // titled app bar on tablet/phone). Wide viewports get two columns (form +
+    // a fixed live preview); narrow stacks the preview on top. The send button
+    // flows at the end of the form and scrolls with it (not pinned).
+    return LayoutBuilder(
+      builder: (context, constraints) {
+        final bool wide = constraints.maxWidth >= 820;
+        // Clear the home indicator / nav bar below the last control.
+        final double bottomInset =
+            MediaQuery.paddingOf(context).bottom + KasySpacing.xl;
+
+        SingleChildScrollView scroll({
+          required EdgeInsets padding,
+          required Widget child,
+        }) => SingleChildScrollView(
+          // Drag down to dismiss keyboard — the professional standard.
+          keyboardDismissBehavior: ScrollViewKeyboardDismissBehavior.onDrag,
+          padding: padding,
+          child: child,
+        );
+
+        // Wide: only the form scrolls; the live preview stays FIXED beside it.
+        // Narrow: the preview sits on top and the whole stack scrolls.
+        final Widget bodyContent = wide
+            ? Center(
+                child: ConstrainedBox(
+                  constraints: const BoxConstraints(maxWidth: 1100),
+                  child: Row(
+                    crossAxisAlignment: CrossAxisAlignment.start,
+                    children: [
+                      Expanded(
+                        child: scroll(
+                          padding: EdgeInsets.fromLTRB(
+                            gutter,
+                            KasySpacing.belowChromeContentGap,
+                            0,
+                            bottomInset,
+                          ),
+                          child: formColumn,
+                        ),
+                      ),
+                      const SizedBox(width: KasySpacing.xl),
+                      Padding(
+                        padding: const EdgeInsets.fromLTRB(
+                          0,
+                          KasySpacing.belowChromeContentGap,
+                          gutter,
+                          KasySpacing.xl,
+                        ),
+                        child: SizedBox(width: 340, child: previewPanel),
+                      ),
+                    ],
                   ),
-                  slivers: [
-                    SliverToBoxAdapter(
+                ),
+              )
+            : Stack(
+                children: [
+                  // The form scrolls; the live preview stays PINNED at the top so
+                  // the admin watches the notification update while filling the
+                  // fields. An invisible copy of the preview at the head of the
+                  // scroll reserves exactly its height, so the first section
+                  // starts just below the banner and slides BEHIND it on scroll.
+                  Positioned.fill(
+                    child: scroll(
+                      padding: EdgeInsets.fromLTRB(
+                        gutter,
+                        KasySpacing.belowChromeContentGap,
+                        gutter,
+                        bottomInset,
+                      ),
                       child: Column(
                         crossAxisAlignment: CrossAxisAlignment.stretch,
                         children: [
-                          Padding(
-                            padding: const EdgeInsets.only(
-                              left: KasySpacing.xs,
-                              bottom: KasySpacing.sm,
-                            ),
-                            child: Text(
-                              tr.send_push_preview_label.toUpperCase(),
-                              style: context.kasyTextTheme.sectionLabel.copyWith(
-                                color: context.colors.muted,
-                              ),
-                            ),
-                          ),
-                          _NotificationPreview(
-                            appName: _appName,
-                            title: _titleCtrl.text,
-                            body: _bodyCtrl.text,
-                            imageUrl: _imageCtrl.text,
+                          Visibility(
+                            visible: false,
+                            maintainSize: true,
+                            maintainAnimation: true,
+                            maintainState: true,
+                            child: previewPanel,
                           ),
                           const SizedBox(height: KasySpacing.lg),
-                          SettingsSwitchTile(
-                            icon: KasyIcons.notificationActive,
-                            title: tr.send_push_to_all,
-                            value: _sendToAll,
-                            onChanged: (v) => setState(() => _sendToAll = v),
-                          ),
-                          const SettingsDivider(),
-                          const SizedBox(height: KasySpacing.lg),
-                          if (!_sendToAll) ...[
-                            _EmailsSection(
-                              emails: _emails,
-                              controller: _emailCtrl,
-                              focusNode: _emailFocus,
-                              onAdd: _addEmail,
-                              onRemove: _removeEmail,
-                              label: tr.send_push_email_label,
-                              hint: tr.send_push_email_hint,
+                          formColumn,
+                        ],
+                      ),
+                    ),
+                  ),
+                  // Pinned banner: an opaque page-colored band (so the scrolling
+                  // form disappears behind it) with a short fade at its bottom
+                  // edge. IgnorePointer lets drags over the preview still scroll
+                  // the form — the preview itself has no interaction.
+                  Positioned(
+                    top: 0,
+                    left: 0,
+                    right: 0,
+                    child: IgnorePointer(
+                      child: Column(
+                        mainAxisSize: MainAxisSize.min,
+                        children: [
+                          Container(
+                            color: context.colors.background,
+                            padding: const EdgeInsets.fromLTRB(
+                              gutter,
+                              KasySpacing.belowChromeContentGap,
+                              gutter,
+                              0,
                             ),
-                            const SizedBox(height: KasySpacing.lg),
-                          ],
-                          KasyTextField(
-                            label: tr.send_push_title_label,
-                            hint: tr.send_push_title_hint,
-                            controller: _titleCtrl,
-                            focusNode: _titleFocus,
-                            maxLength: 64,
-                            showRequiredIndicator: true,
-                            textInputAction: TextInputAction.next,
-                            onChanged: (_) => setState(() {}),
-                            onEditingComplete: () => _bodyFocus.requestFocus(),
-                          ),
-                          const SizedBox(height: KasySpacing.md),
-                          KasyTextArea(
-                            label: tr.send_push_body_label,
-                            hint: tr.send_push_body_hint,
-                            controller: _bodyCtrl,
-                            focusNode: _bodyFocus,
-                            maxLength: 250,
-                            showRequiredIndicator: true,
-                            minLines: 3,
-                            maxLines: 5,
-                            onChanged: (_) => setState(() {}),
-                          ),
-                          const SizedBox(height: KasySpacing.md),
-                          KasyTextField(
-                            label: tr.send_push_image_label,
-                            hint: tr.send_push_image_hint,
-                            controller: _imageCtrl,
-                            focusNode: _imageFocus,
-                            onChanged: (_) => setState(() {}),
-                            textInputAction: TextInputAction.next,
-                            onEditingComplete: () => _routeFocus.requestFocus(),
+                            child: previewPanel,
                           ),
-                          const SizedBox(height: KasySpacing.md),
-                          KasyTextField(
-                            label: tr.send_push_route_label,
-                            hint: tr.send_push_route_hint,
-                            controller: _routeCtrl,
-                            focusNode: _routeFocus,
-                            textInputAction: TextInputAction.done,
-                            onEditingComplete: () => _routeFocus.unfocus(),
+                          Container(
+                            height: KasySpacing.md,
+                            decoration: BoxDecoration(
+                              gradient: LinearGradient(
+                                begin: Alignment.topCenter,
+                                end: Alignment.bottomCenter,
+                                colors: [
+                                  context.colors.background,
+                                  context.colors.background.withValues(alpha: 0),
+                                ],
+                              ),
+                            ),
                           ),
                         ],
                       ),
                     ),
-                  ],
-                ),
-              ),
+                  ),
+                ],
+              );
+
+        return ScrollConfiguration(
+          // Hide the scrollbar: on the two-column layout it lands between the
+          // form and the live preview and reads as a stray mark next to the
+          // cards. The form is short enough not to need it.
+          behavior: const KasyKitScrollBehavior().copyWith(scrollbars: false),
+          child: bodyContent,
+        );
+      },
+    );
+  }
+}
+
+/// A labelled card grouping form fields — the console's clean section look
+/// (uppercase label + surface card with a hairline border and the component
+/// shadow), so Send push reads as the same product as the rest of the admin.
+class _FormSection extends StatelessWidget {
+  final String label;
+  final Widget child;
+  const _FormSection({required this.label, required this.child});
+
+  @override
+  Widget build(BuildContext context) {
+    return Column(
+      crossAxisAlignment: CrossAxisAlignment.stretch,
+      mainAxisSize: MainAxisSize.min,
+      children: [
+        Padding(
+          padding: const EdgeInsets.only(
+            left: KasySpacing.xs,
+            bottom: KasySpacing.smd,
+          ),
+          child: Text(
+            label.toUpperCase(),
+            style: context.kasyTextTheme.sectionLabel.copyWith(
+              color: context.colors.muted,
             ),
           ),
-          Positioned(
-            top: 0,
-            left: 0,
-            right: 0,
-            child: KasyAppBar(
-              title: tr.send_push_title,
-              onBack: () => context.pop(),
+        ),
+        DecoratedBox(
+          decoration: BoxDecoration(
+            color: context.colors.surface,
+            borderRadius: BorderRadius.circular(18),
+            border: Border.all(
+              color: context.colors.outline.withValues(
+                alpha: context.isDark ? 0.45 : 0.6,
+              ),
             ),
+            boxShadow: [KasyShadows.component(context)],
           ),
-          Positioned(
-            left: KasySpacing.pageHorizontalGutter,
-            right: KasySpacing.pageHorizontalGutter,
-            bottom: MediaQuery.paddingOf(context).bottom + KasySpacing.sm,
-            child: submitButton,
+          child: Padding(
+            padding: const EdgeInsets.all(KasySpacing.md),
+            child: child,
           ),
-        ],
-      ),
+        ),
+      ],
     );
   }
 }
@@ -291,6 +532,8 @@ class _EmailsSection extends StatelessWidget {
   final FocusNode focusNode;
   final VoidCallback onAdd;
   final void Function(String) onRemove;
+  final VoidCallback onChanged;
+  final bool canAdd;
   final String label;
   final String hint;
 
@@ -300,6 +543,8 @@ class _EmailsSection extends StatelessWidget {
     required this.focusNode,
     required this.onAdd,
     required this.onRemove,
+    required this.onChanged,
+    required this.canAdd,
     required this.label,
     required this.hint,
   });
@@ -319,6 +564,9 @@ class _EmailsSection extends StatelessWidget {
                 controller: controller,
                 focusNode: focusNode,
                 showRequiredIndicator: true,
+                variant: KasyTextFieldVariant.secondary,
+                contentType: KasyTextFieldContentType.email,
+                onChanged: (_) => onChanged(),
                 // "next" keeps keyboard open when pressing the action key.
                 textInputAction: TextInputAction.next,
                 onEditingComplete: onAdd,
@@ -328,10 +576,12 @@ class _EmailsSection extends StatelessWidget {
             Padding(
               padding: const EdgeInsets.only(bottom: 2),
               child: KasyButton.iconOnly(
-                icon: Icons.add,
-                onPressed: onAdd,
+                icon: Icons.add_rounded,
+                // Disabled (greyed, non-tappable) until the field holds a valid,
+                // non-duplicate e-mail.
+                onPressed: canAdd ? onAdd : null,
                 size: KasyButtonSize.small,
-                variant: KasyButtonVariant.soft,
+                iconGlyphSize: 20,
               ),
             ),
           ],
@@ -364,11 +614,16 @@ class _EmailChip extends StatelessWidget {
 
   @override
   Widget build(BuildContext context) {
+    // An e-mail is plain data the admin listed, not an action or a status — so
+    // it reads as a neutral pill (clean, color used in moderation), not an
+    // accent-blue tag. surfaceSecondary contrasts against the section card's
+    // surface in both modes; the text uses the normal foreground tone.
     return Container(
       padding: const EdgeInsets.symmetric(horizontal: 10, vertical: 5),
       decoration: BoxDecoration(
-        color: context.colors.primary.withValues(alpha: 0.10),
+        color: context.colors.surfaceSecondary,
         borderRadius: BorderRadius.circular(20),
+        border: Border.all(color: context.colors.border),
       ),
       child: Row(
         mainAxisSize: MainAxisSize.min,
@@ -376,7 +631,7 @@ class _EmailChip extends StatelessWidget {
           Text(
             email,
             style: context.textTheme.bodySmall?.copyWith(
-              color: context.colors.primary,
+              color: context.colors.onSurface,
               fontWeight: FontWeight.w500,
             ),
           ),
@@ -386,7 +641,7 @@ class _EmailChip extends StatelessWidget {
             child: Icon(
               Icons.close,
               size: 13,
-              color: context.colors.primary.withValues(alpha: 0.7),
+              color: context.colors.muted,
             ),
           ),
         ],