From e0525940ba6e862070ee359f5f1f7c2d7a2aa41e Mon Sep 17 00:00:00 2001
From: Krille <c.kussowski@famedly.com>
Date: Wed, 9 Apr 2025 13:53:37 +0200
Subject: [PATCH] chore: Improve avatar designg

Signed-off-by: Krille <c.kussowski@famedly.com>
---
 .../events/room_creation_state_event.dart     | 57 ++++++++++---------
 lib/widgets/avatar.dart                       | 50 ++++++++--------
 2 files changed, 54 insertions(+), 53 deletions(-)

diff --git a/lib/pages/chat/events/room_creation_state_event.dart b/lib/pages/chat/events/room_creation_state_event.dart
index 398afc59f..911f958ed 100644
--- a/lib/pages/chat/events/room_creation_state_event.dart
+++ b/lib/pages/chat/events/room_creation_state_event.dart
@@ -1,15 +1,14 @@
-import 'package:flutter/material.dart';
-
-import 'package:flutter_gen/gen_l10n/l10n.dart';
-import 'package:matrix/matrix.dart';
-
 import 'package:fluffychat/config/app_config.dart';
 import 'package:fluffychat/utils/date_time_extension.dart';
 import 'package:fluffychat/utils/matrix_sdk_extensions/matrix_locals.dart';
 import 'package:fluffychat/widgets/avatar.dart';
+import 'package:flutter/material.dart';
+import 'package:flutter_gen/gen_l10n/l10n.dart';
+import 'package:matrix/matrix.dart';
 
 class RoomCreationStateEvent extends StatelessWidget {
   final Event event;
+
   const RoomCreationStateEvent({required this.event, super.key});
 
   @override
@@ -21,28 +20,32 @@ class RoomCreationStateEvent extends StatelessWidget {
     return Padding(
       padding: const EdgeInsets.only(bottom: 32.0),
       child: Center(
-        child: Material(
-          color: theme.colorScheme.surface.withAlpha(128),
-          borderRadius: BorderRadius.circular(AppConfig.borderRadius),
-          child: Padding(
-            padding: const EdgeInsets.all(16.0),
-            child: Column(
-              mainAxisSize: MainAxisSize.min,
-              children: [
-                Avatar(
-                  mxContent: event.room.avatar,
-                  name: roomName,
-                  size: Avatar.defaultSize * 2,
-                ),
-                Text(
-                  roomName,
-                  style: theme.textTheme.headlineSmall,
-                ),
-                Text(
-                  '${event.originServerTs.localizedTime(context)} | ${l10n.countParticipants((event.room.summary.mJoinedMemberCount ?? 1) + (event.room.summary.mInvitedMemberCount ?? 0))}',
-                  style: theme.textTheme.labelSmall,
-                ),
-              ],
+        child: ConstrainedBox(
+          constraints: const BoxConstraints(maxWidth: 256),
+          child: Material(
+            color: theme.colorScheme.surfaceContainer,
+            borderRadius: BorderRadius.circular(AppConfig.borderRadius),
+            child: Padding(
+              padding: const EdgeInsets.all(16.0),
+              child: Column(
+                mainAxisSize: MainAxisSize.min,
+                children: [
+                  Avatar(
+                    mxContent: event.room.avatar,
+                    name: roomName,
+                    size: Avatar.defaultSize * 2,
+                  ),
+                  Text(
+                    roomName,
+                    style: theme.textTheme.bodyLarge,
+                  ),
+                  const SizedBox(height: 8),
+                  Text(
+                    '${event.originServerTs.localizedTime(context)} | ${l10n.countParticipants((event.room.summary.mJoinedMemberCount ?? 1) + (event.room.summary.mInvitedMemberCount ?? 0))}',
+                    style: theme.textTheme.labelSmall,
+                  ),
+                ],
+              ),
             ),
           ),
         ),
diff --git a/lib/widgets/avatar.dart b/lib/widgets/avatar.dart
index c6bcaf9f1..1ce9933d7 100644
--- a/lib/widgets/avatar.dart
+++ b/lib/widgets/avatar.dart
@@ -1,10 +1,8 @@
-import 'package:flutter/material.dart';
-
-import 'package:matrix/matrix.dart';
-
 import 'package:fluffychat/utils/string_color.dart';
 import 'package:fluffychat/widgets/mxc_image.dart';
 import 'package:fluffychat/widgets/presence_builder.dart';
+import 'package:flutter/material.dart';
+import 'package:matrix/matrix.dart';
 
 class Avatar extends StatelessWidget {
   final Uri? mxContent;
@@ -37,31 +35,13 @@ class Avatar extends StatelessWidget {
   Widget build(BuildContext context) {
     final theme = Theme.of(context);
 
-    var fallbackLetters = '@';
     final name = this.name;
-    if (name != null) {
-      if (name.runes.length >= 2) {
-        fallbackLetters = String.fromCharCodes(name.runes, 0, 2);
-      } else if (name.runes.length == 1) {
-        fallbackLetters = name;
-      }
-    }
+    final fallbackLetters =
+        name == null || name.isEmpty ? '@' : name.substring(0, 1);
+
     final noPic = mxContent == null ||
         mxContent.toString().isEmpty ||
         mxContent.toString() == 'null';
-    final textColor = name?.lightColorAvatar;
-    final textWidget = Container(
-      color: textColor,
-      alignment: Alignment.center,
-      child: Text(
-        fallbackLetters,
-        style: TextStyle(
-          color: Colors.white,
-          fontWeight: FontWeight.bold,
-          fontSize: (size / 3).roundToDouble(),
-        ),
-      ),
-    );
     final borderRadius = this.borderRadius ?? BorderRadius.circular(size / 2);
     final presenceUserId = this.presenceUserId;
     final container = Stack(
@@ -79,7 +59,25 @@ class Avatar extends StatelessWidget {
             ),
             clipBehavior: Clip.hardEdge,
             child: noPic
-                ? textWidget
+                ? Container(
+                    decoration: BoxDecoration(
+                      gradient: LinearGradient(
+                        colors: [name!.lightColorAvatar, name.color],
+                        begin: Alignment.topLeft,
+                        end: Alignment.bottomRight,
+                      ),
+                    ),
+                    alignment: Alignment.center,
+                    child: Text(
+                      fallbackLetters,
+                      textAlign: TextAlign.center,
+                      style: TextStyle(
+                        color: Colors.white,
+                        fontWeight: FontWeight.bold,
+                        fontSize: (size / 2.5).roundToDouble(),
+                      ),
+                    ),
+                  )
                 : MxcImage(
                     client: client,
                     key: ValueKey(mxContent.toString()),