fix reactions ontap

example/ios/Flutter/.last_build_id

@@ -1 +1 @@
-0289cdadbd29bab804f275e3c5907d07
+89eb023669fee58472de747080d78b5a

example/lib/main.dart

@@ -76,7 +76,7 @@ void main() async {
 
   await client.setUser(
     User(id: 'super-band-9', extraData: {
-      'name': 'John Doe',
+      'name': 'Jonathan Doe',
     }),
     'eyJ0eXAiOiJKV1QiLCJhbGciOiJIUzI1NiJ9.eyJ1c2VyX2lkIjoic3VwZXItYmFuZC05In0.0L6lGoeLwkz0aZRUcpZKsvaXtNEDHBcezVTZ0oPq40A',
   );

example/pubspec.yaml

@@ -1,6 +1,6 @@
 name: example
 description: A new Flutter project.
-version: 1.0.31+33
+version: 1.0.32+34
 
 environment:
   sdk: ">=2.2.2 <3.0.0"

lib/src/message_list_view.dart

@@ -543,7 +543,7 @@ class _MessageListViewState extends State<MessageListView> {
         topRight: Radius.circular(16),
         bottomRight: Radius.circular(16),
       ),
-      showUserAvatar: !isMyMessage
+      showUserAvatar: isMyMessage
           ? DisplayWidget.gone
           : (isNextUser ? DisplayWidget.hide : DisplayWidget.show),
       messageTheme: isMyMessage

lib/src/message_reactions_modal.dart

@@ -53,7 +53,9 @@ class MessageReactionsModal extends StatelessWidget {
             ),
           ),
         ),
-        Column(
+        Padding(
+          padding: const EdgeInsets.symmetric(vertical: 8.0),
+          child: Column(
             mainAxisAlignment: MainAxisAlignment.center,
             crossAxisAlignment: CrossAxisAlignment.stretch,
             children: <Widget>[
@@ -91,12 +93,15 @@ class MessageReactionsModal extends StatelessWidget {
                 height: 16,
               ),
               if (message.latestReactions?.isNotEmpty == true)
-              Container(
+                Flexible(
+                  child: Container(
                     constraints: BoxConstraints.loose(Size.fromHeight(400)),
                     child: _buildReactionCard(context),
                   ),
+                ),
             ],
           ),
+        ),
       ],
     );
   }
@@ -181,16 +186,14 @@ class MessageReactionsModal extends StatelessWidget {
               Positioned(
                 child: Align(
                   alignment: Alignment.centerLeft,
-                  child: Container(
                   child: ReactionBubble(
                     reactions: [reaction],
                     borderColor: messageTheme.reactionsBorderColor,
                     backgroundColor: messageTheme.reactionsBackgroundColor,
-                      flipTail: !isCurrentUser,
+                    highlightOwnReactions: false,
                   ),
                 ),
-                ),
-                bottom: 0,
+                bottom: 4,
                 left: isCurrentUser ? 0 : null,
                 right: isCurrentUser ? 0 : null,
               ),

lib/src/message_widget.dart

@@ -240,7 +240,8 @@ class _MessageWidgetState extends State<MessageWidget> {
                           ),
                         Flexible(
                           child: PortalEntry(
-                            portal: ConstrainedBox(
+                            portal: Container(
+                              transform: Matrix4.translationValues(-16, 0, 0),
                               child: _buildReactionIndicator(context),
                               constraints: BoxConstraints(maxWidth: 22 * 6.0),
                             ),
@@ -399,8 +400,6 @@ class _MessageWidgetState extends State<MessageWidget> {
               !widget.message.isDeleted)
           ? GestureDetector(
               onTap: () => _showMessageReactionsModalBottomSheet(context),
-              child: Transform.translate(
-                offset: Offset(-16, 0),
               child: ReactionBubble(
                 key: ValueKey('${widget.message.id}.reactions'),
                 reverse: widget.reverse,
@@ -409,7 +408,6 @@ class _MessageWidgetState extends State<MessageWidget> {
                 borderColor: widget.messageTheme.reactionsBorderColor,
                 reactions: reactionsMap.values.toList(),
               ),
-              ),
             )
           : SizedBox(),
     );

lib/src/reaction_bubble.dart

@@ -13,6 +13,7 @@ class ReactionBubble extends StatelessWidget {
     @required this.backgroundColor,
     this.reverse = false,
     this.flipTail = false,
+    this.highlightOwnReactions = true,
   }) : super(key: key);
 
   final List<Reaction> reactions;
@@ -20,6 +21,7 @@ class ReactionBubble extends StatelessWidget {
   final Color backgroundColor;
   final bool reverse;
   final bool flipTail;
+  final bool highlightOwnReactions;
 
   @override
   Widget build(BuildContext context) {
@@ -31,9 +33,9 @@ class ReactionBubble extends StatelessWidget {
         alignment: Alignment.center,
         children: [
           Transform.translate(
-            offset: Offset(reverse ? 5 : -5, 0),
+            offset: Offset(reverse ? 2 : -2, 0),
             child: Container(
-              padding: const EdgeInsets.symmetric(vertical: 6),
+              padding: const EdgeInsets.symmetric(vertical: 4),
               decoration: BoxDecoration(
                 border: Border.all(
                   color: borderColor,
@@ -73,8 +75,8 @@ class ReactionBubble extends StatelessWidget {
           ),
           Positioned(
             bottom: 0,
-            left: reverse ? null : 16,
-            right: !reverse ? null : 16,
+            left: reverse ? null : 11,
+            right: !reverse ? null : 11,
             child: _buildReactionsTail(context),
           ),
         ],
@@ -99,7 +101,8 @@ class ReactionBubble extends StatelessWidget {
       child: Icon(
         reactionIcon?.iconData ?? Icons.help_outline_rounded,
         size: 16,
-        color: reaction.user.id == StreamChat.of(context).user.id
+        color: (!highlightOwnReactions ||
+                reaction.user.id == StreamChat.of(context).user.id)
             ? StreamChatTheme.of(context).accentColor
             : Colors.black.withOpacity(.5),
       ),
@@ -107,14 +110,11 @@ class ReactionBubble extends StatelessWidget {
   }
 
   Widget _buildReactionsTail(BuildContext context) {
-    final tail = Transform.translate(
-      offset: Offset(-5, 0),
-      child: CustomPaint(
+    final tail = CustomPaint(
       painter: ReactionBubblePainter(
         backgroundColor,
         borderColor,
       ),
-      ),
     );
 
     if (!flipTail) {