design: Adjust reply design

lib/pages/chat/events/message.dart

@@ -225,20 +225,16 @@ 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,
                                   ),
                                 ),
-                                ),
                               );
                             },
                           ),

lib/pages/chat/events/reply_content.dart

@@ -18,39 +18,28 @@ 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(
+    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 + 6,
-          color: ownMessage
-              ? Theme.of(context).colorScheme.onPrimaryContainer
-              : Theme.of(context).colorScheme.onBackground,
+            height: fontSize * 2 + 12,
+            color: Theme.of(context).colorScheme.primary,
           ),
           const SizedBox(width: 6),
           Flexible(
@@ -75,11 +64,27 @@ class ReplyContent extends StatelessWidget {
                     );
                   },
                 ),
-              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,
+                  ),
+                ),
               ],
             ),
           ),
+          const SizedBox(width: 6),
         ],
+      ),
     );
   }
 }