standardized the profile page with the other pages visually

client/assets/tailwind.css

@@ -59,22 +59,23 @@
   --spacing-80e: 20em;
   --spacing-96e: 24em;
 
-  --color-bg: #483D8B;
+  --color-bg: #B19CD9;
-  --color-primary: #2E1A47;
+  --color-primary: #9370DB;
+  --color-mid-purple: #A286DC;
   --color-accent: #1ad691;
   --color-error: #ff5252;
   --color-info: #2196f3;
   --color-success: #4caf50;
   --color-warning: #fb8c00;
   --color-darkgreen: rgb(34, 127, 35);
-  --color-black-50: #B19CD9;
+  --color-black-50: #E6E6FA;
-  --color-black-100: #9370DB;
+  --color-black-100: #D8BFD8;
-  --color-black-200: #7B68EE;
+  --color-black-200: #DDA0DD;
-  --color-black-300: #6A5ACD;
+  --color-black-300: #DA70D6;
-  --color-black-400: #483D8B;
+  --color-black-400: #BA55D3;
-  --color-black-500: #3C1F7B;
+  --color-black-500: #9370DB;
-  --color-black-600: #2E1A47;
+  --color-black-600: #8A2BE2;
-  --color-black-700: #1E1134;
+  --color-black-700: #9400D3;
 
   --font-sans: 'Source Sans Pro';
   --font-mono: 'Ubuntu Mono';

client/pages/item/_id/index.vue

@@ -186,11 +186,11 @@
 
                 <!-- Comments List -->
                 <div v-if="comments.length" class="space-y-4">
-                  <div v-for="comment in sortedComments" :key="comment.id" class="bg-bg border rounded-lg p-4" :class="comment.userId === currentUser.id ? 'border-white border-4' : 'border-gray-700'">
+                  <div v-for="comment in sortedComments" :key="comment.id" class="bg-primary border rounded-lg p-4" :class="comment.userId === currentUser.id ? 'border-white border-4' : 'border-gray-700'">
                     <div class="flex justify-between items-start mb-2">
                       <div>
                         <nuxt-link :to="'/user/' + comment.userId" class="font-semibold hover:text-white hover:underline">{{ comment.user.displayName || comment.user.username }}</nuxt-link>
-                        <span class="text-sm text-gray-400 ml-2">
+                        <span class="text-sm text-gray-300 ml-2">
                           {{ formatDate(comment.createdAt) }}
                         </span>
                       </div>
@@ -201,10 +201,10 @@
                         </div>
 
                         <div v-if="canEditComment(comment)" class="space-x-2">
-                          <button v-if="editingCommentId !== comment.id" class="text-gray-400 hover:text-white" @click="startEditing(comment)">
+                          <button v-if="editingCommentId !== comment.id" class="text-gray-300 hover:text-white" @click="startEditing(comment)">
                             {{ $strings.ButtonEdit }}
                           </button>
-                          <button class="text-gray-400 hover:text-white" @click="deleteComment(comment)">
+                          <button class="text-gray-300 hover:text-white" @click="deleteComment(comment)">
                             {{ $strings.ButtonDelete }}
                           </button>
                         </div>
@@ -236,7 +236,7 @@
                     </div>
 
                     <!-- Comment Text Display -->
-                    <div v-else class="text-gray-300">
+                    <div v-else class="text-gray-200">
                       {{ comment.text }}
                     </div>
                   </div>

client/pages/user/_id/index.vue

@@ -1,22 +1,17 @@
 <template>
-  <div class="page-container">
+  <div class="w-full h-full overflow-y-auto bg-gradient-to-br from-[#2e2e2e] via-[#313131] to-[#1f1f1f]">
-    <div class="max-w-6xl mx-auto px-4 py-8">
+    <div class="max-w-6xl mx-auto px-2 py-6 lg:p-8">
-      <!-- Loading State -->
+      <div v-if="loading" class="w-full h-full flex items-center justify-center">
-      <div v-if="loading" class="flex items-center justify-center py-12">
+        <ui-loading-indicator />
-        <widgets-loading-spinner />
       </div>
-
+      <div v-else-if="!user" class="w-full h-full flex items-center justify-center">
-      <!-- Content when loaded -->
+        <p class="text-error text-lg">{{ $strings.MessageUserNotFound }}</p>
-      <template v-else>
-        <div v-if="user" class="mb-8">
-          <h1 class="text-3xl font-semibold mb-2">{{ user.displayName || user.username }}</h1>
-          <p class="text-gray-400">Member since {{ formatDate(user.createdAt) }}</p>
       </div>
-
+      <div v-else>
         <!-- Tab Navigation -->
         <div v-if="user" class="flex border-b border-white/10 mb-6">
-          <button class="px-4 py-2 mr-4 font-semibold" :class="activeTab === 'account' ? 'text-white border-b-2 border-white' : 'text-gray-400 hover:text-white'" @click="activeTab = 'account'">Account Settings</button>
+          <button class="px-4 py-2 mr-4 font-semibold rounded-t-lg" :class="activeTab === 'account' ? 'text-white bg-primary border-b-0' : 'text-gray-400 hover:text-white'" @click="activeTab = 'account'">Account Settings</button>
-          <button class="px-4 py-2 font-semibold" :class="activeTab === 'reviews' ? 'text-white border-b-2 border-white' : 'text-gray-400 hover:text-white'" @click="activeTab = 'reviews'">Reviews</button>
+          <button class="px-4 py-2 font-semibold rounded-t-lg" :class="activeTab === 'reviews' ? 'text-white bg-primary border-b-0' : 'text-gray-400 hover:text-white'" @click="activeTab = 'reviews'">Reviews</button>
         </div>
 
         <!-- Reviews Tab -->
@@ -135,12 +130,7 @@
             </div>
           </div>
         </div>
-
-        <!-- Error State -->
-        <div v-if="!user && !loading" class="text-center py-12">
-          <p class="text-error text-lg">Error loading user profile</p>
       </div>
-      </template>
     </div>
 
     <modals-emails-user-e-reader-device-modal v-if="isCurrentUser" v-model="showEReaderDeviceModal" :existing-devices="revisedEreaderDevices" :ereader-device="selectedEReaderDevice" @update="ereaderDevicesUpdated" />