chore: improve button border radius

packages/hoppscotch-ui/src/components/button/Primary.vue

@@ -1,11 +1,14 @@
 <template>
-  <HoppSmartLink :to="to" :blank="blank"
-    class="relative inline-flex items-center justify-center py-2 font-bold transition focus:outline-none focus-visible:bg-accentDark"
+  <HoppSmartLink
+    :to="to"
+    :exact="exact"
+    :blank="blank"
+    class="inline-flex items-center justify-center font-semibold transition whitespace-nowrap focus:outline-none"
     :class="[
       color
         ? `text-${color}-800 bg-${color}-200 hover:(text-${color}-900 bg-${color}-300) focus-visible:(text-${color}-900 bg-${color}-300)`
         : `text-accentContrast bg-accent hover:bg-accentDark focus-visible:bg-accentDark`,
-      label ? 'px-4' : 'px-2',
+      label ? 'px-4 py-2' : 'p-2',
       rounded ? 'rounded-full' : 'rounded',
       { 'opacity-75 cursor-not-allowed': disabled },
       { 'pointer-events-none': loading },
@@ -41,13 +44,19 @@
         {{ label }}
       </div>
       <div v-if="shortcut.length" class="<sm:hidden">
-        <kbd v-for="(key, index) in shortcut" :key="`key-${index}`"
-          class="shortcut-key !bg-accentDark !border-accentLight">
+        <kbd
+          v-for="(key, index) in shortcut"
+          :key="`key-${index}`"
+          class="shortcut-key !bg-accentDark !border-accentLight"
+        >
           {{ key }}
         </kbd>
       </div>
     </span>
-    <span v-if="loading" class="absolute inset-0 flex items-center justify-center">
+    <span
+      v-if="loading"
+      class="absolute inset-0 flex items-center justify-center"
+    >
       <HoppSmartSpinner />
     </span>
   </HoppSmartLink>

packages/hoppscotch-ui/src/components/button/Secondary.vue

@@ -1,12 +1,15 @@
 <template>
-  <HoppSmartLink :to="to" :exact="exact" :blank="blank"
-    class="inline-flex items-center justify-center py-2 font-semibold transition whitespace-nowrap focus:outline-none"
+  <HoppSmartLink
+    :to="to"
+    :exact="exact"
+    :blank="blank"
+    class="inline-flex items-center justify-center font-semibold transition whitespace-nowrap focus:outline-none"
     :class="[
       color
         ? `text-${color}-500 hover:text-${color}-600 focus-visible:text-${color}-600`
         : 'text-secondary hover:text-secondaryDark focus-visible:text-secondaryDark',
       { 'pointer-events-none': loading },
-      label ? 'rounded px-4' : 'px-2',
+      label ? 'rounded px-4 py-2' : 'p-2',
       { 'rounded-full': rounded },
       { 'opacity-75 cursor-not-allowed': disabled },
       { 'flex-row-reverse': reverse },
@@ -42,7 +45,11 @@
         {{ label }}
       </div>
       <div v-if="shortcut.length" class="<sm:hidden">
-        <kbd v-for="(key, index) in shortcut" :key="`key-${index}`" class="shortcut-key !bg-inherit">
+        <kbd
+          v-for="(key, index) in shortcut"
+          :key="`key-${index}`"
+          class="shortcut-key !bg-inherit"
+        >
           {{ key }}
         </kbd>
       </div>
@@ -52,7 +59,7 @@
 </template>
 
 <script setup lang="ts">
-import { HoppSmartLink, HoppSmartSpinner } from "../smart";
+import { HoppSmartLink, HoppSmartSpinner } from "../smart"
 import type { Component } from "vue"
 
 interface Props {

packages/hoppscotch-ui/src/components/smart/Tabs.vue

@@ -233,7 +233,6 @@ const selectTab = (id: string) => {
 
     &.vertical {
       @apply p-2;
-      @apply rounded;
       @apply focus: after: hidden;
 
       &.active {