chore(UI): applied the glowing effect to the buttons

components/interactables/Button/Button.html

@@ -1,6 +1,7 @@
 <button 
   :class="`button is-button is-${size} is-${type} ${outlined ? 'is-outlined' : ''} is-${fullWidth ? 'full-width' : 'normal-width'} ${inactive ? 'is-inactive' : ''}`"
   v-on:click="action" :disabled="loading">
+  <UiGlowingCursorArea :class="`${!glow ? 'hide' : ''}`">
   <!-- If the button is in the loading state -->
   <div v-if="loading">
     <!-- Loading Spinner -->
@@ -15,4 +16,5 @@
     <font-awesome-icon v-if="icon" :icon="[icon.style, icon.name]" :class="`button-icon ${text.length ? 'button-icon-padded' : ''}`" />
     <span v-if="text.length">{{ text }}</span>
   </div>
-</button>
+</UiGlowingCursorArea>
+</button>

components/interactables/Button/Button.less

@@ -1,11 +1,10 @@
 .button {
   min-width: 35px;
+  overflow: hidden;
   .button-icon-padded {
     margin-right: 0.25rem;
   }
 }
 .is-full-width {
   width: 100%;
 }
-
-

components/interactables/Button/Button.vue

@@ -80,6 +80,12 @@ export default Vue.extend({
      */
     fullWidth: Boolean,
     inactive: Boolean,
+
+    //glowing effetc
+    glow: {
+      type: Boolean,
+      default: false,
+    },
   },
 })
 </script>

components/tailored/core/sidebar/Sidebar.html

@@ -31,6 +31,7 @@
           :icon="{ style: 'far', name: 'user-friends' }"
           :action="() => $router.push('/friends/list')"
           :text="$t('global.friends')"
+          :glow="true"
         />
         <span :class="$route.path.includes('/friends/list') ? 'label tag-inverted' : 'label'">
           14
@@ -44,6 +45,7 @@
         :action="() => $router.push('/files/browse')"
         :icon="{ style: 'far', name: 'folder' }"
         :text="$t('global.files')"
+        :glow="true"
       />
     </div>
 
@@ -55,6 +57,7 @@
         :icon="{ style: 'far', name: 'comment-alt-lines' }"
         :text="$t('global.messages')"
         :action="() => $store.commit('showSidebarUsers', true)"
+        :glow="true"
       />
       <InteractablesButton
         full-width
@@ -63,6 +66,7 @@
         :icon="{ style: 'far', name: 'users' }"
         :text="$t('global.groups')"
         :action="() => $store.commit('showSidebarUsers', false)"
+        :glow="true"
       />
     </div>
     <div

components/ui/GlowingCursorArea/GlowingCursorArea.html

@@ -0,0 +1,4 @@
+<div id="custom-cursor-area" @mousemove="moveCursor" @mouseover="hideCursor = false" @mouseleave="hideCursor = true">
+    <div v-if="!hideCursor" id="custom-cursor" ref="point" :style="cursorPoint"></div>
+    <slot />
+</div>

components/ui/CustomCursorArea/CustomCursorArea.less → components/ui/GlowingCursorArea/GlowingCursorArea.less

@@ -1,23 +1,37 @@
+#custom-cursor-area {
+  width: 100%;
+  height: 100%;
+  > * {
+    pointer-events: none;
+  }
+  &.hide {
+    #custom-cursor {
+      display: none;
+    }
+  }
+}
+
 #custom-cursor {
   top: 0;
   left: 0;
-  position: fixed;
-  width: 30px;
-  height: 30px;
+  position: absolute;
+  width: 80px;
+  height: 80px;
   pointer-events: none;
   user-select: none;
   border-radius: 100%;
   z-index: 55555555;
   backface-visibility: hidden;
   will-change: transform;
-  box-shadow: 0 0 8px #fff, inset 0 0 8px #fff;
-  -webkit-animation: pulse 2s linear 1s infinite;
+  // box-shadow: 0 0 8px #fff, inset 0 0 8px #fff;
+  // -webkit-animation: pulse 2s linear 1s infinite;
   background: -webkit-radial-gradient(
+    rgba(255, 255, 255, 1),
     rgba(255, 255, 255, 0.2),
-    rgba(255, 255, 255, 0.4),
-    rgba(255, 255, 255, 0.7)
+    rgba(134, 86, 86, 0.1)
   );
-  opacity: 0.4;
+  box-shadow: 120px 80px 40px 20px #000;
+  opacity: 0.1;
 }
 
 @-webkit-keyframes pulse {

components/ui/GlowingCursorArea/GlowingCursorArea.vue

@@ -0,0 +1,29 @@
+<template src="./GlowingCursorArea.html"></template>
+<script lang="ts">
+import Vue from 'vue'
+
+export default Vue.extend({
+  data() {
+    return { xChild: 0, yChild: 0, hideCursor: true }
+  },
+  computed: {
+    cursorPoint(): string {
+      return `transform: translateX(${this.xChild - 25}px) translateY(${
+        this.yChild - 25
+      }px) translateZ(0) translate3d(0, 0, 0);`
+    },
+  },
+  methods: {
+    moveCursor(e: Event | any) {
+      let bounds = e.target.getBoundingClientRect()
+
+      this.xChild = e.clientX - bounds.left
+      this.yChild = e.clientY - bounds.top
+    },
+  },
+  mounted() {
+    // document.addEventListener('mousemove', this.moveCursor)
+  },
+})
+</script>
+<style scoped lang="less" src="./GlowingCursorArea.less"></style>