From aaba7963961815e5c4f1b06a782f8f5fb8c32462 Mon Sep 17 00:00:00 2001
From: =?UTF-8?q?Jos=C3=A9=20Luis=20Pereira?= <pepelui@outlook.com>
Date: Mon, 4 Jul 2022 12:46:59 -0300
Subject: [PATCH] Update style

---
 src/assets/css/main.scss                      |  7 +++---
 src/assets/css/webkit.scss                    | 21 ++++++++++++++++
 src/components/Card/VCard.vue                 | 12 ++++++++--
 src/components/Card/VCardContent.vue          |  2 +-
 src/components/Card/VCardHeader.vue           |  2 +-
 src/components/Gallery/ControlImageNext.vue   |  6 ++---
 .../Gallery/ControlImagePrevious.vue          |  6 ++---
 src/components/Gallery/GalleryThumbnail.vue   |  2 +-
 src/components/Gallery/ImageViewer.vue        |  2 +-
 .../otus/components/Citation/CitationList.vue | 18 +++++++-------
 .../otus/components/Citation/CitationRow.vue  | 24 +++++++++++++++----
 src/modules/otus/components/Map.vue           |  4 ++--
 src/modules/otus/components/TaxaInfo.vue      |  2 +-
 src/modules/otus/views/Index.vue              | 10 +++++---
 tailwind.config.js                            |  2 +-
 15 files changed, 84 insertions(+), 36 deletions(-)
 create mode 100644 src/assets/css/webkit.scss

diff --git a/src/assets/css/main.scss b/src/assets/css/main.scss
index 4acb65b..de44874 100644
--- a/src/assets/css/main.scss
+++ b/src/assets/css/main.scss
@@ -1,16 +1,17 @@
 @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');
+@import url('https://fonts.googleapis.com/css2?family=Roboto:ital,wght@0,100;0,400;0,500;0,900;1,100;1,400&display=swap');
 @import '@/assets/css/leaflet.scss';
+@import '@/assets/css/webkit.scss';
 
 * {
   box-sizing: content-box;
 }
 
 body {
-  @apply bg-gray-100;
+  background-color: #f5f7fb;
+  @apply font-main;
   @apply dark:bg-slate-900;
-  @apply font-inter;
   @apply dark:text-slate-400;
 }
 
diff --git a/src/assets/css/webkit.scss b/src/assets/css/webkit.scss
new file mode 100644
index 0000000..c4cc7b7
--- /dev/null
+++ b/src/assets/css/webkit.scss
@@ -0,0 +1,21 @@
+::-webkit-scrollbar {
+  width: 6px;
+  height: 6px;
+  -webkit-transition: background .3s;
+  transition: background .3s;
+}
+
+::-webkit-scrollbar-corner {
+  background: 0 0;
+}
+
+::-webkit-scrollbar-thumb {
+  border-radius: 5px;
+  background: rgb(0,0,0, .16);
+  @apply dark:bg-slate-600;
+}
+
+::-webkit-scrollbar-track {
+  background: rgb(0,0,0, .06);
+  @apply dark:bg-slate-700;
+}
\ No newline at end of file
diff --git a/src/components/Card/VCard.vue b/src/components/Card/VCard.vue
index 0495cd6..3d0b5b2 100644
--- a/src/components/Card/VCard.vue
+++ b/src/components/Card/VCard.vue
@@ -1,5 +1,13 @@
 <template>
-  <div class="shadow bg-white print:shadow-none print:border-0 dark:bg-slate-800 ">
+  <div class="border-1 card dark:border-slate-700 bg-white print:shadow-none print:border-0 dark:bg-slate-800 rounded">
     <slot />
   </div>
-</template>
\ No newline at end of file
+</template>
+
+<style>
+.card {
+    box-shadow: rgba(30,41,59,.04) 0 2px 4px 0;
+    border: 1px solid rgba(98,105,118,.16);
+    transition: transform .3s ease-out,opacity .3s ease-out,box-shadow .3s ease-out;
+}
+</style>
\ No newline at end of file
diff --git a/src/components/Card/VCardContent.vue b/src/components/Card/VCardContent.vue
index ca6f79a..567c111 100644
--- a/src/components/Card/VCardContent.vue
+++ b/src/components/Card/VCardContent.vue
@@ -1,5 +1,5 @@
 <template>
-  <div class="p-4 dark:text-slate-400">
+  <div class="p-4 pl-5 pr-5 dark:text-slate-400 text-slate-800">
     <slot />
   </div>
 </template>
\ No newline at end of file
diff --git a/src/components/Card/VCardHeader.vue b/src/components/Card/VCardHeader.vue
index 3b25712..300e6f5 100644
--- a/src/components/Card/VCardHeader.vue
+++ b/src/components/Card/VCardHeader.vue
@@ -1,5 +1,5 @@
 <template>
-  <div class="p-4 pb-0 uppercase text-sm dark:text-slate-200 font-medium">
+  <div class="p-4 pl-5 pr-5 text dark:text-slate-200 border-b font-medium dark:border-b-slate-700">
     <slot />
   </div>
 </template>
\ No newline at end of file
diff --git a/src/components/Gallery/ControlImageNext.vue b/src/components/Gallery/ControlImageNext.vue
index b191c03..8e40a14 100644
--- a/src/components/Gallery/ControlImageNext.vue
+++ b/src/components/Gallery/ControlImageNext.vue
@@ -1,14 +1,14 @@
 <template>
   <button
     type="button"
-    class="w-20 h-20 rounded-full text-black cursor-pointer dark:text-white opacity-50"
+    class="p-2 text-black cursor-pointer dark:text-white opacity-50 bg-black"
   >
     <svg
       xmlns="http://www.w3.org/2000/svg"
-      class="h-20 w-20"
+      class="h-8 w-8"
       fill="none"
       viewBox="0 0 24 24"
-      stroke="currentColor"
+      stroke="white"
       stroke-width="2"
     >
       <path
diff --git a/src/components/Gallery/ControlImagePrevious.vue b/src/components/Gallery/ControlImagePrevious.vue
index bec8910..5363911 100644
--- a/src/components/Gallery/ControlImagePrevious.vue
+++ b/src/components/Gallery/ControlImagePrevious.vue
@@ -1,14 +1,14 @@
 <template>
   <button
     type="button"
-    class="w-20 h-20 rounded-full text-black cursor-pointer dark:text-white opacity-50"
+    class="p-2 text-black cursor-pointer dark:text-white opacity-50 bg-black"
   >
     <svg
       xmlns="http://www.w3.org/2000/svg"
-      class="h-20 w-20"
+      class="h-8 w-8"
       fill="none"
       viewBox="0 0 24 24"
-      stroke="currentColor"
+      stroke="white"
       stroke-width="2"
     >
       <path
diff --git a/src/components/Gallery/GalleryThumbnail.vue b/src/components/Gallery/GalleryThumbnail.vue
index 91640ba..4f7da1a 100644
--- a/src/components/Gallery/GalleryThumbnail.vue
+++ b/src/components/Gallery/GalleryThumbnail.vue
@@ -1,6 +1,6 @@
 <template>
   <div 
-    class="bg-white dark:bg-gray-800 flex flex-col justify-center cursor-pointer w-24 h-24 dark:border-gray-600 rounded-md shadow box-border"
+    class="bg-white dark:bg-gray-800 flex flex-col justify-center cursor-pointer w-24 h-24 dark:border-gray-600 rounded-md border box-border"
     :title="title"
   >
     <img 
diff --git a/src/components/Gallery/ImageViewer.vue b/src/components/Gallery/ImageViewer.vue
index 2ecb28e..913f16b 100644
--- a/src/components/Gallery/ImageViewer.vue
+++ b/src/components/Gallery/ImageViewer.vue
@@ -4,7 +4,7 @@
     @click="emit('close')"
   >
     <div 
-      class="min-w-96 dark:bg-slate-900 relative rounded-lg shadow-sm mb-24"
+      class="min-w-96 dark:bg-slate-900  rounded-lg shadow-sm mb-24"
       @click.stop
     >
       <VSpinner v-if="isLoading" />
diff --git a/src/modules/otus/components/Citation/CitationList.vue b/src/modules/otus/components/Citation/CitationList.vue
index 52a937e..52cbec4 100644
--- a/src/modules/otus/components/Citation/CitationList.vue
+++ b/src/modules/otus/components/Citation/CitationList.vue
@@ -5,16 +5,14 @@
         Nomenclature citations
       </h1>
     </VCardHeader>
-    <VCardContent>
-      <ul class="text-sm">
-        <CitationRow
-          v-for="citation in citations"
-          :key="citation.id"
-          :citation="citation"
-          class="flex justify-start border-b-2 p-3 pl-0 last:border-b-0 dark:border-b-slate-700"
-        />
-      </ul>
-    </VCardContent>
+    <ul class="text-sm">
+      <CitationRow
+        v-for="citation in citations"
+        :key="citation.id"
+        :citation="citation"
+        class="flex justify-start border-b p-3 px-4 last:border-b-0 dark:border-b-slate-700"
+      />
+    </ul>
   </VCard>
 </template>
 
diff --git a/src/modules/otus/components/Citation/CitationRow.vue b/src/modules/otus/components/Citation/CitationRow.vue
index 9427691..84732f2 100644
--- a/src/modules/otus/components/Citation/CitationRow.vue
+++ b/src/modules/otus/components/Citation/CitationRow.vue
@@ -1,16 +1,32 @@
 <template>
   <li>
     <ButtonExpand
+      v-if="false"
       v-model="isExpanded"
       class="mr-2"
-    /> 
-    <div>
-      <template v-if="isExpanded">
+    />
+
+    <svg 
+      v-if="!isExpanded"
+      @click="isExpanded = !isExpanded"
+      xmlns="http://www.w3.org/2000/svg" class="h-6 w-6  text-primary-700 opacity-60 mr-2" fill="none" viewBox="0 0 24 24" stroke="currentColor" stroke-width="2">
+      <path stroke-linecap="round" stroke-linejoin="round" d="M12 9v3m0 0v3m0-3h3m-3 0H9m12 0a9 9 0 11-18 0 9 9 0 0118 0z" />
+    </svg>
+
+    <svg
+      v-else
+      @click="isExpanded = !isExpanded"
+      xmlns="http://www.w3.org/2000/svg" class="h-6 w-6 min-w-fit min-h-6 text-primary-700 opacity-60 mr-2" fill="none" viewBox="0 0 24 24" stroke="currentColor" stroke-width="2">
+      <path stroke-linecap="round" stroke-linejoin="round" d="M15 12H9m12 0a9 9 0 11-18 0 9 9 0 0118 0z" />
+    </svg>
+ 
+    <div class="pt-0.5">
+      <div v-if="isExpanded">
         <span v-html="citation.source.label" />
         <span v-if="citation.pages">
           :{{ citation.pages }}
         </span>
-      </template>
+      </div>
 
       <span
         v-else
diff --git a/src/modules/otus/components/Map.vue b/src/modules/otus/components/Map.vue
index 7b8c6b2..85729e0 100644
--- a/src/modules/otus/components/Map.vue
+++ b/src/modules/otus/components/Map.vue
@@ -1,6 +1,6 @@
 <template>
   <VCard>
-    <VCardContent class="h-96 max-h-96">
+
       <VSpinner v-if="isLoading" />
       <VMap
         ref="map"
@@ -9,7 +9,7 @@
         :geojson="geojson"
         @geojson:ready="isLoading = false"
       />
-    </VCardContent>
+
   </VCard>
 </template>
 
diff --git a/src/modules/otus/components/TaxaInfo.vue b/src/modules/otus/components/TaxaInfo.vue
index bd85b45..c961eb3 100644
--- a/src/modules/otus/components/TaxaInfo.vue
+++ b/src/modules/otus/components/TaxaInfo.vue
@@ -3,7 +3,7 @@
     <h2 class="text-1xl text-gray-700 capitalize dark:text-gray-400">
       {{ taxon.rank || taxon.type }}
     </h2>
-    <h1 class="text-2xl dark:text-gray-100">
+    <h1 class="text-xl dark:text-gray-100">
       <span v-html="taxonNameString" />
       <span 
         class="ml-2"
diff --git a/src/modules/otus/views/Index.vue b/src/modules/otus/views/Index.vue
index 0351789..5447c9e 100644
--- a/src/modules/otus/views/Index.vue
+++ b/src/modules/otus/views/Index.vue
@@ -27,12 +27,14 @@
           />
           <Autocomplete
             class="
-              print:hidden 
+              print:hidden
               min-w-full 
               mb-2
               md:min-w-fit
               md:ml-2
-              md:mb-0"
+              md:mb-0
+              w-60
+            "
             url="/otus/autocomplete"
             query-param="term"
             label="label_html"
@@ -49,7 +51,9 @@
           />
         </div>
 
-        <TabMenu class="m-[-1px] print:hidden">
+        <TabMenu
+          v-if="tabs.length"
+          class="m-[-1px] print:hidden">
           <TabItem
             v-for="({ name, label }) in tabs"
             :key="name"
diff --git a/tailwind.config.js b/tailwind.config.js
index 252b312..96d1e0e 100644
--- a/tailwind.config.js
+++ b/tailwind.config.js
@@ -11,7 +11,7 @@ module.exports = {
   theme: {
     extend: {
       fontFamily: {
-        inter: ['Inter', 'sans-serif']
+        main: ['-apple-system','BlinkMacSystemFont','San Francisco','Segoe UI','Roboto','Helvetica Neue','sans-serif']
       },
       colors: {
         'primary': colors.sky,