Add info popup button

This also adds a temporary info popup in the add OATH account dialog.

lib/oath/views/add_account_page.dart

@@ -370,6 +370,40 @@ class _OathAddAccountPageState extends ConsumerState<OathAddAccountPage>
       ),
       child: ResponsiveDialog(
         title: Text(l10n.s_add_account),
+        infoText: RichText(
+          text: TextSpan(
+            children: [
+              TextSpan(text: 'There is 3 ways of adding accounts.\n\n'),
+              TextSpan(
+                text: 'Scanning (recommended)\n',
+                style:
+                    textTheme.bodyMedium?.copyWith(fontWeight: FontWeight.w700),
+              ),
+              TextSpan(
+                text:
+                    'Before scanning a QR code, make sure the full code is visible on the screen.\n\n',
+              ),
+              TextSpan(
+                text: 'Drag and Drop\n',
+                style:
+                    textTheme.bodyMedium?.copyWith(fontWeight: FontWeight.w700),
+              ),
+              TextSpan(
+                text:
+                    'An image containing a QR code may be dropped anywhere in the Accounts application.\n\n',
+              ),
+              TextSpan(
+                text: 'Manually\n',
+                style:
+                    textTheme.bodyMedium?.copyWith(fontWeight: FontWeight.w700),
+              ),
+              TextSpan(
+                text:
+                    'Account credential details may be entered manually in the form.',
+              ),
+            ],
+          ),
+        ),
         actions: [
           TextButton(
             onPressed: isValid ? submit : null,

lib/widgets/info_popup_button.dart

@@ -0,0 +1,49 @@
+import 'package:flutter/material.dart';
+import 'package:material_symbols_icons/symbols.dart';
+
+import '../app/message.dart';
+import 'responsive_dialog.dart';
+
+class InfoPopupButton extends StatelessWidget {
+  final RichText infoText;
+  final bool showDialog;
+  const InfoPopupButton(
+      {super.key, required this.infoText, this.showDialog = false});
+
+  Widget _buildInfoContent(BuildContext context) {
+    return Padding(
+      padding: EdgeInsets.all(12.0),
+      child: infoText,
+    );
+  }
+
+  @override
+  Widget build(BuildContext context) {
+    if (!showDialog) {
+      return PopupMenuButton(
+        popUpAnimationStyle: AnimationStyle(duration: Duration.zero),
+        menuPadding: EdgeInsets.zero,
+        icon: Icon(Symbols.info),
+        itemBuilder: (context) {
+          return [
+            PopupMenuItem(enabled: false, child: _buildInfoContent(context))
+          ];
+        },
+      );
+    } else {
+      return IconButton(
+        onPressed: () {
+          // Show info content in dialog on smaller screens and mobile
+          showBlurDialog(
+            context: context,
+            builder: (context) => ResponsiveDialog(
+              forceDialog: true,
+              child: _buildInfoContent(context),
+            ),
+          );
+        },
+        icon: Icon(Symbols.info),
+      );
+    }
+  }
+}

lib/widgets/responsive_dialog.dart

@@ -19,21 +19,26 @@ import 'package:flutter_gen/gen_l10n/app_localizations.dart';
 import 'package:material_symbols_icons/symbols.dart';
 
 import '../core/state.dart';
+import 'info_popup_button.dart';
 
 class ResponsiveDialog extends StatefulWidget {
   final Widget? title;
   final Widget child;
+  final RichText? infoText;
   final List<Widget> actions;
   final Function()? onCancel;
   final bool allowCancel;
+  final bool forceDialog;
 
   const ResponsiveDialog({
     super.key,
     required this.child,
     this.title,
+    this.infoText,
     this.actions = const [],
     this.onCancel,
     this.allowCancel = true,
+    this.forceDialog = false,
   });
 
   @override
@@ -58,10 +63,32 @@ class _ResponsiveDialogState extends State<ResponsiveDialog> {
         : l10n.s_cancel;
   }
 
+  Widget? _buildDialogTitle(BuildContext context) {
+    if (widget.title != null) {
+      return Row(
+        mainAxisAlignment: MainAxisAlignment.spaceBetween,
+        children: [
+          widget.title!,
+          if (widget.infoText != null)
+            InfoPopupButton(infoText: widget.infoText!)
+        ],
+      );
+    }
+    return null;
+  }
+
   Widget _buildFullscreen(BuildContext context) => Scaffold(
         appBar: AppBar(
           title: widget.title,
-          actions: widget.actions,
+          centerTitle: true,
+          actions: [
+            if (widget.infoText != null)
+              InfoPopupButton(
+                infoText: widget.infoText!,
+                showDialog: true,
+              ),
+            ...widget.actions,
+          ],
           leading: IconButton(
               tooltip: _getCancelText(context),
               icon: const Icon(Symbols.close),
@@ -82,7 +109,7 @@ class _ResponsiveDialogState extends State<ResponsiveDialog> {
     return PopScope(
       canPop: widget.allowCancel,
       child: AlertDialog(
-        title: widget.title,
+        title: _buildDialogTitle(context),
         titlePadding: const EdgeInsets.only(top: 24, left: 18, right: 18),
         scrollable: true,
         contentPadding: const EdgeInsets.symmetric(vertical: 8),
@@ -124,7 +151,7 @@ class _ResponsiveDialogState extends State<ResponsiveDialog> {
               _hasLostFocus = true;
             }
           },
-          child: constraints.maxWidth < maxWidth
+          child: constraints.maxWidth < maxWidth && !widget.forceDialog
               ? _buildFullscreen(context)
               : _buildDialog(context),
         );