From 1707f8cb432eedfc695ecf443e038b67f4663a86 Mon Sep 17 00:00:00 2001
From: =?UTF-8?q?Jos=C3=A9=20Luis=20Pereira?= <pepelui@outlook.com>
Date: Thu, 30 Jun 2022 23:55:58 -0300
Subject: [PATCH] Change css style

---
 src/assets/css/main.scss                    |  2 +-
 src/components/Card/VCard.vue               |  2 +-
 src/components/Gallery/GalleryImage.vue     | 13 +++++++++----
 src/components/Gallery/GalleryThumbnail.vue |  6 +++---
 src/components/Gallery/ImageAttribution.vue |  2 +-
 src/components/Gallery/ImageViewer.vue      |  4 ++--
 src/components/Layout/LayoutHeader.vue      |  4 ++--
 src/modules/otus/views/Index.vue            |  4 ++--
 8 files changed, 21 insertions(+), 16 deletions(-)

diff --git a/src/assets/css/main.scss b/src/assets/css/main.scss
index a4fbb55..c6ad81e 100644
--- a/src/assets/css/main.scss
+++ b/src/assets/css/main.scss
@@ -9,7 +9,7 @@
 
 body {
   @apply bg-gray-100;
-  @apply dark:bg-gray-900;
+  @apply dark:bg-zinc-900;
   @apply font-inter;
   @apply dark:text-slate-400;
 }
diff --git a/src/components/Card/VCard.vue b/src/components/Card/VCard.vue
index caa11b5..a959021 100644
--- a/src/components/Card/VCard.vue
+++ b/src/components/Card/VCard.vue
@@ -1,5 +1,5 @@
 <template>
-  <div class="shadow-sm bg-white print:shadow-none print:border-0 dark:bg-gray-800">
+  <div class="shadow-sm bg-white print:shadow-none print:border-0 dark:bg-zinc-800">
     <slot />
   </div>
 </template>
\ No newline at end of file
diff --git a/src/components/Gallery/GalleryImage.vue b/src/components/Gallery/GalleryImage.vue
index 32a4fc0..0d1e0b7 100644
--- a/src/components/Gallery/GalleryImage.vue
+++ b/src/components/Gallery/GalleryImage.vue
@@ -4,10 +4,11 @@
       class="
         flex
         justify-center 
+        border
+        print:hidden
         bg-white  
-        dark:bg-gray-800 
-        border print:hidden 
-        dark:border-gray-700"
+        dark:bg-zinc-800 
+        dark:border-zinc-800"
     >
       <div class="h-80 max-h-80 flex items-center justify-center">
         <img
@@ -21,11 +22,15 @@
       <div 
         v-for="(image, index) in images"
         :key="image.id"
+        class="
+          pr-1
+          pt-1
+          pb-1
+          last:pr-0"
       >
         <GalleryThumbnail
           :image="image"
           :title="image.depictions.map(d => d.label).join(';')"
-          class="first:ml-0"
           @click="
             galleryIndex = index;
             isImageViewerOpen = true
diff --git a/src/components/Gallery/GalleryThumbnail.vue b/src/components/Gallery/GalleryThumbnail.vue
index d510b34..71080d5 100644
--- a/src/components/Gallery/GalleryThumbnail.vue
+++ b/src/components/Gallery/GalleryThumbnail.vue
@@ -1,10 +1,10 @@
 <template>
   <div 
-    class="ml-1 mr-1 mt-2 bg-white dark:bg-gray-800 flex flex-col justify-center cursor-pointer w-24 h-24 border dark:border-gray-700"
+    class="bg-white dark:bg-gray-800 flex flex-col justify-center cursor-pointer w-24 h-24 border dark:border-gray-700"
     :title="title"
   >
     <img 
-      class="max-h-24 max-w-24"
+      class="h-24 w-24 max-h-24 max-w-24 object-cover"
       :src="image.thumb"
     >
   </div>
@@ -12,7 +12,7 @@
 
 <script setup>
 
-const props = defineProps({
+defineProps({
   image: {
     type: Object,
     required: true
diff --git a/src/components/Gallery/ImageAttribution.vue b/src/components/Gallery/ImageAttribution.vue
index 919b64b..973c951 100644
--- a/src/components/Gallery/ImageAttribution.vue
+++ b/src/components/Gallery/ImageAttribution.vue
@@ -6,7 +6,7 @@
 
 <script setup>
 
-const props = defineProps({
+defineProps({
   attribution: {
     type: Object,
     default: () => ({})
diff --git a/src/components/Gallery/ImageViewer.vue b/src/components/Gallery/ImageViewer.vue
index d3ac820..da7b1ca 100644
--- a/src/components/Gallery/ImageViewer.vue
+++ b/src/components/Gallery/ImageViewer.vue
@@ -4,7 +4,7 @@
     @click="emit('close')"
   >
     <div 
-      class="container bg-white dark:bg-gray-800 relative max-h-full w-full md:h-auto rounded-lg shadow-sm"
+      class="container bg-white dark:bg-zinc-900 relative max-h-full w-full md:h-auto rounded-lg shadow-sm"
       @click.stop
     >
       <VSpinner v-if="isLoading" />
@@ -17,7 +17,7 @@
         >
       </div>
 
-      <div class="bg-white dark:bg-gray-800 attributions bottom-0 h-24 p-4 rounded-b-lg align-middle flex justify-between flex-col text-center">
+      <div class="bg-white dark:bg-zinc-900 attributions bottom-0 h-24 p-4 rounded-b-lg align-middle flex justify-between flex-col text-center">
         <ImageDepictions
           class="my-auto"
           :depictions="image.depictions" 
diff --git a/src/components/Layout/LayoutHeader.vue b/src/components/Layout/LayoutHeader.vue
index b81538a..47bac48 100644
--- a/src/components/Layout/LayoutHeader.vue
+++ b/src/components/Layout/LayoutHeader.vue
@@ -8,8 +8,8 @@
       py-2.5
       rounded
       border-b
-      dark:border-b-gray-800
-      dark:bg-gray-800/50
+      dark:border-b-zinc-800
+      dark:bg-zinc-900
       pl-4
       pr-4
       h-9
diff --git a/src/modules/otus/views/Index.vue b/src/modules/otus/views/Index.vue
index 0f04ca4..37ee5e5 100644
--- a/src/modules/otus/views/Index.vue
+++ b/src/modules/otus/views/Index.vue
@@ -3,9 +3,9 @@
     <div 
       class="
       bg-white
-      dark:bg-gray-800
+      dark:bg-zinc-900
       dark:text-slate-400
-      dark:border-b-gray-800
+      dark:border-b-zinc-800
         border-b 
         pl-4 
         pr-4"