Merge pull request #17 from vue-email/fix/devtools-light

fix: updated light mode colors

Author: Flowko

client/components/CodeContainer.vue

@@ -85,11 +85,13 @@ const items = computed(() => {
   return arr
 })
 
-const tab = ref('html')
+const tab = ref(0)
 </script>
 
 <template>
-  <UTabs v-model="tab" :items="items">
+  <UTabs v-model="tab" :items="items" :ui="{
+    wrapper: 'relative space-y-0'
+  }">
     <template #default="{ item, selected }">
       <div class="flex items-center gap-2 relative truncate">
         <UIcon :name="item.icon" class="w-7 h-7 flex-shrink-0" />

client/components/EmptyState.vue

@@ -47,29 +47,29 @@ const items = [
 
 <template>
   <div class="h-screen flex justify-center">
-    <div class="max-w-3xl px-4 md:px-8 py-20 md:py-40">
+    <div class="max-w-3xl px-4 md:px-8 py-10 md:py-20">
       <div class="text-center">
         <UIcon name="i-twemoji-incoming-envelope" class="w-20 h-20" />
-        <h2 class="text-xl text-gray-100 font-medium">Welcome to the Vue Email Dev Tools!</h2>
-        <p class="mt-2 mb-4 text-sm text-gray-100 font-normal">
+        <h2 class="text-xl text-gray-800 dark:text-gray-100 font-medium">Welcome to the Vue Email Dev Tools!</h2>
+        <p class="mt-2 mb-4 text-sm text-gray-800 dark:text-gray-100 font-normal">
           To start developing your next email template, you can create a
           <UKbd>.vue</UKbd> file under the <UKbd>emails</UKbd> folder.
         </p>
       </div>
 
-      <ul role="list" class="mt-6 grid grid-cols-1 gap-6 border-b border-t border-gray-500 py-6 sm:grid-cols-2">
+      <ul role="list" class="mt-6 grid grid-cols-1 gap-6 border-b border-t border-gray-200 dark:border-gray-500 py-6 sm:grid-cols-2">
         <li v-for="(item, itemIdx) in items" :key="itemIdx" class="flow-root">
-          <NuxtLink target="_blank" :to="item.to" external class="relative -m-2 flex items-center space-x-4 rounded-xl p-2 hover:bg-gray-800">
+          <NuxtLink target="_blank" :to="item.to" external class="relative -m-2 flex items-center space-x-4 rounded-xl p-2 hover:bg-gray-100 dark:hover:bg-gray-800">
             <div class="flex h-16 w-16 flex-shrink-0 items-center justify-center rounded-lg" :class="[item.background]">
               <UIcon :name="item.icon" class="h-7 w-7 text-white" aria-hidden="true" />
             </div>
             <div>
-              <h3 class="text-sm font-medium text-gray-100 focus:outline-none">
+              <h3 class="text-sm font-medium dark:text-gray-100 text-gray-800 focus:outline-none">
                 <span class="absolute inset-0" aria-hidden="true" />
                 <span>{{ item.title }}</span>
                 <span aria-hidden="true"> &rarr;</span>
               </h3>
-              <p class="mt-1 text-sm text-gray-300">{{ item.description }}</p>
+              <p class="mt-1 text-sm text-gray-600 dark:text-gray-300">{{ item.description }}</p>
             </div>
           </NuxtLink>
         </li>

client/components/HeaderButtons.vue

@@ -21,5 +21,8 @@ const isEmailRoute = computed(() => route.name === 'email-file')
     <UTooltip text="View Github Repo">
       <UButton icon="i-simple-icons-github" size="sm" color="gray" variant="solid" to="https://github.com/vue-email/vue-email" target="_blank" />
     </UTooltip>
+    <UTooltip text="Sponsor Vue Email">
+      <UButton icon="i-ph-hand-heart-duotone" size="sm" color="gray" variant="solid" to="https://github.com/sponsors/vue-email" target="_blank" />
+    </UTooltip>
   </div>
 </template>

client/package.json

@@ -14,19 +14,19 @@
     "@iconify-json/simple-icons": "latest",
     "@iconify-json/twemoji": "latest",
     "@nuxt/devtools": "latest",
-    "@nuxt/ui": "^2.11.1",
+    "@nuxt/ui": "^2.12.3",
     "@nuxtjs/fontaine": "^0.4.1",
     "@nuxtjs/google-fonts": "^3.1.3",
     "@types/html-to-text": "^9.0.4",
     "@types/pretty": "^2.0.3",
     "@types/splitpanes": "^2.2.6",
-    "@vueuse/core": "^10.7.0",
-    "@vueuse/nuxt": "^10.7.0",
+    "@vueuse/core": "^10.7.2",
+    "@vueuse/nuxt": "^10.7.2",
     "html-to-text": "^9.0.5",
-    "nuxt": "^3.8.2",
+    "nuxt": "^3.9.3",
     "pretty": "^2.0.0",
-    "scule": "^1.1.1",
-    "shikiji": "^0.9.3",
+    "scule": "^1.2.0",
+    "shikiji": "^0.9.19",
     "splitpanes": "^3.1.5"
   }
 }