chore: minor ui improvements

packages/hoppscotch-app/assets/scss/styles.scss

@@ -135,7 +135,7 @@ a {
   @apply rounded;
   @apply truncate;
   @apply shadow;
-  @apply leading-body;
+  @apply leading-normal;
   @apply items-center;
   font-size: 86%;
 
@@ -172,7 +172,7 @@ a {
   @apply text-secondary text-body;
   @apply p-2;
   @apply shadow-lg;
-  @apply leading-body;
+  @apply leading-normal;
   @apply border border-dividerDark;
   @apply focus: outline-none;
   scroll-behavior: smooth;

packages/hoppscotch-app/src/components/collections/ChooseType.vue

@@ -53,7 +53,7 @@
                   :info-icon="
                     team.id === collectionsType.selectedTeam?.id
                       ? IconDone
-                      : null
+                      : undefined
                   "
                   :active-info-icon="
                     team.id === collectionsType.selectedTeam?.id

packages/hoppscotch-app/src/components/environments/ChooseType.vue

@@ -19,8 +19,8 @@
             interactive
             trigger="click"
             theme="popover"
-            arrow
             placement="bottom"
+            :on-shown="() => tippyActions.focus()"
           >
             <span
               v-tippy="{ theme: 'tooltip' }"
@@ -41,9 +41,9 @@
             </span>
             <template #content="{ hide }">
               <div
-                class="flex flex-col"
+                ref="tippyActions"
+                class="flex flex-col focus:outline-none"
                 tabindex="0"
-                role="menu"
                 @keyup.escape="hide()"
               >
                 <SmartItem
@@ -93,6 +93,8 @@ type SelectedTeam = Team | undefined
 
 type EnvironmentTabs = "my-environments" | "team-environments"
 
+// Template refs
+const tippyActions = ref<any | null>(null)
 const selectedEnvironmentTab = ref<EnvironmentTabs>("my-environments")
 
 defineProps<{

packages/hoppscotch-app/src/components/environments/my/Details.vue

@@ -101,7 +101,7 @@
       </div>
     </template>
     <template #footer>
-      <span class="flex">
+      <span class="flex space-x-2">
         <ButtonPrimary
           :label="`${t('action.save')}`"
           @click="saveEnvironment"

packages/hoppscotch-app/src/components/environments/teams/Details.vue

@@ -113,7 +113,7 @@
       </div>
     </template>
     <template v-if="!isViewer" #footer>
-      <span>
+      <span class="flex space-x-2">
         <ButtonPrimary
           :label="`${t('action.save')}`"
           :loading="isLoading"

packages/hoppscotch-app/src/helpers/editor/extensions/HoppEnvironment.ts

@@ -76,7 +76,7 @@ const cursorTooltipField = (aggregateEnvs: AggregateEnvironment[]) =>
 
       const selectedEnvType = getSelectedEnvironmentType()
 
-      const envTypeIcon = `<i class="material-icons inline-flex items-center">${
+      const envTypeIcon = `<i class="inline-flex items-center pr-2 mr-2 -my-1 text-base border-r material-icons border-secondary">${
         selectedEnvType === "TEAM_ENV" ? "people" : "person"
       }</i>`
       return {