New emojis

web/static/css/chat.css

@@ -10,10 +10,6 @@ body {
     float: right;
 }
 
-.cursor-default {
-    cursor: default;
-}
-
 /* Bulma override */
 .media-content {
     overflow: hidden !important;
@@ -271,6 +267,12 @@ div.feed.popped-out {
 }
 
 /* Cursors */
+.cursor-default {
+    cursor: default;
+}
+.cursor-pointer {
+    cursor: pointer;
+}
 .cursor-notallowed {
     cursor: not-allowed;
 }
@@ -286,5 +288,5 @@ div.feed.popped-out {
 }
 .emoji-button button {
     background-color: rgba(255, 255, 255, 0.5);
-    color: rgba(0, 0, 0, 0.5);
+    /* color: rgba(0, 0, 0, 0.5); */
 }

web/static/js/BareRTC.js

@@ -64,15 +64,10 @@ const app = Vue.createApp({
                     audioTracks: {},
                 },
                 reactions: [
-                    '❤️',
+                    ['❤️', '👍', '😂', '😉', '😢', '😡', '🥰'],
-                    '😂',
+                    ['😏', '🔥', '😈', '🍑', '🍆', '💦', '🍌'],
-                    // '😉',
+                    ['😋', '⭐', '😇', '😴', '😱', '👀', '🎃'],
-                    // '😢',
+                    ['🙈', '🙉', '🙊', '☀️', '🌈', '✨', '🎂']
-                    // '😡',
-                    '🔥',
-                    // '😈',
-                    '🍑',
-                    '🍆',
                 ]
             },
 

web/templates/chat.html

@@ -893,10 +893,21 @@
                                         </button>
                                     </div>
                                     <div class="dropdown-menu" :id="`react-menu-${msg.msgID}`" role="menu">
-                                        <div class="dropdown-content">
+                                        <div class="dropdown-content p-0">
-                                            <a v-for="i in config.reactions" href="#" class="dropdown-item" @click.prevent="sendReact(msg, i)">
+                                            <!-- Iterate over reactions in rows of emojis-->
+                                            <div class="columns is-mobile ml-0 mb-2 mr-1"
+                                                v-for="row in config.reactions">
+
+                                                <!-- Loop over the icons -->
+                                                <div class="column p-0 is-narrow"
+                                                    v-for="i in row">
+                                                    <button type="button"
+                                                        class="button px-2 mt-1 ml-1 mr-0 mb-1"
+                                                        @click="sendReact(msg, i)">
                                                         [[i]]
-                                            </a>
+                                                    </button>
+                                                </div>
+                                            </div>
                                         </div>
                                     </div>
                                 </div>