From 29682b7e9c44b3c175f6cceb05ff49f7c35322c1 Mon Sep 17 00:00:00 2001
From: mohamad <mohamad>
Date: Tue, 13 May 2025 22:46:40 +0200
Subject: [PATCH] Refactor input elements for consistency and readability;
 update styles for better alignment and spacing in SignupPage and
 ListDetailPage.

---
 fe/src/pages/ListDetailPage.vue | 364 +++++++++++++++++---------------
 fe/src/pages/SignupPage.vue     |  69 +++---
 2 files changed, 230 insertions(+), 203 deletions(-)

diff --git a/fe/src/pages/ListDetailPage.vue b/fe/src/pages/ListDetailPage.vue
index 70d13a3..9663d25 100644
--- a/fe/src/pages/ListDetailPage.vue
+++ b/fe/src/pages/ListDetailPage.vue
@@ -1,13 +1,15 @@
 <template>
   <main class="container page-padding">
     <div v-if="loading" class="text-center">
-      <div class="spinner-dots" role="status"><span/><span/><span/></div>
+      <div class="spinner-dots" role="status"><span /><span /><span /></div>
       <p>Loading list details...</p>
     </div>
 
     <div v-else-if="error" class="alert alert-error mb-3" role="alert">
-       <div class="alert-content">
-        <svg class="icon" aria-hidden="true"><use xlink:href="#icon-alert-triangle" /></svg>
+      <div class="alert-content">
+        <svg class="icon" aria-hidden="true">
+          <use xlink:href="#icon-alert-triangle" />
+        </svg>
         {{ error }}
       </div>
       <button type="button" class="btn btn-sm btn-danger" @click="fetchListDetails">Retry</button>
@@ -18,11 +20,15 @@
         <h1>{{ list.name }}</h1>
         <div class="flex items-center flex-wrap" style="gap: 0.5rem;">
           <button class="btn btn-neutral btn-sm" @click="showCostSummaryDialog = true">
-            <svg class="icon icon-sm"><use xlink:href="#icon-clipboard"/></svg> <!-- Placeholder icon -->
+            <svg class="icon icon-sm">
+              <use xlink:href="#icon-clipboard" />
+            </svg> <!-- Placeholder icon -->
             Cost Summary
           </button>
           <button class="btn btn-secondary btn-sm" @click="openOcrDialog">
-            <svg class="icon icon-sm"><use xlink:href="#icon-plus"/></svg> <!-- Placeholder, camera_alt not in Valerie -->
+            <svg class="icon icon-sm">
+              <use xlink:href="#icon-plus" />
+            </svg> <!-- Placeholder, camera_alt not in Valerie -->
             Add via OCR
           </button>
           <span class="item-badge ml-1" :class="list.is_complete ? 'badge-settled' : 'badge-pending'">
@@ -37,27 +43,15 @@
           <div class="flex items-end flex-wrap" style="gap: 1rem;">
             <div class="form-group flex-grow" style="margin-bottom: 0;">
               <label for="newItemName" class="form-label">Item Name</label>
-              <input
-                type="text"
-                id="newItemName"
-                v-model="newItem.name"
-                class="form-input"
-                required
-                ref="itemNameInputRef"
-              />
+              <input type="text" id="newItemName" v-model="newItem.name" class="form-input" required
+                ref="itemNameInputRef" />
             </div>
             <div class="form-group" style="margin-bottom: 0; min-width: 120px;">
               <label for="newItemQuantity" class="form-label">Quantity</label>
-              <input
-                type="number"
-                id="newItemQuantity"
-                v-model="newItem.quantity"
-                class="form-input"
-                min="1"
-              />
+              <input type="number" id="newItemQuantity" v-model="newItem.quantity" class="form-input" min="1" />
             </div>
             <button type="submit" class="btn btn-primary" :disabled="addingItem">
-              <span v-if="addingItem" class="spinner-dots-sm" role="status"><span/><span/><span/></span>
+              <span v-if="addingItem" class="spinner-dots-sm" role="status"><span /><span /><span /></span>
               Add Item
             </button>
           </div>
@@ -66,61 +60,44 @@
 
       <!-- Items List -->
       <div v-if="list.items.length === 0" class="card empty-state-card">
-        <svg class="icon icon-lg" aria-hidden="true"><use xlink:href="#icon-clipboard" /></svg>
+        <svg class="icon icon-lg" aria-hidden="true">
+          <use xlink:href="#icon-clipboard" />
+        </svg>
         <h3>No Items Yet!</h3>
         <p>This list is empty. Add some items using the form above.</p>
       </div>
 
       <ul v-else class="item-list">
-        <li
-          v-for="item in list.items"
-          :key="item.id"
-          class="list-item"
-          :class="{ 'completed': item.is_complete, 'is-swiped': item.swiped }"
-          @touchstart="handleTouchStart($event, item)"
-          @touchmove="handleTouchMove($event, item)"
-          @touchend="handleTouchEnd(item)"
-        >
+        <li v-for="item in list.items" :key="item.id" class="list-item"
+          :class="{ 'completed': item.is_complete, 'is-swiped': item.swiped }" @touchstart="handleTouchStart"
+          @touchmove="handleTouchMove" @touchend="handleTouchEnd">
           <div class="list-item-content">
             <div class="list-item-main">
               <label class="checkbox-label mb-0 flex-shrink-0">
-                <input
-                  type="checkbox"
-                  :checked="item.is_complete"
+                <input type="checkbox" :checked="item.is_complete"
                   @change="confirmUpdateItem(item, ($event.target as HTMLInputElement).checked)"
-                  :disabled="item.updating"
-                  :aria-label="item.name"
-                />
+                  :disabled="item.updating" :aria-label="item.name" />
                 <span class="checkmark"></span>
               </label>
               <div class="item-text flex-grow">
                 <span :class="{ 'text-decoration-line-through': item.is_complete }">{{ item.name }}</span>
                 <small v-if="item.quantity" class="item-caption">Quantity: {{ item.quantity }}</small>
                 <div v-if="item.is_complete" class="form-group mt-1" style="max-width: 150px; margin-bottom: 0;">
-                   <label :for="`price-${item.id}`" class="sr-only">Price for {{ item.name }}</label>
-                   <input
-                    :id="`price-${item.id}`"
-                    type="number"
-                    v-model.number="item.priceInput"
-                    class="form-input form-input-sm"
-                    placeholder="Price"
-                    step="0.01"
-                    @blur="updateItemPrice(item)"
-                    @keydown.enter.prevent="($event.target as HTMLInputElement).blur()"
-                  />
+                  <label :for="`price-${item.id}`" class="sr-only">Price for {{ item.name }}</label>
+                  <input :id="`price-${item.id}`" type="number" v-model.number="item.priceInput"
+                    class="form-input form-input-sm" placeholder="Price" step="0.01" @blur="updateItemPrice(item)"
+                    @keydown.enter.prevent="($event.target as HTMLInputElement).blur()" />
                 </div>
               </div>
             </div>
             <!-- Non-swipe actions can be added here or handled by swipe -->
-             <div class="list-item-actions">
-                <button
-                    class="btn btn-danger btn-sm btn-icon-only"
-                    @click.stop="confirmDeleteItem(item)"
-                    :disabled="item.deleting"
-                    aria-label="Delete item"
-                >
-                    <svg class="icon icon-sm"><use xlink:href="#icon-trash"></use></svg>
-                </button>
+            <div class="list-item-actions">
+              <button class="btn btn-danger btn-sm btn-icon-only" @click.stop="confirmDeleteItem(item)"
+                :disabled="item.deleting" aria-label="Delete item">
+                <svg class="icon icon-sm">
+                  <use xlink:href="#icon-trash"></use>
+                </svg>
+              </button>
             </div>
           </div>
           <!-- Swipe actions could be added here if fully implementing swipe from Valerie UI example -->
@@ -133,11 +110,13 @@
       <div class="modal-container" ref="ocrModalRef" style="min-width: 400px;">
         <div class="modal-header">
           <h3>Add Items via OCR</h3>
-           <button class="close-button" @click="closeOcrDialog" aria-label="Close"><svg class="icon"><use xlink:href="#icon-close"/></svg></button>
+          <button class="close-button" @click="closeOcrDialog" aria-label="Close"><svg class="icon">
+              <use xlink:href="#icon-close" />
+            </svg></button>
         </div>
         <div class="modal-body">
           <div v-if="ocrLoading" class="text-center">
-            <div class="spinner-dots"><span/><span/><span/></div>
+            <div class="spinner-dots"><span /><span /><span /></div>
             <p>Processing image...</p>
           </div>
           <div v-else-if="ocrItems.length > 0">
@@ -147,7 +126,9 @@
                 <div class="list-item-content flex items-center" style="gap: 0.5rem;">
                   <input type="text" v-model="ocrItem.name" class="form-input flex-grow" required />
                   <button class="btn btn-danger btn-sm btn-icon-only" @click="ocrItems.splice(index, 1)">
-                    <svg class="icon icon-sm"><use xlink:href="#icon-trash"/></svg>
+                    <svg class="icon icon-sm">
+                      <use xlink:href="#icon-trash" />
+                    </svg>
                   </button>
                 </div>
               </li>
@@ -155,36 +136,35 @@
           </div>
           <div v-else class="form-group">
             <label for="ocrFile" class="form-label">Upload Image</label>
-            <input type="file" id="ocrFile" class="form-input" accept="image/*" @change="handleOcrFileUpload" ref="ocrFileInputRef"/>
+            <input type="file" id="ocrFile" class="form-input" accept="image/*" @change="handleOcrFileUpload"
+              ref="ocrFileInputRef" />
             <p v-if="ocrError" class="form-error-text mt-1">{{ ocrError }}</p>
           </div>
         </div>
         <div class="modal-footer">
           <button type="button" class="btn btn-neutral" @click="closeOcrDialog">Cancel</button>
-          <button
-            v-if="ocrItems.length > 0"
-            type="button"
-            class="btn btn-primary ml-2"
-            @click="addOcrItems"
-            :disabled="addingOcrItems"
-          >
-            <span v-if="addingOcrItems" class="spinner-dots-sm"><span/><span/><span/></span>
+          <button v-if="ocrItems.length > 0" type="button" class="btn btn-primary ml-2" @click="addOcrItems"
+            :disabled="addingOcrItems">
+            <span v-if="addingOcrItems" class="spinner-dots-sm"><span /><span /><span /></span>
             Add Items
           </button>
         </div>
       </div>
     </div>
-    
+
     <!-- Cost Summary Dialog -->
     <div v-if="showCostSummaryDialog" class="modal-backdrop open" @click.self="showCostSummaryDialog = false">
       <div class="modal-container" ref="costSummaryModalRef" style="min-width: 550px;">
         <div class="modal-header">
           <h3>List Cost Summary</h3>
-          <button class="close-button" @click="showCostSummaryDialog = false" aria-label="Close"><svg class="icon"><use xlink:href="#icon-close"/></svg></button>
+          <button class="close-button" @click="showCostSummaryDialog = false" aria-label="Close"><svg class="icon">
+              <use xlink:href="#icon-close" />
+            </svg></button>
         </div>
         <div class="modal-body">
           <div v-if="costSummaryLoading" class="text-center">
-            <div class="spinner-dots"><span/><span/><span/></div><p>Loading summary...</p>
+            <div class="spinner-dots"><span /><span /><span /></div>
+            <p>Loading summary...</p>
           </div>
           <div v-else-if="costSummaryError" class="alert alert-error">{{ costSummaryError }}</div>
           <div v-else-if="listCostSummary">
@@ -210,7 +190,8 @@
                     <td class="text-right">{{ formatCurrency(userShare.items_added_value) }}</td>
                     <td class="text-right">{{ formatCurrency(userShare.amount_due) }}</td>
                     <td class="text-right">
-                      <span class="item-badge" :class="parseFloat(String(userShare.balance)) >= 0 ? 'badge-settled' : 'badge-pending'">
+                      <span class="item-badge"
+                        :class="parseFloat(String(userShare.balance)) >= 0 ? 'badge-settled' : 'badge-pending'">
                         {{ formatCurrency(userShare.balance) }}
                       </span>
                     </td>
@@ -229,20 +210,24 @@
 
     <!-- Confirmation Dialog -->
     <div v-if="showConfirmDialogState" class="modal-backdrop open" @click.self="cancelConfirmation">
-        <div class="modal-container confirm-modal" ref="confirmModalRef">
-            <div class="modal-header">
-                <h3>Confirmation</h3>
-                <button class="close-button" @click="cancelConfirmation" aria-label="Close"><svg class="icon"><use xlink:href="#icon-close"/></svg></button>
-            </div>
-            <div class="modal-body">
-                <svg class="icon icon-lg mb-2" style="color: var(--warning);"><use xlink:href="#icon-alert-triangle"/></svg>
-                <p>{{ confirmDialogMessage }}</p>
-            </div>
-            <div class="modal-footer">
-                <button class="btn btn-neutral" @click="cancelConfirmation">Cancel</button>
-                <button class="btn btn-primary ml-2" @click="handleConfirmedAction">Confirm</button>
-            </div>
+      <div class="modal-container confirm-modal" ref="confirmModalRef">
+        <div class="modal-header">
+          <h3>Confirmation</h3>
+          <button class="close-button" @click="cancelConfirmation" aria-label="Close"><svg class="icon">
+              <use xlink:href="#icon-close" />
+            </svg></button>
         </div>
+        <div class="modal-body">
+          <svg class="icon icon-lg mb-2" style="color: var(--warning);">
+            <use xlink:href="#icon-alert-triangle" />
+          </svg>
+          <p>{{ confirmDialogMessage }}</p>
+        </div>
+        <div class="modal-footer">
+          <button class="btn btn-neutral" @click="cancelConfirmation">Cancel</button>
+          <button class="btn btn-primary ml-2" @click="handleConfirmedAction">Confirm</button>
+        </div>
+      </div>
     </div>
 
   </main>
@@ -304,7 +289,7 @@ const list = ref<List | null>(null);
 const loading = ref(true);
 const error = ref<string | null>(null);
 const addingItem = ref(false);
-const pollingInterval = ref<NodeJS.Timeout | null>(null);
+const pollingInterval = ref<ReturnType<typeof setInterval> | null>(null);
 const lastListUpdate = ref<string | null>(null);
 const lastItemUpdate = ref<string | null>(null);
 
@@ -318,7 +303,7 @@ const ocrLoading = ref(false);
 const ocrItems = ref<{ name: string }[]>([]); // Items extracted from OCR
 const addingOcrItems = ref(false);
 const ocrError = ref<string | null>(null);
-const ocrFileInputRef = ref<HTMLInputElement|null>(null);
+const ocrFileInputRef = ref<HTMLInputElement | null>(null);
 const { files: ocrFiles, reset: resetOcrFileDialog } = useFileDialog({
   accept: 'image/*',
   multiple: false,
@@ -365,14 +350,14 @@ const fetchListDetails = async () => {
     const rawList = response.data as List;
     rawList.items = processListItems(rawList.items);
     list.value = rawList;
-    
+
     lastListUpdate.value = rawList.updated_at;
     lastItemUpdate.value = rawList.items.reduce((latest: string, item: Item) => {
       return item.updated_at > latest ? item.updated_at : latest;
     }, '');
 
     if (showCostSummaryDialog.value) { // If dialog is open, refresh its data
-        await fetchListCostSummary();
+      await fetchListCostSummary();
     }
 
   } catch (err: unknown) {
@@ -390,7 +375,7 @@ const checkForUpdates = async () => {
     const newLastItemUpdate = newItems.reduce((latest: string, item: Item) => item.updated_at > latest ? item.updated_at : latest, '');
 
     if ((lastListUpdate.value && newListUpdatedAt > lastListUpdate.value) ||
-        (lastItemUpdate.value && newLastItemUpdate > lastItemUpdate.value)) {
+      (lastItemUpdate.value && newLastItemUpdate > lastItemUpdate.value)) {
       await fetchListDetails();
     }
   } catch (err) {
@@ -441,21 +426,21 @@ const updateItem = async (item: Item, newCompleteStatus: boolean) => {
       version: item.version,
     };
     if (item.is_complete && item.priceInput !== undefined && item.priceInput !== null && String(item.priceInput).trim() !== '') {
-        payload.price = parseFloat(String(item.priceInput));
+      payload.price = parseFloat(String(item.priceInput));
     } else if (item.is_complete && (item.priceInput === undefined || String(item.priceInput).trim() === '')) {
-        // If complete and price is empty, don't send price, or send null if API expects it
-        payload.price = null; // Or omit, depending on API
+      // If complete and price is empty, don't send price, or send null if API expects it
+      payload.price = null; // Or omit, depending on API
     }
 
 
     const response = await apiClient.put(API_ENDPOINTS.ITEMS.BY_ID(String(item.id)), payload);
     const updatedItemFromServer = processListItems([response.data as Item])[0];
-    
+
     const index = list.value.items.findIndex(i => i.id === item.id);
     if (index !== -1) {
       list.value.items[index] = { ...list.value.items[index], ...updatedItemFromServer, updating: false };
     }
-    
+
     // If cost summary was open, refresh it
     if (showCostSummaryDialog.value) await fetchListCostSummary();
 
@@ -469,33 +454,33 @@ const updateItem = async (item: Item, newCompleteStatus: boolean) => {
 
 
 const updateItemPrice = async (item: Item) => {
-    if (!list.value || !item.is_complete) return; // Only update price if item is complete
+  if (!list.value || !item.is_complete) return; // Only update price if item is complete
 
-    const newPrice = item.priceInput !== undefined && String(item.priceInput).trim() !== '' ? parseFloat(String(item.priceInput)) : null;
-    if (item.price === newPrice) return; // No change
+  const newPrice = item.priceInput !== undefined && String(item.priceInput).trim() !== '' ? parseFloat(String(item.priceInput)) : null;
+  if (item.price === newPrice) return; // No change
 
-    item.updating = true;
-    const originalPrice = item.price;
-    item.price = newPrice; // Optimistic
+  item.updating = true;
+  const originalPrice = item.price;
+  item.price = newPrice; // Optimistic
 
-    try {
-        const response = await apiClient.put(
-            API_ENDPOINTS.ITEMS.BY_ID(String(item.id)),
-            { price: item.price, is_complete: item.is_complete, version: item.version }
-        );
-        const updatedItemFromServer = processListItems([response.data as Item])[0];
-        const index = list.value.items.findIndex(i => i.id === item.id);
-        if (index !== -1) {
-            list.value.items[index] = { ...list.value.items[index], ...updatedItemFromServer, updating: false };
-        }
-        if (showCostSummaryDialog.value) await fetchListCostSummary();
-    } catch (err) {
-        item.price = originalPrice; // Revert
-        item.priceInput = originalPrice !== null && originalPrice !== undefined ? originalPrice : '';
-        notificationStore.addNotification({ message: (err instanceof Error ? err.message : String(err)) || 'Failed to update item price.', type: 'error' });
-    } finally {
-        item.updating = false;
+  try {
+    const response = await apiClient.put(
+      API_ENDPOINTS.ITEMS.BY_ID(String(item.id)),
+      { price: item.price, is_complete: item.is_complete, version: item.version }
+    );
+    const updatedItemFromServer = processListItems([response.data as Item])[0];
+    const index = list.value.items.findIndex(i => i.id === item.id);
+    if (index !== -1) {
+      list.value.items[index] = { ...list.value.items[index], ...updatedItemFromServer, updating: false };
     }
+    if (showCostSummaryDialog.value) await fetchListCostSummary();
+  } catch (err) {
+    item.price = originalPrice; // Revert
+    item.priceInput = originalPrice !== null && originalPrice !== undefined ? originalPrice : '';
+    notificationStore.addNotification({ message: (err instanceof Error ? err.message : String(err)) || 'Failed to update item price.', type: 'error' });
+  } finally {
+    item.updating = false;
+  }
 };
 
 
@@ -540,20 +525,20 @@ const cancelConfirmation = () => {
 
 // OCR Functionality
 const openOcrDialog = () => {
-    ocrItems.value = [];
-    ocrError.value = null;
-    resetOcrFileDialog(); // Clear previous file selection from useFileDialog
-    showOcrDialogState.value = true;
-     nextTick(() => {
-        if (ocrFileInputRef.value) {
-            ocrFileInputRef.value.value = ''; // Manually clear input type=file
-        }
-    });
+  ocrItems.value = [];
+  ocrError.value = null;
+  resetOcrFileDialog(); // Clear previous file selection from useFileDialog
+  showOcrDialogState.value = true;
+  nextTick(() => {
+    if (ocrFileInputRef.value) {
+      ocrFileInputRef.value.value = ''; // Manually clear input type=file
+    }
+  });
 };
 const closeOcrDialog = () => {
-    showOcrDialogState.value = false;
-    ocrItems.value = [];
-    ocrError.value = null;
+  showOcrDialogState.value = false;
+  ocrItems.value = [];
+  ocrError.value = null;
 };
 
 watch(ocrFiles, async (newFiles) => {
@@ -564,10 +549,10 @@ watch(ocrFiles, async (newFiles) => {
 });
 
 const handleOcrFileUpload = (event: Event) => {
-    const target = event.target as HTMLInputElement;
-    if (target.files && target.files.length > 0) {
-        handleOcrUpload(target.files[0]);
-    }
+  const target = event.target as HTMLInputElement;
+  if (target.files && target.files.length > 0) {
+    handleOcrUpload(target.files[0]);
+  }
 };
 
 const handleOcrUpload = async (file: File) => {
@@ -581,15 +566,15 @@ const handleOcrUpload = async (file: File) => {
     const response = await apiClient.post(API_ENDPOINTS.OCR.PROCESS, formData, {
       headers: { 'Content-Type': 'multipart/form-data' }
     });
-    ocrItems.value = response.data.extracted_items.map((nameStr: string) => ({ name: nameStr.trim() })).filter(item => item.name);
-    if(ocrItems.value.length === 0) {
-        ocrError.value = "No items extracted from the image.";
+    ocrItems.value = response.data.extracted_items.map((nameStr: string) => ({ name: nameStr.trim() })).filter((item: { name: string }) => item.name);
+    if (ocrItems.value.length === 0) {
+      ocrError.value = "No items extracted from the image.";
     }
   } catch (err) {
     ocrError.value = (err instanceof Error ? err.message : String(err)) || 'Failed to process image.';
   } finally {
     ocrLoading.value = false;
-     if (ocrFileInputRef.value) ocrFileInputRef.value.value = ''; // Reset file input
+    if (ocrFileInputRef.value) ocrFileInputRef.value.value = ''; // Reset file input
   }
 };
 
@@ -645,10 +630,10 @@ useEventListener(window, 'keydown', (event: KeyboardEvent) => {
     // Check if a modal is open or if focus is already in an input/textarea
     const activeElement = document.activeElement;
     if (activeElement && (activeElement.tagName === 'INPUT' || activeElement.tagName === 'TEXTAREA')) {
-        return;
+      return;
     }
     if (showOcrDialogState.value || showCostSummaryDialog.value || showConfirmDialogState.value) {
-        return;
+      return;
     }
     event.preventDefault();
     itemNameInputRef.value?.focus();
@@ -656,24 +641,23 @@ useEventListener(window, 'keydown', (event: KeyboardEvent) => {
 });
 
 // Swipe detection (basic)
-// let touchStartX = 0; // Commented out as unused
-// const SWIPE_THRESHOLD = 50; // pixels // Commented out as unused
+let touchStartX = 0;
+const SWIPE_THRESHOLD = 50; // pixels
 
-const handleTouchStart = (event: TouchEvent, /* item: Item */) => { // Commented out unused item
-    touchStartX = event.changedTouches[0].clientX;
-    // Add class for visual feedback during swipe if desired
+const handleTouchStart = (event: TouchEvent) => {
+  touchStartX = event.changedTouches[0].clientX;
+  // Add class for visual feedback during swipe if desired
 };
 
-const handleTouchMove = (/* event: TouchEvent, item: Item */) => { // Commented out unused event and item
-    // Can be used for interactive swipe effect
+const handleTouchMove = () => {
+  // Can be used for interactive swipe effect
 };
 
-const handleTouchEnd = (/* item: Item */) => { // Commented out unused item
-    // Not implemented: Valerie UI swipe example implies JS adds/removes 'is-swiped'
-    // For a simple demo, one might toggle it here based on a more complex gesture
-    // This would require more state per item and logic
-    // For now, swipe actions are not visually implemented
-    // item.swiped = !item.swiped; // Example of toggling. A real implementation would be more complex.
+const handleTouchEnd = () => {
+  // Not implemented: Valerie UI swipe example implies JS adds/removes 'is-swiped'
+  // For a simple demo, one might toggle it here based on a more complex gesture
+  // This would require more state per item and logic
+  // For now, swipe actions are not visually implemented
 };
 
 
@@ -695,16 +679,45 @@ onUnmounted(() => {
 </script>
 
 <style scoped>
-.page-padding { padding: 1rem; }
-.mb-1 { margin-bottom: 0.5rem; }
-.mb-2 { margin-bottom: 1rem; }
-.mb-3 { margin-bottom: 1.5rem; }
-.mt-1 { margin-top: 0.5rem; }
-.mt-2 { margin-top: 1rem; }
-.ml-1 { margin-left: 0.25rem; }
-.ml-2 { margin-left: 0.5rem; }
-.text-right { text-align: right; }
-.flex-grow { flex-grow: 1; }
+.page-padding {
+  padding: 1rem;
+}
+
+.mb-1 {
+  margin-bottom: 0.5rem;
+}
+
+.mb-2 {
+  margin-bottom: 1rem;
+}
+
+.mb-3 {
+  margin-bottom: 1.5rem;
+}
+
+.mt-1 {
+  margin-top: 0.5rem;
+}
+
+.mt-2 {
+  margin-top: 1rem;
+}
+
+.ml-1 {
+  margin-left: 0.25rem;
+}
+
+.ml-2 {
+  margin-left: 0.5rem;
+}
+
+.text-right {
+  text-align: right;
+}
+
+.flex-grow {
+  flex-grow: 1;
+}
 
 .item-caption {
   display: block;
@@ -712,27 +725,36 @@ onUnmounted(() => {
   opacity: 0.6;
   margin-top: 0.25rem;
 }
+
 .text-decoration-line-through {
   text-decoration: line-through;
 }
-.form-input-sm { /* For price input */
-    padding: 0.4rem 0.6rem;
-    font-size: 0.9rem;
+
+.form-input-sm {
+  /* For price input */
+  padding: 0.4rem 0.6rem;
+  font-size: 0.9rem;
 }
+
 .cost-overview p {
   margin-bottom: 0.5rem;
   font-size: 1.05rem;
 }
+
 .form-error-text {
   color: var(--danger);
   font-size: 0.85rem;
 }
+
 .list-item.completed .item-text {
-    /* text-decoration: line-through; is handled by span class */
-    opacity: 0.7;
+  /* text-decoration: line-through; is handled by span class */
+  opacity: 0.7;
 }
+
 .list-item-actions {
-    margin-left: auto; /* Pushes actions to the right */
-    padding-left: 1rem; /* Space before actions */
+  margin-left: auto;
+  /* Pushes actions to the right */
+  padding-left: 1rem;
+  /* Space before actions */
 }
 </style>
\ No newline at end of file
diff --git a/fe/src/pages/SignupPage.vue b/fe/src/pages/SignupPage.vue
index 77d5275..0094c5c 100644
--- a/fe/src/pages/SignupPage.vue
+++ b/fe/src/pages/SignupPage.vue
@@ -8,51 +8,42 @@
         <form @submit.prevent="onSubmit" class="form-layout">
           <div class="form-group mb-2">
             <label for="name" class="form-label">Full Name</label>
-            <input type="text" id="name" v-model="name" class="form-input" required autocomplete="name"/>
+            <input type="text" id="name" v-model="name" class="form-input" required autocomplete="name" />
             <p v-if="formErrors.name" class="form-error-text">{{ formErrors.name }}</p>
           </div>
 
           <div class="form-group mb-2">
             <label for="email" class="form-label">Email</label>
-            <input type="email" id="email" v-model="email" class="form-input" required autocomplete="email"/>
+            <input type="email" id="email" v-model="email" class="form-input" required autocomplete="email" />
             <p v-if="formErrors.email" class="form-error-text">{{ formErrors.email }}</p>
           </div>
 
           <div class="form-group mb-2">
             <label for="password" class="form-label">Password</label>
-             <div class="input-with-icon-append">
-                <input
-                    :type="isPwdVisible ? 'text' : 'password'"
-                    id="password"
-                    v-model="password"
-                    class="form-input"
-                    required
-                    autocomplete="new-password"
-                />
-                <button type="button" @click="isPwdVisible = !isPwdVisible" class="icon-append-btn" aria-label="Toggle password visibility">
-                    <svg class="icon icon-sm"><use :xlink:href="isPwdVisible ? '#icon-settings' : '#icon-settings'"></use></svg> <!-- Placeholder for visibility icons -->
-                </button>
+            <div class="input-with-icon-append">
+              <input :type="isPwdVisible ? 'text' : 'password'" id="password" v-model="password" class="form-input"
+                required autocomplete="new-password" />
+              <button type="button" @click="isPwdVisible = !isPwdVisible" class="icon-append-btn"
+                aria-label="Toggle password visibility">
+                <svg class="icon icon-sm">
+                  <use :xlink:href="isPwdVisible ? '#icon-settings' : '#icon-settings'"></use>
+                </svg> <!-- Placeholder for visibility icons -->
+              </button>
             </div>
             <p v-if="formErrors.password" class="form-error-text">{{ formErrors.password }}</p>
           </div>
 
           <div class="form-group mb-3">
             <label for="confirmPassword" class="form-label">Confirm Password</label>
-            <input
-              :type="isPwdVisible ? 'text' : 'password'"
-              id="confirmPassword"
-              v-model="confirmPassword"
-              class="form-input"
-              required
-              autocomplete="new-password"
-            />
+            <input :type="isPwdVisible ? 'text' : 'password'" id="confirmPassword" v-model="confirmPassword"
+              class="form-input" required autocomplete="new-password" />
             <p v-if="formErrors.confirmPassword" class="form-error-text">{{ formErrors.confirmPassword }}</p>
           </div>
-          
+
           <p v-if="formErrors.general" class="alert alert-error form-error-text">{{ formErrors.general }}</p>
 
           <button type="submit" class="btn btn-primary w-full mt-2" :disabled="loading">
-            <span v-if="loading" class="spinner-dots-sm" role="status"><span/><span/><span/></span>
+            <span v-if="loading" class="spinner-dots-sm" role="status"><span /><span /><span /></span>
             Sign Up
           </button>
 
@@ -68,7 +59,7 @@
 <script setup lang="ts">
 import { ref } from 'vue';
 import { useRouter } from 'vue-router';
-import { useAuthStore } from 'stores/auth'; // Assuming path
+import { useAuthStore } from '@/stores/auth'; // Assuming path is correct
 import { useNotificationStore } from '@/stores/notifications';
 
 const router = useRouter();
@@ -143,10 +134,12 @@ const onSubmit = async () => {
   min-height: 100dvh;
   padding: 1rem;
 }
+
 .signup-card {
   width: 100%;
   max-width: 400px;
 }
+
 /* form-layout, w-full, mt-2, text-center styles were removed as utility classes from Valerie UI are used directly or are available. */
 
 .link-styled {
@@ -155,26 +148,33 @@ const onSubmit = async () => {
   border-bottom: 2px solid transparent;
   transition: border-color var(--transition-speed) var(--transition-ease-out);
 }
-.link-styled:hover, .link-styled:focus {
+
+.link-styled:hover,
+.link-styled:focus {
   border-bottom-color: var(--primary);
 }
+
 .form-error-text {
   color: var(--danger);
   font-size: 0.85rem;
   margin-top: 0.25rem;
 }
-.alert.form-error-text { /* For general error message */
-    padding: 0.75rem 1rem;
-    margin-bottom: 1rem;
+
+.alert.form-error-text {
+  /* For general error message */
+  padding: 0.75rem 1rem;
+  margin-bottom: 1rem;
 }
 
 .input-with-icon-append {
   position: relative;
   display: flex;
 }
+
 .input-with-icon-append .form-input {
   padding-right: 3rem;
 }
+
 .icon-append-btn {
   position: absolute;
   right: 0;
@@ -191,9 +191,14 @@ const onSubmit = async () => {
   color: var(--dark);
   opacity: 0.7;
 }
-.icon-append-btn:hover, .icon-append-btn:focus {
+
+.icon-append-btn:hover,
+.icon-append-btn:focus {
   opacity: 1;
-  background-color: rgba(0,0,0,0.03);
+  background-color: rgba(0, 0, 0, 0.03);
+}
+
+.icon-append-btn .icon {
+  margin: 0;
 }
-.icon-append-btn .icon { margin: 0; }
 </style>
\ No newline at end of file