chore: minor ui improvements

packages/hoppscotch-app/components/smart/Link.js

@@ -27,6 +27,8 @@ const SmartLink = {
     let on = {}
     switch (tag) {
       case ANCHOR_TAG:
+        attrs["aria-label"] = "Link"
+
         // Map `to` prop to the correct attribute
         attrs.href = context.props.to
 
@@ -53,6 +55,7 @@ const SmartLink = {
         break
 
       default:
+        attrs["aria-label"] = "Button"
         break
     }
 

packages/hoppscotch-app/components/smart/Spinner.vue

@@ -1,22 +1,3 @@
 <template>
-  <svg
-    class="h-4 animate-spin w-4"
-    xmlns="http://www.w3.org/2000/svg"
-    fill="none"
-    viewBox="0 0 24 24"
-  >
-    <circle
-      class="opacity-25"
-      cx="12"
-      cy="12"
-      r="10"
-      stroke="currentColor"
-      stroke-width="4"
-    />
-    <path
-      class="opacity-75"
-      fill="currentColor"
-      d="M4 12a8 8 0 018-8V0C5.373 0 0 5.373 0 12h4zm2 5.291A7.962 7.962 0 014 12H0c0 3.042 1.135 5.824 3 7.938l3-2.647z"
-    />
-  </svg>
+  <SmartIcon class="animate-spin svg-icons" name="loader" />
 </template>

packages/hoppscotch-app/components/smart/Tabs.vue

@@ -1,7 +1,7 @@
 <template>
   <div
     class="flex flex-nowrap flex-1 h-full"
-    :class="{ 'flex-col': !vertical }"
+    :class="{ 'flex-col h-auto': !vertical }"
   >
     <div
       class="tabs hide-scrollbar relative"
@@ -19,6 +19,7 @@
               class="tab"
               :class="[{ active: tab.active }, { vertical: vertical }]"
               tabindex="0"
+              :aria-label="tab.label"
               @keyup.enter="selectTab(tab)"
               @click="selectTab(tab)"
             >
@@ -42,8 +43,9 @@
       </div>
     </div>
     <div
+      class="contents h-full w-full"
       :class="{
-        'flex flex-col flex-1 overflow-y-auto hide-scrollbar': vertical,
+        '!flex flex-col flex-1 overflow-y-auto hide-scrollbar': vertical,
       }"
     >
       <slot></slot>