diff --git a/app/assets/stylesheets/reactions.css b/app/assets/stylesheets/reactions.css index 2e4f63451..96e9b49ba 100644 --- a/app/assets/stylesheets/reactions.css +++ b/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; } } diff --git a/app/helpers/emoji_helper.rb b/app/helpers/emoji_helper.rb index fd959ce8a..5746071e6 100644 --- a/app/helpers/emoji_helper.rb +++ b/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 diff --git a/app/views/cards/comments/reactions/_menu.html.erb b/app/views/cards/comments/reactions/_menu.html.erb index d975e6aec..92332a40d 100644 --- a/app/views/cards/comments/reactions/_menu.html.erb +++ b/app/views/cards/comments/reactions/_menu.html.erb @@ -6,7 +6,7 @@
<% 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 %>