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,
+ ),
),
),
),