Upgrade nuxt 3.7 and some Tailwindcss improvements

mrleblanc101 · Aug 27, 2023 · 91a44c9 · 91a44c9
1 parent d55efb5
commit 91a44c9
Show file tree

Hide file tree

Showing 4 changed files with 879 additions and 600 deletions.
diff --git a/package.json b/package.json
@@ -21,7 +21,7 @@
         "@vueuse/components": "^10.3.0",
         "@vueuse/core": "^10.3.0",
         "@vueuse/nuxt": "^10.3.0",
-        "nuxt": "^3.0.0",
+        "nuxt": "^3.7.0",
         "postcss-import": "^15.1.0",
         "prettier": "^3.0.1",
         "vite-svg-loader": "^4.0.0"

diff --git a/src/components/Tabs.vue b/src/components/Tabs.vue
@@ -17,17 +17,15 @@ export default defineComponent({
             return h('div', [
                 h(
                     'div',
-                    { class: 'grid grid-flow-row auto-cols-fr border-b border-gray-200 dark:border-gray-700' },
+                    { class: 'grid grid-flow-row auto-cols-fr border-b dark:border-gray-800' },
                     tabs?.map((tab, index) => {
                         return h(
                             'button',
                             {
                                 class: [
-                                    'p-4 pb-3 text-sm border-b-4 border-y-transparent border-x-gray-200 dark:border-x-gray-700 hover:bg-gray-100 dark:hover:bg-gray-800 row-start-1 focus:outline-none focus:ring ring-primary-200 dark:ring-gray-600',
+                                    'relative p-4 pb-3 text-sm border-b-4 border-b-transparent border-l dark:border-l-gray-800 hover:bg-gray-100 dark:hover:bg-gray-800 row-start-1 focus:outline-none focus:ring ring-primary-200 dark:ring-gray-600 first:border-l-0',
                                     {
-                                        'font-bold text-primary-500  border-b-primary-500 dark:border-b-primary-500 ':
-                                            index === selectedTabIndex.value,
-                                        'border-l': index !== 0,
+                                        'font-bold text-primary-500 after:absolute after:w-full after:border-b-4 after:left-0 after:-bottom-1 after:border-b-primary-500 after:dark:border-b-primary-500 ': index === selectedTabIndex.value,
                                     },
                                 ],
                                 type: 'button',

diff --git a/src/components/WeekSummary.vue b/src/components/WeekSummary.vue
@@ -38,21 +38,20 @@
                         <ISave class="h-5" />
                     </button>
                 </div>
-                <div
-                    v-for="(day, index) in Object.values(weekSummary)"
-                    :key="index"
-                    class="flex items-end justify-between gap-8"
-                >
+                <div class="flex flex-col gap-2">
                     <div
-                        class="text-xs font-bold uppercase"
-                        :class="{
-                            'opacity-70 dark:opacity-30': index === 0 || index === 6,
-                        }"
+                        v-for="(day, index) in Object.values(weekSummary)"
+                        :key="index"
+                        class="flex items-end justify-between gap-8 group"
                     >
-                        {{ $moment().day(index).format('dddd') }}
-                    </div>
-                    <div class="font-bold tabular-nums" :class="weekSummaryColors(day)">
-                        {{ day }}
+                        <div
+                            class="text-xs font-bold uppercase group-first:opacity-70 group-first:dark:opacity-30 group-last:opacity-70 group-last:dark:opacity-30"
+                        >
+                            {{ $moment().day(index).format('dddd') }}
+                        </div>
+                        <div class="font-bold tabular-nums" :class="weekSummaryColors(day)">
+                            {{ day }}
+                        </div>
                     </div>
                 </div>
                 <div class="flex border-t dark:border-gray-800 items-end justify-between gap-8 pt-2 mt-2">