feat(backups): Update the UI of the encryption key modal

assets/translations/en.json

@@ -198,6 +198,10 @@
         "autobackup_set_period": "Set period",
         "autobackup_period_set": "Period set",
         "backups_encryption_key": "Encryption key",
+        "backups_encryption_key_subtitle": "Keep it in a safe place.",
+        "backups_encryption_key_copy": "Copy the encryption key",
+        "backups_encryption_key_show": "Show the encryption key",
+        "backups_encryption_key_description": "This key is used to encrypt your backups. If you lose it, you will not be able to restore your backups. Keep it in a safe place, as it will be useful if you ever need to restore from backups manually.",
         "pending_jobs": "Currently running backup jobs",
         "snapshots_title": "Snapshot list"
     },
@@ -538,4 +542,4 @@
         "reset_onboarding_description": "Reset onboarding switch to show onboarding screen again",
         "cubit_statuses": "Cubit loading statuses"
     }
-}
+}

lib/ui/pages/backups/backup_details.dart

@@ -156,9 +156,9 @@ class BackupDetailsPage extends StatelessWidget {
                     builder: (final BuildContext context) =>
                         DraggableScrollableSheet(
                       expand: false,
-                      maxChildSize: 0.6,
+                      maxChildSize: 0.9,
-                      minChildSize: 0.3,
+                      minChildSize: 0.5,
-                      initialChildSize: 0.3,
+                      initialChildSize: 0.7,
                       builder: (final context, final scrollController) =>
                           CopyEncryptionKeyModal(
                         scrollController: scrollController,
@@ -172,6 +172,9 @@ class BackupDetailsPage extends StatelessWidget {
           title: Text(
             'backup.backups_encryption_key'.tr(),
           ),
+          subtitle: Text(
+            'backup.backups_encryption_key_subtitle'.tr(),
+          ),
         ),
         const SizedBox(height: 16),
         if (backupJobs.isNotEmpty)

lib/ui/pages/backups/change_period_modal.dart

@@ -20,9 +20,6 @@ class ChangeAutobackupsPeriodModal extends StatefulWidget {
 
 class _ChangeAutobackupsPeriodModalState
     extends State<ChangeAutobackupsPeriodModal> {
-  // This is a modal with radio buttons to select the autobackup period
-  // Period might be none, selected from predefined list or custom
-  // Store in state the selected period
   Duration? selectedPeriod;
 
   static const List<Duration> autobackupPeriods = [

lib/ui/pages/backups/copy_encryption_key_modal.dart

@@ -20,6 +20,7 @@ class CopyEncryptionKeyModal extends StatefulWidget {
 
 class _CopyEncryptionKeyModalState extends State<CopyEncryptionKeyModal> {
   bool isKeyVisible = false;
+
   @override
   Widget build(final BuildContext context) {
     final String encryptionKey =
@@ -35,52 +36,77 @@ class _CopyEncryptionKeyModalState extends State<CopyEncryptionKeyModal> {
           textAlign: TextAlign.center,
         ),
         const SizedBox(height: 8),
-        Row(
+        Text(
-          crossAxisAlignment: CrossAxisAlignment.center,
+          'backup.backups_encryption_key_description'.tr(),
-          mainAxisAlignment: MainAxisAlignment.center,
+          style: Theme.of(context).textTheme.bodyMedium,
-          children: [
+          textAlign: TextAlign.center,
-            IconButton(
-              icon: Icon(
-                isKeyVisible
-                    ? Icons.visibility_outlined
-                    : Icons.visibility_off_outlined,
-              ),
-              onPressed: () {
-                setState(
-                  () {
-                    isKeyVisible = !isKeyVisible;
-                  },
-                );
-              },
-            ),
-            IconButton(
-              icon: const Icon(Icons.copy_all_outlined),
-              onPressed: () {
-                getIt<NavigationService>()
-                    .showSnackBar('basis.copied_to_clipboard'.tr());
-                Clipboard.setData(
-                  ClipboardData(
-                    text: encryptionKey,
-                  ),
-                );
-              },
-            ),
-          ],
         ),
-        Flexible(
+        const SizedBox(height: 8),
-          child: isKeyVisible
+        Container(
-              ? SelectableText(
+            decoration: BoxDecoration(
+              borderRadius: BorderRadius.circular(20),
+              color: Theme.of(context).colorScheme.surfaceVariant,
+            ),
+            padding: const EdgeInsets.all(16),
+            child: Stack(
+              children: [
+                SelectableText(
                   encryptionKey,
                   style: Theme.of(context).textTheme.titleMedium?.copyWith(
-                        color: Theme.of(context).colorScheme.onBackground,
+                        color: Theme.of(context).colorScheme.onSurfaceVariant,
-                      ),
-                )
-              : Text(
-                  ''.padLeft(encryptionKey.length, '●'),
-                  style: Theme.of(context).textTheme.titleMedium?.copyWith(
-                        color: Theme.of(context).colorScheme.onBackground,
                       ),
                 ),
+                Positioned.fill(
+                  child: InkWell(
+                    onTap: () {
+                      setState(
+                        () {
+                          isKeyVisible = !isKeyVisible;
+                        },
+                      );
+                    },
+                    child: AnimatedOpacity(
+                      duration: const Duration(milliseconds: 200),
+                      opacity: isKeyVisible ? 0 : 1,
+                      child: Container(
+                          color: Theme.of(context).colorScheme.surfaceVariant,
+                          child: Row(
+                            crossAxisAlignment: CrossAxisAlignment.center,
+                            mainAxisAlignment: MainAxisAlignment.center,
+                            children: [
+                              const Icon(Icons.visibility_outlined),
+                              const SizedBox(width: 8),
+                              Text(
+                                'backup.backups_encryption_key_show'.tr(),
+                                style: Theme.of(context)
+                                    .textTheme
+                                    .bodyMedium
+                                    ?.copyWith(
+                                      color: Theme.of(context)
+                                          .colorScheme
+                                          .onSurfaceVariant,
+                                    ),
+                              ),
+                            ],
+                          )),
+                    ),
+                  ),
+                ),
+              ],
+            )),
+        const SizedBox(height: 8),
+        FilledButton.icon(
+          onPressed: () {
+            getIt<NavigationService>()
+                .showSnackBar('basis.copied_to_clipboard'.tr());
+            Clipboard.setData(
+              ClipboardData(
+                text: encryptionKey,
+              ),
+            );
+          },
+          icon: const Icon(Icons.copy_all_outlined),
+          label: Text('backup.backups_encryption_key_copy'.tr()),
         ),
       ],
     );