Revert "chore(frontend): Migrate to Tailwind CSS v4 (#240)" (#241)

This reverts commit b883ab5.

docker/backend/Dockerfile

@@ -66,6 +66,8 @@ COPY ./frontend frontend
 COPY ./templates templates
 COPY ./package.json package.json
 COPY ./package-lock.json package-lock.json
+COPY ./postcss.config.js postcss.config.js
+COPY ./tailwind.config.js tailwind.config.js
 COPY ./vite.config.js vite.config.js
 
 RUN \

frontend/src/assets/main.css

@@ -1,26 +1,10 @@
-@import 'tailwindcss';
-
-/*
-  The default border color has changed to `currentColor` in Tailwind CSS v4,
-  so we've added these compatibility styles to make sure everything still
-  looks the same as it did with Tailwind CSS v3.
-
-  If we ever want to remove these styles, we need to add an explicit border
-  color utility to any element that depends on these defaults.
-*/
-@layer base {
-  *,
-  ::after,
-  ::before,
-  ::backdrop,
-  ::file-selector-button {
-    border-color: var(--color-gray-200, currentColor);
-  }
-}
+@tailwind base;
+@tailwind components;
+@tailwind utilities;
 
 .vs__search::placeholder,
 .vs__dropdown-toggle,
 .vs__dropdown-menu {
-    @apply bg-zinc-100!;
-    @apply text-zinc-900!;
+    @apply bg-zinc-100 !important;
+    @apply text-zinc-900 !important;
 }

frontend/src/components/Filter.vue

@@ -2,35 +2,35 @@
     <div class="isolate flex md:inline-flex rounded-md mb-4 md:mb-8 md:mr-8">
         <button
             class="relative inline-flex items-center rounded-l-md border border-zinc-300 px-4 py-2 text-sm font-medium"
-            :class="{ 'bg-amber-200! text-zinc-900!': filter.range === 'all' }"
+            :class="{ '!bg-amber-200 !text-zinc-900': filter.range === 'all' }"
             @click="updateRangeFilter('all')"
         >
             All Time
         </button>
         <button
             class="relative -ml-px inline-flex items-center border border-zinc-300  px-4 py-2 text-sm font-medium"
-            :class="{ 'bg-amber-200! text-zinc-900!': filter.range === 'year' }"
+            :class="{ '!bg-amber-200 !text-zinc-900': filter.range === 'year' }"
             @click="updateRangeFilter('year')"
         >
             Last 365 Days
         </button>
         <button
             class="relative -ml-px inline-flex items-center border border-zinc-300  px-4 py-2 text-sm font-medium"
-            :class="{ 'bg-amber-200! text-zinc-900!': filter.range === 'quarter' }"
+            :class="{ '!bg-amber-200 !text-zinc-900': filter.range === 'quarter' }"
             @click="updateRangeFilter('quarter')"
         >
             Current Quarter
         </button>
         <button
             class="relative -ml-px inline-flex items-center border border-zinc-300  px-4 py-2 text-sm font-medium"
-            :class="{ 'bg-amber-200! text-zinc-900!': filter.range === 'month' }"
+            :class="{ '!bg-amber-200 !text-zinc-900': filter.range === 'month' }"
             @click="updateRangeFilter('month')"
         >
             Last 30 Days
         </button>
         <button
             class="relative -ml-px inline-flex items-center rounded-r-md border border-zinc-300  px-4 py-2 text-sm font-medium"
-            :class="{ 'bg-amber-200! text-zinc-900!': filter.range === 'week' }"
+            :class="{ '!bg-amber-200 !text-zinc-900': filter.range === 'week' }"
             @click="updateRangeFilter('week')"
         >
             Last 7 Days
@@ -39,14 +39,14 @@
     <div class="isolate flex md:inline-flex rounded-md mb-4 md:mb-8">
         <button
             class="relative inline-flex items-center rounded-l-md border border-zinc-300 px-4 py-2 text-sm font-medium"
-            :class="{ 'bg-amber-200! text-zinc-900!': filter.order === 'received' }"
+            :class="{ '!bg-amber-200 !text-zinc-900': filter.order === 'received' }"
             @click="updateOrderFilter('received')"
         >
             Received
         </button>
         <button
             class="relative -ml-px inline-flex items-center rounded-r-md border border-zinc-300  px-4 py-2 text-sm font-medium"
-            :class="{ 'bg-amber-200! text-zinc-900!': filter.order === 'sent' }"
+            :class="{ '!bg-amber-200 !text-zinc-900': filter.order === 'sent' }"
             @click="updateOrderFilter('sent')"
         >
             Sent

frontend/src/components/FormattedMessage.vue

@@ -9,7 +9,7 @@
         computed: {
             formattedMessage() {
                 return this.message
-                    .replace(/<(@[^>]+)>/g, (_match, p1) => `<span class="bg-blue-500 text-blue-500 bg-opacity-30 p-0.5 px-1 rounded-xs">${p1}</span>`)
+                    .replace(/<(@[^>]+)>/g, (_match, p1) => `<span class="bg-blue-500 text-blue-500 bg-opacity-30 p-0.5 px-1 rounded-sm">${p1}</span>`)
                     .replace(/ (\w+) <(http[^>]+)>/g, (_match, p1, p2) => ` <a class="underline" href="${p2}">${p1}</a> `)
                     .replace(/:potato:/g, '🥔');
             },  

frontend/src/components/MainMenu.vue

@@ -3,7 +3,7 @@
         <div class="mx-auto max-w-7xl px-4 sm:px-6 lg:px-8">
             <div class="flex h-16 items-center justify-between">
                 <div class="flex items-center">
-                    <div class="shrink-0 font-bold text-zinc-900">
+                    <div class="flex-shrink-0 font-bold text-zinc-900">
                         <a href="/">
                             GibPotato
                         </a>
@@ -13,28 +13,28 @@
                             <RouterLink
                                 to="/"
                                 class="rounded-md px-3 py-2 text-sm font-medium text-zinc-900"
-                                :class="{ 'bg-zinc-900! text-zinc-50!': $route.path === '/' }"
+                                :class="{ '!bg-zinc-900 !text-zinc-50': $route.path === '/' }"
                             >
                                 Home
                             </RouterLink>
                             <RouterLink
                                 to="/shop"
                                 class="rounded-md px-3 py-2 text-sm font-medium text-zinc-900"
-                                :class="{ 'bg-zinc-900! text-zinc-50!': $route.path === '/shop' }"
+                                :class="{ '!bg-zinc-900 !text-zinc-50': $route.path === '/shop' }"
                             >
                                 Shop
                             </RouterLink>
                             <RouterLink
                                 to="/collection"
                                 class="rounded-md px-3 py-2 text-sm font-medium text-zinc-900"
-                                :class="{ 'bg-zinc-900! text-zinc-50!': $route.path === '/collection' }"
+                                :class="{ '!bg-zinc-900 !text-zinc-50': $route.path === '/collection' }"
                             >
                                 Collection
                             </RouterLink>
                             <RouterLink
                                 to="/quick-wins"
                                 class="rounded-md px-3 py-2 text-sm font-medium text-zinc-900"
-                                :class="{ 'bg-zinc-900! text-zinc-50!': $route.path === '/quick-wins' }"
+                                :class="{ '!bg-zinc-900 !text-zinc-50': $route.path === '/quick-wins' }"
                             >
                                 Quick Wins
                             </RouterLink>
@@ -53,7 +53,7 @@
                                 </button>
                             </div>
                             <div v-show="menuOpen === true"
-                                class="absolute right-0 z-10 mt-2 w-48 origin-top-right rounded-md bg-zinc-50 dark:bg-zinc-800 py-1 shadow-lg ring-1 ring-zinc-900 ring-opacity-5 focus:outline-hidden">
+                                class="absolute right-0 z-10 mt-2 w-48 origin-top-right rounded-md bg-zinc-50 dark:bg-zinc-800 py-1 shadow-lg ring-1 ring-zinc-900 ring-opacity-5 focus:outline-none">
                                 <RouterLink to="/profile" class="block px-4 py-2 text-sm"
                                     :class="{ 'bg-zinc-200 dark:bg-zinc-900': $route.path === '/profile' }">
                                     Your Profile
@@ -93,35 +93,35 @@
                 <RouterLink
                     to="/"
                     class="block rounded-md px-3 py-2 text-base font-medium text-zinc-900"
-                    :class="{ 'bg-zinc-900! text-zinc-50!': $route.path === '/' }"
+                    :class="{ '!bg-zinc-900 !text-zinc-50': $route.path === '/' }"
                 >
                     Home
                 </RouterLink>
                 <RouterLink
                     to="/shop"
                     class="block rounded-md px-3 py-2 text-base font-medium text-zinc-900"
-                    :class="{ 'bg-zinc-900! text-zinc-50!': $route.path === '/shop' }"
+                    :class="{ '!bg-zinc-900 !text-zinc-50': $route.path === '/shop' }"
                 >
                     Shop
                 </RouterLink>
                 <RouterLink
                     to="/collection"
                     class="block rounded-md px-3 py-2 text-base font-medium text-zinc-900"
-                    :class="{ 'bg-zinc-900! text-zinc-50!': $route.path === '/collection' }"
+                    :class="{ '!bg-zinc-900 !text-zinc-50': $route.path === '/collection' }"
                 >
                     Collection
                 </RouterLink>
                 <RouterLink
                     to="/quick-wins"
                     class="block rounded-md px-3 py-2 text-base font-medium text-zinc-900"
-                    :class="{ 'bg-zinc-900! text-zinc-50!': $route.path === '/quick-wins' }"
+                    :class="{ '!bg-zinc-900 !text-zinc-50': $route.path === '/quick-wins' }"
                 >
                     Quick Wins
                 </RouterLink>
             </div>
             <div class="border-t border-zinc-900 pt-4 pb-3">
                 <div class="flex items-center px-5">
-                    <div class="shrink-0">
+                    <div class="flex-shrink-0">
                         <img class="h-10 w-10 rounded-full" :src="user.slack_picture">
                     </div>
                     <div class="ml-3">
@@ -131,13 +131,13 @@
                 </div>
                 <div class="mt-3 space-y-1 px-2">
                     <RouterLink to="/profile" class="block rounded-md px-3 py-2 text-base font-medium text-zinc-900"
-                        :class="{ 'bg-zinc-900! text-zinc-50!': $route.path === '/profile' }">
+                        :class="{ '!bg-zinc-900 !text-zinc-50': $route.path === '/profile' }">
                         Your Profile
                     </RouterLink>
                     <RouterLink
                         to="/settings"
                         class="block rounded-md px-3 py-2 text-base font-medium text-zinc-900"
-                        :class="{ 'bg-zinc-900! text-zinc-50!': $route.path === '/settings' }"
+                        :class="{ '!bg-zinc-900 !text-zinc-50': $route.path === '/settings' }"
                     >
                         Settings
                     </RouterLink>

frontend/src/views/Profile.vue

@@ -27,7 +27,7 @@
                 class="mt-1 text-sm text-zinc-500"
             >
                 Your current potato level is
-                <span class="bg-purple-100 text-purple-800 text-sm font-medium ml-auto px-2.5 py-0.5 rounded-sm dark:bg-purple-900 dark:text-purple-300">
+                <span class="bg-purple-100 text-purple-800 text-sm font-medium ml-auto px-2.5 py-0.5 rounded dark:bg-purple-900 dark:text-purple-300">
                     Level {{ user.progression.id }} ({{ user.progression.name }})
                 </span>
             </p>

frontend/src/views/Settings.vue

@@ -15,13 +15,13 @@
                         </p>
                     </div>
                     <button type="button"
-                        class="bg-zinc-200 dark:bg-zinc-600 relative ml-4 inline-flex h-6 w-11 shrink-0 cursor-pointer rounded-full border-2 border-transparent transition-colors duration-200 ease-in-out"
-                        :class="{ 'bg-green-500!': user.notifications.sent === true }"
+                        class="bg-zinc-200 dark:bg-zinc-600 relative ml-4 inline-flex h-6 w-11 flex-shrink-0 cursor-pointer rounded-full border-2 border-transparent transition-colors duration-200 ease-in-out"
+                        :class="{ '!bg-green-500': user.notifications.sent === true }"
                         @click="toggleSentNotifications"
                     >
                         <span
-                            class="translate-x-0 inline-block h-5 w-5 transform rounded-full bg-white shadow-sm ring-0 transition duration-200 ease-in-out"
-                            :class="{ 'translate-x-5!': user.notifications.sent === true }"
+                            class="translate-x-0 inline-block h-5 w-5 transform rounded-full bg-white shadow ring-0 transition duration-200 ease-in-out"
+                            :class="{ '!translate-x-5': user.notifications.sent === true }"
                         >
                         </span>
                     </button>
@@ -36,13 +36,13 @@
                         </p>
                     </div>
                     <button type="button"
-                        class="bg-zinc-200 dark:bg-zinc-600 relative ml-4 inline-flex h-6 w-11 shrink-0 cursor-pointer rounded-full border-2 border-transparent transition-colors duration-200 ease-in-out"
-                        :class="{ 'bg-green-500!': user.notifications.received === true }"
+                        class="bg-zinc-200 dark:bg-zinc-600 relative ml-4 inline-flex h-6 w-11 flex-shrink-0 cursor-pointer rounded-full border-2 border-transparent transition-colors duration-200 ease-in-out"
+                        :class="{ '!bg-green-500': user.notifications.received === true }"
                         @click="toggleReceivedNotifications"
                     >
                         <span
-                            class="translate-x-0 inline-block h-5 w-5 transform rounded-full bg-white shadow-sm ring-0 transition duration-200 ease-in-out"
-                            :class="{ 'translate-x-5!': user.notifications.received === true }"
+                            class="translate-x-0 inline-block h-5 w-5 transform rounded-full bg-white shadow ring-0 transition duration-200 ease-in-out"
+                            :class="{ '!translate-x-5': user.notifications.received === true }"
                         >
                         </span>
                     </button>
@@ -57,13 +57,13 @@
                         </p>
                     </div>
                     <button type="button"
-                        class="bg-zinc-200 dark:bg-zinc-600 relative ml-4 inline-flex h-6 w-11 shrink-0 cursor-pointer rounded-full border-2 border-transparent transition-colors duration-200 ease-in-out"
-                        :class="{ 'bg-green-500!': user.notifications.too_good_to_go === true }"
+                        class="bg-zinc-200 dark:bg-zinc-600 relative ml-4 inline-flex h-6 w-11 flex-shrink-0 cursor-pointer rounded-full border-2 border-transparent transition-colors duration-200 ease-in-out"
+                        :class="{ '!bg-green-500': user.notifications.too_good_to_go === true }"
                         @click="toggleTooGoodToGoNotifications"
                     >
                         <span
-                            class="translate-x-0 inline-block h-5 w-5 transform rounded-full bg-white shadow-sm ring-0 transition duration-200 ease-in-out"
-                            :class="{ 'translate-x-5!': user.notifications.too_good_to_go === true }"
+                            class="translate-x-0 inline-block h-5 w-5 transform rounded-full bg-white shadow ring-0 transition duration-200 ease-in-out"
+                            :class="{ '!translate-x-5': user.notifications.too_good_to_go === true }"
                         >
                         </span>
                     </button>

frontend/src/views/Shop.vue

@@ -20,7 +20,7 @@
                     <p class="mt-1 text-sm text-zinc-500">{{ product.description }}</p>
                 </div>
                 <div class="absolute inset-x-0 top-0 flex h-72 items-end justify-end overflow-hidden rounded-lg p-4">
-                    <div class="absolute inset-x-0 bottom-0 h-36 bg-linear-to-t from-black opacity-50"></div>
+                    <div class="absolute inset-x-0 bottom-0 h-36 bg-gradient-to-t from-black opacity-50"></div>
                     <p class="relative text-lg font-semibold text-white">🥔 {{ product.price }}</p>
                 </div>
             </div>
@@ -62,7 +62,7 @@
                         <div>
                             <div v-if="modalError" class="rounded-md bg-red-50 p-4 mb-4">
                                 <div class="flex">
-                                    <div class="shrink-0">
+                                    <div class="flex-shrink-0">
                                         <!-- Heroicon name: mini/x-circle -->
                                         <svg class="h-5 w-5 text-red-400" xmlns="http://www.w3.org/2000/svg"
                                             viewBox="0 0 20 20" fill="currentColor" aria-hidden="true">
@@ -89,7 +89,7 @@
                                 <div
                                     class="absolute inset-x-0 top-0 flex h-72 items-end justify-end overflow-hidden rounded-lg p-4">
                                     <div
-                                        class="absolute inset-x-0 bottom-0 h-36 bg-linear-to-t from-black opacity-50">
+                                        class="absolute inset-x-0 bottom-0 h-36 bg-gradient-to-t from-black opacity-50">
                                     </div>
                                 </div>
                             </div>