Update donors card

lib/settings/screens/donors.dart

@@ -1,4 +1,5 @@
 import 'dart:convert';
+import 'dart:math';
 
 import 'package:clock_app/common/widgets/card_container.dart';
 import 'package:clock_app/navigation/widgets/app_top_bar.dart';
@@ -39,38 +40,7 @@ class DonorsScreen extends StatelessWidget {
                   return Column(
                     children: [
                       for (final contributor in contributors)
-                        CardContainer(
-                          // onTap: () async {
-                          //   if (contributor['profile_url'] != null) {
-                          //     await launchUrl(
-                          //         Uri.parse(contributor['profile_url']));
-                          //   }
-                          // },
-                          child: Padding(
-                            padding: const EdgeInsets.symmetric(vertical: 8.0, horizontal: 16.0),
-                            child: Row(
-                              children: [
-                                // CardContainer(
-                                //   child: Image(
-                                //     width: 48,
-                                //     image:
-                                //         AssetImage(contributor['name']),
-                                //   ),
-                                // ),
-                                // const SizedBox(width: 8),
-                                Expanded(
-                                  child: Text(
-                                    contributor['name'],
-                                    style: textTheme.headlineMedium,
-                                    maxLines: 1,
-                                    overflow: TextOverflow.ellipsis,
-                                    softWrap: false,
-                                  ),
-                                ),
-                              ],
-                            ),
-                          ),
-                        ),
+                        DonorCard(contributor: contributor),
                     ],
                   );
                 } else {
@@ -82,3 +52,61 @@ class DonorsScreen extends StatelessWidget {
     );
   }
 }
+
+class DonorCard extends StatelessWidget {
+  const DonorCard({
+    super.key,
+    required this.contributor,
+  });
+
+  final dynamic contributor;
+  @override
+  Widget build(BuildContext context) {
+    final ThemeData theme = Theme.of(context);
+    final TextTheme textTheme = theme.textTheme;
+    final Color color =
+        Color((Random().nextDouble() * 0xFFFFFF).toInt()).withOpacity(1.0);
+    return CardContainer(
+      // onTap: () async {
+      //   if (contributor['profile_url'] != null) {
+      //     await launchUrl(
+      //         Uri.parse(contributor['profile_url']));
+      //   }
+      // },
+      child: Padding(
+        padding: const EdgeInsets.symmetric(vertical: 8.0, horizontal: 8.0),
+        child: Row(
+          children: [
+            CardContainer(
+              color: color,
+              alignment: Alignment.center,
+              child: SizedBox(
+                width: 40,
+                height: 40,
+                child: Container(
+                  alignment: Alignment.center,
+                  child: Text(contributor['name'].substring(0, 1),
+                      style: textTheme.headlineMedium?.copyWith(
+                        color: color.computeLuminance() > 0.179
+                            ? Colors.black
+                            : Colors.white,
+                      )),
+                ),
+              ),
+            ),
+            const SizedBox(width: 8),
+            Expanded(
+              child: Text(
+                contributor['name'],
+                style: textTheme.headlineMedium,
+                maxLines: 1,
+                overflow: TextOverflow.ellipsis,
+                softWrap: false,
+              ),
+            ),
+          ],
+        ),
+      ),
+    );
+  }
+}