refactor(ui): Update users list to allow showing avatars in the future

lib/ui/molecules/list_items/user_list_item.dart

@@ -1,6 +1,5 @@
 import 'package:auto_route/auto_route.dart';
 import 'package:flutter/material.dart';
-import 'package:selfprivacy/config/brand_theme.dart';
 import 'package:selfprivacy/logic/models/hive/user.dart';
 import 'package:selfprivacy/ui/router/router.dart';
 
@@ -14,39 +13,26 @@ class UserListItem extends StatelessWidget {
   final User user;
   final bool isPrimaryUser;
   @override
-  Widget build(final BuildContext context) => InkWell(
+  Widget build(final BuildContext context) => ListTile(
         onTap: () {
           context.pushRoute(UserDetailsRoute(login: user.login));
         },
-        child: Container(
-          padding: paddingH16V0,
-          height: 48,
-          child: Row(
-            children: [
-              Container(
-                width: 17,
-                height: 17,
-                decoration: BoxDecoration(
-                  color: user.color,
-                  shape: BoxShape.circle,
-                ),
-              ),
-              const SizedBox(width: 20),
-              Flexible(
-                child: Text(
-                  user.login,
-                  style: Theme.of(context).textTheme.titleMedium?.copyWith(
-                        color: Theme.of(context).colorScheme.onSurface,
-                        decoration: isPrimaryUser
-                            ? TextDecoration.underline
-                            : user.isFoundOnServer
-                                ? TextDecoration.none
-                                : TextDecoration.lineThrough,
-                      ),
-                ),
-              ),
-            ],
+        leading: CircleAvatar(
+          backgroundColor: user.color,
+          child: Text(
+            user.login[0].toUpperCase(),
           ),
         ),
+        title: Text(
+          user.login,
+          style: Theme.of(context).textTheme.titleMedium?.copyWith(
+                color: Theme.of(context).colorScheme.onSurface,
+                decoration: isPrimaryUser
+                    ? TextDecoration.underline
+                    : user.isFoundOnServer
+                        ? TextDecoration.none
+                        : TextDecoration.lineThrough,
+              ),
+        ),
       );
 }

lib/ui/pages/users/user_details.dart

@@ -56,6 +56,12 @@ class UserDetailsPage extends StatelessWidget {
       hasBackButton: true,
       hasFlashButton: true,
       heroTitle: user.login,
+      heroIconWidget: CircleAvatar(
+        backgroundColor: user.color,
+        child: Text(
+          user.login[0].toUpperCase(),
+        ),
+      ),
       children: [
         _UserLogins(user: user, domainName: domainName),
         const SizedBox(height: 8),

lib/ui/pages/users/users.dart

@@ -92,7 +92,10 @@ class UsersPage extends StatelessWidget {
                   ),
                 ],
                 Padding(
-                  padding: const EdgeInsets.all(8.0),
+                  padding: const EdgeInsets.symmetric(
+                    horizontal: 16.0,
+                    vertical: 8.0,
+                  ),
                   child: FilledButton.tonal(
                     child: Row(
                       crossAxisAlignment: CrossAxisAlignment.center,
@@ -111,6 +114,7 @@ class UsersPage extends StatelessWidget {
                 Expanded(
                   child: ListView.builder(
                     itemCount: users.length,
+                    padding: const EdgeInsets.symmetric(horizontal: 16),
                     itemBuilder:
                         (final BuildContext context, final int index) =>
                             UserListItem(