refactor(ui): better rendering with Inter font

components/collections/graphql/Add.vue

@@ -6,7 +6,7 @@
     </template>
     <template #body>
       <div class="flex flex-col px-2">
-        <label for="selectLabelGqlAdd" class="font-semibold text-xs px-4 pb-4">
+        <label for="selectLabelGqlAdd" class="font-semibold px-4 pb-4">
           {{ $t("label") }}
         </label>
         <input

components/collections/graphql/AddFolder.vue

@@ -8,10 +8,7 @@
     </template>
     <template #body>
       <div class="flex flex-col px-2">
-        <label
-          for="selectLabelGqlAddFolder"
-          class="font-semibold text-xs px-4 pb-4"
-        >
+        <label for="selectLabelGqlAddFolder" class="font-semibold px-4 pb-4">
           {{ $t("label") }}
         </label>
         <input

components/collections/graphql/Collection.vue

@@ -10,15 +10,7 @@
       @dragend="dragging = false"
     >
       <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 }">
@@ -31,9 +23,8 @@
           flex
           font-semibold
           flex-1
-          text-xs
           min-w-0
-          py-3
+          py-2
           pr-2
           transition
           group-hover:text-secondaryDark
@@ -97,7 +88,7 @@
         />
       </tippy>
     </div>
-    <div v-show="showChildren || isFiltered">
+    <div v-if="showChildren || isFiltered">
       <CollectionsGraphqlFolder
         v-for="(folder, index) in collection.folders"
         :key="`folder-${index}`"
@@ -146,7 +137,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/graphql/Edit.vue

@@ -8,7 +8,7 @@
     </template>
     <template #body>
       <div class="flex flex-col px-2">
-        <label for="selectLabelGqlEdit" class="font-semibold text-xs px-4 pb-4">
+        <label for="selectLabelGqlEdit" class="font-semibold px-4 pb-4">
           {{ $t("label") }}
         </label>
         <input

components/collections/graphql/EditFolder.vue

@@ -8,10 +8,7 @@
     </template>
     <template #body>
       <div class="flex flex-col px-2">
-        <label
-          for="selectLabelGqlEditFolder"
-          class="font-semibold text-xs px-4 pb-4"
-        >
+        <label for="selectLabelGqlEditFolder" class="font-semibold px-4 pb-4">
           {{ $t("label") }}
         </label>
         <input

components/collections/graphql/EditRequest.vue

@@ -8,10 +8,7 @@
     </template>
     <template #body>
       <div class="flex flex-col px-2">
-        <label
-          for="selectLabelGqlEditReq"
-          class="font-semibold text-xs px-4 pb-4"
-        >
+        <label for="selectLabelGqlEditReq" class="font-semibold px-4 pb-4">
           {{ $t("label") }}
         </label>
         <input

components/collections/graphql/Folder.vue

@@ -10,15 +10,7 @@
       @dragend="dragging = false"
     >
       <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 }">
@@ -31,9 +23,8 @@
           flex
           font-semibold
           flex-1
-          text-xs
           min-w-0
-          py-3
+          py-2
           pr-2
           transition
           group-hover:text-secondaryDark
@@ -93,7 +84,7 @@
         />
       </tippy>
     </div>
-    <div v-show="showChildren || isFiltered">
+    <div v-if="showChildren || isFiltered">
       <CollectionsGraphqlFolder
         v-for="(subFolder, subFolderIndex) in folder.folders"
         :key="`subFolder-${subFolderIndex}`"
@@ -145,7 +136,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/graphql/Request.vue

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

components/collections/graphql/index.vue

@@ -4,7 +4,7 @@
     :class="{ 'rounded border border-divider': savingMode }"
   >
     <div
-      class="flex flex-col top-10 z-10 sticky"
+      class="flex flex-col top-8 z-10 sticky"
       :class="{ 'bg-primary': !savingMode }"
     >
       <input
@@ -18,8 +18,7 @@
           flex
           font-semibold font-mono
           flex-1
-          text-xs
-          py-3
+          py-2
           px-4
           focus:outline-none
         "
@@ -63,7 +62,7 @@
       class="flex flex-col text-secondaryLight p-4 items-center justify-center"
     >
       <i class="opacity-75 pb-2 material-icons">create_new_folder</i>
-      <span class="text-xs text-center">
+      <span class="text-center">
         {{ $t("create_new_collection") }}
       </span>
     </div>
@@ -72,7 +71,7 @@
       class="flex flex-col text-secondaryLight p-4 items-center justify-center"
     >
       <i class="opacity-75 pb-2 material-icons">manage_search</i>
-      <span class="text-xs text-center">
+      <span class="text-center">
         {{ $t("nothing_found") }} "{{ filterText }}"
       </span>
     </div>