diff --git a/lib/pages/chat/reactions_picker.dart b/lib/pages/chat/reactions_picker.dart index 3dd26422..de023a7d 100644 --- a/lib/pages/chat/reactions_picker.dart +++ b/lib/pages/chat/reactions_picker.dart @@ -2,6 +2,7 @@ import 'package:flutter/material.dart'; import 'package:matrix/matrix.dart'; +import 'package:fluffychat/config/app_config.dart'; import 'package:fluffychat/config/app_emojis.dart'; import 'package:fluffychat/pages/chat/chat.dart'; @@ -20,7 +21,7 @@ class ReactionsPicker extends StatelessWidget { duration: const Duration(milliseconds: 300), height: (display) ? 56 : 0, child: Material( - color: Theme.of(context).secondaryHeaderColor, + color: Colors.transparent, child: Builder(builder: (context) { if (!display) { return Container(); @@ -37,34 +38,46 @@ class ReactionsPicker extends StatelessWidget { emojis.remove(event.content['m.relates_to']['key']); } catch (_) {} } - return ListView.builder( - scrollDirection: Axis.horizontal, - itemCount: emojis.length + 1, - itemBuilder: (c, i) => i == emojis.length - ? InkWell( - borderRadius: BorderRadius.circular(8), - onTap: () => controller.pickEmojiAction(allReactionEvents), - child: Container( - width: 56, - height: 56, - alignment: Alignment.center, - child: const Icon(Icons.add_outlined), - ), - ) - : InkWell( - borderRadius: BorderRadius.circular(8), - onTap: () => controller.sendEmojiAction(emojis[i]), - child: Container( - width: 56, - height: 56, - alignment: Alignment.center, - child: Text( - emojis[i], - style: const TextStyle(fontSize: 30), + return Row(children: [ + Expanded( + child: Container( + decoration: BoxDecoration( + color: Theme.of(context).secondaryHeaderColor, + borderRadius: const BorderRadius.only( + bottomRight: + Radius.circular(AppConfig.borderRadius))), + padding: const EdgeInsets.only(right: 1), + child: ListView.builder( + scrollDirection: Axis.horizontal, + itemCount: emojis.length, + itemBuilder: (c, i) => InkWell( + borderRadius: BorderRadius.circular(8), + onTap: () => controller.sendEmojiAction(emojis[i]), + child: Container( + width: 56, + height: 56, + alignment: Alignment.center, + child: Text( + emojis[i], + style: const TextStyle(fontSize: 30), + ), + ), ), - ), + ))), + InkWell( + borderRadius: BorderRadius.circular(8), + child: Container( + margin: const EdgeInsets.symmetric(horizontal: 8), + width: 36, + height: 56, + decoration: BoxDecoration( + color: Theme.of(context).secondaryHeaderColor, + shape: BoxShape.circle, ), - ); + child: const Icon(Icons.add_outlined), + ), + onTap: () => controller.pickEmojiAction(allReactionEvents)) + ]); }), ), );