design: Adjust reply design

lib/pages/chat/events/message.dart

@@ -225,18 +225,14 @@ class Message extends StatelessWidget {
                                       originServerTs: DateTime.now(),
                                     );
                               return InkWell(
+                                borderRadius: ReplyContent.borderRadius,
                                 onTap: () =>
                                     scrollToEventId(replyEvent.eventId),
                                 child: AbsorbPointer(
-                                  child: Container(
-                                    margin: const EdgeInsets.symmetric(
-                                      vertical: 4.0,
-                                    ),
-                                    child: ReplyContent(
-                                      replyEvent,
-                                      ownMessage: ownMessage,
-                                      timeline: timeline,
-                                    ),
+                                  child: ReplyContent(
+                                    replyEvent,
+                                    ownMessage: ownMessage,
+                                    timeline: timeline,
                                   ),
                                 ),
                               );

lib/pages/chat/events/reply_content.dart

@@ -18,68 +18,73 @@ class ReplyContent extends StatelessWidget {
     this.timeline,
   });
 
+  static const BorderRadius borderRadius = BorderRadius.only(
+    topRight: Radius.circular(AppConfig.borderRadius / 2),
+    bottomRight: Radius.circular(AppConfig.borderRadius / 2),
+  );
+
   @override
   Widget build(BuildContext context) {
-    Widget replyBody;
     final timeline = this.timeline;
     final displayEvent =
         timeline != null ? replyEvent.getDisplayEvent(timeline) : replyEvent;
     final fontSize = AppConfig.messageFontSize * AppConfig.fontSizeFactor;
 
-    replyBody = Text(
-      displayEvent.calcLocalizedBodyFallback(
-        MatrixLocals(L10n.of(context)!),
-        withSenderNamePrefix: false,
-        hideReply: true,
-      ),
-      overflow: TextOverflow.ellipsis,
-      maxLines: 1,
-      style: TextStyle(
-        color: ownMessage
-            ? Theme.of(context).colorScheme.onPrimaryContainer
-            : Theme.of(context).colorScheme.onBackground,
-        fontSize: fontSize,
-      ),
-    );
-
-    return Row(
-      mainAxisSize: MainAxisSize.min,
-      children: <Widget>[
-        Container(
-          width: 3,
-          height: fontSize * 2 + 6,
-          color: ownMessage
-              ? Theme.of(context).colorScheme.onPrimaryContainer
-              : Theme.of(context).colorScheme.onBackground,
-        ),
-        const SizedBox(width: 6),
-        Flexible(
-          child: Column(
-            crossAxisAlignment: CrossAxisAlignment.start,
-            mainAxisAlignment: MainAxisAlignment.center,
-            children: <Widget>[
-              FutureBuilder<User?>(
-                future: displayEvent.fetchSenderUser(),
-                builder: (context, snapshot) {
-                  return Text(
-                    '${snapshot.data?.calcDisplayname() ?? displayEvent.senderFromMemoryOrFallback.calcDisplayname()}:',
-                    maxLines: 1,
-                    overflow: TextOverflow.ellipsis,
-                    style: TextStyle(
-                      fontWeight: FontWeight.bold,
-                      color: ownMessage
-                          ? Theme.of(context).colorScheme.onPrimaryContainer
-                          : Theme.of(context).colorScheme.onBackground,
-                      fontSize: fontSize,
-                    ),
-                  );
-                },
-              ),
-              replyBody,
-            ],
+    return Material(
+      color: Theme.of(context).colorScheme.background.withOpacity(0.33),
+      borderRadius: borderRadius,
+      child: Row(
+        mainAxisSize: MainAxisSize.min,
+        children: <Widget>[
+          Container(
+            width: 3,
+            height: fontSize * 2 + 12,
+            color: Theme.of(context).colorScheme.primary,
+          ),
+          const SizedBox(width: 6),
+          Flexible(
+            child: Column(
+              crossAxisAlignment: CrossAxisAlignment.start,
+              mainAxisAlignment: MainAxisAlignment.center,
+              children: <Widget>[
+                FutureBuilder<User?>(
+                  future: displayEvent.fetchSenderUser(),
+                  builder: (context, snapshot) {
+                    return Text(
+                      '${snapshot.data?.calcDisplayname() ?? displayEvent.senderFromMemoryOrFallback.calcDisplayname()}:',
+                      maxLines: 1,
+                      overflow: TextOverflow.ellipsis,
+                      style: TextStyle(
+                        fontWeight: FontWeight.bold,
+                        color: ownMessage
+                            ? Theme.of(context).colorScheme.onPrimaryContainer
+                            : Theme.of(context).colorScheme.onBackground,
+                        fontSize: fontSize,
+                      ),
+                    );
+                  },
+                ),
+                Text(
+                  displayEvent.calcLocalizedBodyFallback(
+                    MatrixLocals(L10n.of(context)!),
+                    withSenderNamePrefix: false,
+                    hideReply: true,
+                  ),
+                  overflow: TextOverflow.ellipsis,
+                  maxLines: 1,
+                  style: TextStyle(
+                    color: ownMessage
+                        ? Theme.of(context).colorScheme.onPrimaryContainer
+                        : Theme.of(context).colorScheme.onBackground,
+                    fontSize: fontSize,
+                  ),
+                ),
+              ],
+            ),
           ),
-        ),
-      ],
+          const SizedBox(width: 6),
+        ],
+      ),
     );
   }
 }