From ac050539c8bb5b0ecbfb920d9eebe15f3444e0c5 Mon Sep 17 00:00:00 2001
From: Kelrap <kel.raphael3@outlook.com>
Date: Mon, 22 Dec 2025 11:14:40 -0500
Subject: [PATCH] Add background to make dark mode icon stand out in own
 message grammar practice

---
 lib/pages/chat/events/html_message.dart       |  2 ++
 .../token_practice_button.dart                | 20 ++++++++++++++++---
 2 files changed, 19 insertions(+), 3 deletions(-)

diff --git a/lib/pages/chat/events/html_message.dart b/lib/pages/chat/events/html_message.dart
index b516ba4f0..09098f984 100644
--- a/lib/pages/chat/events/html_message.dart
+++ b/lib/pages/chat/events/html_message.dart
@@ -469,6 +469,8 @@ class HtmlMessage extends StatelessWidget {
                               ReadingAssistanceMode.practiceMode,
                         ),
                       ),
+                      addBackground: pangeaMessageEvent!.ownMessage &&
+                          Theme.of(context).brightness != Brightness.light,
                       width: tokenWidth,
                       textColor: textColor,
                     ),
diff --git a/lib/pangea/toolbar/message_practice/token_practice_button.dart b/lib/pangea/toolbar/message_practice/token_practice_button.dart
index 6293fb615..5a511ae13 100644
--- a/lib/pangea/toolbar/message_practice/token_practice_button.dart
+++ b/lib/pangea/toolbar/message_practice/token_practice_button.dart
@@ -31,6 +31,7 @@ class TokenPracticeButton extends StatelessWidget {
   final TextStyle textStyle;
   final double width;
   final Color textColor;
+  final bool addBackground;
 
   const TokenPracticeButton({
     super.key,
@@ -39,6 +40,7 @@ class TokenPracticeButton extends StatelessWidget {
     required this.textStyle,
     required this.width,
     required this.textColor,
+    this.addBackground = false,
   });
 
   TextStyle get _emojiStyle => TextStyle(
@@ -81,6 +83,7 @@ class TokenPracticeButton extends StatelessWidget {
             target: _activity,
             emojiStyle: _emojiStyle,
             width: tokenButtonHeight,
+            addBackground: addBackground,
           );
         } else if (practiceMode == MessagePracticeMode.wordMorph) {
           child = _MorphMatchButton(
@@ -246,6 +249,7 @@ class _NoActivityContentButton extends StatelessWidget {
   final PracticeTarget? target;
   final TextStyle emojiStyle;
   final double width;
+  final bool addBackground;
 
   const _NoActivityContentButton({
     required this.practiceMode,
@@ -253,6 +257,7 @@ class _NoActivityContentButton extends StatelessWidget {
     required this.target,
     required this.emojiStyle,
     required this.width,
+    required this.addBackground,
   });
 
   @override
@@ -283,9 +288,18 @@ class _NoActivityContentButton extends StatelessWidget {
           child: SizedBox(
             width: width,
             child: Center(
-              child: MorphIcon(
-                morphFeature: morphFeature,
-                morphTag: morphTag.lemma,
+              child: IconButton.filled(
+                style: IconButton.styleFrom(
+                  backgroundColor: addBackground
+                      ? Theme.of(context).colorScheme.surface.withAlpha(180)
+                      : Colors.white.withAlpha(0),
+                ),
+                padding: const EdgeInsets.all(4),
+                onPressed: () => {},
+                icon: MorphIcon(
+                  morphFeature: morphFeature,
+                  morphTag: morphTag.lemma,
+                ),
               ),
             ),
           ),