From f0aaca2639b12a4daaa3203c18f441299eb64fc8 Mon Sep 17 00:00:00 2001
From: liyasthomas <liyascthomas@gmail.com>
Date: Sat, 24 Jul 2021 22:16:48 +0530
Subject: [PATCH] feat: slideover menus, minor ui fixes

---
 assets/scss/styles.scss                       | 10 +-
 components/app/Footer.vue                     | 92 ++++++++++---------
 components/app/Shortcuts.vue                  | 39 +++++---
 components/app/Sidenav.vue                    |  3 +-
 components/app/SlideOver.vue                  | 78 ++++++++++++++++
 components/button/Primary.vue                 |  2 +-
 components/button/Secondary.vue               |  2 +-
 components/collections/graphql/Collection.vue |  2 +-
 components/collections/graphql/Folder.vue     |  2 +-
 components/collections/graphql/index.vue      |  6 +-
 components/collections/index.vue              |  8 +-
 components/collections/my/Collection.vue      |  2 +-
 components/collections/my/Folder.vue          |  2 +-
 components/collections/teams/Collection.vue   |  2 +-
 components/collections/teams/Folder.vue       |  2 +-
 components/environments/Edit.vue              |  2 +-
 components/environments/index.vue             |  4 +-
 components/history/index.vue                  |  4 +-
 components/http/BodyParameters.vue            | 14 +--
 components/http/Headers.vue                   |  2 +-
 components/http/Parameters.vue                |  2 +-
 components/http/RawBody.vue                   |  2 +-
 components/http/ResponseMeta.vue              |  2 +-
 components/realtime/Websocket.vue             |  2 +-
 components/smart/Anchor.vue                   |  2 +-
 components/smart/Item.vue                     |  2 +-
 components/tab/Primary.vue                    |  2 +-
 components/tab/Secondary.vue                  |  2 +-
 pages/graphql.vue                             | 25 +++--
 pages/settings.vue                            |  2 +-
 30 files changed, 213 insertions(+), 108 deletions(-)
 create mode 100644 components/app/SlideOver.vue

diff --git a/assets/scss/styles.scss b/assets/scss/styles.scss
index b65c3baf7..a31cb78de 100644
--- a/assets/scss/styles.scss
+++ b/assets/scss/styles.scss
@@ -307,7 +307,15 @@ input[type="checkbox"] {
 
     &.info {
       @apply !bg-accent;
-      @apply !text-primary;
+      @apply !text-white;
+    }
+
+    &.error {
+      @apply !text-white;
+    }
+
+    &.success {
+      @apply !text-white;
     }
   }
 }
diff --git a/components/app/Footer.vue b/components/app/Footer.vue
index 026a4d989..661ff966a 100644
--- a/components/app/Footer.vue
+++ b/components/app/Footer.vue
@@ -1,49 +1,51 @@
 <template>
-  <div class="flex justify-between">
-    <div>
-      <ButtonSecondary
-        v-tippy="{ theme: 'tooltip' }"
-        :title="LEFT_SIDEBAR ? $t('hide_sidebar') : $t('show_sidebar')"
-        icon="menu_open"
-        :class="{ 'transform rotate-180': !LEFT_SIDEBAR }"
-        @click.native="toggleSetting('LEFT_SIDEBAR')"
-      />
-      <ButtonSecondary
-        v-tippy="{ theme: 'tooltip' }"
-        :title="`${ZEN_MODE ? $t('turn_off') : $t('turn_on')} ${$t(
-          'zen_mode'
-        )}`"
-        :icon="ZEN_MODE ? 'fullscreen_exit' : 'fullscreen'"
-        :class="{
-          'text-accent focus:text-accent hover:text-accent': ZEN_MODE,
-        }"
-        @click.native="toggleSetting('ZEN_MODE')"
-      />
+  <div>
+    <div class="flex justify-between">
+      <div>
+        <ButtonSecondary
+          v-tippy="{ theme: 'tooltip' }"
+          :title="LEFT_SIDEBAR ? $t('hide_sidebar') : $t('show_sidebar')"
+          icon="menu_open"
+          :class="{ 'transform rotate-180': !LEFT_SIDEBAR }"
+          @click.native="toggleSetting('LEFT_SIDEBAR')"
+        />
+        <ButtonSecondary
+          v-tippy="{ theme: 'tooltip' }"
+          :title="`${ZEN_MODE ? $t('turn_off') : $t('turn_on')} ${$t(
+            'zen_mode'
+          )}`"
+          :icon="ZEN_MODE ? 'fullscreen_exit' : 'fullscreen'"
+          :class="{
+            '!text-accent focus:text-accent hover:text-accent': ZEN_MODE,
+          }"
+          @click.native="toggleSetting('ZEN_MODE')"
+        />
+      </div>
+      <div>
+        <ButtonSecondary
+          v-tippy="{ theme: 'tooltip' }"
+          icon="keyboard"
+          :title="$t('shortcuts')"
+          :shortcut="[getSpecialKey(), '/']"
+          @click.native="showShortcuts = true"
+        />
+        <ButtonSecondary
+          v-if="navigatorShare"
+          v-tippy="{ theme: 'tooltip' }"
+          icon="share"
+          :title="$t('share')"
+          @click.native="nativeShare()"
+        />
+        <ButtonSecondary
+          v-tippy="{ theme: 'tooltip' }"
+          :title="RIGHT_SIDEBAR ? $t('hide_sidebar') : $t('show_sidebar')"
+          icon="menu_open"
+          :class="['transform rotate-180', { 'rotate-0': !RIGHT_SIDEBAR }]"
+          @click.native="toggleSetting('RIGHT_SIDEBAR')"
+        />
+      </div>
     </div>
-    <div>
-      <ButtonSecondary
-        v-tippy="{ theme: 'tooltip' }"
-        icon="keyboard"
-        :title="$t('shortcuts')"
-        :shortcut="[getSpecialKey(), '/']"
-        @click.native="showShortcuts = true"
-      />
-      <ButtonSecondary
-        v-if="navigatorShare"
-        v-tippy="{ theme: 'tooltip' }"
-        icon="share"
-        :title="$t('share')"
-        @click.native="nativeShare()"
-      />
-      <ButtonSecondary
-        v-tippy="{ theme: 'tooltip' }"
-        :title="RIGHT_SIDEBAR ? $t('hide_sidebar') : $t('show_sidebar')"
-        icon="menu_open"
-        :class="['transform rotate-180', { 'rotate-0': !RIGHT_SIDEBAR }]"
-        @click.native="toggleSetting('RIGHT_SIDEBAR')"
-      />
-    </div>
-    <AppShortcuts :show="showShortcuts" @hide-modal="showShortcuts = false" />
+    <AppShortcuts :show="showShortcuts" @close="showShortcuts = false" />
   </div>
 </template>
 
@@ -80,7 +82,7 @@ export default defineComponent({
   watch: {
     ZEN_MODE(ZEN_MODE) {
       this.applySetting("LEFT_SIDEBAR", !ZEN_MODE)
-      this.applySetting("RIGHT_SIDEBAR", !ZEN_MODE)
+      // this.applySetting("RIGHT_SIDEBAR", !ZEN_MODE)
     },
   },
   methods: {
diff --git a/components/app/Shortcuts.vue b/components/app/Shortcuts.vue
index a533842e5..a9a52d912 100644
--- a/components/app/Shortcuts.vue
+++ b/components/app/Shortcuts.vue
@@ -1,13 +1,25 @@
 <template>
-  <SmartModal v-if="show" @close="hideModal">
-    <template #header>
-      <h3 class="heading">{{ $t("shortcuts") }}</h3>
-      <div>
-        <ButtonSecondary icon="close" @click.native="hideModal" />
+  <AppSlideOver :show="show" @close="close()">
+    <template #content>
+      <div
+        class="
+          bg-primary
+          border-b border-dividerLight
+          flex
+          p-2
+          top-0
+          items-center
+          sticky
+          justify-between
+        "
+      >
+        <h3 class="ml-2 heading">{{ $t("shortcuts") }}</h3>
+        <div>
+          <ButtonSecondary to="/settings" icon="tune" />
+          <ButtonSecondary icon="close" @click.native="close()" />
+        </div>
       </div>
-    </template>
-    <template #body>
-      <div class="px-2">
+      <div class="p-4">
         <div
           v-for="(shortcut, index) in shortcuts"
           :key="`shortcut-${index}`"
@@ -34,7 +46,7 @@
         </div>
       </div>
     </template>
-  </SmartModal>
+  </AppSlideOver>
 </template>
 
 <script>
@@ -94,10 +106,15 @@ export default {
       ],
     }
   },
+  watch: {
+    $route() {
+      this.$emit("close")
+    },
+  },
   methods: {
     getSpecialKey: getPlatformSpecialKey,
-    hideModal() {
-      this.$emit("hide-modal")
+    close() {
+      this.$emit("close")
     },
   },
 }
diff --git a/components/app/Sidenav.vue b/components/app/Sidenav.vue
index 97379f4bb..c30e76e7e 100644
--- a/components/app/Sidenav.vue
+++ b/components/app/Sidenav.vue
@@ -43,8 +43,7 @@ export default {
   @apply hover:text-secondaryDark;
 
   .material-icons {
-    @apply transition-opacity;
-    @apply opacity-50;
+    @apply opacity-75;
   }
 
   span {
diff --git a/components/app/SlideOver.vue b/components/app/SlideOver.vue
new file mode 100644
index 000000000..79b625fe6
--- /dev/null
+++ b/components/app/SlideOver.vue
@@ -0,0 +1,78 @@
+<template>
+  <div>
+    <transition
+      enter-class="opacity-0"
+      enter-active-class="ease-out transition"
+      enter-to-class="opacity-100"
+      leave-class="opacity-100"
+      leave-active-class="ease-out transition"
+      leave-to-class="opacity-0"
+    >
+      <div
+        v-show="show"
+        class="inset-0 transition-opacity z-10 fixed"
+        @keydown.esc="close()"
+      >
+        <div
+          class="bg-black opacity-25 inset-0 absolute"
+          tabindex="0"
+          @click="close()"
+        ></div>
+      </div>
+    </transition>
+    <aside
+      class="
+        bg-primary
+        h-full
+        max-w-full
+        shadow-xl
+        transform
+        transition
+        top-0
+        ease-in-out
+        right-0
+        w-96
+        z-30
+        duration-300
+        fixed
+        overflow-auto
+      "
+      :class="show ? 'translate-x-0' : 'translate-x-full'"
+    >
+      <slot name="content"></slot>
+    </aside>
+  </div>
+</template>
+
+<script>
+export default {
+  props: {
+    show: {
+      type: Boolean,
+      required: true,
+      default: false,
+    },
+  },
+  watch: {
+    show: {
+      immediate: true,
+      handler(show) {
+        if (process.client) {
+          if (show) document.body.style.setProperty("overflow", "hidden")
+          else document.body.style.removeProperty("overflow")
+        }
+      },
+    },
+  },
+  mounted() {
+    document.addEventListener("keydown", (e) => {
+      if (e.keyCode === 27 && this.show) this.close()
+    })
+  },
+  methods: {
+    close() {
+      this.$emit("close")
+    },
+  },
+}
+</script>
diff --git a/components/button/Primary.vue b/components/button/Primary.vue
index 31b62e437..f3764f9c9 100644
--- a/components/button/Primary.vue
+++ b/components/button/Primary.vue
@@ -18,7 +18,7 @@
         : `text-white bg-accent hover:bg-accentDark focus:bg-accentDark`,
       label ? 'px-4' : 'px-2',
       rounded ? 'rounded-full' : 'rounded',
-      { 'opacity-50 cursor-not-allowed': disabled },
+      { 'opacity-75 cursor-not-allowed': disabled },
       { 'pointer-events-none': loading },
       { 'px-6 py-4 text-lg': large },
       { 'shadow-lg hover:shadow-xl': shadow },
diff --git a/components/button/Secondary.vue b/components/button/Secondary.vue
index a97981aa1..4da793f61 100644
--- a/components/button/Secondary.vue
+++ b/components/button/Secondary.vue
@@ -18,7 +18,7 @@
         : 'text-secondary hover:text-secondaryDark hover:bg-primaryDark focus:text-secondaryDark',
       label ? 'px-3' : 'px-2',
       rounded ? 'rounded-full' : 'rounded',
-      { 'opacity-50 cursor-not-allowed': disabled },
+      { 'opacity-75 cursor-not-allowed': disabled },
       { 'flex-row-reverse': reverse },
       {
         'border border-divider hover:border-dividerDark focus:border-dividerDark':
diff --git a/components/collections/graphql/Collection.vue b/components/collections/graphql/Collection.vue
index 259b4e4fa..2078a1a42 100644
--- a/components/collections/graphql/Collection.vue
+++ b/components/collections/graphql/Collection.vue
@@ -144,7 +144,7 @@
           justify-center
         "
       >
-        <i class="opacity-50 pb-2 material-icons">folder_open</i>
+        <i class="opacity-75 pb-2 material-icons">folder_open</i>
         <span class="text-xs text-center">
           {{ $t("collection_empty") }}
         </span>
diff --git a/components/collections/graphql/Folder.vue b/components/collections/graphql/Folder.vue
index 4783b512d..0ec862353 100644
--- a/components/collections/graphql/Folder.vue
+++ b/components/collections/graphql/Folder.vue
@@ -143,7 +143,7 @@
           justify-center
         "
       >
-        <i class="opacity-50 pb-2 material-icons">folder_open</i>
+        <i class="opacity-75 pb-2 material-icons">folder_open</i>
         <span class="text-xs text-center">
           {{ $t("folder_empty") }}
         </span>
diff --git a/components/collections/graphql/index.vue b/components/collections/graphql/index.vue
index 495b55ec7..36a67db95 100644
--- a/components/collections/graphql/index.vue
+++ b/components/collections/graphql/index.vue
@@ -1,7 +1,7 @@
 <template>
   <AppSection
     label="collections"
-    :class="{ 'rounded border-2 border-divider': savingMode }"
+    :class="{ 'rounded border border-divider': savingMode }"
   >
     <div
       class="flex flex-col top-10 z-10 sticky"
@@ -62,7 +62,7 @@
       v-if="collections.length === 0"
       class="flex flex-col text-secondaryLight p-4 items-center justify-center"
     >
-      <i class="opacity-50 pb-2 material-icons">create_new_folder</i>
+      <i class="opacity-75 pb-2 material-icons">create_new_folder</i>
       <span class="text-xs text-center">
         {{ $t("create_new_collection") }}
       </span>
@@ -71,7 +71,7 @@
       v-if="!(filteredCollections.length !== 0 || collections.length === 0)"
       class="flex flex-col text-secondaryLight p-4 items-center justify-center"
     >
-      <i class="opacity-50 pb-2 material-icons">manage_search</i>
+      <i class="opacity-75 pb-2 material-icons">manage_search</i>
       <span class="text-xs text-center">
         {{ $t("nothing_found") }} "{{ filterText }}"
       </span>
diff --git a/components/collections/index.vue b/components/collections/index.vue
index 3e6c0c614..edb502b4c 100644
--- a/components/collections/index.vue
+++ b/components/collections/index.vue
@@ -1,10 +1,10 @@
 <template>
   <AppSection
     label="collections"
-    :class="{ 'rounded border-2 border-divider': saveRequest }"
+    :class="{ 'rounded border border-divider': saveRequest }"
   >
     <div
-      class="bg-primary flex flex-col top-0 z-10 sticky"
+      class="bg-primary rounded-t flex flex-col top-0 z-10 sticky"
       :class="{ '!top-10': !saveRequest && !doc }"
     >
       <input
@@ -97,7 +97,7 @@
       v-if="collections.length === 0"
       class="flex flex-col text-secondaryLight p-4 items-center justify-center"
     >
-      <i class="opacity-50 pb-2 material-icons">create_new_folder</i>
+      <i class="opacity-75 pb-2 material-icons">create_new_folder</i>
       <span class="text-xs text-center">
         {{ $t("create_new_collection") }}
       </span>
@@ -106,7 +106,7 @@
       v-if="!(filteredCollections.length !== 0 || collections.length === 0)"
       class="flex flex-col text-secondaryLight p-4 items-center justify-center"
     >
-      <i class="opacity-50 pb-2 material-icons">manage_search</i>
+      <i class="opacity-75 pb-2 material-icons">manage_search</i>
       <span class="text-xs text-center">
         {{ $t("nothing_found") }} "{{ filterText }}"
       </span>
diff --git a/components/collections/my/Collection.vue b/components/collections/my/Collection.vue
index 558e36049..45802dfe6 100644
--- a/components/collections/my/Collection.vue
+++ b/components/collections/my/Collection.vue
@@ -166,7 +166,7 @@
           justify-center
         "
       >
-        <i class="opacity-50 pb-2 material-icons">folder_open</i>
+        <i class="opacity-75 pb-2 material-icons">folder_open</i>
         <span class="text-xs text-center">
           {{ $t("collection_empty") }}
         </span>
diff --git a/components/collections/my/Folder.vue b/components/collections/my/Folder.vue
index 9b32461fd..ea0c8a781 100644
--- a/components/collections/my/Folder.vue
+++ b/components/collections/my/Folder.vue
@@ -152,7 +152,7 @@
           justify-center
         "
       >
-        <i class="opacity-50 pb-2 material-icons">folder_open</i>
+        <i class="opacity-75 pb-2 material-icons">folder_open</i>
         <span class="text-xs text-center">
           {{ $t("folder_empty") }}
         </span>
diff --git a/components/collections/teams/Collection.vue b/components/collections/teams/Collection.vue
index e8ba10461..8c3a4b026 100644
--- a/components/collections/teams/Collection.vue
+++ b/components/collections/teams/Collection.vue
@@ -163,7 +163,7 @@
           justify-center
         "
       >
-        <i class="opacity-50 pb-2 material-icons">folder_open</i>
+        <i class="opacity-75 pb-2 material-icons">folder_open</i>
         <span class="text-xs text-center">
           {{ $t("collection_empty") }}
         </span>
diff --git a/components/collections/teams/Folder.vue b/components/collections/teams/Folder.vue
index bc56e2465..bf3684709 100644
--- a/components/collections/teams/Folder.vue
+++ b/components/collections/teams/Folder.vue
@@ -147,7 +147,7 @@
           justify-center
         "
       >
-        <i class="opacity-50 pb-2 material-icons">folder_open</i>
+        <i class="opacity-75 pb-2 material-icons">folder_open</i>
         <span class="text-xs text-center">
           {{ $t("folder_empty") }}
         </span>
diff --git a/components/environments/Edit.vue b/components/environments/Edit.vue
index 153104d0b..d9f41e497 100644
--- a/components/environments/Edit.vue
+++ b/components/environments/Edit.vue
@@ -41,7 +41,7 @@
             />
           </div>
         </div>
-        <div class="border-divider border-2">
+        <div class="border-divider rounded border">
           <div
             v-for="(variable, index) in vars"
             :key="`variable-${index}`"
diff --git a/components/environments/index.vue b/components/environments/index.vue
index fb6d2a710..dbdb32759 100644
--- a/components/environments/index.vue
+++ b/components/environments/index.vue
@@ -1,6 +1,6 @@
 <template>
   <AppSection label="environments">
-    <div class="bg-primary flex flex-col top-10 z-10 sticky">
+    <div class="bg-primary rounded-t flex flex-col top-10 z-10 sticky">
       <div class="select-wrapper">
         <select
           v-model="selectedEnvironmentIndex"
@@ -62,7 +62,7 @@
       v-if="environments.length === 0"
       class="flex flex-col text-secondaryLight p-4 items-center justify-center"
     >
-      <i class="opacity-50 pb-2 material-icons">library_add</i>
+      <i class="opacity-75 pb-2 material-icons">library_add</i>
       <span class="text-xs text-center">
         {{ $t("create_new_environment") }}
       </span>
diff --git a/components/history/index.vue b/components/history/index.vue
index 8024d0093..d0f24eb13 100644
--- a/components/history/index.vue
+++ b/components/history/index.vue
@@ -59,7 +59,7 @@
       v-if="!(filteredHistory.length !== 0 || history.length === 0)"
       class="flex flex-col text-secondaryLight p-4 items-center justify-center"
     >
-      <i class="opacity-50 pb-2 material-icons">manage_search</i>
+      <i class="opacity-75 pb-2 material-icons">manage_search</i>
       <span class="text-xs text-center">
         {{ $t("nothing_found") }} "{{ filterText }}"
       </span>
@@ -68,7 +68,7 @@
       v-if="history.length === 0"
       class="flex flex-col text-secondaryLight p-4 items-center justify-center"
     >
-      <i class="opacity-50 pb-2 material-icons">schedule</i>
+      <i class="opacity-75 pb-2 material-icons">schedule</i>
       <span class="text-xs text-center">
         {{ $t("history_empty") }}
       </span>
diff --git a/components/http/BodyParameters.vue b/components/http/BodyParameters.vue
index 2ac98a30b..261f933e5 100644
--- a/components/http/BodyParameters.vue
+++ b/components/http/BodyParameters.vue
@@ -16,12 +16,14 @@
       <label for="reqParamList" class="font-semibold text-xs">
         {{ $t("request_body") }}
       </label>
-      <ButtonSecondary
-        v-tippy="{ theme: 'tooltip' }"
-        :title="$t('clear')"
-        icon="clear_all"
-        @click.native="clearContent('bodyParams', $event)"
-      />
+      <div class="flex">
+        <ButtonSecondary
+          v-tippy="{ theme: 'tooltip' }"
+          :title="$t('clear')"
+          icon="clear_all"
+          @click.native="clearContent('bodyParams', $event)"
+        />
+      </div>
     </div>
     <div
       v-for="(param, index) in bodyParams"
diff --git a/components/http/Headers.vue b/components/http/Headers.vue
index e55de648a..545fcb08a 100644
--- a/components/http/Headers.vue
+++ b/components/http/Headers.vue
@@ -16,7 +16,7 @@
       <label for="headerList" class="font-semibold text-xs">
         {{ $t("header_list") }}
       </label>
-      <div>
+      <div class="flex">
         <ButtonSecondary
           v-tippy="{ theme: 'tooltip' }"
           :title="$t('clear')"
diff --git a/components/http/Parameters.vue b/components/http/Parameters.vue
index a4c11825c..1f6425ce6 100644
--- a/components/http/Parameters.vue
+++ b/components/http/Parameters.vue
@@ -16,7 +16,7 @@
       <label class="font-semibold text-xs">
         {{ $t("parameter_list") }}
       </label>
-      <div>
+      <div class="flex">
         <ButtonSecondary
           v-tippy="{ theme: 'tooltip' }"
           :title="$t('clear_all')"
diff --git a/components/http/RawBody.vue b/components/http/RawBody.vue
index 69a7fc1da..76e6121f4 100644
--- a/components/http/RawBody.vue
+++ b/components/http/RawBody.vue
@@ -16,7 +16,7 @@
       <label for="rawBody" class="font-semibold text-xs">
         {{ $t("raw_request_body") }}
       </label>
-      <div>
+      <div class="flex">
         <ButtonSecondary
           v-if="contentType.endsWith('json')"
           ref="prettifyRequest"
diff --git a/components/http/ResponseMeta.vue b/components/http/ResponseMeta.vue
index 1ae4b5e8a..64c8bd329 100644
--- a/components/http/ResponseMeta.vue
+++ b/components/http/ResponseMeta.vue
@@ -10,7 +10,7 @@
         justify-center
       "
     >
-      <i class="opacity-50 pb-2 material-icons">send</i>
+      <i class="opacity-75 pb-2 material-icons">send</i>
       <span class="text-xs text-center">
         {{ $t("waiting_send_req") }}
       </span>
diff --git a/components/realtime/Websocket.vue b/components/realtime/Websocket.vue
index 6a29c31d0..f9b581315 100644
--- a/components/realtime/Websocket.vue
+++ b/components/realtime/Websocket.vue
@@ -55,7 +55,7 @@
             <label class="font-semibold text-xs">
               {{ $t("protocols") }}
             </label>
-            <div>
+            <div class="flex">
               <ButtonSecondary
                 v-tippy="{ theme: 'tooltip' }"
                 :title="$t('clear_all')"
diff --git a/components/smart/Anchor.vue b/components/smart/Anchor.vue
index f2ba38a30..8ba5e3705 100644
--- a/components/smart/Anchor.vue
+++ b/components/smart/Anchor.vue
@@ -8,7 +8,7 @@
       color
         ? `text-${color}-500 hover:text-${color}-600 focus:text-${color}-600`
         : 'hover:text-secondaryDark focus:text-secondaryDark',
-      { 'opacity-50 cursor-not-allowed': disabled },
+      { 'opacity-75 cursor-not-allowed': disabled },
       { 'flex-row-reverse': reverse },
     ]"
     :disabled="disabled"
diff --git a/components/smart/Item.vue b/components/smart/Item.vue
index e3712be79..0a6d0db13 100644
--- a/components/smart/Item.vue
+++ b/components/smart/Item.vue
@@ -17,7 +17,7 @@
       focus:outline-none
     "
     :class="[
-      { 'opacity-50 cursor-not-allowed': disabled },
+      { 'opacity-75 cursor-not-allowed': disabled },
       { 'pointer-events-none': loading },
       { 'flex-1': label },
       { 'flex-row-reverse justify-end': reverse },
diff --git a/components/tab/Primary.vue b/components/tab/Primary.vue
index ffde3a9bb..754ef702f 100644
--- a/components/tab/Primary.vue
+++ b/components/tab/Primary.vue
@@ -18,7 +18,7 @@
       color
         ? `text-${color}-500 hover:text-${color}-600 focus:text-${color}-600`
         : 'hover:text-secondaryDark focus:text-accent',
-      { 'opacity-50 cursor-not-allowed': disabled },
+      { 'opacity-75 cursor-not-allowed': disabled },
       { 'flex-row-reverse': reverse },
     ]"
     :disabled="disabled"
diff --git a/components/tab/Secondary.vue b/components/tab/Secondary.vue
index f27addaa9..410f47cd2 100644
--- a/components/tab/Secondary.vue
+++ b/components/tab/Secondary.vue
@@ -26,7 +26,7 @@
         ? `text-${color}-500 hover:text-${color}-600 focus:text-${color}-600`
         : '',
       { 'translate-x-2': active },
-      { 'opacity-50 cursor-not-allowed': disabled },
+      { 'opacity-75 cursor-not-allowed': disabled },
     ]"
     :disabled="disabled"
     type="button"
diff --git a/pages/graphql.vue b/pages/graphql.vue
index d9a6b8fc7..a9f4d9c03 100644
--- a/pages/graphql.vue
+++ b/pages/graphql.vue
@@ -57,13 +57,12 @@
                     <label for="gqlQuery" class="font-semibold text-xs">
                       {{ $t("query") }}
                     </label>
-                    <div>
+                    <div class="flex">
                       <ButtonSecondary
                         :label="$t('run')"
                         :shortcut="[getSpecialKey(), 'Enter']"
                         icon="play_arrow"
                         class="text-xs !text-accent"
-                        outline
                         @click.native="runQuery()"
                       />
                       <ButtonSecondary
@@ -124,7 +123,7 @@
                     <label class="font-semibold text-xs">
                       {{ $t("variables") }}
                     </label>
-                    <div>
+                    <div class="flex">
                       <ButtonSecondary
                         v-tippy="{ theme: 'tooltip' }"
                         :title="$t('copy')"
@@ -172,10 +171,10 @@
                       justify-between
                     "
                   >
-                    <label class="font-semibold text-xs">{{
-                      $t("headers")
-                    }}</label>
-                    <div>
+                    <label class="font-semibold text-xs">
+                      {{ $t("headers") }}
+                    </label>
+                    <div class="flex">
                       <ButtonSecondary
                         v-tippy="{ theme: 'tooltip' }"
                         :title="$t('clear')"
@@ -294,7 +293,7 @@
                 <label class="font-semibold text-xs" for="responseField">
                   {{ $t("response") }}
                 </label>
-                <div>
+                <div class="flex">
                   <ButtonSecondary
                     ref="downloadResponse"
                     v-tippy="{ theme: 'tooltip' }"
@@ -337,7 +336,7 @@
                   justify-center
                 "
               >
-                <i class="opacity-50 pb-2 material-icons">send</i>
+                <i class="opacity-75 pb-2 material-icons">send</i>
                 <span class="text-xs text-center">
                   {{ $t("waiting_send_req") }}
                 </span>
@@ -461,7 +460,7 @@
                     justify-center
                   "
                 >
-                  <i class="opacity-50 pb-2 material-icons">link</i>
+                  <i class="opacity-75 pb-2 material-icons">link</i>
                   <span class="text-xs text-center">
                     {{ $t("connect_graphql_endpoint") }}
                   </span>
@@ -500,7 +499,7 @@
                   <label class="font-semibold text-xs">
                     {{ $t("schema") }}
                   </label>
-                  <div>
+                  <div class="flex">
                     <ButtonSecondary
                       ref="downloadSchema"
                       v-tippy="{ theme: 'tooltip' }"
@@ -541,7 +540,7 @@
                     justify-center
                   "
                 >
-                  <i class="opacity-50 pb-2 material-icons">link</i>
+                  <i class="opacity-75 pb-2 material-icons">link</i>
                   <span class="text-xs text-center">
                     {{ $t("connect_graphql_endpoint") }}
                   </span>
@@ -924,7 +923,7 @@ export default defineComponent({
 
         this.$nuxt.$loading.finish()
         const duration = Date.now() - startTime
-        this.$toast.info(this.$t("finished_in", { duration }), {
+        this.$toast.success(this.$t("finished_in", { duration }), {
           icon: "done",
         })
 
diff --git a/pages/settings.vue b/pages/settings.vue
index 837b7697c..59aadbc51 100644
--- a/pages/settings.vue
+++ b/pages/settings.vue
@@ -412,7 +412,7 @@ export default defineComponent({
   watch: {
     ZEN_MODE(ZEN_MODE) {
       this.applySetting("LEFT_SIDEBAR", !ZEN_MODE)
-      this.applySetting("RIGHT_SIDEBAR", !ZEN_MODE)
+      // this.applySetting("RIGHT_SIDEBAR", !ZEN_MODE)
     },
     proxySettings: {
       deep: true,