Style tweaks, add Inter font

src/assets/css/main.scss

@@ -1,10 +1,12 @@
 @import '@/assets/css/tailwind.css';
 @import 'leaflet/dist/leaflet.css';
+@import url('https://fonts.googleapis.com/css2?family=Inter:wght@100;200;400;500;700&display=swap');
 
 * {
   box-sizing: content-box;
 }
 body {
   @apply bg-gray-100;
   @apply dark:bg-gray-900;
+  @apply font-inter;
 }

src/components/Autocomplete/Autocomplete.vue

@@ -1,5 +1,13 @@
 <template>
-  <div class="autocomplete relative mr-3 md:mr-0 md:block w-fit">
+  <div
+    class="
+      autocomplete
+      md:block 
+      md:mr-0
+      mr-3
+      relative
+      w-fit"
+  >
     <div class="flex absolute inset-y-0 left-0 items-center pl-3 pointer-events-none">
       <svg
         class="w-5 h-5 text-gray-500"

src/components/Gallery/Main.vue → src/components/Gallery/GalleryImage.vue

@@ -25,6 +25,7 @@
         <GalleryThumbnail
           :image="image"
           :title="image.depictions.map(d => d.label).join(';')"
+          class="first:ml-0"
           @click="
             galleryIndex = index;
             isImageViewerOpen = true
@@ -47,8 +48,6 @@
 
 <script setup>
 import { ref, computed, watch } from 'vue'
-import GalleryThumbnail from './GalleryThumbnail.vue'
-import ImageViewer from './ImageViewer.vue';
 
 const props = defineProps({
   images: {

src/components/VSpinner.vue

@@ -2,7 +2,7 @@
   <transition name="fade">
     <div 
       ref="spinnerElement"
-      class="box-spinner mx-spinner absolute bg-white dark:bg-gray-800 opacity-90"
+      class="box-spinner mx-spinner absolute bg-white dark:bg-black opacity-90"
       :style="cssProperties"
     >
       <div
@@ -75,6 +75,7 @@
           />
         </svg>
         <div
+          class="text-gray-900 dark:text-slate-400"
           :style="legendStyle"
         >
           <span
@@ -124,7 +125,6 @@ const props = defineProps({
     type: Object,
     default: () =>
       ({
-        color: '#444',
         marginTop: '30px',
         textAlign: 'center'
       })

src/modules/otus/components/Gallery.vue

@@ -1,15 +1,14 @@
 <template>
   <VCard v-if="images.length">
     <VCardContent>
-      <GalleryMain :images="images" />
+      <GalleryImage :images="images" />
     </VCardContent>
   </VCard>
 </template>
 
 <script setup>
 import { ref, watch } from 'vue'
-import GalleryMain from '@/components/Gallery/Main.vue'
-import OtuService from '../services/OtuService';
+import OtuService from '../services/OtuService'
 
 const props = defineProps({
   otuId: {

tailwind.config.js

@@ -9,6 +9,9 @@ module.exports = {
 
   theme: {
     extend: {
+      fontFamily: {
+        inter: ['Inter', 'sans-serif']
+      },
       colors: {
         'primary': { // Sky
           50: '#f0f9ff',