feat: UI improvements

frontend/app/app.config.ts

@@ -2,14 +2,12 @@ export default defineAppConfig({
   // https://ui3.nuxt.dev/getting-started/theme#design-system
   ui: {
     colors: {
-      primary: 'emerald',
-      neutral: 'slate',
+      primary: 'amber',
+      neutral: 'zinc',
+      warning: 'orange',
     },
-    button: {
-      defaultVariants: {
-        // Set default button color to neutral
-        // color: 'neutral'
-      },
+    theme: {
+      radius: 0.25,
     },
   },
 })

frontend/app/app.vue

@@ -1,9 +1,9 @@
 <template>
-  <NuxtLoadingIndicator />
+  <NuxtLoadingIndicator color="white" />
   <Navbar />
-  <div class="min-h-[calc(100vh-var(--spacing)*20)] text-black dark:text-white">
+  <main>
     <NuxtLayout>
-      <NuxtPage />
+      <NuxtPage class="min-h-[calc(100vh-var(--spacing)*20)]" />
     </NuxtLayout>
-  </div>
+  </main>
 </template>

frontend/app/assets/css/main.css

@@ -6,7 +6,3 @@
   --font-sans: 'Public Sans', sans-serif;
   --font-pixelify: Pixelify Sans;
 }
-
-body {
-  @apply bg-gray-100 dark:bg-gray-950;
-}

frontend/app/components/ElevatedButton.vue

@@ -6,9 +6,9 @@ defineProps<{
 
 <template>
   <button
-    class="p-2 rounded-lg duration-300 font-pixelify font-bold
-          drop-shadow-[0_5px_#1A51AC] hover:drop-shadow-[0_5px_#537DC2]
-          bg-yellow-500 hover:brightness-105 text-xl text-blue-800 self-center cursor-pointer"
+    class="p-2 rounded-lg duration-300 font-pixelify cursor-pointer
+          drop-shadow-[0px_5px_#987117] text-xl self-center px-4
+          bg-[var(--ui-primary)] hover:brightness-105"
   >
     <span>{{ message }}</span>
   </button>

frontend/app/components/Navbar.vue

@@ -34,7 +34,7 @@ const items = [
 </script>
 
 <template>
-  <UContainer class="top-0 z-1 sticky bg-white dark:bg-black max-w-full">
+  <UContainer class="top-0 z-1 sticky max-w-full border-b-1 border-neutral-600 font-pixelify bg-[var(--ui-bg)]">
     <div class="mx-auto flex items-center">
       <NuxtLink to="/" class="flex items-center space-x-2 py-3">
         <Logo class="size-10 text-black dark:text-white" />
@@ -44,7 +44,7 @@ const items = [
       </NuxtLink>
 
       <!-- Desktop Navigation -->
-      <UNavigationMenu :items="items" class="hidden md:flex w-full" variant="link">
+      <UNavigationMenu :items="items" class="hidden md:flex w-full" variant="link" :ui="{ link: 'text-lg hover:underline underline-offset-5 text-black dark:text-white' }">
         <template #button>
           <ElevatedButton message="START GRY" />
         </template>
@@ -56,7 +56,7 @@ const items = [
     </div>
 
     <!-- Mobile Navigation -->
-    <transition
+    <Transition
       enter-from-class="opacity-0 translate-x-[100%]"
       leave-to-class="opacity-0 translate-x-[100%]"
       enter-active-class="transition duration-200"
@@ -69,7 +69,7 @@ const items = [
           orientation="vertical"
           variant="link"
           class="w-full text-3xl"
-          :ui="{ link: 'text-lg' }"
+          :ui="{ link: 'text-lg text-white text-black dark:text-white' }"
         >
           <template #button>
             <div class="items-center justify-center text-center w-full">
@@ -78,6 +78,6 @@ const items = [
           </template>
         </UNavigationMenu>
       </div>
-    </transition>
+    </Transition>
   </UContainer>
 </template>

frontend/app/pages/index.vue

@@ -1,5 +1,5 @@
 <template>
-  <div class="flex flex-col md:flex-row justify-center items-center h-screen bg-gray-100 dark:bg-zinc-900">
+  <div class="flex flex-col md:flex-row justify-center items-center">
     <Logo class="max-h-48 max-w-48 md:max-h-96 md:max-w-96 md:mr-12" />
     <USeparator orientation="vertical" class="h-88 md:block hidden" size="lg" :ui="{ border: 'border-black dark:border-white' }" />
     <div class="mt-5 md:mt-0 md:ml-10 text-center md:text-left dark:text-white">
@@ -11,9 +11,9 @@
       </p>
       <div class="mt-10 flex justify-center md:justify-start h-10 text-2xl md:text-4xl items-center ">
         <a class="mr-5" href="https://discord.gg/ASPqckzEd8" target="_blank">
-          <Icon name="logos:discord" class="[&>path]:fill-black dark:[&>path]:fill-white hover:[&>path]:fill-blue-500" mode="svg" alt="Discord" />
+          <Icon name="logos:discord" class="[&>path]:fill-black dark:[&>path]:fill-white hover:[&>path]:fill-[var(--ui-primary)]" mode="svg" alt="Discord" />
         </a>
-        <a class="group hover:text-blue-500" href="https://github.com/Hack4Krak/Hack4KrakSite/" target="_blank">
+        <a class="group hover:text-[var(--ui-primary)]" href="https://github.com/Hack4Krak/Hack4KrakSite/" target="_blank">
           <Icon name="mdi:github" class="mr-2" />
           <Icon name="octicon:logo-github-24" alt="GitHub" />
         </a>