update styles and colors for improved UI consistency

src/routes/profile/components/ProfileInfoCard.vue

@@ -59,14 +59,14 @@ const emit = defineEmits<{
                 </div>
             </div>
             <div class="grid grid-cols-2 gap-6">
-                <div class="flex flex-col gap-2">
+                <!-- <div class="flex flex-col gap-2">
                     <label for="role" class="text-sm font-medium text-gray-700">Role</label>
                     <InputText id="role" :value="user?.role || 'User'" class="w-full capitalize bg-gray-50" readonly />
-                </div>
+                </div> -->
-                <div class="flex flex-col gap-2">
+                <!-- <div class="flex flex-col gap-2">
                     <label for="id" class="text-sm font-medium text-gray-700">User ID</label>
                     <InputText id="id" :value="user?.id || 'N/A'" class="w-full font-mono text-sm bg-gray-50" readonly />
-                </div>
+                </div> -->
             </div>
         </div>
     </div>

src/routes/upload/components/UploadQueue.vue

@@ -17,7 +17,8 @@ const emit = defineEmits<{
 </script>
 
 <template>
-    <aside class="w-[420px] bg-gray-100 rounded-xl flex flex-col h-[calc(100svh-64px)] sticky top-16">
+    <aside class=":uno: w-[420px] flex flex-col h-[calc(100svh-64px)] sticky top-16 before:(content-[''] absolute pointer-events-none inset-[-1px] rounded-[calc(var(--radius-2xl)+1px)] bg-[linear-gradient(-45deg,var(--capra-ramp-5)_0,var(--capra-ramp-4)_8%,var(--capra-ramp-3)_17%,var(--capra-ramp-2)_25%,var(--capra-ramp-1)_33%,#292929_34%,#292929_40%,#e1dfdf_45%,#e1dfdf_100%)] bg-[length:400%_200%] bg-[position:0_0] transition-[background-position] duration-[1000ms] ease-in-out delay-[500ms] z-0)" :class="{'before:bg-[position:100%_100%]': pendingCount && pendingCount > 0 }">
+    <div class="bg-slate-50 z-1 relative flex flex-col h-full rounded-2xl overflow-hidden">
         <div class="p-6 border-b border-slate-100/80 flex items-center justify-between shrink-0">
             <div>
                 <h2 class="text-lg font-bold text-slate-900">Upload Queue</h2>
@@ -51,13 +52,13 @@ const emit = defineEmits<{
             <UploadQueueItem v-for="item in items" :key="item.id" :item="item" @remove="emit('removeItem', $event)" />
         </div>
 
-        <div class="p-6 border-t-2 border-white rounded-b-2xl shrink-0">
+        <div class="p-6 border-t-2 border-white shrink-0">
             <div class="flex items-center justify-between text-sm mb-4 font-medium">
                 <span class="text-slate-500">Total size:</span>
                 <span class="text-slate-900">{{ totalSize || '0 MB' }}</span>
             </div>
 
-            <button v-if="pendingCount && pendingCount > 0" @click="emit('startQueue')"
+            <button :disabled="!!(!pendingCount || pendingCount < 1)" @click="emit('startQueue')"
                 class="btn btn-primary w-full flex items-center justify-center gap-2 mb-3">
                 <svg xmlns="http://www.w3.org/2000/svg" class="w-5 h-5" viewBox="0 0 24 24" fill="none"
                     stroke="currentColor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round">
@@ -67,17 +68,7 @@ const emit = defineEmits<{
                 </svg>
                 Start Upload ({{ pendingCount }})
             </button>
-
-            <button @click="emit('publish')"
-                class="btn btn-outline-primary w-full flex items-center justify-center gap-2" id="btn-publish"
-                :disabled="!completeCount || (pendingCount ? pendingCount > 0 : false)">
-                <svg xmlns="http://www.w3.org/2000/svg" class="w-5 h-5" viewBox="0 0 24 24" fill="none"
-                    stroke="currentColor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round">
-                    <circle cx="12" cy="12" r="10" />
-                    <path d="m9 12 2 2 4-4" />
-                </svg>
-                Complete & Publish ({{ completeCount || 0 }})
-            </button>
         </div>
+    </div>
     </aside>
 </template>

uno.config.ts

@@ -152,7 +152,7 @@ export default defineConfig({
         950: "#030712",
       },
       white: {
-        DEFAULT: "#ffffff",
+        DEFAULT: "#faf8f8",
         light: "#f8f9fa",
       },
       light: {
@@ -169,7 +169,7 @@ export default defineConfig({
         DEFAULT: "#f3f4f6",
         light: "#fafafa",
         dark: "#e5e7eb",
-      }
+      },
     },
     boxShadow: {
       "primary-box": "2px 2px 10px #aff6b8",
@@ -209,6 +209,11 @@ export default defineConfig({
         --glow-stop-3: #f8682f;
         --glow-stop-4: #e62c6d;
         --glow-stop-5: #b25aff;
+        --capra-ramp-1: #ffc400;
+        --capra-ramp-2: #ff9100;
+        --capra-ramp-3: #ff530f;
+        --capra-ramp-4: #e62c6d;
+        --capra-ramp-5: #b25aff;
       }
       :focus {
         outline-color: ${context.theme.colors?.primary?.active};
@@ -258,6 +263,37 @@ export default defineConfig({
     background-position-y: 100%;
       }
 }
+@keyframes gradientShift {
+  0% {
+    background-position: 0% 0%;
+  }
+  12.5% {
+    background-position: 75% 25%;
+  }
+  25% {
+    background-position: 100% 50%;
+  }
+  37.5% {
+    background-position: 75% 75%;
+  }
+  50% {
+    background-position: 50% 100%;
+  }
+  62.5% {
+    background-position: 25% 75%;
+  }
+  75% {
+    background-position: 25% 50%;
+  }
+  87.5% {
+    background-position: 25% 25%;
+  }
+  100% {
+    background-position: 100% 100%;
+  }
+}
+
+
       `;
       },
     },