fix picked emoji not being highlighted #1196 + updated its CSS structure

1 files changed, 42 insertions, 40 deletions

diff --git a/src/components/emoji_reactions/emoji_reactions.vue b/src/components/emoji_reactions/emoji_reactions.vue
index 4ea8b6a2..4eb22a65 100644
--- a/src/components/emoji_reactions/emoji_reactions.vue
+++ b/src/components/emoji_reactions/emoji_reactions.vue
@@ -1,5 +1,5 @@
 <template>
-  <div class="emoji-reactions">
+  <div class="EmojiReactions">
     <UserListPopover
       v-for="(reaction) in emojiReactions"
       :key="reaction.name"
@@ -7,7 +7,7 @@
     >
       <button
         class="emoji-reaction btn button-default"
-        :class="{ 'picked-reaction': reactedWith(reaction.name), 'not-clickable': !loggedIn }"
+        :class="{ '-picked-reaction': reactedWith(reaction.name), 'not-clickable': !loggedIn }"
         @click="emojiOnClick(reaction.name, $event)"
         @mouseenter="fetchEmojiReactionsByIfMissing()"
       >
@@ -30,53 +30,55 @@
 <style lang="scss">
 @import '../../_variables.scss';
 
-.emoji-reactions {
+.EmojiReactions {
   display: flex;
   margin-top: 0.25em;
   flex-wrap: wrap;
-}
 
-.emoji-reaction {
-  padding: 0 0.5em;
-  margin-right: 0.5em;
-  margin-top: 0.5em;
-  display: flex;
-  align-items: center;
-  justify-content: center;
-  box-sizing: border-box;
-  .reaction-emoji {
-    width: 1.25em;
-    margin-right: 0.25em;
-  }
-  &:focus {
-    outline: none;
-  }
+  .emoji-reaction {
+    padding: 0 0.5em;
+    margin-right: 0.5em;
+    margin-top: 0.5em;
+    display: flex;
+    align-items: center;
+    justify-content: center;
+    box-sizing: border-box;
 
-  &.not-clickable {
-    cursor: default;
-    &:hover {
-      box-shadow: $fallback--buttonShadow;
-      box-shadow: var(--buttonShadow);
+    .reaction-emoji {
+      width: 1.25em;
+      margin-right: 0.25em;
+    }
+
+    &:focus {
+      outline: none;
+    }
+
+    &.not-clickable {
+      cursor: default;
+      &:hover {
+        box-shadow: $fallback--buttonShadow;
+        box-shadow: var(--buttonShadow);
+      }
+    }
+
+    &.-picked-reaction {
+      border: 1px solid var(--accent, $fallback--link);
+      margin-left: -1px; // offset the border, can't use inset shadows either
+      margin-right: calc(0.5em - 1px);
     }
   }
-}
 
-.emoji-reaction-expand {
-  padding: 0 0.5em;
-  margin-right: 0.5em;
-  margin-top: 0.5em;
-  display: flex;
-  align-items: center;
-  justify-content: center;
-  &:hover {
-    text-decoration: underline;
+  .emoji-reaction-expand {
+    padding: 0 0.5em;
+    margin-right: 0.5em;
+    margin-top: 0.5em;
+    display: flex;
+    align-items: center;
+    justify-content: center;
+    &:hover {
+      text-decoration: underline;
+    }
   }
-}
 
-.picked-reaction {
-  border: 1px solid var(--accent, $fallback--link);
-  margin-left: -1px; // offset the border, can't use inset shadows either
-  margin-right: calc(0.5em - 1px);
 }
-
 </style>