Fix emoji overflow on message actions screen (#375)

* Fix emoji overflow on message actions screen

* Update CHANGELOG.md

* Fix new chat icon size and padding

* Fix slate chat header back button size and padding

CHANGELOG.md

@@ -86,6 +86,7 @@ and this project adheres to [Semantic Versioning](https://semver.org/spec/v2.0.0
 
 ### Fixed
 
+- Fix emoji overflow on message actions screen [PR #375](https://github.com/marmot-protocol/whitenoise/pull/375)
 - Fix app crashes on upgrade from older versions by wiping incompatible data before Rust initialization [PR #312](https://github.com/marmot-protocol/whitenoise/pull/312)
 - Disable foreground task plugin receivers to prevent crashes on package update [PR #312](https://github.com/marmot-protocol/whitenoise/pull/312)
 - Adds internet permission in android manifest [PR #7](https://github.com/marmot-protocol/sloth/pull/7)

lib/screens/message_actions_screen.dart

@@ -219,7 +219,6 @@ class MessageActionsModal extends StatelessWidget {
     '🤣',
     '🔥',
     '🦥',
-    '😌',
   ];
 
   @override
@@ -249,26 +248,28 @@ class MessageActionsModal extends StatelessWidget {
             ),
             SizedBox(height: 16.h),
             Row(
-              mainAxisAlignment: MainAxisAlignment.spaceEvenly,
               children: [
                 ...reactions.map(
-                  (emoji) => _ReactionButton(
-                    key: Key('reaction_$emoji'),
-                    colors: colors,
-                    emoji: emoji,
-                    isSelected: selectedEmojis.contains(emoji),
-                    onTap: () => onReaction(emoji),
+                  (emoji) => Expanded(
+                    child: _ReactionButton(
+                      key: Key('reaction_$emoji'),
+                      colors: colors,
+                      emoji: emoji,
+                      isSelected: selectedEmojis.contains(emoji),
+                      onTap: () => onReaction(emoji),
+                    ),
                   ),
                 ),
-                GestureDetector(
-                  key: const Key('emoji_picker_button'),
-                  onTap: onEmojiPicker,
-                  child: Container(
-                    padding: EdgeInsets.all(8.w),
-                    child: WnIcon(
-                      WnIcons.addEmoji,
-                      color: colors.backgroundContentPrimary,
-                      size: 20.sp,
+                Expanded(
+                  child: GestureDetector(
+                    key: const Key('emoji_picker_button'),
+                    onTap: onEmojiPicker,
+                    child: Center(
+                      child: WnIcon(
+                        WnIcons.addEmoji,
+                        color: colors.backgroundContentPrimary,
+                        size: 20.sp,
+                      ),
                     ),
                   ),
                 ),
@@ -332,17 +333,19 @@ class _ReactionButton extends StatelessWidget {
   Widget build(BuildContext context) {
     return GestureDetector(
       onTap: onTap,
-      child: Container(
-        padding: EdgeInsets.all(8.w),
-        decoration: isSelected
-            ? BoxDecoration(
-                color: colors.fillTertiaryActive,
-                borderRadius: BorderRadius.circular(8.r),
-              )
-            : null,
-        child: Text(
-          emoji,
-          style: context.typographyScaled.medium20,
+      child: Center(
+        child: Container(
+          padding: EdgeInsets.all(8.w),
+          decoration: isSelected
+              ? BoxDecoration(
+                  color: colors.fillTertiaryActive,
+                  borderRadius: BorderRadius.circular(8.r),
+                )
+              : null,
+          child: Text(
+            emoji,
+            style: context.typographyScaled.medium20,
+          ),
         ),
       ),
     );

lib/widgets/chat_list_header.dart

@@ -28,6 +28,7 @@ class ChatListHeader extends HookConsumerWidget {
       action: WnIconButton(
         key: const Key('chat_add_button'),
         icon: WnIcons.newChat,
+        size: WnIconButtonSize.size56,
         onPressed: () => Routes.pushToUserSearch(context),
       ),
     );

lib/widgets/wn_slate_avatar_header.dart

@@ -45,7 +45,7 @@ class WnSlateAvatarHeader extends StatelessWidget {
           if (action != null)
             Container(
               height: 80.h,
-              padding: EdgeInsets.only(left: 16.w, right: 24.w),
+              padding: EdgeInsets.only(left: 16.w, right: 12.w),
               alignment: Alignment.centerRight,
               child: action!,
             ),

lib/widgets/wn_slate_chat_header.dart

@@ -3,7 +3,6 @@ import 'package:flutter_screenutil/flutter_screenutil.dart';
 import 'package:whitenoise/theme.dart';
 import 'package:whitenoise/widgets/wn_avatar.dart';
 import 'package:whitenoise/widgets/wn_icon.dart';
-import 'package:whitenoise/widgets/wn_icon_button.dart';
 
 class WnSlateChatHeader extends StatelessWidget {
   const WnSlateChatHeader({
@@ -28,14 +27,18 @@ class WnSlateChatHeader extends StatelessWidget {
     final colors = context.colors;
 
     return Padding(
-      padding: EdgeInsets.fromLTRB(16.w, 16.h, 24.w, 16.h),
+      padding: EdgeInsets.fromLTRB(24.w, 16.h, 24.w, 16.h),
       child: Row(
-        spacing: 8.w,
+        spacing: 16.w,
         children: [
-          WnIconButton(
+          GestureDetector(
             key: const Key('back_button'),
-            onPressed: onBack,
-            icon: WnIcons.chevronLeft,
+            onTap: onBack,
+            child: WnIcon(
+              WnIcons.chevronLeft,
+              size: 24.w,
+              color: colors.backgroundContentSecondary,
+            ),
           ),
           GestureDetector(
             key: const Key('header_avatar_tap_area'),