refactor(ui): better rendering with Inter font

components/smart/AceEditor.vue

@@ -10,6 +10,7 @@
         font-mono
         flex-1
         shadow-lg
+        py-1
         px-4
         bottom-0
         z-10
@@ -25,7 +26,7 @@
           cursor-pointer
           font-semibold
           flex-grow-0 flex-shrink-0
-          text-secondaryLight text-xs
+          text-secondaryLight
           inline-flex
           items-center
           hover:text-secondary

components/smart/AutoComplete.vue

@@ -8,7 +8,6 @@
         flex
         font-semibold font-mono
         flex-1
-        text-xs
         py-2
         px-4
         focus:outline-none
@@ -220,8 +219,7 @@ export default {
       @apply w-full;
       @apply block;
       @apply py-2 px-4;
-      @apply text-xs;
-      @apply font-mono;
+      @apply font-semibold font-mono;
 
       &:last-child {
         border-radius: 0 0 8px 8px;

components/smart/ConfirmModal.vue

@@ -8,7 +8,7 @@
     </template>
     <template #body>
       <div class="flex flex-col px-2">
-        <label class="font-semibold text-xs">
+        <label class="font-semibold">
           {{ title }}
         </label>
       </div>

components/smart/DeletableChip.vue

@@ -19,7 +19,7 @@
   @apply pl-4;
   @apply bg-primaryDark;
   @apply text-secondary;
-  @apply font-mono;
+  @apply font-mono font-semibold;
   @apply border border-divider;
 }
 

components/smart/Item.vue

@@ -45,7 +45,7 @@
       <div class="font-semibold">
         {{ label }}
       </div>
-      <p v-if="description" class="my-2 text-xs text-left text-secondaryLight">
+      <p v-if="description" class="my-2 text-left text-secondaryLight">
         {{ description }}
       </p>
     </div>

components/smart/Spinner.vue

@@ -1,6 +1,6 @@
 <template>
   <svg
-    class="h-5 animate-spin w-5"
+    class="h-4 animate-spin w-4"
     xmlns="http://www.w3.org/2000/svg"
     fill="none"
     viewBox="0 0 24 24"

components/smart/Tabs.vue

@@ -82,10 +82,9 @@ export default {
     @apply flex;
     @apply items-center;
     @apply justify-center;
-    @apply px-4 py-3;
+    @apply px-4 py-2;
     @apply text-secondary;
     @apply font-semibold;
-    @apply text-xs;
     @apply cursor-pointer;
     @apply transition;
     @apply hover:text-secondaryDark;

components/smart/Toggle.vue

@@ -1,11 +1,12 @@
 <template>
-  <div class="cursor-pointer flex-nowrap inline-flex" @click="$emit('change')">
+  <div
+    class="cursor-pointer flex-nowrap inline-flex items-center justify-center"
+    @click="$emit('change')"
+  >
     <label ref="toggle" class="toggle" :class="{ on: on }">
       <span class="handle"></span>
     </label>
-    <label
-      class="cursor-pointer font-semibold text-xs pl-0 align-middle truncate"
-    >
+    <label class="cursor-pointer font-semibold pl-0 align-middle truncate">
       <slot></slot>
     </label>
   </div>
@@ -29,15 +30,16 @@ $activeColor: var(--accent-color);
 $inactiveColor: var(--divider-color);
 $inactiveHandleColor: var(--primary-color);
 $activeHandleColor: var(--primary-color);
-$width: 2rem;
-$height: 1rem;
-$handleSpacing: 0.25rem;
+$width: 1.6rem;
+$height: 0.78rem;
+$handleSpacing: 0.2rem;
 $transition: all 0.2s ease-in-out;
 
 .toggle {
   @apply relative;
-  @apply inline-block;
-  @apply align-middle;
+  @apply inline-flex;
+  @apply items-center;
+  @apply justify-center;
   @apply rounded-full;
   @apply p-0;
   @apply mr-4;