refactor(ui): better rendering with Inter font

components/environments/Add.vue

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

components/environments/Edit.vue

@@ -8,7 +8,7 @@
     </template>
     <template #body>
       <div class="flex flex-col px-2">
-        <label for="selectLabelEnvEdit" class="font-semibold text-xs px-4 pb-4">
+        <label for="selectLabelEnvEdit" class="font-semibold px-4 pb-4">
           {{ $t("label") }}
         </label>
         <input
@@ -20,10 +20,7 @@
           @keyup.enter="saveEnvironment"
         />
         <div class="flex flex-1 justify-between items-center">
-          <label
-            for="variableList"
-            class="font-semibold text-xs px-4 pt-4 pb-4"
-          >
+          <label for="variableList" class="font-semibold px-4 pt-4 pb-4">
             {{ $t("env_variable_list") }}
           </label>
           <div>
@@ -58,8 +55,7 @@
                 flex
                 font-semibold font-mono
                 flex-1
-                text-xs
-                py-3
+                py-2
                 px-4
                 focus:outline-none
               "
@@ -73,7 +69,6 @@
                 flex
                 font-semibold font-mono
                 flex-1
-                text-xs
                 py-2
                 px-4
                 focus:outline-none

components/environments/Environment.vue

@@ -1,15 +1,7 @@
 <template>
   <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="$emit('edit-environment')"
     >
       <i class="material-icons">layers</i>
@@ -20,9 +12,8 @@
         flex
         font-semibold
         flex-1
-        text-xs
         min-w-0
-        py-3
+        py-2
         pr-2
         transition
         group-hover:text-secondaryDark

components/environments/index.vue

@@ -1,6 +1,6 @@
 <template>
   <AppSection label="environments">
-    <div class="bg-primary rounded-t flex flex-col top-10 z-10 sticky">
+    <div class="bg-primary rounded-t flex flex-col top-8 z-10 sticky">
       <div class="select-wrapper">
         <select
           v-model="selectedEnvironmentIndex"
@@ -10,12 +10,11 @@
             border-b border-dividerLight
             flex
             font-medium
-            text-xs
             w-full
-            py-3
+            py-2
             px-4
             focus:outline-none
-            select
+            appearance-none
           "
         >
           <option :value="-1">No environment</option>
@@ -64,7 +63,7 @@
       class="flex flex-col text-secondaryLight p-4 items-center justify-center"
     >
       <i class="opacity-75 pb-2 material-icons">library_add</i>
-      <span class="text-xs text-center">
+      <span class="text-center">
         {{ $t("create_new_environment") }}
       </span>
     </div>