enroll team polish?

src/features/reactions/components/emoji-bar.tsx

@@ -1,6 +1,6 @@
 import {
   Group,
-  UnstyledButton,
+  Button,
   Text,
   Tabs,
 } from "@mantine/core";
@@ -71,61 +71,34 @@ const EmojiBar = ({
       <Group gap="xs" wrap="wrap" justify="space-between">
         <Group gap="xs" wrap="wrap">
           {reactions.map((reaction) => (
-            <UnstyledButton
+            <Button
               key={reaction.emoji}
+              variant={reaction.hasReacted ? "filled" : "light"}
+              color={reaction.hasReacted ? "var(--mantine-primary-color-filled)" : "gray"}
+              size="compact-xs"
+              radius="xl"
               onMouseDown={() => handleLongPressStart(reaction.emoji)}
               onMouseUp={handleLongPressEnd}
               onMouseLeave={handleLongPressEnd}
               onTouchStart={() => handleLongPressStart(reaction.emoji)}
               onTouchEnd={handleLongPressEnd}
               onClick={() => handleReactionClick(reaction.emoji)}
-              px="8px"
-              py="10px"
               style={{
-                borderRadius: "var(--mantine-radius-xl)",
-                border: reaction.hasReacted
-                  ? "1px solid var(--mantine-primary-color-filled)"
-                  : "1px solid var(--mantine-color-default-border)",
-                backgroundColor: reaction.hasReacted
-                  ? "var(--mantine-primary-color-light)"
-                  : "transparent",
-                transition: "all 0.15s ease",
                 userSelect: "none",
                 WebkitUserSelect: "none",
                 MozUserSelect: "none",
                 msUserSelect: "none",
               }}
-              styles={{
-                root: {
-                  "&:hover": {
-                    backgroundColor: reaction.hasReacted
-                      ? "var(--mantine-primary-color-light)"
-                      : "var(--mantine-color-gray-1)",
-                    transform: "scale(1.05)",
-                  },
-                  "&:active": {
-                    transform: "scale(0.95)",
-                  },
-                },
-              }}
             >
               <Group gap={4} align="center">
                 <Text size="10px" style={{ lineHeight: 1 }}>
                   {reaction.emoji}
                 </Text>
-                <Text
-                  size="10px"
-                  fw={700}
-                  c={
-                    reaction.hasReacted
-                      ? "var(--mantine-primary-color-filled)"
-                      : "dimmed"
-                  }
-                >
+                <Text size="10px" fw={600}>
                   {reaction.count}
                 </Text>
               </Group>
-            </UnstyledButton>
+            </Button>
           ))}
         </Group>
         <EmojiPicker onSelect={onReactionPress || (() => {})} />