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

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

* chore(UI): effect disabled automatically on buttons that have the tooltip

components/interactables/Button/Button.html

@@ -1,6 +1,8 @@
 <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">
+  v-on:click="action" :disabled="loading" ref="button">
+  <!-- {{$attrs['data-tooltip']}} -->
+  <UiGlowingCursorArea :hide="$attrs['data-tooltip'] ? true : false">
   <!-- If the button is in the loading state -->
   <div v-if="loading">
     <!-- Loading Spinner -->
@@ -15,4 +17,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/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 && !hide" 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,33 @@
+<template src="./GlowingCursorArea.html"></template>
+<script lang="ts">
+import Vue from 'vue'
+
+export default Vue.extend({
+  props: {
+    hide: {
+      type: Boolean,
+      default: false,
+      required: false,
+    },
+  },
+  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
+    },
+  },
+})
+</script>
+<style scoped lang="less" src="./GlowingCursorArea.less"></style>

layouts/chat.vue

@@ -24,10 +24,6 @@ export default Vue.extend({
     this.$Sounds.changeLevels(this.$store.state.audio.volume / 100)
     this.$store.commit('setTypingUser', this.$mock.users[0])
   },
-  updated() {
-    // this.scrollToBottom()
-    console.log(this.$store.state.ui)
-  },
   methods: {
     toggleModal() {
       this.$store.commit('toggleModal', {