Add info popup in add account dialog

lib/l10n/app_de.arb

@@ -431,6 +431,13 @@
     "s_add_accounts": "Konten hinzufügen",
     "p_add_description": "Um einen QR-Code zu scannen, stelle sicher, dass der komplette Code sichtbar ist und wähle die entsprechende Schaltfläche. Du kannst auch ein gespeichertes Bild auf diesen Dialog ziehen. Alternativ kannst du die Kontoinformation auch manuell hinzufügen.",
     "l_drop_qr_description": "QR-Code per Drag & Drop hierhin ziehen, um Konten hinzuzufügen",
+    "p_add_account_three_ways": null,
+    "s_scanning": null,
+    "p_scanning_desc": null,
+    "s_drag_and_drop": null,
+    "p_drag_and_drop_desc": null,
+    "s_manually": null,
+    "p_manually_desc": null,
     "s_add_manually": "Manuell hinzufügen",
     "s_account_added": "Konto hinzugefügt",
     "l_account_add_failed": "Fehler beim Hinzufügen des Kontos: {message}",

lib/l10n/app_en.arb

@@ -431,6 +431,13 @@
     "s_add_accounts": "Add account(s)",
     "p_add_description": "To scan a QR code, make sure the full code is visible on screen and press the button below. You can also drag a saved image from a folder onto this dialog. If you have the account credential details in writing, use the manual entry instead.",
     "l_drop_qr_description": "Drop QR code to add account(s)",
+    "p_add_account_three_ways": "There's 3 ways of adding accounts.",
+    "s_scanning": "Scanning (recommended)",
+    "p_scanning_desc": "Before scanning a QR code, make sure the full code is visible on screen.",
+    "s_drag_and_drop": "Drag and drop",
+    "p_drag_and_drop_desc": "An image containing a QR code may be dropped anywhere in the Accounts application.",
+    "s_manually": "Manually",
+    "p_manually_desc": "Account credential details may be entered manually in the form.",
     "s_add_manually": "Add manually",
     "s_account_added": "Account added",
     "l_account_add_failed": "Failed adding account: {message}",

lib/l10n/app_fr.arb

@@ -431,6 +431,13 @@
     "s_add_accounts": "Ajouter compte(s)",
     "p_add_description": "Pour scanner un code QR, vérifiez que le code complet est visible à l'écran et appuyez sur le bouton ci-dessous. Vous pouvez aussi glisser une image d'un dossier vers cette boîte. Vous avez des infos d'identification de compte par écrit\u00a0? Utilisez la saisie manuelle.",
     "l_drop_qr_description": "Supprimer code QR pour ajouter compte(s)",
+    "p_add_account_three_ways": null,
+    "s_scanning": null,
+    "p_scanning_desc": null,
+    "s_drag_and_drop": null,
+    "p_drag_and_drop_desc": null,
+    "s_manually": null,
+    "p_manually_desc": null,
     "s_add_manually": "Ajout manuel",
     "s_account_added": "Compte ajouté",
     "l_account_add_failed": "Échec d'ajout du compte\u00a0: {message}",

lib/l10n/app_ja.arb

@@ -431,6 +431,13 @@
     "s_add_accounts": "アカウントを追加",
     "p_add_description": "QRコードをスキャンするには、画面にコード全体が表示されていることを確認してから下のボタンを押してください。保存した画像をフォルダからこのダイアログにドラッグすることもできます。アカウント認証情報の詳細を書面でお持ちの場合は、代わりに手動入力を使用してください。",
     "l_drop_qr_description": "QRコードをドロップしてアカウントを追加",
+    "p_add_account_three_ways": null,
+    "s_scanning": null,
+    "p_scanning_desc": null,
+    "s_drag_and_drop": null,
+    "p_drag_and_drop_desc": null,
+    "s_manually": null,
+    "p_manually_desc": null,
     "s_add_manually": "手動で追加",
     "s_account_added": "アカウントが追加されました",
     "l_account_add_failed": "アカウントを追加できませんでした：{message}",

lib/l10n/app_pl.arb

@@ -431,6 +431,13 @@
     "s_add_accounts": "Dodaj konta",
     "p_add_description": "W celu zeskanowania kodu QR, upewnij się, że pełny kod jest widoczny na ekranie a następnie naciśnij poniższy przycisk. Jeśli posiadasz dane uwierzytelniające do konta w tekstowej formie, skorzystaj z opcji ręcznego wprowadzania danych.",
     "l_drop_qr_description": "Upuść kod QR, aby dodać konto(a)",
+    "p_add_account_three_ways": null,
+    "s_scanning": null,
+    "p_scanning_desc": null,
+    "s_drag_and_drop": null,
+    "p_drag_and_drop_desc": null,
+    "s_manually": null,
+    "p_manually_desc": null,
     "s_add_manually": "Dodaj ręcznie",
     "s_account_added": "Konto zostało dodane",
     "l_account_add_failed": "Nie udało się dodać konta: {message}",

lib/l10n/app_sk.arb

@@ -431,6 +431,13 @@
     "s_add_accounts": "Pridať účet(-y)",
     "p_add_description": "Ak chcete naskenovať QR kód, uistite sa, že je na obrazovke viditeľný celý kód, a stlačte tlačidlo nižšie. Do tohto dialógového okna môžete tiež pretiahnuť uložený obrázok z priečinka. Ak máte poverovacie údaje k účtu v písomnej podobe, použite namiesto toho ručné zadanie.",
     "l_drop_qr_description": "Vložte QR kód a pridajte účet/-y",
+    "p_add_account_three_ways": null,
+    "s_scanning": null,
+    "p_scanning_desc": null,
+    "s_drag_and_drop": null,
+    "p_drag_and_drop_desc": null,
+    "s_manually": null,
+    "p_manually_desc": null,
     "s_add_manually": "Pridať ručne",
     "s_account_added": "Účet bol pridaný",
     "l_account_add_failed": "Nepodarilo sa pridať účet: {message}",

lib/l10n/app_vi.arb

@@ -431,6 +431,13 @@
     "s_add_accounts": "Thêm tài khoản(s)",
     "p_add_description": "Để quét mã QR, hãy chắc chắn rằng mã QR được hiển thị đầy đủ trên màn hình và nhấn nút bên dưới. Bạn cũng có thể kéo một hình ảnh đã lưu từ thư mục vào hộp thoại này. Nếu bạn có thông tin tài khoản dưới dạng văn bản, hãy sử dụng nhập thủ công thay vào đó.",
     "l_drop_qr_description": "Kéo mã QR để thêm tài khoản(s)",
+    "p_add_account_three_ways": null,
+    "s_scanning": null,
+    "p_scanning_desc": null,
+    "s_drag_and_drop": null,
+    "p_drag_and_drop_desc": null,
+    "s_manually": null,
+    "p_manually_desc": null,
     "s_add_manually": "Thêm thủ công",
     "s_account_added": "Tài khoản đã được thêm",
     "l_account_add_failed": "Thêm tài khoản thất bại: {message}",

lib/oath/views/add_account_page.dart

@@ -24,7 +24,6 @@ import 'package:logging/logging.dart';
 import 'package:material_symbols_icons/symbols.dart';
 
 import '../../android/oath/state.dart';
-import '../../app/app_url_launcher.dart';
 import '../../app/logging.dart';
 import '../../app/message.dart';
 import '../../app/models.dart';
@@ -41,6 +40,7 @@ import '../../widgets/app_text_field.dart';
 import '../../widgets/choice_filter_chip.dart';
 import '../../widgets/file_drop_overlay.dart';
 import '../../widgets/file_drop_target.dart';
+import '../../widgets/info_popup_button.dart';
 import '../../widgets/responsive_dialog.dart';
 import '../../widgets/utf8_utils.dart';
 import '../keys.dart' as keys;
@@ -374,6 +374,7 @@ class _OathAddAccountPageState extends ConsumerState<OathAddAccountPage>
     final withContext = ref.read(withContextProvider);
 
     final theme = Theme.of(context);
+    final textTheme = theme.textTheme;
     final colorScheme = theme.colorScheme;
 
     return FileDropTarget(
@@ -405,7 +406,7 @@ class _OathAddAccountPageState extends ConsumerState<OathAddAccountPage>
             child: Text(l10n.s_save, key: keys.saveButton),
           ),
         ],
-        builder: (context, _) => isLocked
+        builder: (context, fullScreen) => isLocked
             ? Padding(
                 padding: const EdgeInsets.symmetric(vertical: 18),
                 child:
@@ -473,12 +474,46 @@ class _OathAddAccountPageState extends ConsumerState<OathAddAccountPage>
                                   }
                                 },
                               ),
-                              ActionChip(
-                                avatar: Icon(Symbols.help),
-                                label: Text(l10n.s_learn_more),
-                                onPressed: () {
-                                  launchDocumentationUrl();
-                                },
+                              InfoPopupButton(
+                                size: 30,
+                                iconSize: 20,
+                                displayDialog: fullScreen,
+                                infoText: RichText(
+                                  text: TextSpan(
+                                    style: textTheme.bodySmall?.copyWith(
+                                      color: colorScheme.onSurfaceVariant,
+                                    ),
+                                    children: [
+                                      TextSpan(
+                                        text: l10n.p_add_account_three_ways,
+                                      ),
+                                      TextSpan(text: '\n' * 2),
+                                      TextSpan(
+                                        text: l10n.s_scanning,
+                                        style: textTheme.bodySmall?.copyWith(
+                                            fontWeight: FontWeight.w700),
+                                      ),
+                                      TextSpan(text: '\n'),
+                                      TextSpan(text: l10n.p_scanning_desc),
+                                      TextSpan(text: '\n' * 2),
+                                      TextSpan(
+                                        text: l10n.s_drag_and_drop,
+                                        style: textTheme.bodySmall?.copyWith(
+                                            fontWeight: FontWeight.w700),
+                                      ),
+                                      TextSpan(text: '\n'),
+                                      TextSpan(text: l10n.p_drag_and_drop_desc),
+                                      TextSpan(text: '\n' * 2),
+                                      TextSpan(
+                                        text: l10n.s_manually,
+                                        style: textTheme.bodySmall?.copyWith(
+                                            fontWeight: FontWeight.w700),
+                                      ),
+                                      TextSpan(text: '\n'),
+                                      TextSpan(text: l10n.p_manually_desc)
+                                    ],
+                                  ),
+                                ),
                               )
                             ],
                           ),