Design improvements

lib/components/list_items/message.dart

@@ -12,8 +12,9 @@ import 'state_message.dart';
 
 class Message extends StatelessWidget {
   final Event event;
+  final Event nextEvent;
 
-  const Message(this.event);
+  const Message(this.event, {this.nextEvent});
 
   @override
   Widget build(BuildContext context) {
@@ -25,7 +26,11 @@ class Message extends StatelessWidget {
     final bool ownMessage = event.senderId == client.userID;
     Alignment alignment = ownMessage ? Alignment.topRight : Alignment.topLeft;
     Color color = Theme.of(context).secondaryHeaderColor;
-    BubbleNip nip = ownMessage ? BubbleNip.rightBottom : BubbleNip.leftBottom;
+    final bool sameSender =
+        nextEvent != null ? nextEvent.sender.id == event.sender.id : false;
+    BubbleNip nip = sameSender
+        ? BubbleNip.no
+        : ownMessage ? BubbleNip.rightBottom : BubbleNip.leftBottom;
     final Color textColor = ownMessage ? Colors.white : Colors.black;
     MainAxisAlignment rowMainAxisAlignment =
         ownMessage ? MainAxisAlignment.end : MainAxisAlignment.start;
@@ -120,7 +125,9 @@ class Message extends StatelessWidget {
                       Text(
                         ownMessage ? "You" : event.sender.calcDisplayname(),
                         style: TextStyle(
-                          color: textColor,
+                          color: ownMessage
+                              ? textColor
+                              : Theme.of(context).primaryColor,
                           fontWeight: FontWeight.bold,
                         ),
                       ),
@@ -128,7 +135,7 @@ class Message extends StatelessWidget {
                       Text(
                         event.time.localizedTime(context),
                         style: TextStyle(
-                          color: textColor.withAlpha(200),
+                          color: textColor.withAlpha(180),
                         ),
                       ),
                     ],
@@ -144,13 +151,17 @@ class Message extends StatelessWidget {
         ),
       ),
     ];
+    final Widget avatarOrSizedBox =
+        sameSender ? SizedBox(width: 40) : Avatar(event.sender.avatarUrl);
     if (ownMessage) {
-      rowChildren.add(Avatar(event.sender.avatarUrl));
+      rowChildren.add(avatarOrSizedBox);
     } else {
-      rowChildren.insert(0, Avatar(event.sender.avatarUrl));
+      rowChildren.insert(0, avatarOrSizedBox);
     }
+
     return Padding(
-      padding: const EdgeInsets.all(8.0),
+      padding: EdgeInsets.only(
+          left: 8.0, right: 8.0, bottom: sameSender ? 4.0 : 12.0),
       child: Row(
         crossAxisAlignment: CrossAxisAlignment.end,
         mainAxisAlignment: rowMainAxisAlignment,

lib/main.dart

@@ -24,7 +24,7 @@ class App extends StatelessWidget {
           brightness: Brightness.light,
           primaryColor: Color(0xFF5625BA),
           backgroundColor: Colors.white,
-          secondaryHeaderColor: Color(0xFFF2F2F2),
+          secondaryHeaderColor: Color(0xFFF0F0F0),
           scaffoldBackgroundColor: Colors.white,
           dialogTheme: DialogTheme(
             shape: RoundedRectangleBorder(

lib/views/chat.dart

@@ -252,7 +252,9 @@ class _ChatState extends State<Chat> {
                               ),
                               padding: EdgeInsets.all(8),
                             )
-                          : Message(timeline.events[i - 1]),
+                          : Message(timeline.events[i - 1],
+                              nextEvent:
+                                  i >= 2 ? timeline.events[i - 2] : null),
                     );
                   },
                 ),

lib/views/chat_details.dart

@@ -110,23 +110,24 @@ class _ChatDetailsState extends State<ChatDetails> {
                   crossAxisAlignment: CrossAxisAlignment.stretch,
                   children: <Widget>[
                     ContentBanner(widget.room.avatar),
+                    Divider(height: 1),
                     widget.room.canSendEvent("m.room.avatar") && !kIsWeb
                         ? ListTile(
-                            title: Text("Edit group avatar"),
+                            title: Text("Set group avatar"),
-                            trailing: Icon(Icons.file_upload),
+                            leading: Icon(Icons.camera),
                             onTap: () => setAvatarAction(context),
                           )
                         : Container(),
                     widget.room.canSendEvent("m.room.name")
                         ? ListTile(
-                            trailing: Icon(Icons.edit),
+                            leading: Icon(Icons.edit),
                             title: TextField(
                               textInputAction: TextInputAction.done,
                               onSubmitted: (s) =>
                                   setDisplaynameAction(context, s),
                               decoration: InputDecoration(
                                 border: InputBorder.none,
-                                labelText: "Edit group name",
+                                labelText: "Set group name",
                                 labelStyle: TextStyle(color: Colors.black),
                                 hintText:
                                     (RoomNameCalculator(widget.room).name),
@@ -148,7 +149,11 @@ class _ChatDetailsState extends State<ChatDetails> {
                     widget.room.canInvite
                         ? ListTile(
                             title: Text("Invite contact"),
-                            leading: Icon(Icons.add),
+                            leading: CircleAvatar(
+                              child: Icon(Icons.add),
+                              backgroundColor: Theme.of(context).primaryColor,
+                              foregroundColor: Colors.white,
+                            ),
                             onTap: () => Navigator.of(context).push(
                               AppRoute.defaultRoute(
                                 context,