feat: revamp collections ui

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"

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',

components/collections/ChooseType.vue

@@ -1,10 +1,6 @@
 <template>
   <div v-if="show">
-    <SmartTabs
+    <SmartTabs :id="'collections_tab'" @tab-changed="updateCollectionsType">
-      :id="'collections_tab'"
-      styles="m-4"
-      @tab-changed="updateCollectionsType"
-    >
       <SmartTab
         :id="'my-collections'"
         :label="'My Collections'"
@@ -15,38 +11,40 @@
         :id="'team-collections'"
         :label="'Team Collections'"
       >
-        <ul>
+        <SmartIntersection @intersecting="onTeamSelectIntersect">
-          <li>
+          <select
-            <span class="select-wrapper">
+            id="team"
-              <SmartIntersection @intersecting="onTeamSelectIntersect">
+            type="text"
-                <select
+            autofocus
-                  id="team"
+            class="
-                  type="text"
+              flex
-                  class="team select"
+              w-full
-                  autofocus
+              px-4
-                  @change="updateSelectedTeam(myTeams[$event.target.value])"
+              text-xs
-                >
+              py-2
-                  <option
+              focus:outline-none
-                    :key="undefined"
+              border-b border-dividerLight
-                    :value="undefined"
+            "
-                    hidden
+            @change="updateSelectedTeam(myTeams[$event.target.value])"
-                    disabled
+          >
-                    selected
+            <option
-                  >
+              :key="undefined"
-                    Select team
+              :value="undefined"
-                  </option>
+              hidden
-                  <option
+              disabled
-                    v-for="(team, index) in myTeams"
+              selected
-                    :key="index"
+            >
-                    :value="index"
+              Select team
-                  >
+            </option>
-                    {{ team.name }}
+            <option
-                  </option>
+              v-for="(team, index) in myTeams"
-                </select>
+              :key="index"
-              </SmartIntersection>
+              :value="index"
-            </span>
+            >
-          </li>
+              {{ team.name }}
-        </ul>
+            </option>
+          </select>
+        </SmartIntersection>
       </SmartTab>
     </SmartTabs>
   </div>

components/collections/ImportExport.vue

@@ -18,6 +18,7 @@
             mode == 'import_export' && collectionsType.type == 'my-collections'
           "
           ref="options"
+          interactive
           tabindex="-1"
           trigger="click"
           theme="popover"

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>

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") }}

components/collections/graphql/ImportExport.vue

@@ -5,6 +5,7 @@
       <div>
         <tippy
           ref="options"
+          interactive
           tabindex="-1"
           trigger="click"
           theme="popover"

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"

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">
+    <div
-      <i class="material-icons">help_outline</i>
+      v-if="collections.length === 0"
-      {{ $t("create_new_collection") }}
+      class="flex items-center text-secondaryLight flex-col p-4 justify-center"
-    </p>
+    >
-    <div class="overflow-auto">
+      <i class="material-icons opacity-50 pb-2">create_new_folder</i>
-      <ul class="flex-col">
+      <span class="text-xs">
-        <li
+        {{ $t("create_new_collection") }}
-          v-for="(collection, index) in filteredCollections"
+      </span>
-          :key="collection.name"
+    </div>
-        >
+    <div class="flex flex-col">
-          <component
+      <component
-            :is="
+        :is="
-              collectionsType.type == 'my-collections'
+          collectionsType.type == 'my-collections'
-                ? 'CollectionsMyCollection'
+            ? 'CollectionsMyCollection'
-                : 'CollectionsTeamsCollection'
+            : 'CollectionsTeamsCollection'
-            "
+        "
-            :name="collection.name"
+        v-for="(collection, index) in filteredCollections"
-            :collection-index="index"
+        :key="collection.name"
-            :collection="collection"
+        :name="collection.name"
-            :doc="doc"
+        :collection-index="index"
-            :is-filtered="filterText.length > 0"
+        :collection="collection"
-            :selected="selected.some((coll) => coll == collection)"
+        :doc="doc"
-            :save-request="saveRequest"
+        :is-filtered="filterText.length > 0"
-            :collections-type="collectionsType"
+        :selected="selected.some((coll) => coll == collection)"
-            :picked="picked"
+        :save-request="saveRequest"
-            @edit-collection="editCollection(collection, index)"
+        :collections-type="collectionsType"
-            @add-folder="addFolder($event)"
+        :picked="picked"
-            @edit-folder="editFolder($event)"
+        @edit-collection="editCollection(collection, index)"
-            @edit-request="editRequest($event)"
+        @add-folder="addFolder($event)"
-            @update-team-collections="updateTeamCollections"
+        @edit-folder="editFolder($event)"
-            @select-collection="$emit('use-collection', collection)"
+        @edit-request="editRequest($event)"
-            @unselect-collection="$emit('remove-collection', collection)"
+        @update-team-collections="updateTeamCollections"
-            @select="$emit('select', $event)"
+        @select-collection="$emit('use-collection', collection)"
-            @expand-collection="expandCollection"
+        @unselect-collection="$emit('remove-collection', collection)"
-            @remove-collection="removeCollection"
+        @select="$emit('select', $event)"
-            @remove-request="removeRequest"
+        @expand-collection="expandCollection"
-          />
+        @remove-collection="removeCollection"
-        </li>
+        @remove-request="removeRequest"
-      </ul>
+      />
+    </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>
 

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"
+        v-if="doc && !selected"
-        @click.native="toggleShowChildren"
+        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"
+      <ButtonSecondary
-        >arrow_right</i
+        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"
+        <template #trigger>
-        >arrow_drop_down</i
+          <ButtonSecondary
-      >
+            v-tippy="{ theme: 'tooltip' }"
-      <i v-if="isSelected" class="text-green-400 material-icons"
+            :title="$t('more')"
-        >check_circle</i
+            icon="more_vert"
-      >
+          />
-      <i v-else class="material-icons">folder</i>
+        </template>
-      <div>
+        <SmartItem
-        <ButtonSecondary
+          icon="create_new_folder"
-          v-if="doc && !selected"
+          :label="$t('new_folder')"
-          v-tippy="{ theme: 'tooltip' }"
+          @click.native="
-          :title="$t('import')"
+            $emit('add-folder', {
-          icon="check_box_outline_blank"
+              folder: collection,
-          @click.native="$emit('select-collection')"
+              path: `${collectionIndex}`,
+            })
+            $refs.options.tippy().hide()
+          "
         />
-        <ButtonSecondary
+        <SmartItem
-          v-if="doc && selected"
+          icon="create"
-          v-tippy="{ theme: 'tooltip' }"
+          :label="$t('edit')"
-          :title="$t('delete')"
+          @click.native="
-          icon="check_box"
+            $emit('edit-collection')
-          @click.native="$emit('unselect-collection')"
+            $refs.options.tippy().hide()
+          "
         />
-        <tippy
+        <SmartItem
-          ref="options"
+          icon="delete"
-          tabindex="-1"
+          :label="$t('delete')"
-          trigger="click"
+          @click.native="
-          theme="popover"
+            confirmRemove = true
-          arrow
+            $refs.options.tippy().hide()
-        >
+          "
-          <template #trigger>
+        />
-            <TabPrimary
+      </tippy>
-              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>
     </div>
     <div v-show="showChildren || isFiltered">
-      <ul class="flex-col">
+      <CollectionsMyFolder
-        <li
+        v-for="(folder, index) in collection.folders"
-          v-for="(folder, index) in collection.folders"
+        :key="index"
-          :key="index"
+        class="ml-5 border-l border-dividerLight"
-          class="ml-8 border-l border-divider"
+        :folder="folder"
-        >
+        :folder-index="index"
-          <CollectionsMyFolder
+        :folder-path="`${collectionIndex}/${index}`"
-            :folder="folder"
+        :collection-index="collectionIndex"
-            :folder-index="index"
+        :doc="doc"
-            :folder-path="`${collectionIndex}/${index}`"
+        :save-request="saveRequest"
-            :collection-index="collectionIndex"
+        :collections-type="collectionsType"
-            :doc="doc"
+        :is-filtered="isFiltered"
-            :save-request="saveRequest"
+        :picked="picked"
-            :collections-type="collectionsType"
+        @add-folder="$emit('add-folder', $event)"
-            :is-filtered="isFiltered"
+        @edit-folder="$emit('edit-folder', $event)"
-            :picked="picked"
+        @edit-request="$emit('edit-request', $event)"
-            @add-folder="$emit('add-folder', $event)"
+        @select="$emit('select', $event)"
-            @edit-folder="$emit('edit-folder', $event)"
+        @remove-request="$emit('remove-request', $event)"
-            @edit-request="$emit('edit-request', $event)"
+      />
-            @select="$emit('select', $event)"
+      <CollectionsMyRequest
-            @remove-request="$emit('remove-request', $event)"
+        v-for="(request, index) in collection.requests"
-          />
+        :key="index"
-        </li>
+        class="ml-5 border-l border-dividerLight"
-      </ul>
+        :request="request"
-      <ul class="flex-col">
+        :collection-index="collectionIndex"
-        <li
+        :folder-index="-1"
-          v-for="(request, index) in collection.requests"
+        :folder-name="collection.name"
-          :key="index"
+        :folder-path="collectionIndex.toString()"
-          class="ml-8 border-l border-divider"
+        :request-index="index"
-        >
+        :doc="doc"
-          <CollectionsMyRequest
+        :save-request="saveRequest"
-            :request="request"
+        :collections-type="collectionsType"
-            :collection-index="collectionIndex"
+        :picked="picked"
-            :folder-index="-1"
+        @edit-request="editRequest($event)"
-            :folder-name="collection.name"
+        @select="$emit('select', $event)"
-            :folder-path="collectionIndex.toString()"
+        @remove-request="$emit('remove-request', $event)"
-            :request-index="index"
+      />
-            :doc="doc"
+      <div
-            :save-request="saveRequest"
+        v-if="
-            :collections-type="collectionsType"
+          (collection.folders == undefined ||
-            :picked="picked"
+            collection.folders.length === 0) &&
-            @edit-request="editRequest($event)"
+          (collection.requests == undefined || collection.requests.length === 0)
-            @select="$emit('select', $event)"
+        "
-            @remove-request="$emit('remove-request', $event)"
+        class="
-          />
+          flex
-        </li>
+          items-center
-      </ul>
+          text-secondaryLight
-      <ul>
+          flex-col
-        <li
+          p-4
-          v-if="
+          justify-center
-            (collection.folders == undefined ||
+          ml-5
-              collection.folders.length === 0) &&
+          border-l border-dividerLight
-            (collection.requests == undefined ||
+        "
-              collection.requests.length === 0)
+      >
-          "
+        <i class="material-icons opacity-50 pb-2">folder_open</i>
-          class="flex ml-8 border-l border-divider"
+        <span class="text-xs">
-        >
+          {{ $t("collection_empty") }}
-          <p>
+        </span>
-            <i class="material-icons">not_interested</i>
+      </div>
-            {{ $t("collection_empty") }}
-          </p>
-        </li>
-      </ul>
     </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) {

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>
+      <span
-        <ButtonSecondary
+        class="
-          :label="folder.name ? folder.name : folder.title"
+          flex
-          @click.native="toggleShowChildren"
+          justify-center
-        />
+          items-center
-        <i v-show="!showChildren && !isFiltered" class="material-icons"
+          text-xs
-          >arrow_right</i
+          w-10
-        >
+          truncate
-        <i v-show="showChildren || isFiltered" class="material-icons"
+          cursor-pointer
-          >arrow_drop_down</i
+        "
-        >
+        @click="toggleShowChildren()"
-        <i v-if="isSelected" class="text-green-400 material-icons"
+      >
-          >check_circle</i
+        <i class="material-icons">{{ getCollectionIcon }}</i>
-        >
+      </span>
-        <i v-else class="material-icons">folder_open</i>
+      <span
-      </div>
+        class="
-      <tippy ref="options" tabindex="-1" trigger="click" theme="popover" arrow>
+          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">
+      <CollectionsMyFolder
-        <li
+        v-for="(subFolder, subFolderIndex) in folder.folders"
-          v-for="(subFolder, subFolderIndex) in folder.folders"
+        :key="subFolder.name"
-          :key="subFolder.name"
+        class="ml-5 border-l border-dividerLight"
-          class="ml-8 border-l border-divider"
+        :folder="subFolder"
-        >
+        :folder-index="subFolderIndex"
-          <CollectionsMyFolder
+        :collection-index="collectionIndex"
-            :folder="subFolder"
+        :doc="doc"
-            :folder-index="subFolderIndex"
+        :save-request="saveRequest"
-            :collection-index="collectionIndex"
+        :collections-type="collectionsType"
-            :doc="doc"
+        :folder-path="`${folderPath}/${subFolderIndex}`"
-            :save-request="saveRequest"
+        :picked="picked"
-            :collections-type="collectionsType"
+        @add-folder="$emit('add-folder', $event)"
-            :folder-path="`${folderPath}/${subFolderIndex}`"
+        @edit-folder="$emit('edit-folder', $event)"
-            :picked="picked"
+        @edit-request="$emit('edit-request', $event)"
-            @add-folder="$emit('add-folder', $event)"
+        @update-team-collections="$emit('update-team-collections')"
-            @edit-folder="$emit('edit-folder', $event)"
+        @select="$emit('select', $event)"
-            @edit-request="$emit('edit-request', $event)"
+        @remove-request="removeRequest"
-            @update-team-collections="$emit('update-team-collections')"
+      />
-            @select="$emit('select', $event)"
+      <CollectionsMyRequest
-            @remove-request="removeRequest"
+        v-for="(request, index) in folder.requests"
-          />
+        :key="index"
-        </li>
+        class="ml-5 border-l border-dividerLight"
-      </ul>
+        :request="request"
-      <ul class="flex-col">
+        :collection-index="collectionIndex"
-        <li
+        :folder-index="folderIndex"
-          v-for="(request, index) in folder.requests"
+        :folder-name="folder.name"
-          :key="index"
+        :folder-path="folderPath"
-          class="flex ml-8 border-l border-divider"
+        :request-index="index"
-        >
+        :doc="doc"
-          <CollectionsMyRequest
+        :picked="picked"
-            :request="request"
+        :save-request="saveRequest"
-            :collection-index="collectionIndex"
+        :collections-type="collectionsType"
-            :folder-index="folderIndex"
+        @edit-request="$emit('edit-request', $event)"
-            :folder-name="folder.name"
+        @select="$emit('select', $event)"
-            :folder-path="folderPath"
+        @remove-request="removeRequest"
-            :request-index="index"
+      />
-            :doc="doc"
+      <div
-            :picked="picked"
-            :save-request="saveRequest"
-            :collections-type="collectionsType"
-            @edit-request="$emit('edit-request', $event)"
-            @select="$emit('select', $event)"
-            @remove-request="removeRequest"
-          />
-        </li>
-      </ul>
-      <ul
         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">
+        <i class="material-icons opacity-50 pb-2">folder_open</i>
-          <p>
+        <span class="text-xs">
-            <i class="material-icons">not_interested</i>
+          {{ $t("folder_empty") }}
-            {{ $t("folder_empty") }}
+        </span>
-          </p>
+      </div>
-        </li>
-      </ul>
     </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() {

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>
+      <span
-        <ButtonSecondary
+        class="
-          v-tippy="{ theme: 'tooltip' }"
+          font-mono font-bold
-          :title="!doc ? $t('use_request') : ''"
+          flex
-          :class="[
+          justify-center
-            getRequestLabelColor(request.method),
+          items-center
-            { 'mx-3 text-green-400': isSelected },
+          text-xs
-          ]"
+          w-12
-          :icon="isSelected ? 'check_circle' : ''"
+          truncate
-          :label="request.method + request.name"
+          cursor-pointer
-          @click.native="!doc ? selectRequest() : {}"
+        "
-        />
+        :class="[
-      </div>
+          getRequestLabelColor(request.method),
-      <tippy ref="options" tabindex="-1" trigger="click" theme="popover" arrow>
+          { '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"

components/collections/teams/Collection.vue

@@ -1,147 +1,170 @@
 <template>
-  <div>
+  <div class="flex flex-col">
-    <div>
+    <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"
+        v-if="doc && !selected"
-        @click.native="toggleShowChildren"
+        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"
+      <ButtonSecondary
-        >arrow_right</i
+        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"
+        <template #trigger>
-        >arrow_drop_down</i
+          <ButtonSecondary
-      >
+            v-tippy="{ theme: 'tooltip' }"
-      <i v-if="isSelected" class="text-green-400 material-icons"
+            :title="$t('more')"
-        >check_circle</i
+            icon="more_vert"
-      >
+          />
-      <i v-else class="material-icons">folder</i>
+        </template>
-      <div>
+        <SmartItem
-        <ButtonSecondary
+          v-if="collectionsType.selectedTeam.myRole !== 'VIEWER'"
-          v-if="doc && !selected"
+          icon="create_new_folder"
-          v-tippy="{ theme: 'tooltip' }"
+          :label="$t('new_folder')"
-          :title="$t('import')"
+          @click.native="
-          icon="check_box_outline_blank"
+            $emit('add-folder', {
-          @click.native="$emit('select-collection')"
+              folder: collection,
+              path: `${collectionIndex}`,
+            })
+            $refs.options.tippy().hide()
+          "
         />
-        <ButtonSecondary
+        <SmartItem
-          v-if="doc && selected"
+          v-if="collectionsType.selectedTeam.myRole !== 'VIEWER'"
-          v-tippy="{ theme: 'tooltip' }"
+          icon="create"
-          :title="$t('delete')"
+          :label="$t('edit')"
-          icon="check_box"
+          @click.native="
-          @click.native="$emit('unselect-collection')"
+            $emit('edit-collection')
+            $refs.options.tippy().hide()
+          "
         />
-        <tippy
+        <SmartItem
-          ref="options"
+          v-if="collectionsType.selectedTeam.myRole !== 'VIEWER'"
-          tabindex="-1"
+          icon="delete"
-          trigger="click"
+          :label="$t('delete')"
-          theme="popover"
+          @click.native="
-          arrow
+            confirmRemove = true
-        >
+            $refs.options.tippy().hide()
-          <template #trigger>
+          "
-            <TabPrimary
+        />
-              v-if="collectionsType.selectedTeam.myRole !== 'VIEWER'"
+      </tippy>
-              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>
     </div>
     <div v-show="showChildren || isFiltered">
-      <ul class="flex-col">
+      <CollectionsTeamsFolder
-        <li
+        v-for="(folder, index) in collection.children"
-          v-for="(folder, index) in collection.children"
+        :key="folder.title"
-          :key="folder.title"
+        class="ml-5 border-l border-dividerLight"
-          class="ml-8 border-l border-divider"
+        :folder="folder"
-        >
+        :folder-index="index"
-          <CollectionsTeamsFolder
+        :folder-path="`${collectionIndex}/${index}`"
-            :folder="folder"
+        :collection-index="collectionIndex"
-            :folder-index="index"
+        :doc="doc"
-            :folder-path="`${collectionIndex}/${index}`"
+        :save-request="saveRequest"
-            :collection-index="collectionIndex"
+        :collections-type="collectionsType"
-            :doc="doc"
+        :is-filtered="isFiltered"
-            :save-request="saveRequest"
+        :picked="picked"
-            :collections-type="collectionsType"
+        @add-folder="$emit('add-folder', $event)"
-            :is-filtered="isFiltered"
+        @edit-folder="$emit('edit-folder', $event)"
-            :picked="picked"
+        @edit-request="$emit('edit-request', $event)"
-            @add-folder="$emit('add-folder', $event)"
+        @select="$emit('select', $event)"
-            @edit-folder="$emit('edit-folder', $event)"
+        @expand-collection="expandCollection"
-            @edit-request="$emit('edit-request', $event)"
+        @remove-request="removeRequest"
-            @select="$emit('select', $event)"
+      />
-            @expand-collection="expandCollection"
+      <CollectionsTeamsRequest
-            @remove-request="removeRequest"
+        v-for="(request, index) in collection.requests"
-          />
+        :key="index"
-        </li>
+        class="ml-5 border-l border-dividerLight"
-      </ul>
+        :request="request.request"
-      <ul class="flex-col">
+        :collection-index="collectionIndex"
-        <li
+        :folder-index="-1"
-          v-for="(request, index) in collection.requests"
+        :folder-name="collection.name"
-          :key="index"
+        :request-index="request.id"
-          class="ml-8 border-l border-divider"
+        :doc="doc"
-        >
+        :save-request="saveRequest"
-          <CollectionsTeamsRequest
+        :collections-type="collectionsType"
-            :request="request.request"
+        :picked="picked"
-            :collection-index="collectionIndex"
+        @edit-request="editRequest($event)"
-            :folder-index="-1"
+        @select="$emit('select', $event)"
-            :folder-name="collection.name"
+        @remove-request="removeRequest"
-            :request-index="request.id"
+      />
-            :doc="doc"
+      <div
-            :save-request="saveRequest"
+        v-if="
-            :collections-type="collectionsType"
+          (collection.children == undefined ||
-            :picked="picked"
+            collection.children.length === 0) &&
-            @edit-request="editRequest($event)"
+          (collection.requests == undefined || collection.requests.length === 0)
-            @select="$emit('select', $event)"
+        "
-            @remove-request="removeRequest"
+        class="
-          />
+          flex
-        </li>
+          items-center
-      </ul>
+          text-secondaryLight
-      <ul>
+          flex-col
-        <li
+          p-4
-          v-if="
+          justify-center
-            (collection.children == undefined ||
+          ml-5
-              collection.children.length === 0) &&
+          border-l border-dividerLight
-            (collection.requests == undefined ||
+        "
-              collection.requests.length === 0)
+      >
-          "
+        <i class="material-icons opacity-50 pb-2">folder_open</i>
-          class="flex ml-8 border-l border-divider"
+        <span class="text-xs">
-        >
+          {{ $t("collection_empty") }}
-          <p>
+        </span>
-            <i class="material-icons">not_interested</i>
+      </div>
-            {{ $t("collection_empty") }}
-          </p>
-        </li>
-      </ul>
     </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) {

components/collections/teams/Folder.vue

@@ -1,26 +1,56 @@
 <template>
-  <div>
+  <div class="flex flex-col">
-    <div>
+    <div class="flex items-center group">
-      <div>
+      <span
-        <ButtonSecondary
+        class="
-          :label="folder.name ? folder.name : folder.title"
+          flex
-          @click.native="toggleShowChildren"
+          justify-center
-        />
+          items-center
-        <i v-show="!showChildren && !isFiltered" class="material-icons"
+          text-xs
-          >arrow_right</i
+          w-10
-        >
+          truncate
-        <i v-show="showChildren || isFiltered" class="material-icons"
+          cursor-pointer
-          >arrow_drop_down</i
+        "
-        >
+        @click="toggleShowChildren()"
-        <i v-if="isSelected" class="text-green-400 material-icons"
+      >
-          >check_circle</i
+        <i class="material-icons">{{ getCollectionIcon }}</i>
-        >
+      </span>
-        <i v-else class="material-icons">folder_open</i>
+      <span
-      </div>
+        class="
-      <tippy ref="options" tabindex="-1" trigger="click" theme="popover" arrow>
+          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
+          <ButtonSecondary
-            v-if="collectionsType.selectedTeam.myRole !== 'VIEWER'"
             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">
+      <CollectionsTeamsFolder
-        <li
+        v-for="(subFolder, subFolderIndex) in folder.children"
-          v-for="(subFolder, subFolderIndex) in folder.children"
+        :key="subFolder.name"
-          :key="subFolder.name"
+        class="ml-5 border-l border-dividerLight"
-          class="ml-8 border-l border-divider"
+        :folder="subFolder"
-        >
+        :folder-index="subFolderIndex"
-          <CollectionsTeamsFolder
+        :collection-index="collectionIndex"
-            :folder="subFolder"
+        :doc="doc"
-            :folder-index="subFolderIndex"
+        :save-request="saveRequest"
-            :collection-index="collectionIndex"
+        :collections-type="collectionsType"
-            :doc="doc"
+        :folder-path="`${folderPath}/${subFolderIndex}`"
-            :save-request="saveRequest"
+        :picked="picked"
-            :collections-type="collectionsType"
+        @add-folder="$emit('add-folder', $event)"
-            :folder-path="`${folderPath}/${subFolderIndex}`"
+        @edit-folder="$emit('edit-folder', $event)"
-            :picked="picked"
+        @edit-request="$emit('edit-request', $event)"
-            @add-folder="$emit('add-folder', $event)"
+        @update-team-collections="$emit('update-team-collections')"
-            @edit-folder="$emit('edit-folder', $event)"
+        @select="$emit('select', $event)"
-            @edit-request="$emit('edit-request', $event)"
+        @expand-collection="expandCollection"
-            @update-team-collections="$emit('update-team-collections')"
+        @remove-request="removeRequest"
-            @select="$emit('select', $event)"
+      />
-            @expand-collection="expandCollection"
+      <CollectionsTeamsRequest
-            @remove-request="removeRequest"
+        v-for="(request, index) in folder.requests"
-          />
+        :key="index"
-        </li>
+        class="ml-5 border-l border-dividerLight"
-      </ul>
+        :request="request.request"
-      <ul class="flex-col">
+        :collection-index="collectionIndex"
-        <li
+        :folder-index="folderIndex"
-          v-for="(request, index) in folder.requests"
+        :folder-name="folder.name"
-          :key="index"
+        :request-index="request.id"
-          class="flex ml-8 border-l border-divider"
+        :doc="doc"
-        >
+        :save-request="saveRequest"
-          <CollectionsTeamsRequest
+        :collections-type="collectionsType"
-            :request="request.request"
+        :picked="picked"
-            :collection-index="collectionIndex"
+        @edit-request="$emit('edit-request', $event)"
-            :folder-index="folderIndex"
+        @select="$emit('select', $event)"
-            :folder-name="folder.name"
+        @remove-request="removeRequest"
-            :request-index="request.id"
+      />
-            :doc="doc"
+      <div
-            :save-request="saveRequest"
-            :collections-type="collectionsType"
-            :picked="picked"
-            @edit-request="$emit('edit-request', $event)"
-            @select="$emit('select', $event)"
-            @remove-request="removeRequest"
-          />
-        </li>
-      </ul>
-      <ul
         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">
+        <i class="material-icons opacity-50 pb-2">folder_open</i>
-          <p>
+        <span class="text-xs">
-            <i class="material-icons">not_interested</i>
+          {{ $t("folder_empty") }}
-            {{ $t("folder_empty") }}
+        </span>
-          </p>
+      </div>
-        </li>
-      </ul>
     </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() {

components/collections/teams/Request.vue

@@ -1,24 +1,52 @@
 <template>
-  <div>
+  <div class="flex flex-col">
-    <div>
+    <div class="flex items-center group">
-      <div>
+      <span
-        <ButtonSecondary
+        class="
-          v-tippy="{ theme: 'tooltip' }"
+          font-mono font-bold
-          :title="!doc ? $t('use_request') : ''"
+          flex
-          :label="request.name"
+          justify-center
-          @click.native="!doc ? selectRequest() : {}"
+          items-center
-        />
+          text-xs
-        <i v-if="isSelected" class="mx-3 text-green-400 material-icons"
+          w-12
-          >check_circle</i
+          truncate
-        >
+          cursor-pointer
-        <span v-else :class="getRequestLabelColor(request.method)">{{
+        "
-          request.method
+        :class="[
-        }}</span>
+          getRequestLabelColor(request.method),
-      </div>
+          { 'mx-3 text-green-400': isSelected },
-      <tippy ref="options" tabindex="-1" trigger="click" theme="popover" arrow>
+        ]"
+        @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
+          <ButtonSecondary
-            v-if="collectionsType.selectedTeam.myRole !== 'VIEWER'"
             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",

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' }"

components/environments/ImportExport.vue

@@ -7,6 +7,7 @@
       <div>
         <tippy
           ref="options"
+          interactive
           tabindex="-1"
           trigger="click"
           theme="popover"

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' }"

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

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>

components/http/CodegenModal.vue

@@ -11,6 +11,7 @@
       <span class="select-wrapper">
         <tippy
           ref="options"
+          interactive
           tabindex="-1"
           trigger="click"
           theme="popover"

components/smart/ChangeLanguage.vue

@@ -2,6 +2,7 @@
   <span>
     <tippy
       ref="language"
+      interactive
       tabindex="-1"
       trigger="click"
       theme="popover"

components/smart/Tabs.vue

@@ -1,6 +1,6 @@
 <template>
-  <div class="flex flex-col flex-nowrap relative flex-1">
+  <div class="flex flex-col flex-nowrap flex-1">
-    <div class="tabs hide-scrollbar" :class="styles">
+    <div class="tabs hide-scrollbar relative" :class="styles">
       <div class="flex w-0">
         <div class="inline-flex">
           <button

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>
 

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"

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' }"

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">

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)

windi.config.js

@@ -33,5 +33,4 @@ export default defineConfig({
       icon: "var(--font-icon)",
     },
   },
-  safelist: "text-red-500 text-red-600",
 })