chore: website rework (#297)

apps/website/app/app.vue

@@ -1,5 +1,5 @@
 <template>
-  <UApp>
+  <UApp :tooltip="{ delayDuration: 0 }">
     <Header transparent />
     <NuxtPage />
   </UApp>

apps/website/app/components/ColorModeToggle.vue

@@ -12,7 +12,7 @@
     </UTooltip>
 
     <template #fallback>
-      <USkeleton class="w-8 h-8" />
+      <USkeleton class="size-8" />
     </template>
   </ClientOnly>
 </template>

apps/website/app/components/GithubButton.vue

@@ -1,11 +1,16 @@
 <template>
-  <NuxtLink to="https://github.com/next-orders/food" target="_blank">
-    <UButton
-      icon="pixel:github"
-      aria-label="GitHub"
-      variant="ghost"
-      color="primary"
-      size="xl"
-    />
-  </NuxtLink>
+  <UTooltip text="GitHub">
+    <ULink to="https://github.com/next-orders/food" target="_blank">
+      <UButton
+        leading-icon="pixel:github"
+        aria-label="GitHub"
+        variant="ghost"
+        color="primary"
+        size="xl"
+        class="px-2 py-2 gap-1"
+      >
+        31
+      </UButton>
+    </ULink>
+  </UTooltip>
 </template>

apps/website/app/components/Logo.vue

@@ -1,23 +1,13 @@
 <template>
-  <ClientOnly>
-    <NuxtLink to="/" class="flex items-center gap-2 leading-tight hover:opacity-80 duration-200">
-      <img
-        alt="Logo"
-        src="~/assets/img/logo-full.png"
-        class="h-12 w-auto"
-        :class="{ hidden: isDark }"
-      >
-      <img
-        alt="Logo Dark"
-        src="~/assets/img/logo-full-dark.png"
-        class="h-12 w-auto"
-        :class="{ hidden: !isDark }"
-      >
-    </NuxtLink>
-  </ClientOnly>
-</template>
+  <ULink to="/" class="flex items-center gap-2 leading-tight hover:opacity-80 duration-200">
+    <img
+      alt="Logo"
+      src="~/assets/img/logo.png"
+      class="h-12 w-auto"
+    >
 
-<script setup lang="ts">
-const colorMode = useColorMode()
-const isDark = computed(() => colorMode.value === 'dark')
-</script>
+    <p class="uppercase text-2xl tracking-tight font-serif font-black">
+      Next Orders
+    </p>
+  </ULink>
+</template>

apps/website/nuxt.config.ts

@@ -1,5 +1,8 @@
 export default defineNuxtConfig({
   extends: '@next-orders/ui',
+  future: {
+    compatibilityVersion: 4,
+  },
   app: {
     head: {
       link: [

packages/ui/app/assets/css/main.css

@@ -8,6 +8,14 @@
   --ui-radius: var(--radius-lg);
 }
 
+:root {
+  --ui-primary: black;
+}
+
+.dark {
+  --ui-primary: white;
+}
+
 .bg-muted {
   background-color: var(--ui-bg-muted);
 }