refactor(ui): better GitHub buttons

assets/scss/styles.scss

@@ -726,7 +726,7 @@ section {
   }
 
   .hide-on-small-screen {
-    @apply hidden;
+    @apply !hidden;
   }
 
   .sticky-inner {

components/app/GitHubStarButton.vue

@@ -0,0 +1,28 @@
+<template>
+  <TranslateFade appear>
+    <GithubButton
+      title="Star Hoppscotch"
+      href="https://github.com/hoppscotch/hoppscotch"
+      :data-color-scheme="
+        $colorMode.value != 'light'
+          ? $colorMode.value == 'black'
+            ? 'dark'
+            : 'dark_dimmed'
+          : 'light'
+      "
+      :data-show-count="true"
+      data-text="Star"
+      aria-label="Star Hoppscotch on GitHub"
+    />
+  </TranslateFade>
+</template>
+
+<script>
+import GithubButton from "vue-github-button"
+
+export default {
+  components: {
+    GithubButton,
+  },
+}
+</script>

components/app/Header.vue

@@ -5,16 +5,7 @@
         <nuxt-link :to="localePath('index')">
           <h1 class="heading logo">Hoppscotch</h1>
         </nuxt-link>
-        <iframe
+        <AppGitHubStarButton class="ml-8 hide-on-small-screen" />
-          src="https://ghbtns.com/github-btn.html?user=hoppscotch&repo=hoppscotch&type=star&count=true"
-          frameborder="0"
-          scrolling="0"
-          width="150"
-          height="20"
-          title="GitHub"
-          class="ml-8 hide-on-small-screen"
-          loading="lazy"
-        ></iframe>
       </span>
       <span>
         <button

components/translate/Fade.vue

@@ -0,0 +1,25 @@
+<template>
+  <transition
+    :appear="appear"
+    name="translate-fade"
+    enter-active-class="transition duration-500"
+    enter-class="opacity-0"
+    enter-to-class="opacity-100"
+    leave-active-class="transition duration-500"
+    leave-class="opacity-100"
+    leave-to-class="opacity-0"
+  >
+    <slot></slot>
+  </transition>
+</template>
+
+<script>
+export default {
+  props: {
+    appear: {
+      type: Boolean,
+      default: false,
+    },
+  },
+}
+</script>

components/translate/SlideLeft.vue

@@ -3,6 +3,7 @@
     <slot></slot>
   </transition>
 </template>
+
 <script>
 export default {
   props: {

nuxt.config.js

@@ -165,6 +165,7 @@ export default {
   // ESLint module configuration (https://github.com/nuxt-community/eslint-module)
   eslint: {
     fix: true,
+    emitWarning: true,
     quiet: true,
   },
 

package.json

@@ -50,6 +50,7 @@
     "v-tooltip": "^2.1.3",
     "vue-apollo": "^3.0.7",
     "vue-cli-plugin-apollo": "^0.22.2",
+    "vue-github-button": "^1.3.0",
     "vue-rx": "^6.2.0",
     "vuejs-auto-complete": "^0.9.0",
     "vuex-persist": "^3.1.3",