refactor(ui): better rendering with Inter font

components/collections/teams/Collection.vue

@@ -2,15 +2,7 @@
   <div class="flex flex-col">
     <div class="flex items-center group">
       <span
-        class="
-          cursor-pointer
-          flex
-          text-xs
-          w-10
-          justify-center
-          items-center
-          truncate
-        "
+        class="cursor-pointer flex w-10 justify-center items-center truncate"
         @click="toggleShowChildren()"
       >
         <i class="material-icons" :class="{ 'text-green-400': isSelected }">
@@ -23,9 +15,8 @@
           flex
           font-semibold
           flex-1
-          text-xs
           min-w-0
-          py-3
+          py-2
           pr-2
           transition
           group-hover:text-secondaryDark
@@ -111,7 +102,7 @@
         />
       </tippy>
     </div>
-    <div v-show="showChildren || isFiltered">
+    <div v-if="showChildren || isFiltered">
       <CollectionsTeamsFolder
         v-for="(folder, index) in collection.children"
         :key="`folder-${folder}`"
@@ -166,7 +157,7 @@
         "
       >
         <i class="opacity-75 pb-2 material-icons">folder_open</i>
-        <span class="text-xs text-center">
+        <span class="text-center">
           {{ $t("collection_empty") }}
         </span>
       </div>

components/collections/teams/Folder.vue

@@ -2,15 +2,7 @@
   <div class="flex flex-col">
     <div class="flex items-center group">
       <span
-        class="
-          cursor-pointer
-          flex
-          text-xs
-          w-10
-          justify-center
-          items-center
-          truncate
-        "
+        class="cursor-pointer flex w-10 justify-center items-center truncate"
         @click="toggleShowChildren()"
       >
         <i class="material-icons" :class="{ 'text-green-400': isSelected }">
@@ -23,9 +15,8 @@
           flex
           font-semibold
           flex-1
-          text-xs
           min-w-0
-          py-3
+          py-2
           pr-2
           transition
           group-hover:text-secondaryDark
@@ -95,7 +86,7 @@
         />
       </tippy>
     </div>
-    <div v-show="showChildren || isFiltered">
+    <div v-if="showChildren || isFiltered">
       <CollectionsTeamsFolder
         v-for="(subFolder, subFolderIndex) in folder.children"
         :key="`subFolder-${subFolderIndex}`"
@@ -149,7 +140,7 @@
         "
       >
         <i class="opacity-75 pb-2 material-icons">folder_open</i>
-        <span class="text-xs text-center">
+        <span class="text-center">
           {{ $t("folder_empty") }}
         </span>
       </div>

components/collections/teams/Request.vue

@@ -7,7 +7,6 @@
           flex
           font-mono font-bold
           mx-2
-          text-xs
           w-12
           justify-center
           items-center
@@ -33,9 +32,8 @@
           flex
           font-semibold
           flex-1
-          text-xs
           min-w-0
-          py-3
+          py-2
           pr-2
           transition
           group-hover:text-secondaryDark