Security and Privacy section improved with UI

.changes/2639-security-privacy-section-improvement.md

@@ -0,0 +1 @@
+- [improvement] : Improved security and privacy UI on the activity page.

app/lib/common/themes/acter_theme.dart

@@ -61,7 +61,7 @@ class ActerTheme {
     dialogTheme: dialogTheme,
     bottomSheetTheme: bottomSheetTheme,
     elevatedButtonTheme: elevatedButtonTheme(colorScheme),
-    outlinedButtonTheme: outlinedButtonTheme,
+    outlinedButtonTheme: outlinedButtonTheme(colorScheme, textTheme),
     textButtonTheme: textButtonTheme(colorScheme),
     iconButtonTheme: iconButtonTheme,
     inputDecorationTheme: inputDecorationTheme,

app/lib/common/themes/colors/color_scheme.dart

@@ -11,12 +11,14 @@ Color backgroundColor = const Color(0xff0d0f11);
 
 //On colors
 Color whiteColor = Colors.white;
+Color warningColor = Colors.amber;
 
 Color pinFeatureColor = const Color(0xff7c4a4a);
 Color eventFeatureColor = const Color(0xff206a9a);
 Color taskFeatureColor = const Color(0xff406c6e);
 Color boastFeatureColor = Colors.blueGrey;
 
+
 var colorScheme = ColorScheme.dark(
   brightness: Brightness.dark,
   //Primary

app/lib/common/themes/components/button_theme.dart

@@ -4,7 +4,10 @@ import 'package:flutter/material.dart';
 ElevatedButtonThemeData elevatedButtonTheme(ColorScheme colors) =>
     ElevatedButtonThemeData(
       style: ElevatedButton.styleFrom(
-        padding: const EdgeInsets.all(18),
+        padding: const EdgeInsets.symmetric(
+          horizontal: 16,
+          vertical: 12,
+        ),
         elevation: 0,
         backgroundColor: colors.primary,
         foregroundColor: Colors.white,
@@ -38,16 +41,26 @@ TextButtonThemeData inlineTextButtonThemeMaker(ColorScheme colors) =>
       ),
     );
 
-final outlinedButtonTheme = OutlinedButtonThemeData(
-  style: OutlinedButton.styleFrom(
-    padding: const EdgeInsets.all(18),
-    shape: RoundedRectangleBorder(
-      borderRadius: BorderRadius.circular(12),
-    ),
-    foregroundColor: Colors.white,
-    backgroundColor: Colors.transparent,
-  ),
-);
+OutlinedButtonThemeData outlinedButtonTheme(ColorScheme colors, TextTheme textTheme) =>
+    OutlinedButtonThemeData(
+      style: OutlinedButton.styleFrom(
+        foregroundColor: colors.primary,
+        side: BorderSide(color: colors.primary),
+        shape: RoundedRectangleBorder(
+          borderRadius: BorderRadius.circular(10),
+        ),
+        padding: const EdgeInsets.symmetric(
+          horizontal: 16,
+          vertical: 12,
+        ),
+        textStyle: textTheme.titleMedium?.copyWith(
+          color: colors.primary,
+          fontSize: 15,
+        ),
+        minimumSize: Size.zero,
+        tapTargetSize: MaterialTapTargetSize.shrinkWrap,
+      ),
+    );
 
 TextButtonThemeData textButtonTheme(ColorScheme colors) => TextButtonThemeData(
       style: TextButton.styleFrom(

app/lib/features/activities/pages/activities_page.dart

@@ -4,9 +4,9 @@ import 'package:acter/common/providers/common_providers.dart';
 import 'package:acter/common/utils/routes.dart';
 import 'package:acter/common/widgets/empty_state_widget.dart';
 import 'package:acter/features/activities/providers/activities_providers.dart';
+import 'package:acter/features/backups/widgets/backup_state_widget.dart';
 import 'package:acter/features/invitations/providers/invitations_providers.dart';
 import 'package:acter/features/invitations/widgets/invitation_card.dart';
-import 'package:acter/features/backups/widgets/backup_state_widget.dart';
 import 'package:acter/features/home/providers/client_providers.dart';
 import 'package:acter/features/invitations/widgets/has_invites_tile.dart';
 import 'package:acter/features/labs/model/labs_features.dart';

app/lib/features/activities/widgets/security_privacy_widget.dart

@@ -0,0 +1,74 @@
+import 'package:flutter/material.dart';
+import 'package:flutter_riverpod/flutter_riverpod.dart';
+
+class SecurityPrivacyWidget extends ConsumerWidget {
+  final IconData icon;
+  final Color? iconColor;
+  final String title;
+  final String subtitle;
+  final List<Widget> actions;
+
+  const SecurityPrivacyWidget({
+    super.key,
+    required this.icon,
+    this.iconColor,
+    required this.title,
+    required this.subtitle,
+    required this.actions,
+  });
+
+  @override
+  Widget build(BuildContext context, WidgetRef ref) {
+    return Card(
+      shape: RoundedRectangleBorder(
+        borderRadius: BorderRadius.circular(12),
+      ),
+      elevation: 3,
+      child: Padding(
+        padding: const EdgeInsets.all(16.0),
+        child: Row(
+          crossAxisAlignment: CrossAxisAlignment.start,
+          children: [
+            buildLeadingIconUI(context),
+            const SizedBox(width: 8),
+            Expanded(
+              child: Column(
+                crossAxisAlignment: CrossAxisAlignment.start,
+                children: [
+                  buildTitleSubtitleUI(context),
+                  const SizedBox(height: 12),
+                  if (actions.isNotEmpty) Row(children: actions),
+                ],
+              ),
+            ),
+          ],
+        ),
+      ),
+    );
+  }
+
+  Widget buildLeadingIconUI(BuildContext context) {
+    return Icon(
+      icon,
+      size: 24,
+      color: iconColor ?? Theme.of(context).colorScheme.error,
+    );
+  }
+
+  Widget buildTitleSubtitleUI(BuildContext context) {
+    return Column(
+      crossAxisAlignment: CrossAxisAlignment.start,
+      children: [
+        Text(title, style: const TextStyle(fontWeight: FontWeight.bold)),
+        const SizedBox(height: 8),
+        ConstrainedBox(
+          key: Key('subtitle-key'),
+          constraints: BoxConstraints(
+            maxWidth: MediaQuery.of(context).size.width - 100,
+          ),
+          child: Text(subtitle, style: Theme.of(context).textTheme.bodyMedium),
+        ),
+      ],
+    );
+  }
+}

app/lib/features/backups/widgets/backup_state_widget.dart

@@ -1,3 +1,5 @@
+import 'package:acter/common/themes/colors/color_scheme.dart';
+import 'package:acter/features/activities/widgets/security_privacy_widget.dart';
 import 'package:acter/features/backups/dialogs/provide_recovery_key_dialog.dart';
 import 'package:acter/features/backups/dialogs/show_confirm_disabling.dart';
 import 'package:acter/features/backups/dialogs/show_recovery_key.dart';
@@ -25,7 +27,8 @@
   @override
   Widget build(BuildContext context, WidgetRef ref) {
     return switch (ref.watch(backupStateProvider)) {
-      RecoveryState.enabled => allowDisabling
+      RecoveryState.enabled =>
+      allowDisabling
           ? renderCanResetAction(context, ref)
           : const SizedBox.shrink(), // nothing to see here. all good.
       RecoveryState.incomplete => renderRecoverAction(context, ref),
@@ -37,72 +40,82 @@
   Widget renderUnknown(BuildContext context, WidgetRef ref) {
     final lang = L10n.of(context);
     return Skeletonizer(
-      child: Card(
-        child: ListTile(
-          leading: const Icon(Icons.warning),
-          title: Text(lang.encryptionBackupMissing),
-          subtitle: Text(lang.encryptionBackupMissingExplainer),
-          trailing: OutlinedButton(
-            onPressed: () {},
+      child: SecurityPrivacyWidget(
+        icon: Icons.warning_amber_rounded,
+        iconColor: warningColor,
+        title: lang.encryptionBackupMissing,
+        subtitle: lang.encryptionBackupMissingExplainer,
+        actions: [
+          OutlinedButton(
+            onPressed: null,
             child: Text(lang.loading),
           ),
-        ),
+        ],
+
       ),
     );
   }
 
   Widget renderCanResetAction(BuildContext context, WidgetRef ref) {
     final lang = L10n.of(context);
-    return Card(
-      child: ListTile(
-        leading: const Icon(Atlas.check_website_thin),
-        title: Text(lang.encryptionBackupEnabled),
-        subtitle: Text(lang.encryptionBackupEnabledExplainer),
-        trailing: OutlinedButton.icon(
-          icon: const Icon(Icons.toggle_on_outlined),
+    return SecurityPrivacyWidget(
+      icon: Atlas.check_website_thin,
+      iconColor: Theme
+          .of(context)
+          .colorScheme
+          .primary,
+      title: lang.encryptionBackupEnabled,
+      subtitle: lang.encryptionBackupEnabledExplainer,
+      actions: [
+        OutlinedButton(
           onPressed: () => showConfirmResetDialog(context, ref),
-          label: Text(lang.reset),
+          child: Text(lang.reset),
         ),
-      ),
+      ],
+
     );
   }
 
   Widget renderRecoverAction(BuildContext context, WidgetRef ref) {
     final lang = L10n.of(context);
-    return Card(
-      child: ListTile(
-        leading: const Icon(Icons.warning),
-        title: Text(lang.encryptionBackupProvideKey),
-        subtitle: Text(lang.encryptionBackupProvideKeyExplainer),
-        trailing: Wrap(
-          children: [
-            OutlinedButton(
-              onPressed: () => showProviderRecoveryKeyDialog(context, ref),
-              child: Text(lang.encryptionBackupProvideKeyAction),
-            ),
-            if (allowDisabling)
-              OutlinedButton(
-                onPressed: () => showConfirmResetDialog(context, ref),
-                child: Text(lang.reset),
-              ),
-          ],
+    // Since SecurityPrivacyWidget only supports one action button,
+    // we'll use the primary action (provide key) and handle reset differently if needed
+    return SecurityPrivacyWidget(
+      icon: Icons.warning_amber_rounded,
+      iconColor: warningColor,
+      title: lang.encryptionBackupProvideKey,
+      subtitle: lang.encryptionBackupProvideKeyExplainer,
+
+      actions: [
+        OutlinedButton(
+          onPressed: () => showProviderRecoveryKeyDialog(context, ref),
+          child: Text(lang.encryptionBackupProvideKeyAction),
         ),
-      ),
+        if (allowDisabling) ...[
+          const SizedBox(width: 8),
+          OutlinedButton(
+            onPressed: () => showConfirmResetDialog(context, ref),
+            child: Text(lang.reset),
+          ),
+        ],
+      ],
     );
   }
 
   Widget renderStartAction(BuildContext context, WidgetRef ref) {
     final lang = L10n.of(context);
-    return Card(
-      child: ListTile(
-        leading: const Icon(Icons.warning),
-        title: Text(lang.encryptionBackupNoBackup),
-        subtitle: Text(lang.encryptionBackupNoBackupExplainer),
-        trailing: OutlinedButton(
+    return SecurityPrivacyWidget(
+      icon: Icons.warning_amber_rounded,
+      iconColor: warningColor,
+      title: lang.encryptionBackupNoBackup,
+      subtitle: lang.encryptionBackupNoBackupExplainer,
+      actions: [
+        OutlinedButton(
           onPressed: () => startAction(context, ref),
           child: Text(lang.encryptionBackupNoBackupAction),
         ),
-      ),
+      ],
+
     );
   }
 
@@ -131,11 +144,9 @@
     }
   }
 
-  Widget renderInProgress(
-    BuildContext context,
-    WidgetRef ref,
-    RecoveryState currentState,
-  ) {
+  Widget renderInProgress(BuildContext context,
+      WidgetRef ref,
+      RecoveryState currentState,) {
     return Card(
       child: Column(
         children: [

app/lib/features/space/widgets/space_toolbar.dart

@@ -107,12 +107,16 @@
                 horizontal: 12,
                 vertical: 6,
               ),
+              side: BorderSide(color: colorScheme.outline),
             ),
             onPressed: () => context.pushNamed(
               Routes.spaceInvite.name,
               pathParameters: {'spaceId': spaceId},
             ),
-            child: Text(lang.invite),
+            child: Text(
+              lang.invite,
+              style: TextStyle(color: colorScheme.outline),
+            ),
           ),
         IconButton(
           icon: Icon(isBookmarked ? Icons.bookmark : Icons.bookmark_border),

app/lib/l10n/app_en.arb

@@ -1113,7 +1113,7 @@
   "@sentAnImage": {},
   "server": "Server",
   "@server": {},
-  "sessions": "Sessions",
+  "sessions": "Session",
   "@sessions": {},
   "sessionTokenName": "Session Token Name",
   "@sessionTokenName": {},
@@ -1309,6 +1309,16 @@
   "@unverifiedSessions": {},
   "unverifiedSessionsDescription": "You have devices logged in your account that aren’t verified. This can be a security risk. Please ensure this is okay.",
   "@unverifiedSessionsDescription": {},
+  "unverifiedSessionsCount": "There are {count} unverified sessions logged in",
+  "@unverifiedSessionsCount": {
+    "description": "Text shown for number of unverified sessions",
+    "placeholders": {
+      "count": {
+        "type": "int",
+        "example": "6"
+      }
+    }
+  },
   "upcoming": "Upcoming",
   "@upcoming": {},
   "updatePowerLevel": "Update Permission level",