Add emote favourite button

client/src/builtin/EmoteComponent.vue

@@ -2,21 +2,27 @@
     <span class="bd-emotewrapper" :class="{'bd-emote-favourite': favourite, 'bd-emote-no-wrapper': !hasWrapper}" v-tooltip="name" :data-emote-name="name">
         <img class="bd-emote" :src="src" :alt="`;${name};`" @click="toggleFavourite" />
 
-        <span v-if="favourite" style="font-size: 12px;"> (favourite)</span>
+        <div class="bd-emote-favourite-button" :class="{'bd-active': favourite}" @click="toggleFavourite">
+            <MiStar :size="16" />
+        </div>
     </span>
 </template>
 
 <script>
     import { ClientLogger as Logger } from 'common';
     import EmoteModule from './EmoteModule';
+    import { MiStar } from '../ui/components/common';
 
     export default {
+        components: {
+            MiStar
+        },
+        props: ['src', 'name', 'hasWrapper'],
         data() {
             return {
                 EmoteModule
             };
         },
-        props: ['src', 'name', 'hasWrapper'],
         computed: {
             favourite() {
                 return EmoteModule.isFavourite(this.name);
@@ -26,7 +32,6 @@
             async toggleFavourite() {
                 await EmoteModule.setFavourite(this.name, !this.favourite);
                 Logger.log('EmoteComponent', `Set emote ${this.name} as ${this.favourite ? '' : 'un'}favourite`);
-                this.$forceUpdate();
             }
         }
     }

client/src/styles/partials/emote.scss

@@ -1,20 +0,0 @@
-.bd-emote-outer {
-    display: inline-block;
-    height: 32px;
-}
-.bd-emote-outer.bd-is-emote {
-    font-size: 0;
-}
-.bd-emotewrapper {
-    display: flex;
-    max-height: 32px;
-    img {
-        height: 32px;
-        margin: 0 .05em 0 .1em !important;
-        min-height: 22px;
-        min-width: 22px;
-        object-fit: contain;
-        vertical-align: -.4em;
-        max-height: 32px;
-    }
-}

client/src/styles/partials/emotes.scss

@@ -0,0 +1,52 @@
+.bd-emote-outer {
+    display: inline-block;
+    height: 32px;
+    user-select: none;
+
+    .bd-is-emote {
+        font-size: 0;
+    }
+}
+
+.bd-emotewrapper {
+    display: flex;
+    max-height: 32px;
+
+    img {
+        height: 32px;
+        margin: 0 .05em 0 .1em !important;
+        min-height: 22px;
+        min-width: 22px;
+        object-fit: contain;
+        vertical-align: -.4em;
+        max-height: 32px;
+    }
+
+    .bd-emote-favourite-button {
+        display: none;
+        width: 16px;
+        height: 16px;
+        margin-left: -17px;
+        margin-right: 1px;
+        cursor: pointer;
+        opacity: .7;
+        transition: opacity .1s ease;
+
+        &:hover {
+            opacity: 1;
+        }
+
+        svg {
+            fill: $coldimwhite;
+            transition: fill .1s ease;
+        }
+
+        &.bd-active svg {
+            fill: #fff;
+        }
+    }
+
+    &:hover .bd-emote-favourite-button {
+        display: block;
+    }
+}

client/src/styles/partials/index.scss

@@ -12,4 +12,4 @@
 @import './discordoverrides.scss';
 @import './helpers.scss';
 @import './misc.scss';
-@import './emote.scss';
+@import './emotes.scss';

client/src/ui/components/common/MaterialIcon.js

@@ -13,3 +13,4 @@ export { default as MiChevronDown } from './materialicons/ChevronDown.vue';
 export { default as MiExtension } from './materialicons/Extension.vue';
 export { default as MiError } from './materialicons/Error.vue';
 export { default as MiDiscord } from './materialicons/Discord.vue';
+export { default as MiStar } from './materialicons/Star.vue';

client/src/ui/components/common/materialicons/Star.vue

@@ -0,0 +1,28 @@
+/**
+ * BetterDiscord Material Design Icon
+ * Copyright (c) 2015-present Jiiks/JsSucks - https://github.com/Jiiks / https://github.com/JsSucks
+ * All rights reserved.
+ * https://betterdiscord.net
+ *
+ * This source code is licensed under the MIT license found in the
+ * LICENSE file in the root directory of this source tree.
+ *
+ * Material Design Icons
+ * Copyright (c) 2014 Google
+ * Apache 2.0 LICENSE
+ * https://www.apache.org/licenses/LICENSE-2.0.txt
+*/
+
+<template>
+    <span class="bd-material-design-icon">
+        <svg :width="size || 24" :height="size || 24" viewBox="0 0 24 24">
+        	<path d="M 11.9994,17.2708L 18.1794,20.9978L 16.5444,13.9688L 21.9994,9.24277L 14.8084,8.62477L 11.9994,1.99777L 9.1904,8.62477L 1.9994,9.24277L 7.4544,13.9688L 5.8194,20.9978L 11.9994,17.2708 Z " />
+        </svg>
+    </span>
+</template>
+
+<script>
+    export default {
+        props: ['size']
+    }
+</script>