chore: hoppscotch-ui improvements (#3497)

Co-authored-by: Liyas Thomas <liyascthomas@gmail.com>
Co-authored-by: Andrew Bastin <andrewbastin.k@gmail.com>

packages/hoppscotch-common/src/components/collections/Collection.vue

@@ -14,14 +14,14 @@
     ></div>
     <div class="relative flex flex-col">
       <div
-        class="z-1 pointer-events-none absolute inset-0 bg-accent opacity-0 transition"
+        class="z-[1] pointer-events-none absolute inset-0 bg-accent opacity-0 transition"
         :class="{
           'opacity-25':
             dragging && notSameDestination && notSameParentDestination,
         }"
       ></div>
       <div
-        class="z-3 group pointer-events-auto relative flex cursor-pointer items-stretch"
+        class="z-[3] group pointer-events-auto relative flex cursor-pointer items-stretch"
         :draggable="!hasNoTeamAccess"
         @dragstart="dragStart"
         @drop="handelDrop($event)"

packages/hoppscotch-common/src/components/collections/ImportExport.vue

@@ -78,7 +78,7 @@
               v-else-if="step.name === 'TARGET_MY_COLLECTION'"
               class="flex flex-col"
             >
-              <div class="select-wrapper">
+              <HoppSmartSelectWrapper>
                 <select
                   v-model="mySelectedCollectionID"
                   autocomplete="off"
@@ -97,7 +97,7 @@
                     {{ collection.name }}
                   </option>
                 </select>
-              </div>
+              </HoppSmartSelectWrapper>
             </div>
           </div>
         </div>

packages/hoppscotch-common/src/components/collections/Request.vue

@@ -28,8 +28,7 @@
       >
         <span
           class="pointer-events-none flex w-16 items-center justify-center truncate px-2"
-          :class="requestLabelColor"
-          :style="{ color: requestLabelColor }"
+          :style="{ color: getMethodLabelColorClassOf(request) }"
         >
           <component
             :is="IconCheckCircle"
@@ -277,10 +276,6 @@ const currentReorderingStatus = useReadonlyStream(currentReorderingStatus$, {
   parentID: "",
 })
 
-const requestLabelColor = computed(() =>
-  getMethodLabelColorClassOf(props.request)
-)
-
 watch(
   () => props.duplicateLoading,
   (val) => {

packages/hoppscotch-common/src/components/collections/TeamCollections.vue

@@ -15,12 +15,12 @@
         class="!rounded-none"
         :icon="IconPlus"
         :title="t('team.no_access')"
-        :label="t('add.new')"
+        :label="t('action.new')"
       />
       <HoppButtonSecondary
         v-else
         :icon="IconPlus"
-        :label="t('add.new')"
+        :label="t('action.new')"
         class="!rounded-none"
         @click="emit('display-modal-add')"
       />

packages/hoppscotch-common/src/components/collections/index.vue

@@ -11,7 +11,7 @@
     @dragend="draggingToRoot = false"
   >
     <div
-      class="sticky z-10 flex flex-shrink-0 flex-col overflow-x-auto border-b border-dividerLight bg-primary"
+      class="sticky z-10 flex flex-shrink-0 flex-col overflow-x-auto bg-primary border-b border-dividerLight"
       :class="{ 'rounded-t': saveRequest }"
       :style="
         saveRequest ? 'top: calc(-1 * var(--line-height-body))' : 'top: 0'
@@ -22,7 +22,7 @@
         v-model="filterTexts"
         type="search"
         autocomplete="off"
-        class="flex h-8 w-full bg-transparent p-4 py-2"
+        class="flex w-full bg-transparent px-4 py-2"
         :placeholder="t('action.search')"
         :disabled="collectionsType.type === 'team-collections'"
       />