From f5a0c3cfcafecc86948a028021409924b9a9ae9f Mon Sep 17 00:00:00 2001
From: Liyas Thomas <liyascthomas@gmail.com>
Date: Wed, 5 Oct 2022 08:40:09 +0530
Subject: [PATCH] chore: minor ui improvements

---
 packages/hoppscotch-app/assets/scss/styles.scss       |  1 +
 .../hoppscotch-app/src/components/app/PaneLayout.vue  | 11 ++++-------
 .../hoppscotch-app/src/components/app/Shortcuts.vue   |  4 ++--
 .../hoppscotch-app/src/components/button/Primary.vue  |  4 ++--
 .../src/components/button/Secondary.vue               |  4 ++--
 5 files changed, 11 insertions(+), 13 deletions(-)

diff --git a/packages/hoppscotch-app/assets/scss/styles.scss b/packages/hoppscotch-app/assets/scss/styles.scss
index d0766ad52..0bd2fcbb4 100644
--- a/packages/hoppscotch-app/assets/scss/styles.scss
+++ b/packages/hoppscotch-app/assets/scss/styles.scss
@@ -455,6 +455,7 @@ pre.ace_editor {
   @apply px-1;
   @apply border border-dividerDark;
   @apply shadow-sm;
+  @apply <sm:hidden;
 }
 
 .capitalize-first {
diff --git a/packages/hoppscotch-app/src/components/app/PaneLayout.vue b/packages/hoppscotch-app/src/components/app/PaneLayout.vue
index 8c4b4623c..e087ed636 100644
--- a/packages/hoppscotch-app/src/components/app/PaneLayout.vue
+++ b/packages/hoppscotch-app/src/components/app/PaneLayout.vue
@@ -11,22 +11,19 @@
     <Pane
       :size="PANE_MAIN_SIZE"
       min-size="65"
-      class="hide-scrollbar !overflow-auto flex flex-col"
+      class="flex flex-col !overflow-auto"
     >
       <Splitpanes
         class="smart-splitter"
         :horizontal="COLUMN_LAYOUT"
         @resize="setPaneEvent($event, 'horizontal')"
       >
-        <Pane
-          :size="PANE_MAIN_TOP_SIZE"
-          class="hide-scrollbar !overflow-auto flex flex-col"
-        >
+        <Pane :size="PANE_MAIN_TOP_SIZE" class="flex flex-col !overflow-auto">
           <slot name="primary" />
         </Pane>
         <Pane
           :size="PANE_MAIN_BOTTOM_SIZE"
-          class="flex flex-col hide-scrollbar !overflow-auto"
+          class="flex flex-col !overflow-auto"
         >
           <slot name="secondary" />
         </Pane>
@@ -36,7 +33,7 @@
       v-if="SIDEBAR && hasSidebar"
       :size="PANE_SIDEBAR_SIZE"
       min-size="20"
-      class="!overflow-auto flex flex-col bg-primaryContrast"
+      class="flex flex-col !overflow-auto bg-primaryContrast"
     >
       <slot name="sidebar" />
     </Pane>
diff --git a/packages/hoppscotch-app/src/components/app/Shortcuts.vue b/packages/hoppscotch-app/src/components/app/Shortcuts.vue
index b4fc606f5..10a237e95 100644
--- a/packages/hoppscotch-app/src/components/app/Shortcuts.vue
+++ b/packages/hoppscotch-app/src/components/app/Shortcuts.vue
@@ -20,7 +20,7 @@
           open
         >
           <summary
-            class="flex items-center flex-1 min-w-0 px-6 py-4 font-semibold transition cursor-pointer focus:outline-none text-secondaryLight hover:text-secondaryDark"
+            class="flex items-center flex-1 min-w-0 px-6 py-4 font-semibold cursor-pointer transition focus:outline-none text-secondaryLight hover:text-secondaryDark"
           >
             <icon-lucide-chevron-right class="mr-2 indicator" />
             <span
@@ -55,7 +55,7 @@
           open
         >
           <summary
-            class="flex items-center flex-1 min-w-0 px-6 py-4 font-semibold transition cursor-pointer focus:outline-none text-secondaryLight hover:text-secondaryDark"
+            class="flex items-center flex-1 min-w-0 px-6 py-4 font-semibold cursor-pointer transition focus:outline-none text-secondaryLight hover:text-secondaryDark"
           >
             <icon-lucide-chevron-right class="mr-2 indicator" />
             <span
diff --git a/packages/hoppscotch-app/src/components/button/Primary.vue b/packages/hoppscotch-app/src/components/button/Primary.vue
index de4822e09..f6a803c44 100644
--- a/packages/hoppscotch-app/src/components/button/Primary.vue
+++ b/packages/hoppscotch-app/src/components/button/Primary.vue
@@ -41,11 +41,11 @@
         ]"
       />
       {{ label }}
-      <div v-if="shortcut.length" class="ml-2 <sm:hidden">
+      <div v-if="shortcut.length" class="<sm:hidden">
         <kbd
           v-for="(key, index) in shortcut"
           :key="`key-${index}`"
-          class="shortcut-key !bg-accentLight"
+          class="shortcut-key !bg-accentDark !border-accentLight"
         >
           {{ key }}
         </kbd>
diff --git a/packages/hoppscotch-app/src/components/button/Secondary.vue b/packages/hoppscotch-app/src/components/button/Secondary.vue
index 2b20b951e..2756b5370 100644
--- a/packages/hoppscotch-app/src/components/button/Secondary.vue
+++ b/packages/hoppscotch-app/src/components/button/Secondary.vue
@@ -42,11 +42,11 @@
         ]"
       />
       {{ label }}
-      <div v-if="shortcut.length" class="ml-2 <sm:hidden">
+      <div v-if="shortcut.length" class="<sm:hidden">
         <kbd
           v-for="(key, index) in shortcut"
           :key="`key-${index}`"
-          class="shortcut-key"
+          class="shortcut-key !bg-inherit"
         >
           {{ key }}
         </kbd>