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>