UI update

Seasoned.Frontend/app/app.vue

@@ -7,21 +7,22 @@
       class="px-4"
       height="70"
     >
-      <v-app-bar-title 
-        class="nav-brand" 
-        style="cursor: pointer; user-select: none;" 
-        @click="navigateTo('/')"
+      <v-btn
+        to="/"
+        variant="text"
+        class="nav-home-btn ml-4"
+        elevation="0"
       >
         Seasoned
-      </v-app-bar-title>
+      </v-btn>
 
       <v-spacer></v-spacer>
 
       <div class="nav-links d-flex align-center">
         <v-btn 
-          to="/gallery" 
+          to="/gallery"
+          variant="text" 
           class="nav-auth-btn ml-4" 
-          variant="outlined"
           elevation="0"
         >
           Collection
@@ -30,8 +31,8 @@
         <v-btn 
           v-if="!token" 
           to="/login" 
+          variant="text"
           class="nav-auth-btn ml-4" 
-          variant="outlined"
           elevation="0"
         >
           Sign In
@@ -40,8 +41,8 @@
         <v-btn 
           v-else 
           @click="logout" 
+          variant="text"
           class="nav-auth-btn ml-4" 
-          variant="outlined"
           elevation="0"
         >
           Logout

Seasoned.Frontend/app/assets/css/app-theme.css

@@ -216,33 +216,22 @@
   background: linear-gradient(to bottom, rgba(0,0,0,0.4) 0%, transparent 100%) !important;
 }
 
-.nav-brand {
+.nav-auth-btn, .nav-btn, .nav-home-btn {
   font-family: 'Libre Baskerville', serif !important;
+  font-size: 1.5rem !important;
   color: #f4e4bc !important;
-  text-shadow: 0px 2px 4px rgba(0, 0, 0, 0.8) !important;
-  font-size: 1.8rem !important;
-  letter-spacing: 1px;
-}
-
-.nav-auth-btn, .nav-btn {
-  font-family: 'Libre Baskerville', serif !important;
-  font-size: 1.3rem !important;
-  color: #f4e4bc !important;
-  border: 1.5px solid rgba(244, 228, 188, 0.6) !important;
-  background-color: rgba(0, 0, 0, 0.2) !important;
   text-shadow: 1px 1px 2px rgba(0, 0, 0, 0.8) !important;
-  letter-spacing: 1px;
+  letter-spacing: 0px;
   
 }
 
-.nav-auth-btn:hover, .nav-btn:hover {
+.nav-auth-btn:hover, .nav-btn:hover, .nav-home-btn:hover {
   background-color: #f4e4bc !important;
   color: #2e1e0a !important;
   text-shadow: none !important;
 }
 
 .brand-icon-container {
-  /* Subtle rustic touch */
   filter: sepia(0.2) contrast(1.1);
   opacity: 0.9;
 }

Seasoned.Frontend/app/pages/index.vue

@@ -4,8 +4,8 @@
       
       <header class="text-center mb-10">
         <div class="brand-icon-container mb-4">
-          <v-img
-          
+          <v-img 
+            :src="'/images/seasoned-logo.png'"
             alt="Seasoned Logo"
             width="120"
             class="mx-auto"
@@ -152,6 +152,8 @@ const isAuthenticated = () => {
 }
 
 const handleViewCollection = () => {
+  const token = useCookie('seasoned_token').value 
+                || (import.meta.client ? localStorage.getItem('token') : null)
   if (isAuthenticated()) {
     router.push('/gallery')
   } else {

Seasoned.Frontend/app/pages/login.vue

@@ -6,37 +6,41 @@
         <div :key="isLogin">
           <header class="text-center mb-8">
             <h1 class="auth-title">{{ isLogin ? 'Sign In' : 'Join Us' }}</h1>
-            <p class="brand-subtitle">The Seasoned Ledger</p>
           </header>
 
           <v-form @submit.prevent="handleAuth">
             <v-text-field
+              autofocus
               v-model="email"
-              label="Email"
-              placeholder="email@example.com"
-              class="custom-input auth-input mb-4"
-              variant="flat"
+              placeholder="Email"
+              bg-color="#5d4037"
+              base-color="#f8f1e0"
+              class="auth-input mb-4"
+              variant="outlined"
+              hide-details
               prepend-inner-icon="mdi-email-outline"
             ></v-text-field>
 
             <v-text-field
               v-model="password"
-              label="Password"
+              placeholder="Password"
+              bg-color="#5d4037"
+              base-color="#f8f1e0"
               type="password"
-              placeholder="••••••••"
-              class="custom-input auth-input mb-6"
-              variant="flat"
+              class="auth-input mb-6"
+              variant="outlined"
+              hide-details
               prepend-inner-icon="mdi-lock-outline"
             ></v-text-field>
 
             <v-btn
               block
               class="analyze-btn mb-4"
-              size="large"
+              size=""
               elevation="0"
               type="submit"
             >
-              {{ isLogin ? 'Open Ledger' : 'Create Account' }}
+              {{ isLogin ? 'Login' : 'Create Account' }}
             </v-btn>
 
             <div class="text-center">
@@ -52,7 +56,7 @@
 
       <v-btn to="/" variant="text" color="#6d5e4a" block class="view-recipe-btn">
         <v-icon icon="mdi-chevron-left" class="mr-1"></v-icon>
-        Return to Kitchen
+        Return to Home
       </v-btn>
     </v-card>
   </v-container>

Seasoned.Frontend/nuxt.config.ts

@@ -1,14 +1,20 @@
 export default defineNuxtConfig({
-  compatibilityDate: '2025-07-15',
-
-  devtools: { enabled: true },
-
   future: {
     compatibilityVersion: 4,
   },
-
+  ssr: false,
   srcDir: 'app/',
-
+  dir: {
+    public: 'public/'
+  },
+  modules: [
+    'vuetify-nuxt-module'
+  ],
+  compatibilityDate: '2025-07-15',
+  devtools: { enabled: true },
+  build: {
+    transpile: ['vuetify'],
+  },
   app: {
     baseURL: '/',
     buildAssetsDir: '_nuxt',
@@ -29,32 +35,13 @@ export default defineNuxtConfig({
   css: [
     'vuetify/lib/styles/main.sass',
     '@mdi/font/css/materialdesignicons.min.css',
-    '~/assets/css/app-theme.css',
-    '~/assets/css/gallery.css',
-    '~/assets/css/login.css'
+    '@/assets/css/app-theme.css',
+    '@/assets/css/gallery.css',
+    '@/assets/css/login.css',
   ],
-
-  build: {
-    transpile: ['vuetify'],
-  },
-
-  modules: [
-    'vuetify-nuxt-module'
-  ],
-
   runtimeConfig: {
     public: {
       apiBase: '' 
     }
   },
-
-  vite: {
-    server: {
-      hmr: process.env.NODE_ENV !== 'production' ? {
-        protocol: 'ws',
-        host: 'localhost',
-        port: 3000
-      } : undefined
-    }
-  }
 })

Seasoned.Frontend/package-lock.json

@@ -13,8 +13,10 @@
         "axios": "^1.13.6",
         "dotenv": "^17.3.1",
         "nuxt": "^4.1.3",
+        "mdi": "^2.2.43",
         "prisma": "^6.19.2",
         "sass": "^1.97.3",
+        "vite-plugin-vuetify": "^2.1.3",
         "vue": "^3.5.29",
         "vue-router": "^4.6.4",
         "vuetify": "^4.0.1",

Seasoned.Frontend/package.json

@@ -3,11 +3,11 @@
   "type": "module",
   "private": true,
   "scripts": {
-    "build": "nuxt build",
-    "dev": "nuxt dev",
-    "generate": "nuxt generate",
-    "preview": "nuxt preview",
-    "postinstall": "nuxt prepare",
+    "build": "nuxi build",
+    "dev": "nuxi dev",
+    "generate": "nuxi generate",
+    "preview": "nuxi preview",
+    "postinstall": "nuxi prepare",
     "test": "vitest"
   },
   "dependencies": {
@@ -17,8 +17,10 @@
     "axios": "^1.13.6",
     "dotenv": "^17.3.1",
     "nuxt": "^4.1.3",
+    "mdi": "^2.2.43",
     "prisma": "^6.19.2",
     "sass": "^1.97.3",
+    "vite-plugin-vuetify": "^2.1.3",
     "vue": "^3.5.29",
     "vue-router": "^4.6.4",
     "vuetify": "^4.0.1",

Seasoned.Frontend/plugins/vuetify.ts

@@ -1,14 +0,0 @@
-// @ts-nocheck
-import { createVuetify } from 'vuetify'
-import * as components from 'vuetify/components'
-import * as directives from 'vuetify/directives'
-
-export default defineNuxtPlugin((nuxtApp) => {
-  const vuetify = createVuetify({
-    ssr: true,
-    components,
-    directives,
-  })
-
-  nuxtApp.vueApp.use(vuetify)
-})