From 207dc2b6a6ddcfa93ac5e3377c937a74791bb445 Mon Sep 17 00:00:00 2001
From: liyasthomas <liyascthomas@gmail.com>
Date: Thu, 8 Jul 2021 13:00:41 +0530
Subject: [PATCH] feat: revamp collections ui

---
 components/app/Header.vue                     |   2 +
 components/button/Secondary.vue               |   2 +-
 components/collections/ChooseType.vue         |  72 ++---
 components/collections/ImportExport.vue       |   1 +
 components/collections/graphql/Collection.vue |  14 +-
 components/collections/graphql/Folder.vue     |  24 +-
 .../collections/graphql/ImportExport.vue      |   1 +
 components/collections/graphql/Request.vue    |  13 +-
 components/collections/index.vue              | 101 +++---
 components/collections/my/Collection.vue      | 292 +++++++++--------
 components/collections/my/Folder.vue          | 185 ++++++-----
 components/collections/my/Request.vue         |  63 +++-
 components/collections/teams/Collection.vue   | 302 ++++++++++--------
 components/collections/teams/Folder.vue       | 186 ++++++-----
 components/collections/teams/Request.vue      |  67 ++--
 components/environments/Environment.vue       |   9 +-
 components/environments/ImportExport.vue      |   1 +
 components/history/graphql/Card.vue           |   9 +-
 components/history/index.vue                  |   4 +-
 components/history/rest/Card.vue              |  18 +-
 components/http/CodegenModal.vue              |   1 +
 components/smart/ChangeLanguage.vue           |   1 +
 components/smart/Tabs.vue                     |   4 +-
 components/smart/Toggle.vue                   |   9 +-
 components/teams/Edit.vue                     |   2 +
 components/teams/Team.vue                     |   9 +-
 pages/api.vue                                 |   6 +-
 plugins/v-tippy.js                            |   1 -
 windi.config.js                               |   1 -
 29 files changed, 821 insertions(+), 579 deletions(-)

diff --git a/components/app/Header.vue b/components/app/Header.vue
index 6de341137..fb6776349 100644
--- a/components/app/Header.vue
+++ b/components/app/Header.vue
@@ -20,6 +20,7 @@
         <tippy
           v-else
           ref="user"
+          interactive
           tabindex="-1"
           trigger="click"
           theme="popover"
@@ -63,6 +64,7 @@
       <span tabindex="-1">
         <tippy
           ref="options"
+          interactive
           tabindex="-1"
           trigger="click"
           theme="popover"
diff --git a/components/button/Secondary.vue b/components/button/Secondary.vue
index 1921f57b9..82e6a47d4 100644
--- a/components/button/Secondary.vue
+++ b/components/button/Secondary.vue
@@ -14,7 +14,7 @@
     "
     :class="[
       color
-        ? `text-${color}-500 hover:text-${color}-600 focus:text-${color}-600`
+        ? `text-${color}-400 hover:text-${color}-600 focus:text-${color}-600`
         : 'text-secondaryLight hover:text-secondary focus:text-secondary',
       label ? 'px-3 rounded-lg' : 'px-2 rounded-full',
       rounded ? 'rounded-full' : 'rounded-lg',
diff --git a/components/collections/ChooseType.vue b/components/collections/ChooseType.vue
index c92ab90d1..09cf3779c 100644
--- a/components/collections/ChooseType.vue
+++ b/components/collections/ChooseType.vue
@@ -1,10 +1,6 @@
 <template>
   <div v-if="show">
-    <SmartTabs
-      :id="'collections_tab'"
-      styles="m-4"
-      @tab-changed="updateCollectionsType"
-    >
+    <SmartTabs :id="'collections_tab'" @tab-changed="updateCollectionsType">
       <SmartTab
         :id="'my-collections'"
         :label="'My Collections'"
@@ -15,38 +11,40 @@
         :id="'team-collections'"
         :label="'Team Collections'"
       >
-        <ul>
-          <li>
-            <span class="select-wrapper">
-              <SmartIntersection @intersecting="onTeamSelectIntersect">
-                <select
-                  id="team"
-                  type="text"
-                  class="team select"
-                  autofocus
-                  @change="updateSelectedTeam(myTeams[$event.target.value])"
-                >
-                  <option
-                    :key="undefined"
-                    :value="undefined"
-                    hidden
-                    disabled
-                    selected
-                  >
-                    Select team
-                  </option>
-                  <option
-                    v-for="(team, index) in myTeams"
-                    :key="index"
-                    :value="index"
-                  >
-                    {{ team.name }}
-                  </option>
-                </select>
-              </SmartIntersection>
-            </span>
-          </li>
-        </ul>
+        <SmartIntersection @intersecting="onTeamSelectIntersect">
+          <select
+            id="team"
+            type="text"
+            autofocus
+            class="
+              flex
+              w-full
+              px-4
+              text-xs
+              py-2
+              focus:outline-none
+              border-b border-dividerLight
+            "
+            @change="updateSelectedTeam(myTeams[$event.target.value])"
+          >
+            <option
+              :key="undefined"
+              :value="undefined"
+              hidden
+              disabled
+              selected
+            >
+              Select team
+            </option>
+            <option
+              v-for="(team, index) in myTeams"
+              :key="index"
+              :value="index"
+            >
+              {{ team.name }}
+            </option>
+          </select>
+        </SmartIntersection>
       </SmartTab>
     </SmartTabs>
   </div>
diff --git a/components/collections/ImportExport.vue b/components/collections/ImportExport.vue
index 14f784079..1e4e53868 100644
--- a/components/collections/ImportExport.vue
+++ b/components/collections/ImportExport.vue
@@ -18,6 +18,7 @@
             mode == 'import_export' && collectionsType.type == 'my-collections'
           "
           ref="options"
+          interactive
           tabindex="-1"
           trigger="click"
           theme="popover"
diff --git a/components/collections/graphql/Collection.vue b/components/collections/graphql/Collection.vue
index 39fced44f..c37845f79 100644
--- a/components/collections/graphql/Collection.vue
+++ b/components/collections/graphql/Collection.vue
@@ -33,13 +33,14 @@
         />
         <tippy
           ref="options"
+          interactive
           tabindex="-1"
           trigger="click"
           theme="popover"
           arrow
         >
           <template #trigger>
-            <TabPrimary
+            <ButtonSecondary
               v-tippy="{ theme: 'tooltip' }"
               :title="$t('more')"
               icon="more_vert"
@@ -79,7 +80,7 @@
         <li
           v-for="(folder, index) in collection.folders"
           :key="folder.name"
-          class="ml-8 border-l border-divider"
+          class="ml-5 border-l border-dividerLight"
         >
           <CollectionsGraphqlFolder
             :picked="picked"
@@ -101,7 +102,7 @@
         <li
           v-for="(request, index) in collection.requests"
           :key="index"
-          class="ml-8 border-l border-divider"
+          class="ml-5 border-l border-dividerLight"
         >
           <CollectionsGraphqlRequest
             :picked="picked"
@@ -123,7 +124,12 @@
           v-if="
             collection.folders.length === 0 && collection.requests.length === 0
           "
-          class="flex ml-8 border-l border-divider"
+          class="
+            ml-5
+            border-l border-dividerLight
+            ml-5
+            border-l border-dividerLight
+          "
         >
           <p>
             <i class="material-icons">not_interested</i>
diff --git a/components/collections/graphql/Folder.vue b/components/collections/graphql/Folder.vue
index 92b92b39f..b2e07dad7 100644
--- a/components/collections/graphql/Folder.vue
+++ b/components/collections/graphql/Folder.vue
@@ -23,9 +23,16 @@
         <i v-else class="material-icons">folder_open</i>
         <span>{{ folder.name }}</span>
       </div>
-      <tippy ref="options" tabindex="-1" trigger="click" theme="popover" arrow>
+      <tippy
+        ref="options"
+        interactive
+        tabindex="-1"
+        trigger="click"
+        theme="popover"
+        arrow
+      >
         <template #trigger>
-          <TabPrimary
+          <ButtonSecondary
             v-tippy="{ theme: 'tooltip' }"
             :title="$t('more')"
             icon="more_vert"
@@ -62,7 +69,7 @@
         <li
           v-for="(subFolder, subFolderIndex) in folder.folders"
           :key="subFolder.name"
-          class="ml-8 border-l border-divider"
+          class="ml-5 border-l border-dividerLight"
         >
           <CollectionsGraphqlFolder
             :picked="picked"
@@ -84,7 +91,7 @@
         <li
           v-for="(request, index) in folder.requests"
           :key="index"
-          class="flex ml-8 border-l border-divider"
+          class="ml-5 border-l border-dividerLight"
         >
           <CollectionsGraphqlRequest
             :picked="picked"
@@ -109,7 +116,14 @@
           folder.requests.length === 0
         "
       >
-        <li class="flex ml-8 border-l border-divider">
+        <li
+          class="
+            ml-5
+            border-l border-dividerLight
+            ml-5
+            border-l border-dividerLight
+          "
+        >
           <p>
             <i class="material-icons">not_interested</i>
             {{ $t("folder_empty") }}
diff --git a/components/collections/graphql/ImportExport.vue b/components/collections/graphql/ImportExport.vue
index ed0111940..32a69d5a1 100644
--- a/components/collections/graphql/ImportExport.vue
+++ b/components/collections/graphql/ImportExport.vue
@@ -5,6 +5,7 @@
       <div>
         <tippy
           ref="options"
+          interactive
           tabindex="-1"
           trigger="click"
           theme="popover"
diff --git a/components/collections/graphql/Request.vue b/components/collections/graphql/Request.vue
index d049343a2..04d9b07df 100644
--- a/components/collections/graphql/Request.vue
+++ b/components/collections/graphql/Request.vue
@@ -10,17 +10,22 @@
     >
       <div>
         <ButtonSecondary
-          v-tippy="{ theme: 'tooltip' }"
-          :title="!doc ? $t('use_request') : ''"
           :class="{ 'mx-3 text-green-400': isSelected }"
           :icon="isSelected ? 'check_circle' : 'description'"
           :label="request.name"
           @click.native="!doc ? selectRequest() : {}"
         />
       </div>
-      <tippy ref="options" tabindex="-1" trigger="click" theme="popover" arrow>
+      <tippy
+        ref="options"
+        interactive
+        tabindex="-1"
+        trigger="click"
+        theme="popover"
+        arrow
+      >
         <template #trigger>
-          <TabPrimary
+          <ButtonSecondary
             v-tippy="{ theme: 'tooltip' }"
             :title="$t('more')"
             icon="more_vert"
diff --git a/components/collections/index.vue b/components/collections/index.vue
index 4b8fe4af0..d4573da4e 100644
--- a/components/collections/index.vue
+++ b/components/collections/index.vue
@@ -1,13 +1,13 @@
 <template>
   <AppSection label="collections">
-    <div class="flex">
+    <div class="flex sticky top-10 border-b border-dividerLight">
       <input
         v-if="!saveRequest"
         v-model="filterText"
         aria-label="Search"
         type="search"
         :placeholder="$t('search')"
-        class="px-4 py-2 text-xs flex flex-1"
+        class="px-4 py-3 text-xs flex flex-1 bg-primary focus:outline-none"
       />
     </div>
     <CollectionsChooseType
@@ -53,7 +53,7 @@
       @hide-modal="displayModalImportExport(false)"
       @update-team-collections="updateTeamCollections"
     />
-    <div class="border-b flex flex-1 border-divider">
+    <div class="border-b flex justify-between flex-1 border-dividerLight">
       <ButtonSecondary
         v-if="
           collectionsType.type == 'team-collections' &&
@@ -75,58 +75,65 @@
       />
       <ButtonSecondary
         v-if="!saveRequest"
+        v-tippy="{ theme: 'tooltip' }"
         :disabled="
           collectionsType.type == 'team-collections' &&
           collectionsType.selectedTeam == undefined
         "
-        :label="$t('import_export')"
+        icon="import_export"
+        :title="$t('import_export')"
         @click.native="displayModalImportExport(true)"
       />
     </div>
-    <p v-if="collections.length === 0">
-      <i class="material-icons">help_outline</i>
-      {{ $t("create_new_collection") }}
-    </p>
-    <div class="overflow-auto">
-      <ul class="flex-col">
-        <li
-          v-for="(collection, index) in filteredCollections"
-          :key="collection.name"
-        >
-          <component
-            :is="
-              collectionsType.type == 'my-collections'
-                ? 'CollectionsMyCollection'
-                : 'CollectionsTeamsCollection'
-            "
-            :name="collection.name"
-            :collection-index="index"
-            :collection="collection"
-            :doc="doc"
-            :is-filtered="filterText.length > 0"
-            :selected="selected.some((coll) => coll == collection)"
-            :save-request="saveRequest"
-            :collections-type="collectionsType"
-            :picked="picked"
-            @edit-collection="editCollection(collection, index)"
-            @add-folder="addFolder($event)"
-            @edit-folder="editFolder($event)"
-            @edit-request="editRequest($event)"
-            @update-team-collections="updateTeamCollections"
-            @select-collection="$emit('use-collection', collection)"
-            @unselect-collection="$emit('remove-collection', collection)"
-            @select="$emit('select', $event)"
-            @expand-collection="expandCollection"
-            @remove-collection="removeCollection"
-            @remove-request="removeRequest"
-          />
-        </li>
-      </ul>
+    <div
+      v-if="collections.length === 0"
+      class="flex items-center text-secondaryLight flex-col p-4 justify-center"
+    >
+      <i class="material-icons opacity-50 pb-2">create_new_folder</i>
+      <span class="text-xs">
+        {{ $t("create_new_collection") }}
+      </span>
+    </div>
+    <div class="flex flex-col">
+      <component
+        :is="
+          collectionsType.type == 'my-collections'
+            ? 'CollectionsMyCollection'
+            : 'CollectionsTeamsCollection'
+        "
+        v-for="(collection, index) in filteredCollections"
+        :key="collection.name"
+        :name="collection.name"
+        :collection-index="index"
+        :collection="collection"
+        :doc="doc"
+        :is-filtered="filterText.length > 0"
+        :selected="selected.some((coll) => coll == collection)"
+        :save-request="saveRequest"
+        :collections-type="collectionsType"
+        :picked="picked"
+        @edit-collection="editCollection(collection, index)"
+        @add-folder="addFolder($event)"
+        @edit-folder="editFolder($event)"
+        @edit-request="editRequest($event)"
+        @update-team-collections="updateTeamCollections"
+        @select-collection="$emit('use-collection', collection)"
+        @unselect-collection="$emit('remove-collection', collection)"
+        @select="$emit('select', $event)"
+        @expand-collection="expandCollection"
+        @remove-collection="removeCollection"
+        @remove-request="removeRequest"
+      />
+    </div>
+    <div
+      v-if="filterText && filteredCollections.length === 0"
+      class="flex items-center text-secondaryLight flex-col p-4 justify-center"
+    >
+      <i class="material-icons opacity-50 pb-2">manage_search</i>
+      <span class="text-xs">
+        {{ $t("nothing_found") }} "{{ filterText }}"
+      </span>
     </div>
-    <p v-if="filterText && filteredCollections.length === 0">
-      <i class="material-icons">not_interested</i>
-      {{ $t("nothing_found") }} "{{ filterText }}"
-    </p>
   </AppSection>
 </template>
 
diff --git a/components/collections/my/Collection.vue b/components/collections/my/Collection.vue
index 5d47473ad..b9c58bd35 100644
--- a/components/collections/my/Collection.vue
+++ b/components/collections/my/Collection.vue
@@ -1,7 +1,7 @@
 <template>
-  <div>
+  <div class="flex flex-col" :class="[{ 'bg-primaryLight': dragging }]">
     <div
-      :class="[{ 'bg-primaryDark': dragging }]"
+      class="flex items-center group"
       @dragover.prevent
       @drop.prevent="dropEvent"
       @dragover="dragging = true"
@@ -9,143 +9,165 @@
       @dragleave="dragging = false"
       @dragend="dragging = false"
     >
+      <span
+        class="
+          flex
+          justify-center
+          items-center
+          text-xs
+          w-10
+          truncate
+          cursor-pointer
+        "
+        @click="toggleShowChildren()"
+      >
+        <i class="material-icons">{{ getCollectionIcon }}</i>
+      </span>
+      <span
+        class="
+          py-3
+          cursor-pointer
+          pr-3
+          flex flex-1
+          min-w-0
+          text-xs
+          group-hover:text-secondaryDark
+          transition
+        "
+        @click="toggleShowChildren()"
+      >
+        <span class="truncate"> {{ collection.name }} </span>
+      </span>
       <ButtonSecondary
-        :label="collection.name"
-        @click.native="toggleShowChildren"
+        v-if="doc && !selected"
+        v-tippy="{ theme: 'tooltip' }"
+        :title="$t('import')"
+        icon="check_box_outline_blank"
+        @click.native="$emit('select-collection')"
       />
-      <i v-show="!showChildren && !isFiltered" class="material-icons"
-        >arrow_right</i
+      <ButtonSecondary
+        v-if="doc && selected"
+        v-tippy="{ theme: 'tooltip' }"
+        :title="$t('delete')"
+        icon="check_box"
+        @click.native="$emit('unselect-collection')"
+      />
+      <ButtonSecondary
+        v-tippy="{ theme: 'tooltip' }"
+        icon="create_new_folder"
+        :title="$t('new_folder')"
+        class="group-hover:inline-flex hidden"
+        @click.native="
+          $emit('add-folder', {
+            folder: collection,
+            path: `${collectionIndex}`,
+          })
+        "
+      />
+      <tippy
+        ref="options"
+        interactive
+        tabindex="-1"
+        trigger="click"
+        theme="popover"
+        arrow
       >
-      <i v-show="showChildren || isFiltered" class="material-icons"
-        >arrow_drop_down</i
-      >
-      <i v-if="isSelected" class="text-green-400 material-icons"
-        >check_circle</i
-      >
-      <i v-else class="material-icons">folder</i>
-      <div>
-        <ButtonSecondary
-          v-if="doc && !selected"
-          v-tippy="{ theme: 'tooltip' }"
-          :title="$t('import')"
-          icon="check_box_outline_blank"
-          @click.native="$emit('select-collection')"
+        <template #trigger>
+          <ButtonSecondary
+            v-tippy="{ theme: 'tooltip' }"
+            :title="$t('more')"
+            icon="more_vert"
+          />
+        </template>
+        <SmartItem
+          icon="create_new_folder"
+          :label="$t('new_folder')"
+          @click.native="
+            $emit('add-folder', {
+              folder: collection,
+              path: `${collectionIndex}`,
+            })
+            $refs.options.tippy().hide()
+          "
         />
-        <ButtonSecondary
-          v-if="doc && selected"
-          v-tippy="{ theme: 'tooltip' }"
-          :title="$t('delete')"
-          icon="check_box"
-          @click.native="$emit('unselect-collection')"
+        <SmartItem
+          icon="create"
+          :label="$t('edit')"
+          @click.native="
+            $emit('edit-collection')
+            $refs.options.tippy().hide()
+          "
         />
-        <tippy
-          ref="options"
-          tabindex="-1"
-          trigger="click"
-          theme="popover"
-          arrow
-        >
-          <template #trigger>
-            <TabPrimary
-              v-tippy="{ theme: 'tooltip' }"
-              :title="$t('more')"
-              icon="more_vert"
-            />
-          </template>
-          <SmartItem
-            icon="create_new_folder"
-            :label="$t('new_folder')"
-            @click.native="
-              $emit('add-folder', {
-                folder: collection,
-                path: `${collectionIndex}`,
-              })
-              $refs.options.tippy().hide()
-            "
-          />
-          <SmartItem
-            icon="create"
-            :label="$t('edit')"
-            @click.native="
-              $emit('edit-collection')
-              $refs.options.tippy().hide()
-            "
-          />
-          <SmartItem
-            icon="delete"
-            :label="$t('delete')"
-            @click.native="
-              confirmRemove = true
-              $refs.options.tippy().hide()
-            "
-          />
-        </tippy>
-      </div>
+        <SmartItem
+          icon="delete"
+          :label="$t('delete')"
+          @click.native="
+            confirmRemove = true
+            $refs.options.tippy().hide()
+          "
+        />
+      </tippy>
     </div>
     <div v-show="showChildren || isFiltered">
-      <ul class="flex-col">
-        <li
-          v-for="(folder, index) in collection.folders"
-          :key="index"
-          class="ml-8 border-l border-divider"
-        >
-          <CollectionsMyFolder
-            :folder="folder"
-            :folder-index="index"
-            :folder-path="`${collectionIndex}/${index}`"
-            :collection-index="collectionIndex"
-            :doc="doc"
-            :save-request="saveRequest"
-            :collections-type="collectionsType"
-            :is-filtered="isFiltered"
-            :picked="picked"
-            @add-folder="$emit('add-folder', $event)"
-            @edit-folder="$emit('edit-folder', $event)"
-            @edit-request="$emit('edit-request', $event)"
-            @select="$emit('select', $event)"
-            @remove-request="$emit('remove-request', $event)"
-          />
-        </li>
-      </ul>
-      <ul class="flex-col">
-        <li
-          v-for="(request, index) in collection.requests"
-          :key="index"
-          class="ml-8 border-l border-divider"
-        >
-          <CollectionsMyRequest
-            :request="request"
-            :collection-index="collectionIndex"
-            :folder-index="-1"
-            :folder-name="collection.name"
-            :folder-path="collectionIndex.toString()"
-            :request-index="index"
-            :doc="doc"
-            :save-request="saveRequest"
-            :collections-type="collectionsType"
-            :picked="picked"
-            @edit-request="editRequest($event)"
-            @select="$emit('select', $event)"
-            @remove-request="$emit('remove-request', $event)"
-          />
-        </li>
-      </ul>
-      <ul>
-        <li
-          v-if="
-            (collection.folders == undefined ||
-              collection.folders.length === 0) &&
-            (collection.requests == undefined ||
-              collection.requests.length === 0)
-          "
-          class="flex ml-8 border-l border-divider"
-        >
-          <p>
-            <i class="material-icons">not_interested</i>
-            {{ $t("collection_empty") }}
-          </p>
-        </li>
-      </ul>
+      <CollectionsMyFolder
+        v-for="(folder, index) in collection.folders"
+        :key="index"
+        class="ml-5 border-l border-dividerLight"
+        :folder="folder"
+        :folder-index="index"
+        :folder-path="`${collectionIndex}/${index}`"
+        :collection-index="collectionIndex"
+        :doc="doc"
+        :save-request="saveRequest"
+        :collections-type="collectionsType"
+        :is-filtered="isFiltered"
+        :picked="picked"
+        @add-folder="$emit('add-folder', $event)"
+        @edit-folder="$emit('edit-folder', $event)"
+        @edit-request="$emit('edit-request', $event)"
+        @select="$emit('select', $event)"
+        @remove-request="$emit('remove-request', $event)"
+      />
+      <CollectionsMyRequest
+        v-for="(request, index) in collection.requests"
+        :key="index"
+        class="ml-5 border-l border-dividerLight"
+        :request="request"
+        :collection-index="collectionIndex"
+        :folder-index="-1"
+        :folder-name="collection.name"
+        :folder-path="collectionIndex.toString()"
+        :request-index="index"
+        :doc="doc"
+        :save-request="saveRequest"
+        :collections-type="collectionsType"
+        :picked="picked"
+        @edit-request="editRequest($event)"
+        @select="$emit('select', $event)"
+        @remove-request="$emit('remove-request', $event)"
+      />
+      <div
+        v-if="
+          (collection.folders == undefined ||
+            collection.folders.length === 0) &&
+          (collection.requests == undefined || collection.requests.length === 0)
+        "
+        class="
+          flex
+          items-center
+          text-secondaryLight
+          flex-col
+          p-4
+          justify-center
+          ml-5
+          border-l border-dividerLight
+        "
+      >
+        <i class="material-icons opacity-50 pb-2">folder_open</i>
+        <span class="text-xs">
+          {{ $t("collection_empty") }}
+        </span>
+      </div>
     </div>
     <SmartConfirmModal
       :show="confirmRemove"
@@ -189,6 +211,12 @@ export default {
         this.picked.collectionIndex === this.collectionIndex
       )
     },
+    getCollectionIcon() {
+      if (this.isSelected) return "check_circle"
+      else if (!this.showChildren && !this.isFiltered) return "arrow_right"
+      else if (this.showChildren || this.isFiltered) return "arrow_drop_down"
+      else return "folder"
+    },
   },
   methods: {
     editRequest(event) {
diff --git a/components/collections/my/Folder.vue b/components/collections/my/Folder.vue
index b8dcdd8a9..0e68b892c 100644
--- a/components/collections/my/Folder.vue
+++ b/components/collections/my/Folder.vue
@@ -1,7 +1,7 @@
 <template>
-  <div>
+  <div class="flex flex-col" :class="[{ 'bg-primaryLight': dragging }]">
     <div
-      :class="[{ 'bg-primaryDark': dragging }]"
+      class="flex items-center group"
       @dragover.prevent
       @drop.prevent="dropEvent"
       @dragover="dragging = true"
@@ -9,25 +9,54 @@
       @dragleave="dragging = false"
       @dragend="dragging = false"
     >
-      <div>
-        <ButtonSecondary
-          :label="folder.name ? folder.name : folder.title"
-          @click.native="toggleShowChildren"
-        />
-        <i v-show="!showChildren && !isFiltered" class="material-icons"
-          >arrow_right</i
-        >
-        <i v-show="showChildren || isFiltered" class="material-icons"
-          >arrow_drop_down</i
-        >
-        <i v-if="isSelected" class="text-green-400 material-icons"
-          >check_circle</i
-        >
-        <i v-else class="material-icons">folder_open</i>
-      </div>
-      <tippy ref="options" tabindex="-1" trigger="click" theme="popover" arrow>
+      <span
+        class="
+          flex
+          justify-center
+          items-center
+          text-xs
+          w-10
+          truncate
+          cursor-pointer
+        "
+        @click="toggleShowChildren()"
+      >
+        <i class="material-icons">{{ getCollectionIcon }}</i>
+      </span>
+      <span
+        class="
+          py-3
+          cursor-pointer
+          pr-3
+          flex flex-1
+          min-w-0
+          text-xs
+          group-hover:text-secondaryDark
+          transition
+        "
+        @click="toggleShowChildren()"
+      >
+        <span class="truncate">
+          {{ folder.name ? folder.name : folder.title }}
+        </span>
+      </span>
+      <ButtonSecondary
+        v-tippy="{ theme: 'tooltip' }"
+        icon="create_new_folder"
+        :title="$t('new_folder')"
+        class="group-hover:inline-flex hidden"
+        @click.native="$emit('add-folder', { folder, path: folderPath })"
+      />
+      <tippy
+        ref="options"
+        interactive
+        tabindex="-1"
+        trigger="click"
+        theme="popover"
+        arrow
+      >
         <template #trigger>
-          <TabPrimary
+          <ButtonSecondary
             v-tippy="{ theme: 'tooltip' }"
             :title="$t('more')"
             icon="more_vert"
@@ -56,7 +85,7 @@
         />
         <SmartItem
           icon="delete"
-          :labl="$t('delete')"
+          :label="$t('delete')"
           @click.native="
             confirmRemove = true
             $refs.options.tippy().hide()
@@ -65,68 +94,66 @@
       </tippy>
     </div>
     <div v-show="showChildren || isFiltered">
-      <ul class="flex-col">
-        <li
-          v-for="(subFolder, subFolderIndex) in folder.folders"
-          :key="subFolder.name"
-          class="ml-8 border-l border-divider"
-        >
-          <CollectionsMyFolder
-            :folder="subFolder"
-            :folder-index="subFolderIndex"
-            :collection-index="collectionIndex"
-            :doc="doc"
-            :save-request="saveRequest"
-            :collections-type="collectionsType"
-            :folder-path="`${folderPath}/${subFolderIndex}`"
-            :picked="picked"
-            @add-folder="$emit('add-folder', $event)"
-            @edit-folder="$emit('edit-folder', $event)"
-            @edit-request="$emit('edit-request', $event)"
-            @update-team-collections="$emit('update-team-collections')"
-            @select="$emit('select', $event)"
-            @remove-request="removeRequest"
-          />
-        </li>
-      </ul>
-      <ul class="flex-col">
-        <li
-          v-for="(request, index) in folder.requests"
-          :key="index"
-          class="flex ml-8 border-l border-divider"
-        >
-          <CollectionsMyRequest
-            :request="request"
-            :collection-index="collectionIndex"
-            :folder-index="folderIndex"
-            :folder-name="folder.name"
-            :folder-path="folderPath"
-            :request-index="index"
-            :doc="doc"
-            :picked="picked"
-            :save-request="saveRequest"
-            :collections-type="collectionsType"
-            @edit-request="$emit('edit-request', $event)"
-            @select="$emit('select', $event)"
-            @remove-request="removeRequest"
-          />
-        </li>
-      </ul>
-      <ul
+      <CollectionsMyFolder
+        v-for="(subFolder, subFolderIndex) in folder.folders"
+        :key="subFolder.name"
+        class="ml-5 border-l border-dividerLight"
+        :folder="subFolder"
+        :folder-index="subFolderIndex"
+        :collection-index="collectionIndex"
+        :doc="doc"
+        :save-request="saveRequest"
+        :collections-type="collectionsType"
+        :folder-path="`${folderPath}/${subFolderIndex}`"
+        :picked="picked"
+        @add-folder="$emit('add-folder', $event)"
+        @edit-folder="$emit('edit-folder', $event)"
+        @edit-request="$emit('edit-request', $event)"
+        @update-team-collections="$emit('update-team-collections')"
+        @select="$emit('select', $event)"
+        @remove-request="removeRequest"
+      />
+      <CollectionsMyRequest
+        v-for="(request, index) in folder.requests"
+        :key="index"
+        class="ml-5 border-l border-dividerLight"
+        :request="request"
+        :collection-index="collectionIndex"
+        :folder-index="folderIndex"
+        :folder-name="folder.name"
+        :folder-path="folderPath"
+        :request-index="index"
+        :doc="doc"
+        :picked="picked"
+        :save-request="saveRequest"
+        :collections-type="collectionsType"
+        @edit-request="$emit('edit-request', $event)"
+        @select="$emit('select', $event)"
+        @remove-request="removeRequest"
+      />
+      <div
         v-if="
           folder.folders &&
           folder.folders.length === 0 &&
           folder.requests &&
           folder.requests.length === 0
         "
+        class="
+          flex
+          items-center
+          text-secondaryLight
+          flex-col
+          p-4
+          justify-center
+          ml-5
+          border-l border-dividerLight
+        "
       >
-        <li class="flex ml-8 border-l border-divider">
-          <p>
-            <i class="material-icons">not_interested</i>
-            {{ $t("folder_empty") }}
-          </p>
-        </li>
-      </ul>
+        <i class="material-icons opacity-50 pb-2">folder_open</i>
+        <span class="text-xs">
+          {{ $t("folder_empty") }}
+        </span>
+      </div>
     </div>
     <SmartConfirmModal
       :show="confirmRemove"
@@ -174,6 +201,12 @@ export default {
         this.picked.folderPath === this.folderPath
       )
     },
+    getCollectionIcon() {
+      if (this.isSelected) return "check_circle"
+      else if (!this.showChildren && !this.isFiltered) return "arrow_right"
+      else if (this.showChildren || this.isFiltered) return "arrow_drop_down"
+      else return "folder"
+    },
   },
   methods: {
     toggleShowChildren() {
diff --git a/components/collections/my/Request.vue b/components/collections/my/Request.vue
index e8ff71c17..e1e8c1fe1 100644
--- a/components/collections/my/Request.vue
+++ b/components/collections/my/Request.vue
@@ -1,29 +1,58 @@
 <template>
-  <div>
+  <div class="flex flex-col" :class="[{ 'bg-primaryLight': dragging }]">
     <div
-      :class="[{ 'bg-primaryDark': dragging }]"
+      class="flex items-center group"
       draggable="true"
       @dragstart="dragStart"
       @dragover.stop
       @dragleave="dragging = false"
       @dragend="dragging = false"
     >
-      <div>
-        <ButtonSecondary
-          v-tippy="{ theme: 'tooltip' }"
-          :title="!doc ? $t('use_request') : ''"
-          :class="[
-            getRequestLabelColor(request.method),
-            { 'mx-3 text-green-400': isSelected },
-          ]"
-          :icon="isSelected ? 'check_circle' : ''"
-          :label="request.method + request.name"
-          @click.native="!doc ? selectRequest() : {}"
-        />
-      </div>
-      <tippy ref="options" tabindex="-1" trigger="click" theme="popover" arrow>
+      <span
+        class="
+          font-mono font-bold
+          flex
+          justify-center
+          items-center
+          text-xs
+          w-12
+          truncate
+          cursor-pointer
+        "
+        :class="[
+          getRequestLabelColor(request.method),
+          { 'mx-3 text-green-400': isSelected },
+        ]"
+        @click="!doc ? selectRequest() : {}"
+      >
+        <i v-if="isSelected" class="material-icons">check_circle</i>
+        {{ request.method }}
+      </span>
+      <span
+        class="
+          py-3
+          cursor-pointer
+          pr-3
+          flex flex-1
+          min-w-0
+          text-xs
+          group-hover:text-secondaryDark
+          transition
+        "
+        @click="!doc ? selectRequest() : {}"
+      >
+        <span class="truncate"> {{ request.name }} </span>
+      </span>
+      <tippy
+        ref="options"
+        interactive
+        tabindex="-1"
+        trigger="click"
+        theme="popover"
+        arrow
+      >
         <template #trigger>
-          <TabPrimary
+          <ButtonSecondary
             v-tippy="{ theme: 'tooltip' }"
             :title="$t('more')"
             icon="more_vert"
diff --git a/components/collections/teams/Collection.vue b/components/collections/teams/Collection.vue
index 06d0c720b..911c81606 100644
--- a/components/collections/teams/Collection.vue
+++ b/components/collections/teams/Collection.vue
@@ -1,147 +1,170 @@
 <template>
-  <div>
-    <div>
+  <div class="flex flex-col">
+    <div class="flex items-center group">
+      <span
+        class="
+          flex
+          justify-center
+          items-center
+          text-xs
+          w-10
+          truncate
+          cursor-pointer
+        "
+        @click="toggleShowChildren()"
+      >
+        <i class="material-icons">{{ getCollectionIcon }}</i>
+      </span>
+      <span
+        class="
+          py-3
+          cursor-pointer
+          pr-3
+          flex flex-1
+          min-w-0
+          text-xs
+          group-hover:text-secondaryDark
+          transition
+        "
+        @click="toggleShowChildren()"
+      >
+        <span class="truncate"> {{ collection.title }} </span>
+      </span>
       <ButtonSecondary
-        :label="collection.title"
-        @click.native="toggleShowChildren"
+        v-if="doc && !selected"
+        v-tippy="{ theme: 'tooltip' }"
+        :title="$t('import')"
+        icon="check_box_outline_blank"
+        @click.native="$emit('select-collection')"
       />
-      <i v-show="!showChildren && !isFiltered" class="material-icons"
-        >arrow_right</i
+      <ButtonSecondary
+        v-if="doc && selected"
+        v-tippy="{ theme: 'tooltip' }"
+        :title="$t('delete')"
+        icon="check_box"
+        @click.native="$emit('unselect-collection')"
+      />
+      <ButtonSecondary
+        v-if="collectionsType.selectedTeam.myRole !== 'VIEWER'"
+        v-tippy="{ theme: 'tooltip' }"
+        icon="create_new_folder"
+        :title="$t('new_folder')"
+        class="group-hover:inline-flex hidden"
+        @click.native="
+          $emit('add-folder', {
+            folder: collection,
+            path: `${collectionIndex}`,
+          })
+        "
+      />
+      <tippy
+        v-if="collectionsType.selectedTeam.myRole !== 'VIEWER'"
+        ref="options"
+        interactive
+        tabindex="-1"
+        trigger="click"
+        theme="popover"
+        arrow
       >
-      <i v-show="showChildren || isFiltered" class="material-icons"
-        >arrow_drop_down</i
-      >
-      <i v-if="isSelected" class="text-green-400 material-icons"
-        >check_circle</i
-      >
-      <i v-else class="material-icons">folder</i>
-      <div>
-        <ButtonSecondary
-          v-if="doc && !selected"
-          v-tippy="{ theme: 'tooltip' }"
-          :title="$t('import')"
-          icon="check_box_outline_blank"
-          @click.native="$emit('select-collection')"
+        <template #trigger>
+          <ButtonSecondary
+            v-tippy="{ theme: 'tooltip' }"
+            :title="$t('more')"
+            icon="more_vert"
+          />
+        </template>
+        <SmartItem
+          v-if="collectionsType.selectedTeam.myRole !== 'VIEWER'"
+          icon="create_new_folder"
+          :label="$t('new_folder')"
+          @click.native="
+            $emit('add-folder', {
+              folder: collection,
+              path: `${collectionIndex}`,
+            })
+            $refs.options.tippy().hide()
+          "
         />
-        <ButtonSecondary
-          v-if="doc && selected"
-          v-tippy="{ theme: 'tooltip' }"
-          :title="$t('delete')"
-          icon="check_box"
-          @click.native="$emit('unselect-collection')"
+        <SmartItem
+          v-if="collectionsType.selectedTeam.myRole !== 'VIEWER'"
+          icon="create"
+          :label="$t('edit')"
+          @click.native="
+            $emit('edit-collection')
+            $refs.options.tippy().hide()
+          "
         />
-        <tippy
-          ref="options"
-          tabindex="-1"
-          trigger="click"
-          theme="popover"
-          arrow
-        >
-          <template #trigger>
-            <TabPrimary
-              v-if="collectionsType.selectedTeam.myRole !== 'VIEWER'"
-              v-tippy="{ theme: 'tooltip' }"
-              :title="$t('more')"
-              icon="more_vert"
-            />
-          </template>
-          <SmartItem
-            v-if="collectionsType.selectedTeam.myRole !== 'VIEWER'"
-            icon="create_new_folder"
-            :label="$t('new_folder')"
-            @click.native="
-              $emit('add-folder', {
-                folder: collection,
-                path: `${collectionIndex}`,
-              })
-              $refs.options.tippy().hide()
-            "
-          />
-          <SmartItem
-            v-if="collectionsType.selectedTeam.myRole !== 'VIEWER'"
-            icon="create"
-            :label="$t('edit')"
-            @click.native="
-              $emit('edit-collection')
-              $refs.options.tippy().hide()
-            "
-          />
-          <SmartItem
-            v-if="collectionsType.selectedTeam.myRole !== 'VIEWER'"
-            icon="delete"
-            :label="$t('delete')"
-            @click.native="
-              confirmRemove = true
-              $refs.options.tippy().hide()
-            "
-          />
-        </tippy>
-      </div>
+        <SmartItem
+          v-if="collectionsType.selectedTeam.myRole !== 'VIEWER'"
+          icon="delete"
+          :label="$t('delete')"
+          @click.native="
+            confirmRemove = true
+            $refs.options.tippy().hide()
+          "
+        />
+      </tippy>
     </div>
     <div v-show="showChildren || isFiltered">
-      <ul class="flex-col">
-        <li
-          v-for="(folder, index) in collection.children"
-          :key="folder.title"
-          class="ml-8 border-l border-divider"
-        >
-          <CollectionsTeamsFolder
-            :folder="folder"
-            :folder-index="index"
-            :folder-path="`${collectionIndex}/${index}`"
-            :collection-index="collectionIndex"
-            :doc="doc"
-            :save-request="saveRequest"
-            :collections-type="collectionsType"
-            :is-filtered="isFiltered"
-            :picked="picked"
-            @add-folder="$emit('add-folder', $event)"
-            @edit-folder="$emit('edit-folder', $event)"
-            @edit-request="$emit('edit-request', $event)"
-            @select="$emit('select', $event)"
-            @expand-collection="expandCollection"
-            @remove-request="removeRequest"
-          />
-        </li>
-      </ul>
-      <ul class="flex-col">
-        <li
-          v-for="(request, index) in collection.requests"
-          :key="index"
-          class="ml-8 border-l border-divider"
-        >
-          <CollectionsTeamsRequest
-            :request="request.request"
-            :collection-index="collectionIndex"
-            :folder-index="-1"
-            :folder-name="collection.name"
-            :request-index="request.id"
-            :doc="doc"
-            :save-request="saveRequest"
-            :collections-type="collectionsType"
-            :picked="picked"
-            @edit-request="editRequest($event)"
-            @select="$emit('select', $event)"
-            @remove-request="removeRequest"
-          />
-        </li>
-      </ul>
-      <ul>
-        <li
-          v-if="
-            (collection.children == undefined ||
-              collection.children.length === 0) &&
-            (collection.requests == undefined ||
-              collection.requests.length === 0)
-          "
-          class="flex ml-8 border-l border-divider"
-        >
-          <p>
-            <i class="material-icons">not_interested</i>
-            {{ $t("collection_empty") }}
-          </p>
-        </li>
-      </ul>
+      <CollectionsTeamsFolder
+        v-for="(folder, index) in collection.children"
+        :key="folder.title"
+        class="ml-5 border-l border-dividerLight"
+        :folder="folder"
+        :folder-index="index"
+        :folder-path="`${collectionIndex}/${index}`"
+        :collection-index="collectionIndex"
+        :doc="doc"
+        :save-request="saveRequest"
+        :collections-type="collectionsType"
+        :is-filtered="isFiltered"
+        :picked="picked"
+        @add-folder="$emit('add-folder', $event)"
+        @edit-folder="$emit('edit-folder', $event)"
+        @edit-request="$emit('edit-request', $event)"
+        @select="$emit('select', $event)"
+        @expand-collection="expandCollection"
+        @remove-request="removeRequest"
+      />
+      <CollectionsTeamsRequest
+        v-for="(request, index) in collection.requests"
+        :key="index"
+        class="ml-5 border-l border-dividerLight"
+        :request="request.request"
+        :collection-index="collectionIndex"
+        :folder-index="-1"
+        :folder-name="collection.name"
+        :request-index="request.id"
+        :doc="doc"
+        :save-request="saveRequest"
+        :collections-type="collectionsType"
+        :picked="picked"
+        @edit-request="editRequest($event)"
+        @select="$emit('select', $event)"
+        @remove-request="removeRequest"
+      />
+      <div
+        v-if="
+          (collection.children == undefined ||
+            collection.children.length === 0) &&
+          (collection.requests == undefined || collection.requests.length === 0)
+        "
+        class="
+          flex
+          items-center
+          text-secondaryLight
+          flex-col
+          p-4
+          justify-center
+          ml-5
+          border-l border-dividerLight
+        "
+      >
+        <i class="material-icons opacity-50 pb-2">folder_open</i>
+        <span class="text-xs">
+          {{ $t("collection_empty") }}
+        </span>
+      </div>
     </div>
     <SmartConfirmModal
       :show="confirmRemove"
@@ -167,7 +190,6 @@ export default {
   data() {
     return {
       showChildren: false,
-      dragging: false,
       selectedFolder: {},
       confirmRemove: false,
       prevCursor: "",
@@ -183,6 +205,12 @@ export default {
         this.picked.collectionID === this.collection.id
       )
     },
+    getCollectionIcon() {
+      if (this.isSelected) return "check_circle"
+      else if (!this.showChildren && !this.isFiltered) return "arrow_right"
+      else if (this.showChildren || this.isFiltered) return "arrow_drop_down"
+      else return "folder"
+    },
   },
   methods: {
     editRequest(event) {
diff --git a/components/collections/teams/Folder.vue b/components/collections/teams/Folder.vue
index 633eb68c5..3961071ce 100644
--- a/components/collections/teams/Folder.vue
+++ b/components/collections/teams/Folder.vue
@@ -1,26 +1,56 @@
 <template>
-  <div>
-    <div>
-      <div>
-        <ButtonSecondary
-          :label="folder.name ? folder.name : folder.title"
-          @click.native="toggleShowChildren"
-        />
-        <i v-show="!showChildren && !isFiltered" class="material-icons"
-          >arrow_right</i
-        >
-        <i v-show="showChildren || isFiltered" class="material-icons"
-          >arrow_drop_down</i
-        >
-        <i v-if="isSelected" class="text-green-400 material-icons"
-          >check_circle</i
-        >
-        <i v-else class="material-icons">folder_open</i>
-      </div>
-      <tippy ref="options" tabindex="-1" trigger="click" theme="popover" arrow>
+  <div class="flex flex-col">
+    <div class="flex items-center group">
+      <span
+        class="
+          flex
+          justify-center
+          items-center
+          text-xs
+          w-10
+          truncate
+          cursor-pointer
+        "
+        @click="toggleShowChildren()"
+      >
+        <i class="material-icons">{{ getCollectionIcon }}</i>
+      </span>
+      <span
+        class="
+          py-3
+          cursor-pointer
+          pr-3
+          flex flex-1
+          min-w-0
+          text-xs
+          group-hover:text-secondaryDark
+          transition
+        "
+        @click="toggleShowChildren()"
+      >
+        <span class="truncate">
+          {{ folder.name ? folder.name : folder.title }}
+        </span>
+      </span>
+      <ButtonSecondary
+        v-if="collectionsType.selectedTeam.myRole !== 'VIEWER'"
+        v-tippy="{ theme: 'tooltip' }"
+        icon="create_new_folder"
+        :title="$t('new_folder')"
+        class="group-hover:inline-flex hidden"
+        @click.native="$emit('add-folder', { folder, path: folderPath })"
+      />
+      <tippy
+        v-if="collectionsType.selectedTeam.myRole !== 'VIEWER'"
+        ref="options"
+        interactive
+        tabindex="-1"
+        trigger="click"
+        theme="popover"
+        arrow
+      >
         <template #trigger>
-          <TabPrimary
-            v-if="collectionsType.selectedTeam.myRole !== 'VIEWER'"
+          <ButtonSecondary
             v-tippy="{ theme: 'tooltip' }"
             :title="$t('more')"
             icon="more_vert"
@@ -61,66 +91,64 @@
       </tippy>
     </div>
     <div v-show="showChildren || isFiltered">
-      <ul class="flex-col">
-        <li
-          v-for="(subFolder, subFolderIndex) in folder.children"
-          :key="subFolder.name"
-          class="ml-8 border-l border-divider"
-        >
-          <CollectionsTeamsFolder
-            :folder="subFolder"
-            :folder-index="subFolderIndex"
-            :collection-index="collectionIndex"
-            :doc="doc"
-            :save-request="saveRequest"
-            :collections-type="collectionsType"
-            :folder-path="`${folderPath}/${subFolderIndex}`"
-            :picked="picked"
-            @add-folder="$emit('add-folder', $event)"
-            @edit-folder="$emit('edit-folder', $event)"
-            @edit-request="$emit('edit-request', $event)"
-            @update-team-collections="$emit('update-team-collections')"
-            @select="$emit('select', $event)"
-            @expand-collection="expandCollection"
-            @remove-request="removeRequest"
-          />
-        </li>
-      </ul>
-      <ul class="flex-col">
-        <li
-          v-for="(request, index) in folder.requests"
-          :key="index"
-          class="flex ml-8 border-l border-divider"
-        >
-          <CollectionsTeamsRequest
-            :request="request.request"
-            :collection-index="collectionIndex"
-            :folder-index="folderIndex"
-            :folder-name="folder.name"
-            :request-index="request.id"
-            :doc="doc"
-            :save-request="saveRequest"
-            :collections-type="collectionsType"
-            :picked="picked"
-            @edit-request="$emit('edit-request', $event)"
-            @select="$emit('select', $event)"
-            @remove-request="removeRequest"
-          />
-        </li>
-      </ul>
-      <ul
+      <CollectionsTeamsFolder
+        v-for="(subFolder, subFolderIndex) in folder.children"
+        :key="subFolder.name"
+        class="ml-5 border-l border-dividerLight"
+        :folder="subFolder"
+        :folder-index="subFolderIndex"
+        :collection-index="collectionIndex"
+        :doc="doc"
+        :save-request="saveRequest"
+        :collections-type="collectionsType"
+        :folder-path="`${folderPath}/${subFolderIndex}`"
+        :picked="picked"
+        @add-folder="$emit('add-folder', $event)"
+        @edit-folder="$emit('edit-folder', $event)"
+        @edit-request="$emit('edit-request', $event)"
+        @update-team-collections="$emit('update-team-collections')"
+        @select="$emit('select', $event)"
+        @expand-collection="expandCollection"
+        @remove-request="removeRequest"
+      />
+      <CollectionsTeamsRequest
+        v-for="(request, index) in folder.requests"
+        :key="index"
+        class="ml-5 border-l border-dividerLight"
+        :request="request.request"
+        :collection-index="collectionIndex"
+        :folder-index="folderIndex"
+        :folder-name="folder.name"
+        :request-index="request.id"
+        :doc="doc"
+        :save-request="saveRequest"
+        :collections-type="collectionsType"
+        :picked="picked"
+        @edit-request="$emit('edit-request', $event)"
+        @select="$emit('select', $event)"
+        @remove-request="removeRequest"
+      />
+      <div
         v-if="
           (folder.children == undefined || folder.children.length === 0) &&
           (folder.requests == undefined || folder.requests.length === 0)
         "
+        class="
+          flex
+          items-center
+          text-secondaryLight
+          flex-col
+          p-4
+          justify-center
+          ml-5
+          border-l border-dividerLight
+        "
       >
-        <li class="flex ml-8 border-l border-divider">
-          <p>
-            <i class="material-icons">not_interested</i>
-            {{ $t("folder_empty") }}
-          </p>
-        </li>
-      </ul>
+        <i class="material-icons opacity-50 pb-2">folder_open</i>
+        <span class="text-xs">
+          {{ $t("folder_empty") }}
+        </span>
+      </div>
     </div>
     <SmartConfirmModal
       :show="confirmRemove"
@@ -163,6 +191,12 @@ export default {
         this.picked.folderID === this.folder.id
       )
     },
+    getCollectionIcon() {
+      if (this.isSelected) return "check_circle"
+      else if (!this.showChildren && !this.isFiltered) return "arrow_right"
+      else if (this.showChildren || this.isFiltered) return "arrow_drop_down"
+      else return "folder"
+    },
   },
   methods: {
     toggleShowChildren() {
diff --git a/components/collections/teams/Request.vue b/components/collections/teams/Request.vue
index a371e9660..7e5d659ee 100644
--- a/components/collections/teams/Request.vue
+++ b/components/collections/teams/Request.vue
@@ -1,24 +1,52 @@
 <template>
-  <div>
-    <div>
-      <div>
-        <ButtonSecondary
-          v-tippy="{ theme: 'tooltip' }"
-          :title="!doc ? $t('use_request') : ''"
-          :label="request.name"
-          @click.native="!doc ? selectRequest() : {}"
-        />
-        <i v-if="isSelected" class="mx-3 text-green-400 material-icons"
-          >check_circle</i
-        >
-        <span v-else :class="getRequestLabelColor(request.method)">{{
-          request.method
-        }}</span>
-      </div>
-      <tippy ref="options" tabindex="-1" trigger="click" theme="popover" arrow>
+  <div class="flex flex-col">
+    <div class="flex items-center group">
+      <span
+        class="
+          font-mono font-bold
+          flex
+          justify-center
+          items-center
+          text-xs
+          w-12
+          truncate
+          cursor-pointer
+        "
+        :class="[
+          getRequestLabelColor(request.method),
+          { 'mx-3 text-green-400': isSelected },
+        ]"
+        @click="!doc ? selectRequest() : {}"
+      >
+        <i v-if="isSelected" class="material-icons">check_circle</i>
+        {{ request.method }}
+      </span>
+      <span
+        class="
+          py-3
+          cursor-pointer
+          pr-3
+          flex flex-1
+          min-w-0
+          text-xs
+          group-hover:text-secondaryDark
+          transition
+        "
+        @click="!doc ? selectRequest() : {}"
+      >
+        <span class="truncate"> {{ request.name }} </span>
+      </span>
+      <tippy
+        v-if="collectionsType.selectedTeam.myRole !== 'VIEWER'"
+        ref="options"
+        interactive
+        tabindex="-1"
+        trigger="click"
+        theme="popover"
+        arrow
+      >
         <template #trigger>
-          <TabPrimary
-            v-if="collectionsType.selectedTeam.myRole !== 'VIEWER'"
+          <ButtonSecondary
             v-tippy="{ theme: 'tooltip' }"
             :title="$t('more')"
             icon="more_vert"
@@ -73,7 +101,6 @@ export default {
   },
   data() {
     return {
-      dragging: false,
       requestMethodLabels: {
         get: "text-green-400",
         post: "text-yellow-400",
diff --git a/components/environments/Environment.vue b/components/environments/Environment.vue
index f02febe2c..8ea2dd585 100644
--- a/components/environments/Environment.vue
+++ b/components/environments/Environment.vue
@@ -8,7 +8,14 @@
           @click.native="$emit('edit-environment')"
         />
       </div>
-      <tippy ref="options" tabindex="-1" trigger="click" theme="popover" arrow>
+      <tippy
+        ref="options"
+        interactive
+        tabindex="-1"
+        trigger="click"
+        theme="popover"
+        arrow
+      >
         <template #trigger>
           <TabPrimary
             v-tippy="{ theme: 'tooltip' }"
diff --git a/components/environments/ImportExport.vue b/components/environments/ImportExport.vue
index 6b7848ee0..499aafbbf 100644
--- a/components/environments/ImportExport.vue
+++ b/components/environments/ImportExport.vue
@@ -7,6 +7,7 @@
       <div>
         <tippy
           ref="options"
+          interactive
           tabindex="-1"
           trigger="click"
           theme="popover"
diff --git a/components/history/graphql/Card.vue b/components/history/graphql/Card.vue
index 3f87fde09..c9db749a1 100644
--- a/components/history/graphql/Card.vue
+++ b/components/history/graphql/Card.vue
@@ -28,7 +28,14 @@
         :icon="expand ? 'unfold_less' : 'unfold_more'"
         @click.native="expand = !expand"
       />
-      <tippy ref="options" tabindex="-1" trigger="click" theme="popover" arrow>
+      <tippy
+        ref="options"
+        interactive
+        tabindex="-1"
+        trigger="click"
+        theme="popover"
+        arrow
+      >
         <template #trigger>
           <TabPrimary
             v-tippy="{ theme: 'tooltip' }"
diff --git a/components/history/index.vue b/components/history/index.vue
index d4ded037f..713c6198d 100644
--- a/components/history/index.vue
+++ b/components/history/index.vue
@@ -1,11 +1,11 @@
 <template>
   <AppSection label="history">
-    <div class="flex sticky top-10 shadow-sm">
+    <div class="flex sticky top-10 border-b border-dividerLight">
       <input
         v-model="filterText"
         aria-label="Search"
         type="search"
-        class="px-4 py-2 text-xs flex flex-1 focus:outline-none border-divider"
+        class="px-4 py-3 text-xs flex flex-1 bg-primary focus:outline-none"
         :placeholder="$t('search')"
       />
       <ButtonSecondary
diff --git a/components/history/rest/Card.vue b/components/history/rest/Card.vue
index 469ec175e..ef7ce9fdb 100644
--- a/components/history/rest/Card.vue
+++ b/components/history/rest/Card.vue
@@ -1,5 +1,5 @@
 <template>
-  <div class="flex group">
+  <div class="flex items-center group">
     <span
       class="
         font-mono font-bold
@@ -10,14 +10,26 @@
         w-12
         mx-2
         truncate
+        cursor-pointer
       "
       :class="entryStatus.className"
-      :style="{ '--status-code': entry.status }"
       @click="$emit('use-entry')"
     >
       {{ entry.method }}
     </span>
-    <span class="py-3 pr-3 flex flex-1 min-w-0 text-secondaryLight text-xs">
+    <span
+      class="
+        py-3
+        cursor-pointer
+        pr-3
+        flex flex-1
+        min-w-0
+        text-secondaryLight text-xs
+        group-hover:text-secondary
+        transition
+      "
+      @click="$emit('use-entry')"
+    >
       <span class="truncate">
         {{ `${entry.url}${entry.path}` }}
       </span>
diff --git a/components/http/CodegenModal.vue b/components/http/CodegenModal.vue
index 6a4f7b8ac..ed0e93e4d 100644
--- a/components/http/CodegenModal.vue
+++ b/components/http/CodegenModal.vue
@@ -11,6 +11,7 @@
       <span class="select-wrapper">
         <tippy
           ref="options"
+          interactive
           tabindex="-1"
           trigger="click"
           theme="popover"
diff --git a/components/smart/ChangeLanguage.vue b/components/smart/ChangeLanguage.vue
index 8997e1929..3a70621ef 100644
--- a/components/smart/ChangeLanguage.vue
+++ b/components/smart/ChangeLanguage.vue
@@ -2,6 +2,7 @@
   <span>
     <tippy
       ref="language"
+      interactive
       tabindex="-1"
       trigger="click"
       theme="popover"
diff --git a/components/smart/Tabs.vue b/components/smart/Tabs.vue
index 9222feb20..99ae22106 100644
--- a/components/smart/Tabs.vue
+++ b/components/smart/Tabs.vue
@@ -1,6 +1,6 @@
 <template>
-  <div class="flex flex-col flex-nowrap relative flex-1">
-    <div class="tabs hide-scrollbar" :class="styles">
+  <div class="flex flex-col flex-nowrap flex-1">
+    <div class="tabs hide-scrollbar relative" :class="styles">
       <div class="flex w-0">
         <div class="inline-flex">
           <button
diff --git a/components/smart/Toggle.vue b/components/smart/Toggle.vue
index 989cb4945..a8dfae2b7 100644
--- a/components/smart/Toggle.vue
+++ b/components/smart/Toggle.vue
@@ -1,5 +1,5 @@
 <template>
-  <div class="inline-block cursor-pointer" @click="toggle()">
+  <div class="inline-block cursor-pointer" @click="$emit('change')">
     <label ref="toggle" class="toggle" :class="{ on: on }">
       <span class="handle"></span>
     </label>
@@ -17,13 +17,6 @@ export default {
       default: false,
     },
   },
-
-  methods: {
-    toggle() {
-      const containsOnClass = this.$refs.toggle.classList.toggle("on")
-      this.$emit("change", containsOnClass)
-    },
-  },
 }
 </script>
 
diff --git a/components/teams/Edit.vue b/components/teams/Edit.vue
index c6bbf56e8..01140576f 100644
--- a/components/teams/Edit.vue
+++ b/components/teams/Edit.vue
@@ -57,6 +57,7 @@
           <span class="select-wrapper">
             <tippy
               ref="options"
+              interactive
               tabindex="-1"
               trigger="click"
               theme="popover"
@@ -136,6 +137,7 @@
           <span class="select-wrapper">
             <tippy
               ref="memberOptions"
+              interactive
               tabindex="-1"
               trigger="click"
               theme="popover"
diff --git a/components/teams/Team.vue b/components/teams/Team.vue
index 8e1c9226e..dd65ec305 100644
--- a/components/teams/Team.vue
+++ b/components/teams/Team.vue
@@ -9,7 +9,14 @@
         @click.native="team.myRole === 'OWNER' ? $emit('edit-team') : ''"
       />
     </div>
-    <tippy ref="options" tabindex="-1" trigger="click" theme="popover" arrow>
+    <tippy
+      ref="options"
+      interactive
+      tabindex="-1"
+      trigger="click"
+      theme="popover"
+      arrow
+    >
       <template #trigger>
         <TabPrimary
           v-tippy="{ theme: 'tooltip' }"
diff --git a/pages/api.vue b/pages/api.vue
index 1271637d4..bf0012a49 100644
--- a/pages/api.vue
+++ b/pages/api.vue
@@ -10,7 +10,7 @@
                 <li class="shrink">
                   <label for="method">{{ $t("method") }}</label>
                   <span class="select-wrapper">
-                    <tippy
+                    <tippy interactive
                       ref="options"
                       tabindex="-1"
                       trigger="click"
@@ -104,7 +104,7 @@
                       $t("content_type")
                     }}</label>
                     <span class="select-wrapper">
-                      <tippy
+                      <tippy interactive
                         ref="contentTypeOptions"
                         tabindex="-1"
                         trigger="click"
@@ -599,7 +599,7 @@
           </Pane>
         </Splitpanes>
       </Pane>
-      <Pane max-size="35" min-size="20" class="overflow-auto hide-scrollbar">
+      <Pane max-size="30" size="25" min-size="20" class="overflow-auto hide-scrollbar">
         <aside class="h-full">
           <SmartTabs styles="sticky top-0">
             <SmartTab :id="'history'" :label="$t('history')" :selected="true">
diff --git a/plugins/v-tippy.js b/plugins/v-tippy.js
index c730181e7..3a978a692 100644
--- a/plugins/v-tippy.js
+++ b/plugins/v-tippy.js
@@ -3,6 +3,5 @@ import VueTippy, { TippyComponent } from "vue-tippy"
 
 Vue.use(VueTippy, {
   animateFill: false,
-  interactive: true,
 })
 Vue.component("Tippy", TippyComponent)
diff --git a/windi.config.js b/windi.config.js
index 25aa7bf85..a27906ac0 100644
--- a/windi.config.js
+++ b/windi.config.js
@@ -33,5 +33,4 @@ export default defineConfig({
       icon: "var(--font-icon)",
     },
   },
-  safelist: "text-red-500 text-red-600",
 })