feat: Improved chat bubble design and splash animations

lib/views/widgets/list_items/message.dart

@@ -76,13 +76,20 @@ class Message extends StatelessWidget {
       Expanded(
         child: Container(
           alignment: alignment,
-          child: Container(
+          padding: const EdgeInsets.symmetric(horizontal: 8),
-            margin: const EdgeInsets.symmetric(horizontal: 8),
+          child: Material(
-            padding: const EdgeInsets.symmetric(vertical: 6, horizontal: 10),
-            decoration: BoxDecoration(
             color: color,
             borderRadius: BorderRadius.circular(AppConfig.borderRadius),
-            ),
+            child: InkWell(
+              onHover: (b) => useMouse = true,
+              onTap: !useMouse && longPressSelect
+                  ? () => null
+                  : () => onSelect(event),
+              onLongPress: !longPressSelect ? null : () => onSelect(event),
+              borderRadius: BorderRadius.circular(AppConfig.borderRadius),
+              child: Container(
+                padding:
+                    const EdgeInsets.symmetric(vertical: 6, horizontal: 10),
                 constraints:
                     BoxConstraints(maxWidth: FluffyThemes.columnWidth * 1.5),
                 child: Stack(
@@ -99,7 +106,10 @@ class Message extends StatelessWidget {
                                   ? snapshot.data
                                   : Event(
                                       eventId: event.relationshipEventId,
-                                  content: {'msgtype': 'm.text', 'body': '...'},
+                                      content: {
+                                        'msgtype': 'm.text',
+                                        'body': '...'
+                                      },
                                       senderId: event.senderId,
                                       type: 'm.room.message',
                                       room: event.room,
@@ -117,7 +127,8 @@ class Message extends StatelessWidget {
                                   child: Container(
                                     margin: EdgeInsets.symmetric(vertical: 4.0),
                                     child: ReplyContent(replyEvent,
-                                    lightText: ownMessage, timeline: timeline),
+                                        lightText: ownMessage,
+                                        timeline: timeline),
                                   ),
                                 ),
                               );
@@ -157,6 +168,8 @@ class Message extends StatelessWidget {
               ),
             ),
           ),
+        ),
+      ),
     ];
     final avatarOrSizedBox = sameSender
         ? SizedBox(width: Avatar.defaultSize)
@@ -197,21 +210,14 @@ class Message extends StatelessWidget {
       container = row;
     }
 
-    return InkWell(
+    return Container(
-      onHover: (b) => useMouse = true,
-      onTap: !useMouse && longPressSelect ? () => null : () => onSelect(event),
-      splashColor: Theme.of(context).primaryColor.withAlpha(100),
-      onLongPress: !longPressSelect ? null : () => onSelect(event),
-      child: Container(
       color: selected
           ? Theme.of(context).primaryColor.withAlpha(100)
           : Theme.of(context).primaryColor.withAlpha(0),
       child: Padding(
-          padding:
+        padding: EdgeInsets.only(left: 8.0, right: 8.0, bottom: 4.0, top: 4.0),
-              EdgeInsets.only(left: 8.0, right: 8.0, bottom: 4.0, top: 4.0),
         child: container,
       ),
-      ),
     );
   }
 }
@@ -240,7 +246,7 @@ class _MetaRow extends StatelessWidget {
           Text(
             displayname,
             style: TextStyle(
-              fontSize: 11 * AppConfig.fontSizeFactor,
+              fontSize: 10 * AppConfig.fontSizeFactor,
               fontWeight: FontWeight.bold,
               color: (Theme.of(context).brightness == Brightness.light
                       ? displayname.darkColor
@@ -252,8 +258,8 @@ class _MetaRow extends StatelessWidget {
         Text(
           event.originServerTs.localizedTime(context),
           style: TextStyle(
-            color: color.withAlpha(200),
+            color: color.withAlpha(164),
-            fontSize: 11 * AppConfig.fontSizeFactor,
+            fontSize: 10 * AppConfig.fontSizeFactor,
           ),
         ),
         if (event.hasAggregatedEvents(timeline, RelationshipTypes.edit))

lib/views/widgets/list_items/state_message.dart

@@ -17,14 +17,15 @@ class StateMessage extends StatelessWidget {
     }
     final int counter =
         event.unsigned['im.fluffychat.collapsed_state_event_count'] ?? 0;
-    return InkWell(
+    return Padding(
-      onTap: counter != 0 ? () => unfold(event.eventId) : null,
-      child: Padding(
       padding: const EdgeInsets.symmetric(
         horizontal: 8.0,
         vertical: 4.0,
       ),
       child: Center(
+        child: InkWell(
+          onTap: counter != 0 ? () => unfold(event.eventId) : null,
+          borderRadius: BorderRadius.circular(AppConfig.borderRadius),
           child: Container(
             padding: const EdgeInsets.all(8),
             decoration: BoxDecoration(