Add extra enojis

app/assets/stylesheets/reactions.css

@@ -154,18 +154,20 @@
 
   .reaction__emoji-list {
     display: grid;
-    grid-template-columns: repeat(3, 1fr);
+    grid-template-columns: repeat(10, 1fr);
 
     .btn {
-      --btn-icon-size: 1.5ch;
-      --btn-size: var(--reaction-size);
-      --btn-border-color: var(--color-canvas);
+      --btn-size: 1.5rem;
 
+      font-size: 1rem;
       position: relative;
 
       /* Make sure the selection ring sits on top of adjacent buttons on hover */
       &:hover,
       &:focus-visible {
+        /* box-shadow: var(--shadow); */
+        filter: none;
+        scale: 1.5;
         z-index: 1;
       }
     }

app/helpers/emoji_helper.rb

@@ -1,12 +1,54 @@
 module EmojiHelper
   REACTIONS = {
-    "👍" => "Thumbs up",
     "👏" => "Clapping",
-    "👋" => "Waving hand",
-    "💪" => "Muscle",
+    "👍" => "Thumbs up",
+    "🙌" => "Hands raised in celebration",
+    "💪" => "Flexed bicep",
+    "🤘" => "Sign of the horns",
+    "✊" => "Raised fist",
+    "✨" => "Sparkles",
     "❤️" => "Red heart",
-    "😂" => "Face with tears of joy",
+    "💯" => "100 points",
     "🎉" => "Party popper",
-    "🔥" => "Fire"
+    "🤩" => "Face with starry eyes",
+    "🥳" => "Partying face",
+    "😊" => "Smiling face with flush cheeks",
+    "😀" => "Grinning face",
+    "😂" => "Face with tears of joy",
+    "😅" => "Grinning face with sweat drop",
+    "😎" => "Smiling face with sunglasses",
+    "😉" => "Winking face",
+    "😜" => "Winking face with stuck out tongue",
+    "😬" => "Grimacing face",
+    "😮" => "Surprised face with open mouth",
+    "😳" => "Flushed face",
+    "🤔" => "Thinking face",
+    "😒" => "Unamused face",
+    "😢" => "Crying face",
+    "😭" => "Loudly crying face",
+    "😱" => "Face screaming in fear",
+    "👀" => "Eyes",
+    "🙏" => "Hands pressed together",
+    "💩" => "Pile of poop",
+    "👎" => "Thumbs down",
+    "✌️" => "Peace",
+    "👈" => "Finger pointing left",
+    "👆" => "Finger pointing Up",
+    "✋" => "Raised hand",
+    "👋" => "Waving hand",
+    "☀️" => "Sun",
+    "🌙" => "Moon",
+    "💥" => "Collision",
+    "🔥" => "Fire",
+    "🎂" => "Birthday cake",
+    "🍴" => "Fork and knife",
+    "💰" => "Money bag",
+    "🥇" => "Gold medal",
+    "🚨" => "Red flashing light",
+    "💡" => "Light bulb",
+    "🛠" => "Hammer and wrench",
+    "📈" => "Chart with upward trend",
+    "✅" => "Check mark",
+    "📢" => "Public address loudspeaker"
   }
 end

app/views/cards/comments/reactions/_menu.html.erb

@@ -6,7 +6,7 @@
   <dialog class="reaction__popup popup panel fill-white shadow" data-dialog-target="dialog">
     <div class="reaction__emoji-list">
       <% EmojiHelper::REACTIONS.each do |character, title| %>
-        <%= tag.button character, title: title, class: "reaction__emoji-btn btn btn--circle", data: { action: "reaction-emoji#insertEmoji", emoji: character } %>
+        <%= tag.button character, title: title, class: "reaction__emoji-btn btn btn--circle borderless", data: { action: "reaction-emoji#insertEmoji", emoji: character } %>
       <% end %>
     </div>
   </dialog>