refactor: update layout styles in main and dashboard views, adjust sidebar title

pphatdev · pphatdev · commit 05181fe399c0 · 2026-02-10T08:14:48.000+07:00
diff --git a/src/client/views/layouts/main.ejs b/src/client/views/layouts/main.ejs
@@ -10,7 +10,7 @@
         body { font-family: 'Inter', sans-serif; }
     </style>
 </head>
-<body class="bg-white text-slate-700">
+<body class="text-slate-700">
     <div class="flex h-screen overflow-hidden">
         <!-- Sidebar -->
         <%- include('../layouts/sidebar'); %>
diff --git a/src/client/views/layouts/sidebar.ejs b/src/client/views/layouts/sidebar.ejs
@@ -1,9 +1,9 @@
-<aside class="w-64 bg-sidebar border-r border-slate-200 flex flex-col p-6 overflow-y-auto">
+<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">
             <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">CloudBox</span>
+        <span class="text-xl font-bold text-slate-900">StackDev</span>
     </div>
 
     <nav class="space-y-1 mb-10">
diff --git a/src/client/views/pages/dashboard.ejs b/src/client/views/pages/dashboard.ejs
@@ -1,4 +1,4 @@
-<main class="flex-1 overflow-y-auto bg-white">
+<main class="flex-1 overflow-y-auto bg-slate-50">
     <!-- Header -->
     <header class="h-20 border-b border-slate-100 flex items-center justify-between px-8 sticky top-0 bg-white z-10">
         <div class="relative w-96">
@@ -8,15 +8,15 @@
             <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">
         </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-sm shadow-blue-200">
+            <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">
                 <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>
                 Upload New
             </button>
             <button class="p-2 text-slate-400 hover:bg-slate-50 rounded-full relative transition-colors">
                 <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="M15 17h5l-1.405-1.405A2.032 2.032 0 0118 14.158V11a6.002 6.002 0 00-4-5.659V5a2 2 0 10-4 0v.341C7.67 6.165 6 8.388 6 11v3.159c0 .538-.214 1.055-.595 1.436L4 17h5m6 0v1a3 3 0 11-6 0v-1m6 0H9"></path></svg>
                 <span class="absolute top-2 right-2 w-2 h-2 bg-red-500 rounded-full border-2 border-white"></span>
             </button>
-            <img src="https://ui-avatars.com/api/?name=User&background=6366f1&color=fff" alt="Avatar" class="w-10 h-10 rounded-full border border-slate-100">
+            <img src="https://ui-avatars.com/api/?name=User&background=6366f1&color=fff" alt="Avatar" class="w-10 h-10 rounded-full">
         </div>
     </header>
 
@@ -26,7 +26,7 @@
             <h2 class="text-xl font-bold text-slate-900 mb-6">Storage Overview</h2>
             <div class="grid grid-cols-1 md:grid-cols-2 gap-6">
                 <!-- Total Storage Card -->
-                <div class="p-6 rounded-2xl border border-slate-100 bg-white shadow-sm">
+                <div class="p-6 rounded-2xl bg-white">
                     <div class="flex justify-between items-start mb-6">
                         <div>
                             <h3 class="text-sm font-semibold text-slate-400 mb-1">Total Storage</h3>
@@ -38,7 +38,7 @@
                         <span class="px-2 py-1 bg-blue-50 text-blue-600 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-gradient-to-r from-blue-500 to-orange-400 rounded-full" style="width: 75%"></div>
+                        <div class="h-full bg-linear-to-r from-green-500 via-orange-500 to-red-400 rounded-full" style="width: 75%"></div>
                     </div>
                     <div class="flex justify-between text-xs text-slate-400 mb-6">
                         <span>Used: 150 GB</span>
@@ -61,7 +61,7 @@
                 </div>
 
                 <!-- Breakdown Card -->
-                <div class="p-6 rounded-2xl border border-slate-100 bg-white shadow-sm">
+                <div class="p-6 rounded-2xl bg-white ">
                     <div class="flex justify-between items-center mb-6">
                         <h3 class="text-sm font-bold text-slate-900">File Types Breakdown</h3>
                         <span class="text-xs text-slate-400">By storage used</span>
@@ -138,7 +138,7 @@
             </div>
             <div class="grid grid-cols-1 sm:grid-cols-2 lg:grid-cols-4 gap-4">
                 <!-- Quick Item 1 -->
-                <div class="p-4 rounded-xl border border-slate-100 hover:border-blue-200 transition-all cursor-pointer bg-white group shadow-sm">
+                <div class="p-4 rounded-2xl hover:border-blue-200 transition-all cursor-pointer bg-white group ">
                     <div class="flex items-center gap-4 mb-4">
                         <div class="p-2.5 bg-blue-50 rounded-lg text-blue-600 group-hover:bg-blue-600 group-hover:text-white transition-all">
                             <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="M3 7v10a2 2 0 002 2h14a2 2 0 002-2V9a2 2 0 00-2-2h-6l-2-2H5a2 2 0 00-2 2z"></path></svg>
@@ -154,7 +154,7 @@
                     </div>
                 </div>
                 <!-- Quick Item 2 -->
-                <div class="p-4 rounded-xl border border-slate-100 hover:border-blue-200 transition-all cursor-pointer bg-white group shadow-sm">
+                <div class="p-4 rounded-2xl hover:border-blue-200 transition-all cursor-pointer bg-white group ">
                     <div class="flex items-center gap-4 mb-4">
                         <div class="p-2.5 bg-blue-50 rounded-lg text-blue-600 group-hover:bg-blue-600 group-hover:text-white transition-all">
                             <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>
@@ -170,7 +170,7 @@
                     </div>
                 </div>
                 <!-- Quick Item 3 -->
-                <div class="p-4 rounded-xl border border-slate-100 hover:border-blue-200 transition-all cursor-pointer bg-white group shadow-sm">
+                <div class="p-4 rounded-2xl hover:border-blue-200 transition-all cursor-pointer bg-white group ">
                     <div class="flex items-center gap-4 mb-4">
                         <div class="p-2.5 bg-blue-50 rounded-lg text-blue-600 group-hover:bg-blue-600 group-hover:text-white transition-all">
                             <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>
@@ -186,7 +186,7 @@
                     </div>
                 </div>
                 <!-- Quick Item 4 -->
-                <div class="p-4 rounded-xl border border-slate-100 hover:border-blue-200 transition-all cursor-pointer bg-white group shadow-sm">
+                <div class="p-4 rounded-2xl hover:border-blue-200 transition-all cursor-pointer bg-white group ">
                     <div class="flex items-center gap-4 mb-4">
                         <div class="p-2.5 bg-blue-50 rounded-lg text-blue-600 group-hover:bg-blue-600 group-hover:text-white transition-all">
                             <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>
@@ -207,7 +207,7 @@
         <!-- File Types Details -->
         <section>
             <h2 class="text-xl font-bold text-slate-900 mb-6">File Types Details</h2>
-            <div class="bg-white rounded-2xl border border-slate-100 overflow-hidden shadow-sm">
+            <div class="bg-white rounded-2xl overflow-hidden border border-black/5">
                 <table class="w-full text-left text-sm">
                     <thead class="bg-slate-50 text-slate-400 font-bold text-[11px] uppercase tracking-wider">
                         <tr>
