From 1b23c10c78b80a322bdd2d0e0918deaad0a309f4 Mon Sep 17 00:00:00 2001
From: chloe <chloestanton117@gmail.com>
Date: Wed, 18 Mar 2026 19:23:53 +0000
Subject: [PATCH] UI update

---
 Seasoned.Frontend/app/assets/css/gallery.css | 173 ++++++++-----
 Seasoned.Frontend/app/assets/css/login.css   |  40 ++-
 Seasoned.Frontend/app/pages/gallery.vue      | 241 +++++++------------
 Seasoned.Frontend/app/pages/login.vue        |  31 +--
 4 files changed, 250 insertions(+), 235 deletions(-)

diff --git a/Seasoned.Frontend/app/assets/css/gallery.css b/Seasoned.Frontend/app/assets/css/gallery.css
index 638931e..272739c 100644
--- a/Seasoned.Frontend/app/assets/css/gallery.css
+++ b/Seasoned.Frontend/app/assets/css/gallery.css
@@ -1,5 +1,5 @@
 .gallery-item-card {
-  background-color: #fcfaf5 !important; 
+  background-color: #FBF6E9 !important; 
   border: 1px solid #e2d7ba !important;
   border-radius: 4px !important; 
   transition: transform 0.3s ease, box-shadow 0.3s ease;
@@ -28,37 +28,127 @@
   letter-spacing: 1.5px;
 }
 
-.view-recipe-btn {
-  font-family: 'Libre Baskerville', serif !important;
-  font-style: italic;
-  text-transform: none !important;
+.recipe-card {
+  background-color: #f4e4bc !important;
+  border: 1px solid #e2d7ba !important;
+  box-shadow: 0 4px 10px rgba(0,0,0,0.1) !important;
+  overflow-y: visible !important;
 }
 
-.back-to-home-btn {
-  background-color: #5d4037 !important;
-  color: #f8f1e0 !important;
-  font-family: 'Libre Baskerville', serif !important;
-  text-transform: none !important;
-  font-size: 1.1rem !important;
-  height: 56px !important;
-  border-radius: 8px !important;
+.recipe-card::-webkit-scrollbar {
+  display: none;
 }
 
-.back-to-home-btn:hover {
-  background-color: #4a3a2a !important;
-  box-shadow: 0 4px 8px rgba(0,0,0,0.2) !important;
+.image-drop-zone {
+  background-color: transparent !important; 
+  border: 2px dashed #2e1e0a !important;
+  box-shadow: none !important;
+}
+
+.image-drop-zone .v-card__underlay {
+  display: none !important;
+}
+
+.recipe-card .v-card.rounded-lg:not(.image-drop-zone) {
+  border: none !important;
+  background-color: transparent !important;
 }
 
 .recipe-title-edit .v-field__input {
   font-family: 'Libre Baskerville', serif !important;
-  font-size: 2.4rem !important;
+  font-weight: 700 !important;
   color: #1e1408 !important;
+  font-size: 2.4rem !important;
   text-align: center !important;
 }
 
+.recipe-title-edit input::placeholder,
+.recipe-title-edit .v-field-label {
+  font-family: 'Libre Baskerville', serif !important;
+  font-style: italic !important;
+  color: #8c857b !important;
+  opacity: 0.6 !important;
+}
+
+.recipe-title {
+  font-family: 'Libre Baskerville', serif !important;
+  font-weight: 700 !important;
+  color: #1e1408 !important;
+}
+
+.date-text {
+  font-family: 'Inter', sans-serif !important;
+  font-size: 0.75rem !important;
+  letter-spacing: 1.5px;
+  text-transform: uppercase;
+  color: #6d5e4a !important;
+  opacity: 0.9;
+}
+
+.recipe-title-edit ::placeholder {
+  color: #8c857b !important;
+  opacity: 0.6;
+}
+
 .v-textarea .v-field {
-  background-color: rgba(93, 64, 55, 0.05) !important;
-  border-radius: 8px !important;
+  background-color: transparent !important;
+  border-radius: 4px !important;
+}
+
+.v-textarea textarea {
+  font-family: 'Libre Baskerville', serif !important;
+  font-size: 1.1rem !important;
+  line-height: 1.6 !important;
+  color: #2c2925 !important;
+  min-height: 280px !important;
+  scrollbar-width: thin;
+  scrollbar-color: #d1c7b7 transparent;
+}
+
+.v-field-label {
+  color: #5d4037 !important;
+  opacity: 0.6 !important;
+}
+
+.v-field__outline {
+  --v-field-border-opacity: 0.2 !important;
+  color: #2e1e0a !important;
+}
+
+.v-field--focused .v-field__outline {
+  color: #556b2f !important;
+}
+
+.recipe-textarea .v-field__input, 
+.v-textarea textarea {
+  font-family: 'Libre Baskerville', serif !important;
+  font-size: 1.1rem !important;
+  line-height: 1.6 !important;
+  color: #2c2925 !important;
+  min-height: 280px !important;
+  overflow-y: auto !important; 
+  scrollbar-width: thin;
+  scrollbar-color: #d1c7b7;
+}
+
+.recipe-textarea textarea::-webkit-scrollbar {
+  width: 8px !important;
+  display: block !important;
+}
+
+.recipe-textarea textarea::-webkit-scrollbar-track {
+  background: transparent !important;
+}
+
+.recipe-textarea textarea::-webkit-scrollbar-thumb {
+  background-color: #d1c7b7 !important;
+  border-radius: 10px;
+  border: 2px solid #f4e4bc;
+  background-clip: padding-box
+}
+
+.recipe-textarea textarea::-webkit-scrollbar-thumb:hover {
+  background-color: #556b2f !important;
 }
 
 .save-btn, .cancel-btn {
@@ -84,49 +174,4 @@
 
 .cancel-btn:hover {
   background-color: rgba(140, 74, 50, 0.05) !important;
-}
-
-.recipe-title-edit .v-field__input {
-  font-family: 'Libre Baskerville', serif !important;
-  font-weight: 700 !important;
-  color: #1e1408 !important;
-  font-size: 2.4rem !important;
-  text-align: center !important;
-}
-
-.v-textarea .v-field__input, .v-textarea textarea {
-  font-family: 'Libre Baskerville', serif !important;
-  font-size: 1.1rem !important;
-  line-height: 1.6 !important;
-  color: #2c2925 !important
-}
-
-.v-field-label {
-  color: #5d4037 !important;
-  opacity: 0.6 !important;
-}
-
-.v-textarea .v-label,
-.v-textarea .v-field-label {
-  font-family: 'Libre Baskerville', serif !important;
-  font-style: italic;
-}
-
-
-.v-field__outline {
-  --v-field-border-opacity: 1 !important;
-  color: #d1c7b7 !important;
-}
-
-.v-field--focused .v-field__outline {
-  color: #556b2f !important;
-}
-
-.recipe-title-edit.v-text-field .v-field__outline__line {
-  border-bottom-width: 2px !important;
-  color: #d1c7b7 !important;
-}
-
-.recipe-title-edit.v-field--focused .v-field__outline__line {
-  color: #556b2f !important;
 }
\ No newline at end of file
diff --git a/Seasoned.Frontend/app/assets/css/login.css b/Seasoned.Frontend/app/assets/css/login.css
index 10902a8..799e3e9 100644
--- a/Seasoned.Frontend/app/assets/css/login.css
+++ b/Seasoned.Frontend/app/assets/css/login.css
@@ -7,7 +7,7 @@
   font-family: 'Libre Baskerville', serif;
   font-weight: 700;
   font-size: 2.2rem;
-  margin-top: -5px !important; /* Pulls the text up toward the pot */
+  margin-top: -5px !important;
   margin-bottom: 8px;
   line-height: 1.0 !important;
   background: linear-gradient(to bottom, #8c4a32 20%, #4a2a14 100%);
@@ -80,27 +80,51 @@
   opacity: 1 !important;
 }
 
-/* Force the font on the floating label */
 .auth-input :deep(.v-label) {
   font-family: 'Libre Baskerville', serif !important;
   color: #2e1e0a !important;
   opacity: 1 !important;
 }
 
-/* Fix for the white Success Message in your screenshot */
 .auth-success {
     background-color: rgba(85, 107, 47, 0.1) !important;
     border-color: #556b2f !important;
-    color: #556b2f !important; /* Forces the green text */
+    color: #556b2f !important;
 }
 
 .auth-success :deep(.v-icon) {
     color: #556b2f !important;
 }
 
-/* Fix for the Error Message */
+.auth-message {
+  display: flex;
+  align-items: center;
+  padding: 12px 16px;
+  border-radius: 4px;
+  margin-bottom: 24px;
+  font-family: 'Libre Baskerville', serif;
+  font-size: 0.9rem;
+  border: 1px solid transparent;
+  box-shadow: 0 2px 4px rgba(0,0,0,0.05);
+  transition: all 0.3s ease;
+}
+
 .auth-error {
-    background-color: rgba(140, 74, 50, 0.1) !important;
-    border-color: #8c4a32 !important;
-    color: #8c4a32 !important;
+  background-color: #EDC9C9 !important; 
+  color: #8c2f2f !important;
+  border-color: #CB6262 !important;
+}
+
+.auth-error .v-icon {
+  color: #8c2f2f !important;
+}
+
+.auth-success {
+  background-color: rgba(85, 107, 47, 0.1) !important;
+  color: #556b2f !important;
+  border-color: #556b2f !important;
+}
+
+.auth-success .v-icon {
+  color: #556b2f !important;
 }
\ No newline at end of file
diff --git a/Seasoned.Frontend/app/pages/gallery.vue b/Seasoned.Frontend/app/pages/gallery.vue
index 8e7fadd..25e00af 100644
--- a/Seasoned.Frontend/app/pages/gallery.vue
+++ b/Seasoned.Frontend/app/pages/gallery.vue
@@ -22,7 +22,7 @@
       </v-row>
 
       <v-row v-else-if="recipes?.length">
-        <v-col v-for="recipe in recipes" :key="recipe.id" cols="12" sm="6" md="4">
+        <v-col v-for="recipe in sortedRecipes" :key="recipe.id" cols="12" sm="6" md="4">
           <v-card class="gallery-item-card pa-4">
             <v-sheet
               height="200"
@@ -81,61 +81,99 @@
 
     </v-card>
 
-    <v-dialog v-model="showDetails" max-width="800" persistent>
+    <v-dialog v-model="showDetails" max-width="950" persistent>
       <v-card v-if="selectedRecipe" class="recipe-card pa-8">
         <v-btn
           v-if="!isEditing"
           icon="mdi-close"
           variant="text"
           position="absolute"
-          style="top: 10px; right: 10px;"
+          style="top: 10px; right: 10px; z-index: 10;"
           color="#5d4037"
           @click="closeDetails"
         ></v-btn>
 
-        <header class="text-center mb-6">
-          <v-text-field
-            v-if="isEditing"
-            v-model="selectedRecipe.title"
-            variant="underlined"
-            class="recipe-title-edit"
-          ></v-text-field>
-          <h2 v-else class="recipe-title">{{ selectedRecipe.title }}</h2>
-        </header>
+        <v-row align="start" class="mb-6">
+          <v-col cols="12" md="4" class="d-flex flex-column align-center">
+            <v-hover v-slot="{ isHovering, props }">
+              <v-card
+                v-bind="props"
+                width="160"
+                height="160"
+                :class="[
+                  'rounded-lg d-flex align-center justify-center cursor-pointer position-relative overflow-hidden',
+                  { 'image-drop-zone': isEditing }
+                ]"
+                @click="isEditing ? $refs.fileInput.click() : null"
+                :elevation="isHovering && isEditing ? 4 : 1"
+              >
+                <v-img
+                  v-if="selectedRecipe.imageUrl"
+                  :src="selectedRecipe.imageUrl"
+                  cover
+                  class="rounded-lg fill-height"
+                ></v-img>
 
-        <v-divider class="mb-6 separator"></v-divider>
-
-        <v-row justify="center" class="px-md-10">
-          <v-col cols="12" md="5" class="d-flex flex-column align-center">
-            <div style="width: 100%; max-width: 300px;">
-              <h3 class="section-header justify-center mb-4">
-                <v-icon icon="mdi-basket-outline" class="mr-2" size="small"></v-icon>
-                Ingredients
-              </h3>
-              
-              <v-textarea
-                v-if="isEditing"
-                v-model="selectedRecipe.ingredients"
-                variant="outlined"
-                auto-grow
-                density="comfortable"
-                bg-color="rgba(255,255,255,0.3)"
-              ></v-textarea>
-              
-              <v-list v-else class="ingredients-list">
-                <v-list-item 
-                  v-for="(ing, index) in (Array.isArray(selectedRecipe.ingredients) ? selectedRecipe.ingredients : selectedRecipe.ingredients?.split('\n') || [])" 
-                  :key="index"
-                  class="ingredient-item px-0"
+                <div 
+                  v-if="isEditing && (isHovering || !selectedRecipe.imageUrl)" 
+                  class="d-flex flex-column align-center justify-center position-absolute"
+                  style="background: rgba(226,215,186,0.4); inset: 0;"
                 >
-                  {{ ing }}
-                </v-list-item>
-              </v-list>
-            </div>
+                  <v-icon icon="mdi-camera-plus" color="#556b2f" size="large"></v-icon>
+                  <span class="brand-subtitle" style="font-size: 0.7rem; color: #556b2f;">Update Photo</span>
+                </div>
+              </v-card>
+            </v-hover>
+            <input type="file" ref="fileInput" accept="image/*" style="display: none" @change="handleImageUpload" />
+          </v-col>
+
+          <v-col cols="12" md="8">
+            <v-text-field
+              v-if="isEditing"
+              v-model="selectedRecipe.title"
+              label="Recipe Title"
+              variant="underlined"
+              class="recipe-title-edit"
+              hide-details
+            ></v-text-field>
+            <h2 v-else class="recipe-title" style="font-size: 2.5rem;">{{ selectedRecipe.title }}</h2>
+          </v-col>
+        </v-row>
+
+        <v-divider class="mb-8 separator"></v-divider>
+
+        <v-row class="px-md-4">
+          <v-col cols="12" md="5">
+            <h3 class="section-header mb-4">
+              <v-icon icon="mdi-basket-outline" class="mr-2" size="small"></v-icon>
+              Ingredients
+            </h3>
+            
+            <v-textarea
+              v-if="isEditing"
+              v-model="selectedRecipe.ingredients"
+              variant="outlined"
+              auto-grow
+              rows="10"
+              density="comfortable"
+              class="auth-input recipe-textarea"
+              bg-color="transparent"
+              :persistent-placeholder="true"
+            ></v-textarea>
+            
+            <v-list v-else class="ingredients-list bg-transparent">
+              <v-list-item 
+                v-for="(ing, index) in (Array.isArray(selectedRecipe.ingredients) ? selectedRecipe.ingredients : selectedRecipe.ingredients?.split('\n') || [])" 
+                :key="index"
+                class="ingredient-item px-0"
+              >
+                • {{ ing }}
+              </v-list-item>
+            </v-list>
           </v-col>
 
           <v-col cols="12" md="7">
-            <h3 class="section-header justify-center mb-4">
+            <h3 class="section-header mb-4">
               <v-icon icon="mdi-chef-hat" class="mr-2" size="small"></v-icon>
               Instructions
             </h3>
@@ -145,8 +183,11 @@
               v-model="selectedRecipe.instructions"
               variant="outlined"
               auto-grow
+              rows="10"
               density="comfortable"
-              bg-color="rgba(255,255,255,0.3)"
+              class="auth-input recipe-textarea"
+              bg-color="transparent"
+              :persistent-placeholder="true"
             ></v-textarea>
 
             <div v-else
@@ -160,78 +201,18 @@
           </v-col>
         </v-row>
 
-        <v-card-actions v-if="isEditing" class="justify-center mt-6">
-          <v-btn 
-            variant="text" 
-            @click="saveChanges" 
-            class="save-btn px-8"
-          >
-            Save Changes
-          </v-btn>
-
-          <v-btn 
-            variant="text" 
-            @click="isEditing = false"
-            class="cancel-btn px-8"
-          >
-            Cancel
-          </v-btn>
+        <v-card-actions v-if="isEditing" class="justify-center mt-8">
+          <v-btn variant="text" @click="saveChanges" class="save-btn px-8">Save Changes</v-btn>
+          <v-btn variant="text" @click="isEditing = false" class="cancel-btn px-8">Cancel</v-btn>
         </v-card-actions>
-
-        <v-divider class="my-6 separator"></v-divider>
-        
-        <footer class="text-center">
-          <p class="brand-subtitle" style="font-size: 0.8rem;">
-            Recorded on {{ new Date(selectedRecipe.createdAt).toLocaleDateString() }}
-          </p>
-        </footer>
       </v-card>
-      <v-row justify="center" class="mb-4">
-        <v-col cols="12" class="d-flex flex-column align-center">
-          <v-hover v-slot="{ isHovering, props }">
-            <v-card
-              v-bind="props"
-              width="200"
-              height="200"
-              class="rounded-lg d-flex align-center justify-center cursor-pointer position-relative"
-              @click="$refs.fileInput.click()"
-              :elevation="isHovering ? 4 : 1"
-              style="border: 2px dashed #d1c7b7; background: #fcfaf5;"
-            >
-              <v-img
-                v-if="selectedRecipe.imageUrl"
-                :src="selectedRecipe.imageUrl"
-                cover
-                class="rounded-lg"
-              ></v-img>
-              
-              <div 
-                v-if="isEditing && (!selectedRecipe.imageUrl || isHovering)" 
-                class="d-flex flex-column align-center justify-center position-absolute"
-                style="background: rgba(255,255,255,0.7); inset: 0;"
-              >
-                <v-icon icon="mdi-camera-plus" color="#556b2f" size="large"></v-icon>
-                <span class="brand-subtitle" style="font-size: 0.7rem;">Update Photo</span>
-              </div>
-            </v-card>
-          </v-hover>
-          
-          <input
-            type="file"
-            ref="fileInput"
-            accept="image/*"
-            style="display: none"
-            @change="handleImageUpload"
-          />
-        </v-col>
-      </v-row>
     </v-dialog>
   </v-container>
 </template>
 
 
 <script setup>
-import { ref, onMounted } from 'vue'
+import { ref, onMounted, computed } from 'vue'
 import '@/assets/css/gallery.css'
 
 const recipes = ref([])
@@ -312,6 +293,7 @@ const saveChanges = async () => {
  try {
     const payload = { 
       ...selectedRecipe.value,
+      createdAt: selectedRecipe.value.createdAt || new Date().toISOString(),
       ingredients: typeof selectedRecipe.value.ingredients === 'string' 
         ? selectedRecipe.value.ingredients.split('\n').filter(i => i.trim()) 
         : selectedRecipe.value.ingredients,
@@ -334,49 +316,12 @@ const saveChanges = async () => {
     closeDetails();
   } catch (e) {
     console.error("The kitchen ledger could not be updated:", e);
-    alert("Could not save changes. Please try again.");
   }
 }
 
-// Mock setup for recipe cards
-//const mockData = [
-  //  {
-   //   id: 1,
-   //   title: "Grandma's Secret Bolognese",
-   //   createdAt: new Date().toISOString(),
-   //   ingredients: "2 lbs Ground Beef\n1 Onion, diced\n3 cloves Garlic\n2 cans Crushed Tomatoes\n1 cup Red Wine",
-    //  instructions: "Brown the meat with onions.\nAdd garlic and wine; reduce.\nSimmer with tomatoes for 3 hours."
-   // },
-   // {
-      //id: 2,
-      //title: "Rustic Sourdough",
-      //createdAt: new Date().toISOString(),
-      //ingredients: "500g Flour\n350g Water\n100g Starter\n10g Salt",
-      //instructions: "Mix and autolyse for 1 hour.\nPerform 4 sets of stretch and folds.\nCold ferment for 12 hours.\nBake at 450°F in a dutch oven."
-    //}
-  //]
-  //recipes.value = mockData
-  //loading.value = false
-//}
-
-//const saveChanges = async () => {
-
-  //const index = recipes.value.findIndex(r => r.id === selectedRecipe.value.id)
-  //if (index !== -1) {
-    //recipes.value[index] = { ...selectedRecipe.value }
-  //}
-
-  //isEditing.value = false
-  //showDetails.value = false
-//}
-
-const getRecipeIcon = (recipe) => {
-  if (recipe.icon) return recipe.icon
-  const t = (recipe.title || '').toLowerCase()
-  if (t.includes('cake') || t.includes('cookie') || t.includes('dessert')) return 'mdi-cookie'
-  if (t.includes('soup') || t.includes('stew')) return 'mdi-bowl-mix'
-  if (t.includes('drink') || t.includes('cocktail')) return 'mdi-glass-cocktail'
-  
-  return 'mdi-silverware-fork-knife'
-}
+const sortedRecipes = computed(() => {
+  return [...recipes.value].sort((a, b) => {
+    return new Date(b.createdAt) - new Date(a.createdAt)
+  })
+})
 </script>
\ No newline at end of file
diff --git a/Seasoned.Frontend/app/pages/login.vue b/Seasoned.Frontend/app/pages/login.vue
index 1b3c39e..51ea5dc 100644
--- a/Seasoned.Frontend/app/pages/login.vue
+++ b/Seasoned.Frontend/app/pages/login.vue
@@ -18,18 +18,19 @@
 
           <v-form @submit.prevent="handleAuth">
             <v-expand-transition>
-              <div v-if="errorMessage" 
-                :class="[
-                  'auth-message', 
-                  errorMessage.includes('created') ? 'auth-success' : 'auth-error'
-                ]"
-              >
-                <v-icon 
-                  :icon="errorMessage.includes('created') ? 'mdi-check-circle-outline' : 'mdi-alert-circle-outline'" 
-                  size="small" 
-                  class="mr-2"
-                ></v-icon>
-                {{ errorMessage }}
+              <div v-if="errorMessage" class="mb-6"> <div 
+                  :class="[
+                    'auth-message', 
+                    errorMessage.includes('created') ? 'auth-success' : 'auth-error'
+                  ]"
+                >
+                  <v-icon 
+                    :icon="errorMessage.includes('created') ? 'mdi-check-circle-outline' : 'mdi-alert-circle-outline'" 
+                    size="small" 
+                    class="mr-2"
+                  ></v-icon>
+                  <span>{{ errorMessage }}</span>
+                </div>
               </div>
             </v-expand-transition>
             
@@ -37,7 +38,7 @@
               autofocus
               v-model="email"
               label="Email Address"
-              class="mb-4 auth-input"
+              class="mb-0 auth-input"
               color="#8c4a32"
               variant="outlined"
               prepend-inner-icon="mdi-email-outline"
@@ -52,7 +53,7 @@
               v-model="password"
               label="Password"
               type="password"
-              class="mb-8 auth-input"
+              class="mb-6 auth-input"
               variant="outlined"
               color="#8c4a32"
               hide-details
@@ -70,7 +71,7 @@
                 v-model="confirmPassword"
                 label="Confirm Password"
                 type="password"
-                class="mb-8 auth-input"
+                class="mb-6 auth-input"
                 variant="outlined"
                 color="#8c4a32"
                 hide-details