feat: update styles to use primary color scheme across components

Author: pphatdev

src/client/utils/modules.ts

@@ -1,5 +1,5 @@
 const defaultClass = "flex items-center gap-3 px-3 py-2 text-slate-500 hover:bg-slate-100 rounded-lg transition-colors"
-const activeClass = "flex items-center gap-3 px-3 py-2 bg-blue-50 text-blue-600 rounded-lg font-medium"
+const activeClass = "flex items-center gap-3 px-3 py-2 bg-primary/5 text-primary rounded-lg font-medium"
 
 export const modules = [
     {

src/client/views/components/header.ejs

@@ -6,10 +6,10 @@
                 <path stroke-linecap="round" stroke-linejoin="round" stroke-width="2" d="M21 21l-6-6m2-5a7 7 0 11-14 0 7 7 0 0114 0z"></path>
             </svg>
         </span>
-        <input type="text" placeholder="Search files, folders..." class="w-full pl-10 pr-4 py-2 bg-slate-50 border border-transparent rounded-lg focus:outline-none focus:bg-white focus:border-blue-500 transition-all text-sm">
+        <input type="text" placeholder="Search files, folders..." class="w-full pl-10 pr-4 py-2 bg-slate-50 border border-transparent rounded-lg focus:outline-none focus:bg-white focus:border-primary transition-all text-sm">
     </div>
     <div class="flex items-center gap-4">
-        <button class="bg-blue-600 hover:bg-blue-700 text-white px-4 py-2 rounded-lg flex items-center gap-2 text-sm font-semibold transition-all shadow-blue-200">
+        <button class="bg-primary hover:bg-primary/70 text-white px-4 py-2 rounded-lg flex items-center gap-2 text-sm font-semibold transition-all shadow-primary-200">
             <svg class="w-4 h-4" fill="none" stroke="currentColor" viewBox="0 0 24 24">
                 <path stroke-linecap="round" stroke-linejoin="round" stroke-width="2" d="M4 16v1a3 3 0 003 3h10a3 3 0 003-3v-1m-4-8l-4-4m0 0L8 8m4-4v12"></path>
             </svg>

src/client/views/components/quick-access-item.ejs

@@ -1,7 +1,7 @@
 <!-- Quick Access Item Component -->
-<div class="p-4 rounded-2xl hover:border-blue-200 transition-all cursor-pointer bg-white group">
+<div class="p-4 rounded-2xl hover:border-primary/20 transition-all cursor-pointer bg-white group">
     <div class="flex items-center gap-4 mb-4">
-        <div class="p-2.5 bg-<%= iconBg %> rounded-lg text-<%= iconColor %> group-hover:bg-blue-600 group-hover:text-white transition-all">
+        <div class="p-2.5 bg-<%= iconBg %> rounded-lg text-<%= iconColor %> group-hover:bg-primary group-hover:text-white transition-all">
             <%- icon %>
         </div>
         <div class="flex-1 overflow-hidden">

src/client/views/layouts/sidebar.ejs

@@ -1,6 +1,6 @@
 <aside class="w-64 bg-sidebar border-r border-slate-200 flex flex-col p-6 px-4 overflow-y-auto">
-    <div class="flex items-center gap-2 mb-10 text-blue-600">
-        <div class="bg-blue-600 p-1.5 rounded-lg">
+    <div class="flex items-center gap-2 mb-10 text-primary">
+        <div class="bg-primary p-1.5 rounded-lg">
             <svg class="w-6 h-6 text-white" fill="none" stroke="currentColor" viewBox="0 0 24 24"><path stroke-linecap="round" stroke-linejoin="round" stroke-width="2" d="M19 11H5m14 0a2 2 0 012 2v6a2 2 0 01-2 2H5a2 2 0 01-2-2v-6a2 2 0 012-2m14 0V9a2 2 0 00-2-2M5 11V9a2 2 0 012-2m0 0V5a2 2 0 012-2h6a2 2 0 012 2v2M7 7h10"></path></svg>
         </div>
         <span class="text-xl font-bold text-slate-900">StackDev</span>
@@ -36,7 +36,7 @@
             <span class="text-xs font-bold text-slate-500">75%</span>
         </div>
         <div class="w-full bg-slate-100 h-1.5 rounded-full mb-2 overflow-hidden">
-            <div class="bg-blue-600 h-full w-[75%] rounded-full"></div>
+            <div class="bg-primary h-full w-[75%] rounded-full"></div>
         </div>
         <p class="text-[10px] text-slate-400 mb-4">150 GB of 200 GB used</p>
         <button class="w-full py-2 bg-slate-50 border border-slate-200 rounded-lg text-sm font-semibold hover:bg-slate-100 transition-colors">Upgrade Plan</button>

src/client/views/pages/dashboard.ejs

@@ -16,7 +16,7 @@
                                 <span class="text-slate-400 text-sm">used of 200 GB</span>
                             </div>
                         </div>
-                        <span class="px-2 py-1 bg-blue-50 text-blue-600 text-[10px] font-bold rounded uppercase tracking-wider">200 GB Plan</span>
+                        <span class="px-2 py-1 bg-primary/5 text-primary text-[10px] font-bold rounded uppercase tracking-wider">200 GB Plan</span>
                     </div>
                     <div class="w-full h-3 bg-slate-100 rounded-full overflow-hidden mb-4">
                         <div class="h-full bg-linear-to-r from-green-500 via-orange-500 to-red-400 rounded-full" style="width: 75%"></div>
@@ -55,7 +55,7 @@
                                     <span class="text-slate-400">60 GB</span>
                                 </div>
                                 <div class="w-full h-1.5 bg-slate-100 rounded-full overflow-hidden">
-                                    <div class="bg-blue-600 h-full rounded-full" style="width: 70%"></div>
+                                    <div class="bg-primary h-full rounded-full" style="width: 70%"></div>
                                 </div>
                             </div>
                             <div class="space-y-1">
@@ -88,7 +88,7 @@
                         </div>
                         <div class="space-y-2">
                             <div class="flex items-center gap-2 text-xs text-slate-500">
-                                <span class="w-2 h-2 rounded-full bg-blue-600"></span> Images <span class="ml-auto font-bold">40%</span>
+                                <span class="w-2 h-2 rounded-full bg-primary"></span> Images <span class="ml-auto font-bold">40%</span>
                             </div>
                             <div class="flex items-center gap-2 text-xs text-slate-500">
                                 <span class="w-2 h-2 rounded-full bg-orange-500"></span> Documents <span class="ml-auto font-bold">30%</span>
@@ -110,7 +110,7 @@
             <div class="flex justify-between items-center mb-6">
                 <h2 class="text-xl font-bold text-slate-900">Quick Access</h2>
                 <div class="flex gap-4">
-                    <button class="text-blue-600 text-sm font-semibold hover:underline">View all</button>
+                    <button class="text-primary text-sm font-semibold hover:underline">View all</button>
                 </div>
             </div>
             <div class="grid grid-cols-1 sm:grid-cols-2 lg:grid-cols-4 gap-4">
@@ -123,8 +123,8 @@
                             size: '4.7 GB',
                             fileCount: '21 files',
                             updated: 'Updated 2h ago',
-                            iconBg: 'blue-50',
-                            iconColor: 'blue-600'
+                            iconBg: 'primary-50',
+                            iconColor: 'primary'
                         },
                         {
                             icon: '<svg class="w-6 h-6" fill="none" stroke="currentColor" viewBox="0 0 24 24"><path stroke-linecap="round" stroke-linejoin="round" stroke-width="2" d="M4 16l4.586-4.586a2 2 0 012.828 0L16 16m-2-2l1.586-1.586a2 2 0 012.828 0L20 14m-6-6h.01M6 20h12a2 2 0 002-2V6a2 2 0 00-2-2H6a2 2 0 00-2 2v12a2 2 0 002 2z"></path></svg>',
@@ -133,8 +133,8 @@
                             size: '12.8 GB',
                             fileCount: '340 files',
                             updated: 'Updated yesterday',
-                            iconBg: 'blue-50',
-                            iconColor: 'blue-600'
+                            iconBg: 'primary-50',
+                            iconColor: 'primary'
                         },
                         {
                             icon: '<svg class="w-6 h-6" fill="none" stroke="currentColor" viewBox="0 0 24 24"><path stroke-linecap="round" stroke-linejoin="round" stroke-width="2" d="M9 12h6m-6 4h6m2 5H7a2 2 0 01-2-2V5a2 2 0 012-2h5.586a1 1 0 01.707.293l5.414 5.414a1 1 0 01.293.707V19a2 2 0 01-2 2z"></path></svg>',
@@ -143,8 +143,8 @@
                             size: '3.1 GB',
                             fileCount: '96 files',
                             updated: 'Updated 5d ago',
-                            iconBg: 'blue-50',
-                            iconColor: 'blue-600'
+                            iconBg: 'primary-50',
+                            iconColor: 'primary'
                         },
                         {
                             icon: '<svg class="w-6 h-6" fill="none" stroke="currentColor" viewBox="0 0 24 24"><path stroke-linecap="round" stroke-linejoin="round" stroke-width="2" d="M13.828 10.172a4 4 0 00-5.656 0l-4 4a4 4 0 105.656 5.656l1.102-1.101m-.758-4.899a4 4 0 005.656 0l4-4a4 4 0 00-5.656-5.656l-1.1 1.1"></path></svg>',
@@ -153,8 +153,8 @@
                             size: '8.6 GB',
                             fileCount: '58 items',
                             updated: 'Updated 1h ago',
-                            iconBg: 'blue-50',
-                            iconColor: 'blue-600'
+                            iconBg: 'primary-50',
+                            iconColor: 'primary'
                         }
                     ];
                 %>
@@ -172,8 +172,8 @@
                 const tableRows = [
                     {
                         icon: '<svg class="w-4 h-4" fill="none" stroke="currentColor" viewBox="0 0 24 24"><path stroke-linecap="round" stroke-linejoin="round" stroke-width="2" d="M4 16l4.586-4.586a2 2 0 012.828 0L16 16m-2-2l1.586-1.586a2 2 0 012.828 0L20 14m-6-6h.01M6 20h12a2 2 0 002-2V6a2 2 0 00-2-2H6a2 2 0 00-2 2v12a2 2 0 002 2z"></path></svg>',
-                        iconBg: 'blue-50',
-                        iconColor: 'blue-600',
+                        iconBg: 'primary-50',
+                        iconColor: 'primary',
                         name: 'Images (JPG, PNG, SVG)',
                         totalFiles: '8,420',
                         storageUsed: '60 GB',
@@ -202,8 +202,8 @@
                     },
                     {
                         icon: '<svg class="w-4 h-4" fill="none" stroke="currentColor" viewBox="0 0 24 24"><path stroke-linecap="round" stroke-linejoin="round" stroke-width="2" d="M20 7l-8-4-8 4m16 0l-8 4m8-4v10l-8 4m0-10L4 7m8 4v10M4 7v10l8 4"></path></svg>',
-                        iconBg: 'blue-50',
-                        iconColor: 'blue-600',
+                        iconBg: 'primary-50',
+                        iconColor: 'primary',
                         name: 'Archives (ZIP, RAR)',
                         totalFiles: '210',
                         storageUsed: '10 GB',