From dd40df4b374e91b54db288d4c9e3516acf8b3e73 Mon Sep 17 00:00:00 2001
From: Liyas Thomas <liyascthomas@gmail.com>
Date: Tue, 15 Dec 2020 07:58:12 +0530
Subject: [PATCH] fix: minor UI transitions

---
 components/layout/pw-header.vue | 15 +++++++++++++--
 components/ui/autocomplete.vue  |  3 ++-
 components/ui/tabs.vue          |  3 +++
 pages/graphql.vue               |  7 -------
 4 files changed, 18 insertions(+), 10 deletions(-)

diff --git a/components/layout/pw-header.vue b/components/layout/pw-header.vue
index 1e5c88d07..6543fad81 100644
--- a/components/layout/pw-header.vue
+++ b/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="text-xl show-on-small-screen hover:text-acColor">Hs</h1>
+          <h1 class="hide-on-small-screen logo">Hoppscotch</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;
diff --git a/components/ui/autocomplete.vue b/components/ui/autocomplete.vue
index 5adda0ab6..639406a44 100644
--- a/components/ui/autocomplete.vue
+++ b/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;
diff --git a/components/ui/tabs.vue b/components/ui/tabs.vue
index b60513203..fffbac5e3 100644
--- a/components/ui/tabs.vue
+++ b/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;
diff --git a/pages/graphql.vue b/pages/graphql.vue
index ab65fe88a..5da240d8e 100644
--- a/pages/graphql.vue
+++ b/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) {