Improved design

lib/components/avatar.dart

@@ -1,5 +1,6 @@
 import 'package:cached_network_image/cached_network_image.dart';
 import 'package:famedlysdk/famedlysdk.dart';
+import 'package:fluffychat/utils/string_color.dart';
 import 'package:flutter/foundation.dart';
 import 'package:flutter/material.dart';
 
@@ -7,10 +8,11 @@ import 'matrix.dart';
 
 class Avatar extends StatelessWidget {
   final MxContent mxContent;
+  final String name;
   final double size;
   final Function onTap;
 
-  const Avatar(this.mxContent, {this.size = 40, this.onTap, Key key})
+  const Avatar(this.mxContent, this.name, {this.size = 40, this.onTap, Key key})
       : super(key: key);
 
   @override
@@ -21,6 +23,12 @@ class Avatar extends StatelessWidget {
       height: size * MediaQuery.of(context).devicePixelRatio,
       method: ThumbnailMethod.scale,
     );
+    String fallbackLetters = "@";
+    if ((name?.length ?? 0) >= 2) {
+      fallbackLetters = name.substring(0, 2);
+    } else if ((name?.length ?? 0) == 1) {
+      fallbackLetters = name;
+    }
     return InkWell(
       onTap: onTap,
       child: CircleAvatar(
@@ -34,9 +42,9 @@ class Avatar extends StatelessWidget {
                     src,
                   )
             : null,
-        backgroundColor: Theme.of(context).secondaryHeaderColor,
+        backgroundColor: name?.color ?? Theme.of(context).secondaryHeaderColor,
         child: mxContent.mxc.isEmpty
-            ? Text("@", style: TextStyle(color: Colors.blueGrey))
+            ? Text(fallbackLetters, style: TextStyle(color: Colors.white))
             : null,
       ),
     );

lib/components/list_items/chat_list_item.dart

@@ -86,7 +86,7 @@ class ChatListItem extends StatelessWidget {
     return Material(
       color: activeChat ? Color(0xFFE8E8E8) : Colors.white,
       child: ListTile(
-        leading: Avatar(room.avatar),
+        leading: Avatar(room.avatar, room.displayname),
         title: Row(
           children: <Widget>[
             Expanded(

lib/components/list_items/message.dart

@@ -4,6 +4,7 @@ import 'package:fluffychat/components/dialogs/redact_message_dialog.dart';
 import 'package:fluffychat/components/message_content.dart';
 import 'package:fluffychat/utils/app_route.dart';
 import 'package:fluffychat/utils/date_time_extension.dart';
+import 'package:fluffychat/utils/string_color.dart';
 import 'package:fluffychat/views/content_web_view.dart';
 import 'package:flutter/material.dart';
 import 'package:flutter/services.dart';
@@ -144,7 +145,7 @@ class Message extends StatelessWidget {
                         style: TextStyle(
                           color: ownMessage
                               ? textColor
-                              : Theme.of(context).primaryColor,
+                              : event.sender.calcDisplayname().color,
                           fontWeight: FontWeight.bold,
                         ),
                       ),
@@ -172,6 +173,7 @@ class Message extends StatelessWidget {
         ? SizedBox(width: 40)
         : Avatar(
             event.sender.avatarUrl,
+            event.sender.calcDisplayname(),
             onTap: () => Navigator.of(context).push(
               AppRoute.defaultRoute(
                 context,
@@ -187,7 +189,7 @@ class Message extends StatelessWidget {
 
     return Padding(
       padding: EdgeInsets.only(
-          left: 8.0, right: 8.0, bottom: sameSender ? 4.0 : 12.0),
+          left: 8.0, right: 8.0, bottom: sameSender ? 4.0 : 8.0),
       child: Row(
         crossAxisAlignment: CrossAxisAlignment.end,
         mainAxisAlignment: rowMainAxisAlignment,

lib/components/list_items/participant_list_item.dart

@@ -117,7 +117,7 @@ class ParticipantListItem extends StatelessWidget {
           ],
         ),
         subtitle: Text(user.id),
-        leading: Avatar(user.avatarUrl),
+        leading: Avatar(user.avatarUrl, user.calcDisplayname()),
       ),
     );
   }

lib/components/list_items/state_message.dart

@@ -12,7 +12,11 @@ class StateMessage extends StatelessWidget {
   Widget build(BuildContext context) {
     if (event.type == EventTypes.Redaction) return Container();
     return Padding(
-      padding: const EdgeInsets.all(8.0),
+      padding: const EdgeInsets.only(
+        left: 8.0,
+        right: 8.0,
+        bottom: 8.0,
+      ),
       child: Opacity(
         opacity: 0.5,
         child: Bubble(