fix: minor UI transitions

components/layout/pw-header.vue

@@ -3,8 +3,8 @@
     <div class="row-wrapper">
       <span class="slide-in">
         <nuxt-link :to="localePath('index')">
-          <h1 class="text-xl hide-on-small-screen hover:text-acColor">Hoppscotch</h1>
+          <h1 class="hide-on-small-screen logo">Hoppscotch</h1>
-          <h1 class="text-xl show-on-small-screen hover:text-acColor">Hs</h1>
+          <h1 class="show-on-small-screen logo">Hs</h1>
         </nuxt-link>
       </span>
       <span>
@@ -133,6 +133,17 @@
 <style scoped lang="scss">
 $responsiveWidth: 768px;
 
+.logo {
+  @apply text-xl;
+  @apply transition-colors;
+  @apply ease-in-out;
+  @apply duration-200;
+
+  &:hover {
+    @apply text-acColor;
+  }
+}
+
 @keyframes slideIn {
   0% {
     @apply opacity-0;

components/ui/autocomplete.vue

@@ -58,7 +58,8 @@
     li {
       @apply w-full;
       @apply block;
-      @apply p-2;
+      @apply py-2;
+      @apply px-4;
       @apply text-sm;
       @apply font-mono;
       @apply font-normal;

components/ui/tabs.vue

@@ -57,6 +57,9 @@
         @apply text-sm;
         @apply rounded-lg;
         @apply cursor-pointer;
+        @apply transition-colors;
+        @apply ease-in-out;
+        @apply duration-200;
 
         .material-icons {
           @apply m-4;

pages/graphql.vue

@@ -485,13 +485,6 @@ export default {
         })
       },
     },
-    headerString() {
-      const result = this.headers
-        .filter(({ key }) => !!key)
-        .map(({ key, value }) => `${key}: ${value}`)
-        .join(",\n")
-      return result === "" ? "" : `${result}`
-    },
   },
   mounted() {
     if (this.$store.state.gql.schemaIntrospection && this.$store.state.gql.schema) {