From d975e52a04f58f9793d728dbd82287254f7cb35e Mon Sep 17 00:00:00 2001 From: William Jordan-Cooley Date: Thu, 27 Jun 2024 12:30:25 -0400 Subject: [PATCH 1/3] inlined tooltip --- lib/pages/chat/chat_event_list.dart | 2 +- .../choreographer/widgets/it_bar_buttons.dart | 9 +-- .../controllers/my_analytics_controller.dart | 1 + lib/pangea/utils/instructions.dart | 56 +++++++++++++++++-- .../chat/message_speech_to_text_card.dart | 6 +- lib/pangea/widgets/igc/pangea_rich_text.dart | 2 +- 6 files changed, 64 insertions(+), 12 deletions(-) diff --git a/lib/pages/chat/chat_event_list.dart b/lib/pages/chat/chat_event_list.dart index 048b54443..114aadd84 100644 --- a/lib/pages/chat/chat_event_list.dart +++ b/lib/pages/chat/chat_event_list.dart @@ -46,7 +46,7 @@ class ChatEventList extends StatelessWidget { // card, attach it on top of the first shown message WidgetsBinding.instance.addPostFrameCallback((_) { if (events.isEmpty) return; - controller.pangeaController.instructions.show( + controller.pangeaController.instructions.showInstructionsPopup( context, InstructionsEnum.clickMessage, events[0].eventId, diff --git a/lib/pangea/choreographer/widgets/it_bar_buttons.dart b/lib/pangea/choreographer/widgets/it_bar_buttons.dart index 815020d17..e06855f26 100644 --- a/lib/pangea/choreographer/widgets/it_bar_buttons.dart +++ b/lib/pangea/choreographer/widgets/it_bar_buttons.dart @@ -1,8 +1,8 @@ -import 'package:flutter/material.dart'; - import 'package:fluffychat/pangea/controllers/pangea_controller.dart'; import 'package:fluffychat/pangea/utils/instructions.dart'; import 'package:fluffychat/widgets/matrix.dart'; +import 'package:flutter/material.dart'; + import '../../widgets/common/bot_face_svg.dart'; import '../controllers/choreographer.dart'; import '../controllers/it_controller.dart'; @@ -37,7 +37,7 @@ class ITBotButton extends StatelessWidget { @override Widget build(BuildContext context) { - choreographer.pangeaController.instructions.show( + choreographer.pangeaController.instructions.showInstructionsPopup( context, InstructionsEnum.itInstructions, choreographer.itBotTransformTargetKey, @@ -46,7 +46,8 @@ class ITBotButton extends StatelessWidget { return IconButton( icon: const BotFace(width: 40.0, expression: BotExpression.right), - onPressed: () => choreographer.pangeaController.instructions.show( + onPressed: () => + choreographer.pangeaController.instructions.showInstructionsPopup( context, InstructionsEnum.itInstructions, choreographer.itBotTransformTargetKey, diff --git a/lib/pangea/controllers/my_analytics_controller.dart b/lib/pangea/controllers/my_analytics_controller.dart index 614fcf9db..067083e38 100644 --- a/lib/pangea/controllers/my_analytics_controller.dart +++ b/lib/pangea/controllers/my_analytics_controller.dart @@ -305,6 +305,7 @@ class MyAnalyticsController extends BaseController { // if there's new content to be sent, or if lastUpdated hasn't been // set yet for this room, send the analytics events + if (summaryContent.isNotEmpty || lastUpdated == null) { await SummaryAnalyticsEvent.sendSummaryAnalyticsEvent( analyticsRoom, diff --git a/lib/pangea/utils/instructions.dart b/lib/pangea/utils/instructions.dart index b9eecd799..4fe3ea627 100644 --- a/lib/pangea/utils/instructions.dart +++ b/lib/pangea/utils/instructions.dart @@ -14,17 +14,26 @@ import 'overlay.dart'; class InstructionsController { late PangeaController _pangeaController; + /// Instruction popup was closed by the user final Map _instructionsClosed = {}; + + /// Instructions that were shown in that session final Map _instructionsShown = {}; + /// Returns true if the instructions were turned off by the user via the toggle switch + bool? toggledOff(InstructionsEnum key) => + _pangeaController.pStoreService.read(key.toString()); + + /// We have these three methods to make sure that the instructions are not shown too much + InstructionsController(PangeaController pangeaController) { _pangeaController = pangeaController; } + /// Returns true if the instructions were turned off by the user + /// via the toggle switch bool wereInstructionsTurnedOff(InstructionsEnum key) => - _pangeaController.pStoreService.read(key.toString()) ?? - _instructionsClosed[key] ?? - false; + toggledOff(key) ?? _instructionsClosed[key] ?? false; Future updateEnableInstructions( InstructionsEnum key, @@ -35,7 +44,30 @@ class InstructionsController { value, ); - Future show( + // return a text widget with constainer that expands to fill a parent container + // and displays instructions text defined in the enum extension + Future getInlineTooltip( + BuildContext context, + InstructionsEnum key, + ) async { + if (wereInstructionsTurnedOff(key)) { + return const SizedBox(); + } + if (L10n.of(context) == null) { + ErrorHandler.logError( + m: "null context in ITBotButton.showCard", + s: StackTrace.current, + ); + return const SizedBox(); + } + if (_instructionsShown[key] ?? false) { + return const SizedBox(); + } + + return key.inlineTooltip(context); + } + + Future showInstructionsPopup( BuildContext context, InstructionsEnum key, String transformTargetKey, [ @@ -135,6 +167,22 @@ extension Copy on InstructionsEnum { : L10n.of(context)!.tooltipInstructionsBrowserBody; } } + + Widget inlineTooltip(BuildContext context) { + switch (this) { + case InstructionsEnum.itInstructions: + return Padding( + padding: const EdgeInsets.all(6.0), + child: Text( + body(context), + style: BotStyle.text(context), + ), + ); + default: + print('inlineTooltip not implemented for $this'); + return const SizedBox(); + } + } } class InstructionsToggle extends StatefulWidget { diff --git a/lib/pangea/widgets/chat/message_speech_to_text_card.dart b/lib/pangea/widgets/chat/message_speech_to_text_card.dart index 9099b9b95..68295789a 100644 --- a/lib/pangea/widgets/chat/message_speech_to_text_card.dart +++ b/lib/pangea/widgets/chat/message_speech_to_text_card.dart @@ -172,7 +172,8 @@ class MessageSpeechToTextCardState extends State { number: "${selectedToken?.confidence ?? speechToTextResponse!.transcript.confidence}%", toolTip: L10n.of(context)!.accuracy, - onPressed: () => MatrixState.pangeaController.instructions.show( + onPressed: () => MatrixState.pangeaController.instructions + .showInstructionsPopup( context, InstructionsEnum.tooltipInstructions, widget.messageEvent.eventId, @@ -184,7 +185,8 @@ class MessageSpeechToTextCardState extends State { number: wordsPerMinuteString != null ? "$wordsPerMinuteString" : "??", toolTip: L10n.of(context)!.wordsPerMinute, - onPressed: () => MatrixState.pangeaController.instructions.show( + onPressed: () => MatrixState.pangeaController.instructions + .showInstructionsPopup( context, InstructionsEnum.tooltipInstructions, widget.messageEvent.eventId, diff --git a/lib/pangea/widgets/igc/pangea_rich_text.dart b/lib/pangea/widgets/igc/pangea_rich_text.dart index bbd6868bf..05875c25c 100644 --- a/lib/pangea/widgets/igc/pangea_rich_text.dart +++ b/lib/pangea/widgets/igc/pangea_rich_text.dart @@ -115,7 +115,7 @@ class PangeaRichTextState extends State { @override Widget build(BuildContext context) { if (blur > 0) { - pangeaController.instructions.show( + pangeaController.instructions.showInstructionsPopup( context, InstructionsEnum.blurMeansTranslate, widget.pangeaMessageEvent.eventId, From 929e30a499f388ca3f879dae205aec181ee934b3 Mon Sep 17 00:00:00 2001 From: Kelrap Date: Fri, 28 Jun 2024 08:54:37 -0400 Subject: [PATCH 2/3] Design and insert inline tooltip --- assets/l10n/intl_en.arb | 4 +- lib/pages/chat/chat_event_list.dart | 2 +- .../choreographer/widgets/it_bar_buttons.dart | 2 +- lib/pangea/enum/instructions_enum.dart | 68 +++++++++ lib/pangea/models/user_model.dart | 2 +- lib/pangea/utils/instructions.dart | 133 +++++++----------- .../chat/message_speech_to_text_card.dart | 11 +- lib/pangea/widgets/chat/message_toolbar.dart | 2 + lib/pangea/widgets/igc/pangea_rich_text.dart | 2 +- 9 files changed, 141 insertions(+), 85 deletions(-) create mode 100644 lib/pangea/enum/instructions_enum.dart diff --git a/assets/l10n/intl_en.arb b/assets/l10n/intl_en.arb index cb319c9c7..134f46d0a 100644 --- a/assets/l10n/intl_en.arb +++ b/assets/l10n/intl_en.arb @@ -4058,5 +4058,7 @@ "suggestToSpaceDesc": "Suggested spaces will appear in the chat lists for their parent spaces", "practice": "Practice", "noLanguagesSet": "No languages set", - "noActivitiesFound": "No practice activities found for this message" + "noActivitiesFound": "No practice activities found for this message", + "hintTitle": "Hint:", + "speechToTextBody": "See how well you did by looking at your Accuracy and Words Per Minute scores" } \ No newline at end of file diff --git a/lib/pages/chat/chat_event_list.dart b/lib/pages/chat/chat_event_list.dart index 114aadd84..24508bb62 100644 --- a/lib/pages/chat/chat_event_list.dart +++ b/lib/pages/chat/chat_event_list.dart @@ -4,8 +4,8 @@ import 'package:fluffychat/pages/chat/events/message.dart'; import 'package:fluffychat/pages/chat/seen_by_row.dart'; import 'package:fluffychat/pages/chat/typing_indicators.dart'; import 'package:fluffychat/pages/user_bottom_sheet/user_bottom_sheet.dart'; +import 'package:fluffychat/pangea/enum/instructions_enum.dart'; import 'package:fluffychat/pangea/extensions/pangea_room_extension/pangea_room_extension.dart'; -import 'package:fluffychat/pangea/utils/instructions.dart'; import 'package:fluffychat/pangea/widgets/chat/locked_chat_message.dart'; import 'package:fluffychat/utils/account_config.dart'; import 'package:fluffychat/utils/adaptive_bottom_sheet.dart'; diff --git a/lib/pangea/choreographer/widgets/it_bar_buttons.dart b/lib/pangea/choreographer/widgets/it_bar_buttons.dart index e06855f26..77de39818 100644 --- a/lib/pangea/choreographer/widgets/it_bar_buttons.dart +++ b/lib/pangea/choreographer/widgets/it_bar_buttons.dart @@ -1,5 +1,5 @@ import 'package:fluffychat/pangea/controllers/pangea_controller.dart'; -import 'package:fluffychat/pangea/utils/instructions.dart'; +import 'package:fluffychat/pangea/enum/instructions_enum.dart'; import 'package:fluffychat/widgets/matrix.dart'; import 'package:flutter/material.dart'; diff --git a/lib/pangea/enum/instructions_enum.dart b/lib/pangea/enum/instructions_enum.dart new file mode 100644 index 000000000..8bcd3f3f9 --- /dev/null +++ b/lib/pangea/enum/instructions_enum.dart @@ -0,0 +1,68 @@ +import 'package:fluffychat/pangea/utils/bot_style.dart'; +import 'package:fluffychat/utils/platform_infos.dart'; +import 'package:flutter/material.dart'; +import 'package:flutter_gen/gen_l10n/l10n.dart'; + +enum InstructionsEnum { + itInstructions, + clickMessage, + blurMeansTranslate, + tooltipInstructions, + speechToText, +} + +extension Copy on InstructionsEnum { + String title(BuildContext context) { + switch (this) { + case InstructionsEnum.itInstructions: + return L10n.of(context)!.itInstructionsTitle; + case InstructionsEnum.clickMessage: + return L10n.of(context)!.clickMessageTitle; + case InstructionsEnum.blurMeansTranslate: + return L10n.of(context)!.blurMeansTranslateTitle; + case InstructionsEnum.tooltipInstructions: + return L10n.of(context)!.tooltipInstructionsTitle; + case InstructionsEnum.speechToText: + return L10n.of(context)!.hintTitle; + } + } + + String body(BuildContext context) { + switch (this) { + case InstructionsEnum.itInstructions: + return L10n.of(context)!.itInstructionsBody; + case InstructionsEnum.clickMessage: + return L10n.of(context)!.clickMessageBody; + case InstructionsEnum.blurMeansTranslate: + return L10n.of(context)!.blurMeansTranslateBody; + case InstructionsEnum.speechToText: + return L10n.of(context)!.speechToTextBody; + case InstructionsEnum.tooltipInstructions: + return PlatformInfos.isMobile + ? L10n.of(context)!.tooltipInstructionsMobileBody + : L10n.of(context)!.tooltipInstructionsBrowserBody; + } + } + + Widget inlineTooltip(BuildContext context) { + switch (this) { + case InstructionsEnum.speechToText: + return Column( + children: [ + Text( + title(context), + style: BotStyle.text(context), + ), + Text( + body(context), + style: BotStyle.text(context), + ), + // ), + ], + ); + default: + debugPrint('inlineTooltip not implemented for $this'); + return const SizedBox(); + } + } +} diff --git a/lib/pangea/models/user_model.dart b/lib/pangea/models/user_model.dart index f8e929a13..afe910610 100644 --- a/lib/pangea/models/user_model.dart +++ b/lib/pangea/models/user_model.dart @@ -4,8 +4,8 @@ import 'package:country_picker/country_picker.dart'; import 'package:fluffychat/pangea/constants/local.key.dart'; import 'package:fluffychat/pangea/constants/model_keys.dart'; import 'package:fluffychat/pangea/controllers/pangea_controller.dart'; +import 'package:fluffychat/pangea/enum/instructions_enum.dart'; import 'package:fluffychat/pangea/models/space_model.dart'; -import 'package:fluffychat/pangea/utils/instructions.dart'; import 'package:flutter/material.dart'; import 'package:flutter_gen/gen_l10n/l10n.dart'; diff --git a/lib/pangea/utils/instructions.dart b/lib/pangea/utils/instructions.dart index 4fe3ea627..a21b664a9 100644 --- a/lib/pangea/utils/instructions.dart +++ b/lib/pangea/utils/instructions.dart @@ -1,4 +1,4 @@ -import 'package:fluffychat/utils/platform_infos.dart'; +import 'package:fluffychat/pangea/enum/instructions_enum.dart'; import 'package:flutter/material.dart'; import 'package:flutter_gen/gen_l10n/l10n.dart'; @@ -14,24 +14,24 @@ import 'overlay.dart'; class InstructionsController { late PangeaController _pangeaController; + // We have these three methods to make sure that the instructions are not shown too much + /// Instruction popup was closed by the user final Map _instructionsClosed = {}; - /// Instructions that were shown in that session + /// Instruction popup has already been shown this session final Map _instructionsShown = {}; - /// Returns true if the instructions were turned off by the user via the toggle switch + /// Returns true if the user requested this popup not be shown again bool? toggledOff(InstructionsEnum key) => _pangeaController.pStoreService.read(key.toString()); - /// We have these three methods to make sure that the instructions are not shown too much - InstructionsController(PangeaController pangeaController) { _pangeaController = pangeaController; } - /// Returns true if the instructions were turned off by the user - /// via the toggle switch + /// Returns true if the instructions were closed + /// or turned off by the user via the toggle switch bool wereInstructionsTurnedOff(InstructionsEnum key) => toggledOff(key) ?? _instructionsClosed[key] ?? false; @@ -44,29 +44,6 @@ class InstructionsController { value, ); - // return a text widget with constainer that expands to fill a parent container - // and displays instructions text defined in the enum extension - Future getInlineTooltip( - BuildContext context, - InstructionsEnum key, - ) async { - if (wereInstructionsTurnedOff(key)) { - return const SizedBox(); - } - if (L10n.of(context) == null) { - ErrorHandler.logError( - m: "null context in ITBotButton.showCard", - s: StackTrace.current, - ); - return const SizedBox(); - } - if (_instructionsShown[key] ?? false) { - return const SizedBox(); - } - - return key.inlineTooltip(context); - } - Future showInstructionsPopup( BuildContext context, InstructionsEnum key, @@ -130,58 +107,56 @@ class InstructionsController { ), ); } -} -enum InstructionsEnum { - itInstructions, - clickMessage, - blurMeansTranslate, - tooltipInstructions, -} - -extension Copy on InstructionsEnum { - String title(BuildContext context) { - switch (this) { - case InstructionsEnum.itInstructions: - return L10n.of(context)!.itInstructionsTitle; - case InstructionsEnum.clickMessage: - return L10n.of(context)!.clickMessageTitle; - case InstructionsEnum.blurMeansTranslate: - return L10n.of(context)!.blurMeansTranslateTitle; - case InstructionsEnum.tooltipInstructions: - return L10n.of(context)!.tooltipInstructionsTitle; + /// Returns a widget that will be added to existing widget + /// that displays hint text defined in the enum extension + Widget getInlineTooltip( + BuildContext context, + InstructionsEnum key, + Function refreshOnClose, + ) { + if (wereInstructionsTurnedOff(key)) { + // Uncomment this line to make hint viewable again + // _instructionsClosed[key] = false; + return const SizedBox(); } - } - - String body(BuildContext context) { - switch (this) { - case InstructionsEnum.itInstructions: - return L10n.of(context)!.itInstructionsBody; - case InstructionsEnum.clickMessage: - return L10n.of(context)!.clickMessageBody; - case InstructionsEnum.blurMeansTranslate: - return L10n.of(context)!.blurMeansTranslateBody; - case InstructionsEnum.tooltipInstructions: - return PlatformInfos.isMobile - ? L10n.of(context)!.tooltipInstructionsMobileBody - : L10n.of(context)!.tooltipInstructionsBrowserBody; - } - } - - Widget inlineTooltip(BuildContext context) { - switch (this) { - case InstructionsEnum.itInstructions: - return Padding( - padding: const EdgeInsets.all(6.0), - child: Text( - body(context), - style: BotStyle.text(context), - ), - ); - default: - print('inlineTooltip not implemented for $this'); - return const SizedBox(); + if (L10n.of(context) == null) { + ErrorHandler.logError( + m: "null context in ITBotButton.showCard", + s: StackTrace.current, + ); + return const SizedBox(); } + return Column( + children: [ + Row( + children: [ + const Expanded( + child: Divider(), + ), + CircleAvatar( + radius: 10, + backgroundColor: + Theme.of(context).colorScheme.primary.withAlpha(50), + child: IconButton( + padding: EdgeInsets.zero, + icon: const Icon( + Icons.close_outlined, + size: 15, + ), + onPressed: () { + _instructionsClosed[key] = true; + refreshOnClose(); + }, + ), + ), + ], + ), + key.inlineTooltip(context), + const SizedBox(height: 9), + const Divider(), + ], + ); } } diff --git a/lib/pangea/widgets/chat/message_speech_to_text_card.dart b/lib/pangea/widgets/chat/message_speech_to_text_card.dart index 68295789a..9f76e060a 100644 --- a/lib/pangea/widgets/chat/message_speech_to_text_card.dart +++ b/lib/pangea/widgets/chat/message_speech_to_text_card.dart @@ -1,9 +1,9 @@ import 'dart:developer'; +import 'package:fluffychat/pangea/enum/instructions_enum.dart'; import 'package:fluffychat/pangea/matrix_event_wrappers/pangea_message_event.dart'; import 'package:fluffychat/pangea/models/speech_to_text_models.dart'; import 'package:fluffychat/pangea/utils/error_handler.dart'; -import 'package:fluffychat/pangea/utils/instructions.dart'; import 'package:fluffychat/pangea/widgets/chat/toolbar_content_loading_indicator.dart'; import 'package:fluffychat/pangea/widgets/common/icon_number_widget.dart'; import 'package:fluffychat/pangea/widgets/igc/card_error_widget.dart'; @@ -65,6 +65,10 @@ class MessageSpeechToTextCardState extends State { } } + void refreshOnCloseHint() { + setState(() {}); + } + TextSpan _buildTranscriptText(BuildContext context) { final Transcript transcript = speechToTextResponse!.transcript; final List spans = []; @@ -195,6 +199,11 @@ class MessageSpeechToTextCardState extends State { ), ], ), + MatrixState.pangeaController.instructions.getInlineTooltip( + context, + InstructionsEnum.speechToText, + refreshOnCloseHint, + ), ], ); } diff --git a/lib/pangea/widgets/chat/message_toolbar.dart b/lib/pangea/widgets/chat/message_toolbar.dart index 2468d6b96..13ebd3103 100644 --- a/lib/pangea/widgets/chat/message_toolbar.dart +++ b/lib/pangea/widgets/chat/message_toolbar.dart @@ -134,6 +134,8 @@ class ToolbarDisplayController { ? Alignment.bottomLeft : Alignment.topLeft, backgroundColor: const Color.fromRGBO(0, 0, 0, 1).withAlpha(100), + closePrevOverlay: + MatrixState.pangeaController.subscriptionController.isSubscribed, ); if (MatrixState.pAnyState.entries.isNotEmpty) { diff --git a/lib/pangea/widgets/igc/pangea_rich_text.dart b/lib/pangea/widgets/igc/pangea_rich_text.dart index 05875c25c..1dd1cd16e 100644 --- a/lib/pangea/widgets/igc/pangea_rich_text.dart +++ b/lib/pangea/widgets/igc/pangea_rich_text.dart @@ -3,10 +3,10 @@ import 'dart:ui'; import 'package:fluffychat/config/app_config.dart'; import 'package:fluffychat/pangea/controllers/pangea_controller.dart'; +import 'package:fluffychat/pangea/enum/instructions_enum.dart'; import 'package:fluffychat/pangea/matrix_event_wrappers/pangea_message_event.dart'; import 'package:fluffychat/pangea/models/representation_content_model.dart'; import 'package:fluffychat/pangea/utils/error_handler.dart'; -import 'package:fluffychat/pangea/utils/instructions.dart'; import 'package:fluffychat/pangea/widgets/chat/message_context_menu.dart'; import 'package:fluffychat/pangea/widgets/chat/message_toolbar.dart'; import 'package:fluffychat/widgets/matrix.dart'; From 493146120913155e2a92a06b666b10e4782fd309 Mon Sep 17 00:00:00 2001 From: Kelrap Date: Fri, 28 Jun 2024 10:56:42 -0400 Subject: [PATCH 3/3] Adjust hint box design --- lib/pangea/enum/instructions_enum.dart | 18 +++++-- lib/pangea/utils/instructions.dart | 66 +++++++++++++++----------- 2 files changed, 52 insertions(+), 32 deletions(-) diff --git a/lib/pangea/enum/instructions_enum.dart b/lib/pangea/enum/instructions_enum.dart index 8bcd3f3f9..16564ef07 100644 --- a/lib/pangea/enum/instructions_enum.dart +++ b/lib/pangea/enum/instructions_enum.dart @@ -49,9 +49,21 @@ extension Copy on InstructionsEnum { case InstructionsEnum.speechToText: return Column( children: [ - Text( - title(context), - style: BotStyle.text(context), + Row( + mainAxisAlignment: MainAxisAlignment.center, + children: [ + const Icon( + Icons.record_voice_over_outlined, + size: 20, + ), + const SizedBox( + width: 7, + ), + Text( + title(context), + style: BotStyle.text(context), + ), + ], ), Text( body(context), diff --git a/lib/pangea/utils/instructions.dart b/lib/pangea/utils/instructions.dart index a21b664a9..fb917dedd 100644 --- a/lib/pangea/utils/instructions.dart +++ b/lib/pangea/utils/instructions.dart @@ -44,6 +44,8 @@ class InstructionsController { value, ); + /// Instruction Card gives users tips on + /// how to use Pangea Chat's features Future showInstructionsPopup( BuildContext context, InstructionsEnum key, @@ -109,7 +111,7 @@ class InstructionsController { } /// Returns a widget that will be added to existing widget - /// that displays hint text defined in the enum extension + /// which displays hint text defined in the enum extension Widget getInlineTooltip( BuildContext context, InstructionsEnum key, @@ -127,39 +129,45 @@ class InstructionsController { ); return const SizedBox(); } - return Column( - children: [ - Row( - children: [ - const Expanded( - child: Divider(), - ), - CircleAvatar( - radius: 10, - backgroundColor: - Theme.of(context).colorScheme.primary.withAlpha(50), - child: IconButton( - padding: EdgeInsets.zero, - icon: const Icon( - Icons.close_outlined, - size: 15, - ), - onPressed: () { - _instructionsClosed[key] = true; - refreshOnClose(); - }, - ), - ), - ], + return Badge( + offset: const Offset(0, -7), + backgroundColor: Colors.transparent, + label: CircleAvatar( + radius: 10, + backgroundColor: Theme.of(context).colorScheme.primary.withAlpha(20), + child: IconButton( + padding: EdgeInsets.zero, + icon: const Icon( + Icons.close_outlined, + size: 15, + ), + onPressed: () { + _instructionsClosed[key] = true; + refreshOnClose(); + }, ), - key.inlineTooltip(context), - const SizedBox(height: 9), - const Divider(), - ], + ), + child: Container( + decoration: BoxDecoration( + borderRadius: BorderRadius.circular( + 10, + ), + color: Theme.of(context).colorScheme.primary.withAlpha(20), + // border: Border.all( + // color: Theme.of(context).colorScheme.primary.withAlpha(50), + // ), + ), + child: Padding( + padding: const EdgeInsets.all(10), + child: key.inlineTooltip(context), + ), + ), ); } } +/// User can toggle on to prevent Instruction Card +/// from appearing in future sessions class InstructionsToggle extends StatefulWidget { const InstructionsToggle({ super.key,