From 5b92c97e04dac0194e53f031882ccd0a4fb89e7c Mon Sep 17 00:00:00 2001
From: =?UTF-8?q?Jos=C3=A9=20Luis=20Pereira?= <pepelui@outlook.com>
Date: Thu, 30 Jun 2022 19:57:04 -0300
Subject: [PATCH] Style tweaks, add Inter font

---
 src/assets/css/main.scss                              |  2 ++
 src/components/Autocomplete/Autocomplete.vue          | 10 +++++++++-
 src/components/Gallery/{Main.vue => GalleryImage.vue} |  3 +--
 src/components/VSpinner.vue                           |  4 ++--
 src/modules/otus/components/Gallery.vue               |  5 ++---
 tailwind.config.js                                    |  3 +++
 6 files changed, 19 insertions(+), 8 deletions(-)
 rename src/components/Gallery/{Main.vue => GalleryImage.vue} (94%)

diff --git a/src/assets/css/main.scss b/src/assets/css/main.scss
index d8d35f2..f718cb3 100644
--- a/src/assets/css/main.scss
+++ b/src/assets/css/main.scss
@@ -1,5 +1,6 @@
 @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;
@@ -7,4 +8,5 @@
 body {
   @apply bg-gray-100;
   @apply dark:bg-gray-900;
+  @apply font-inter;
 }
diff --git a/src/components/Autocomplete/Autocomplete.vue b/src/components/Autocomplete/Autocomplete.vue
index 6f0bf6c..5a18e6f 100644
--- a/src/components/Autocomplete/Autocomplete.vue
+++ b/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"
diff --git a/src/components/Gallery/Main.vue b/src/components/Gallery/GalleryImage.vue
similarity index 94%
rename from src/components/Gallery/Main.vue
rename to src/components/Gallery/GalleryImage.vue
index 4519cf9..32a4fc0 100644
--- a/src/components/Gallery/Main.vue
+++ b/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: {
diff --git a/src/components/VSpinner.vue b/src/components/VSpinner.vue
index 19935e8..b093bf9 100644
--- a/src/components/VSpinner.vue
+++ b/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'
       })
diff --git a/src/modules/otus/components/Gallery.vue b/src/modules/otus/components/Gallery.vue
index 4e4d039..3f9e22c 100644
--- a/src/modules/otus/components/Gallery.vue
+++ b/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: {
diff --git a/tailwind.config.js b/tailwind.config.js
index 8b51a18..031bc02 100644
--- a/tailwind.config.js
+++ b/tailwind.config.js
@@ -9,6 +9,9 @@ module.exports = {
 
   theme: {
     extend: {
+      fontFamily: {
+        inter: ['Inter', 'sans-serif']
+      },
       colors: {
         'primary': { // Sky
           50: '#f0f9ff',