fix: change style of emojis in ReactionUsersSheet (#467)

* fix: add haptic feedback for long press * fix: change style of emojis in ReactionUsersSheet
poppingmoon · Nov 9, 2024 · d6ad7e8 · d6ad7e8
1 parent ce157c6
commit d6ad7e8
Show file tree

Hide file tree

Showing 2 changed files with 17 additions and 8 deletions.
diff --git a/lib/view/widget/note_footer.dart b/lib/view/widget/note_footer.dart
@@ -462,7 +462,10 @@ class _AddReactionButton extends ConsumerWidget {
 
     return GestureDetector(
       onLongPress: (note.reactionCount ?? 0) > 0
-          ? () => showModalBottomSheet<void>(
+          ? () {
+              if (note.id.isEmpty) return;
+              HapticFeedback.lightImpact();
+              showModalBottomSheet<void>(
                 context: context,
                 builder: (context) => ReactionUsersSheet(
                   account: account,
@@ -474,7 +477,8 @@ class _AddReactionButton extends ConsumerWidget {
                 ),
                 clipBehavior: Clip.antiAlias,
                 isScrollControlled: true,
-              )
+              );
+            }
           : null,
       child: IconButton(
         tooltip: (note.reactionCount ?? 0) <= 0
@@ -561,6 +565,7 @@ class _RemoveReactionButton extends ConsumerWidget {
     return GestureDetector(
       onLongPress: () {
         if (note.id.isEmpty) return;
+        HapticFeedback.lightImpact();
         showModalBottomSheet<void>(
           context: context,
           builder: (context) => ReactionUsersSheet(

diff --git a/lib/view/widget/reaction_users_sheet.dart b/lib/view/widget/reaction_users_sheet.dart
@@ -68,22 +68,26 @@ class ReactionUsersSheet extends HookConsumerWidget {
                   const SizedBox(width: 12.0),
                   ...?reactions?.map(
                     (emoji) => Padding(
-                      padding: const EdgeInsets.all(2.0),
+                      padding: const EdgeInsets.symmetric(
+                        vertical: 2.0,
+                        horizontal: 4.0,
+                      ),
                       child: ElevatedButton(
                         onPressed: () => reaction.value = emoji,
                         style: ElevatedButton.styleFrom(
                           padding: const EdgeInsets.symmetric(
-                            vertical: 2.0,
-                            horizontal: 4.0,
+                            vertical: 4.0,
+                            horizontal: 6.0,
                           ),
                           minimumSize: Size.zero,
                           tapTargetSize: MaterialTapTargetSize.shrinkWrap,
                           shape: RoundedRectangleBorder(
+                            side: emoji == reaction.value
+                                ? BorderSide(color: colors.accent)
+                                : BorderSide.none,
                             borderRadius: BorderRadius.circular(4.0),
                           ),
-                          backgroundColor: emoji == reaction.value
-                              ? colors.accent.withOpacity(0.5)
-                              : colors.buttonBg,
+                          backgroundColor: colors.buttonBg,
                           elevation: 0.0,
                         ),
                         child: ConstrainedBox(