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(
+                                  child: ReplyContent(
-                                    margin: const EdgeInsets.symmetric(
+                                    replyEvent,
-                                      vertical: 4.0,
+                                    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(
+    return Material(
-      displayEvent.calcLocalizedBodyFallback(
+      color: Theme.of(context).colorScheme.background.withOpacity(0.33),
-        MatrixLocals(L10n.of(context)!),
+      borderRadius: borderRadius,
-        withSenderNamePrefix: false,
+      child: Row(
-        hideReply: true,
+        mainAxisSize: MainAxisSize.min,
-      ),
+        children: <Widget>[
-      overflow: TextOverflow.ellipsis,
+          Container(
-      maxLines: 1,
+            width: 3,
-      style: TextStyle(
+            height: fontSize * 2 + 12,
-        color: ownMessage
+            color: Theme.of(context).colorScheme.primary,
-            ? Theme.of(context).colorScheme.onPrimaryContainer
+          ),
-            : Theme.of(context).colorScheme.onBackground,
+          const SizedBox(width: 6),
-        fontSize: fontSize,
+          Flexible(
-      ),
+            child: Column(
-    );
+              crossAxisAlignment: CrossAxisAlignment.start,
-
+              mainAxisAlignment: MainAxisAlignment.center,
-    return Row(
+              children: <Widget>[
-      mainAxisSize: MainAxisSize.min,
+                FutureBuilder<User?>(
-      children: <Widget>[
+                  future: displayEvent.fetchSenderUser(),
-        Container(
+                  builder: (context, snapshot) {
-          width: 3,
+                    return Text(
-          height: fontSize * 2 + 6,
+                      '${snapshot.data?.calcDisplayname() ?? displayEvent.senderFromMemoryOrFallback.calcDisplayname()}:',
-          color: ownMessage
+                      maxLines: 1,
-              ? Theme.of(context).colorScheme.onPrimaryContainer
+                      overflow: TextOverflow.ellipsis,
-              : Theme.of(context).colorScheme.onBackground,
+                      style: TextStyle(
-        ),
+                        fontWeight: FontWeight.bold,
-        const SizedBox(width: 6),
+                        color: ownMessage
-        Flexible(
+                            ? Theme.of(context).colorScheme.onPrimaryContainer
-          child: Column(
+                            : Theme.of(context).colorScheme.onBackground,
-            crossAxisAlignment: CrossAxisAlignment.start,
+                        fontSize: fontSize,
-            mainAxisAlignment: MainAxisAlignment.center,
+                      ),
-            children: <Widget>[
+                    );
-              FutureBuilder<User?>(
+                  },
-                future: displayEvent.fetchSenderUser(),
+                ),
-                builder: (context, snapshot) {
+                Text(
-                  return Text(
+                  displayEvent.calcLocalizedBodyFallback(
-                    '${snapshot.data?.calcDisplayname() ?? displayEvent.senderFromMemoryOrFallback.calcDisplayname()}:',
+                    MatrixLocals(L10n.of(context)!),
-                    maxLines: 1,
+                    withSenderNamePrefix: false,
-                    overflow: TextOverflow.ellipsis,
+                    hideReply: true,
-                    style: TextStyle(
+                  ),
-                      fontWeight: FontWeight.bold,
+                  overflow: TextOverflow.ellipsis,
-                      color: ownMessage
+                  maxLines: 1,
-                          ? Theme.of(context).colorScheme.onPrimaryContainer
+                  style: TextStyle(
-                          : Theme.of(context).colorScheme.onBackground,
+                    color: ownMessage
-                      fontSize: fontSize,
+                        ? Theme.of(context).colorScheme.onPrimaryContainer
-                    ),
+                        : Theme.of(context).colorScheme.onBackground,
-                  );
+                    fontSize: fontSize,
-                },
+                  ),
-              ),
+                ),
-              replyBody,
+              ],
-            ],
+            ),
           ),
-        ),
+          const SizedBox(width: 6),
-      ],
+        ],
+      ),
     );
   }
 }