feat: comprehensive UI polish with responsive design, animations, and modern styling
- Rewrite globals.css with professional utility classes (btn-primary/secondary/danger/ghost, input-field, card/card-hover, badge system, stat-card, skeleton, page-header, animations) - Responsive dashboard layout with mobile hamburger menu, slide-out sidebar, backdrop overlay - Polish login/register pages with gradient backgrounds, slide-up animations, loading spinners - Dashboard home with stat cards grid (2-col mobile, 4-col desktop), skeleton loading, empty states - Apps list with desktop table + mobile card views, proper badges - Deploy wizard with responsive step indicator (checkmarks, progress line), mobile-friendly forms - App detail page with responsive header/action buttons, improved logs tabs, resource scaling - Admin users page with desktop table + mobile cards, skeleton loading - Admin clusters page with responsive layout, animated resource panel - Admin pools page with responsive form grids, improved pool cards - Consistent rounded-2xl cards, rounded-xl buttons/inputs, active:scale feedback throughout
This commit is contained in:
keyhan
@@ -95,30 +95,30 @@ export default function AdminPoolsPage() {
|
||||
};
|
||||
|
||||
return (
|
||||
<div className="space-y-6">
|
||||
<div className="flex justify-between items-center">
|
||||
<div className="space-y-6 animate-fade-in">
|
||||
<div className="page-header">
|
||||
<div>
|
||||
<h1 className="text-2xl font-bold text-gray-900">Cluster Pools</h1>
|
||||
<p className="text-sm text-gray-500 mt-1">
|
||||
Create load-balanced groups of clusters for automatic app distribution
|
||||
<h1 className="page-title">Cluster Pools</h1>
|
||||
<p className="page-subtitle">
|
||||
Load-balanced groups of clusters for automatic app distribution
|
||||
</p>
|
||||
</div>
|
||||
<button
|
||||
onClick={() => { showForm ? resetForm() : setShowForm(true); }}
|
||||
className="btn-primary"
|
||||
className={showForm ? 'btn-ghost' : 'btn-primary'}
|
||||
>
|
||||
{showForm ? 'Cancel' : '+ Create Pool'}
|
||||
{showForm ? '✕ Cancel' : '+ Create Pool'}
|
||||
</button>
|
||||
</div>
|
||||
|
||||
{/* Create/Edit Form */}
|
||||
{showForm && (
|
||||
<div className="card space-y-4">
|
||||
<h2 className="text-lg font-semibold">
|
||||
<div className="card space-y-4 animate-slide-up">
|
||||
<h2 className="text-lg font-semibold text-gray-900">
|
||||
{editingPool ? `Edit "${editingPool.name}"` : 'Create New Cluster Pool'}
|
||||
</h2>
|
||||
|
||||
<div className="grid grid-cols-2 gap-4">
|
||||
<div className="grid grid-cols-1 sm:grid-cols-2 gap-4">
|
||||
<div>
|
||||
<label className="block text-sm font-medium text-gray-700 mb-1">Pool Name</label>
|
||||
<input
|
||||
@@ -237,11 +237,25 @@ export default function AdminPoolsPage() {
|
||||
|
||||
{/* Pool List */}
|
||||
{isLoading ? (
|
||||
<div className="card text-center py-12 text-gray-500">Loading pools...</div>
|
||||
<div className="space-y-3">
|
||||
{[1,2].map(i => (
|
||||
<div key={i} className="card space-y-3">
|
||||
<div className="flex items-center gap-3">
|
||||
<div className="skeleton h-5 w-32" />
|
||||
<div className="skeleton h-5 w-16 rounded-full" />
|
||||
</div>
|
||||
<div className="skeleton h-3 w-64" />
|
||||
<div className="flex gap-2">
|
||||
<div className="skeleton h-8 w-28 rounded-lg" />
|
||||
<div className="skeleton h-8 w-28 rounded-lg" />
|
||||
</div>
|
||||
</div>
|
||||
))}
|
||||
</div>
|
||||
) : pools.length === 0 ? (
|
||||
<div className="card text-center py-12">
|
||||
<div className="text-4xl mb-3">⚖️</div>
|
||||
<p className="text-gray-500">No cluster pools created yet</p>
|
||||
<div className="card text-center py-16">
|
||||
<div className="text-5xl mb-4">⚖️</div>
|
||||
<p className="text-gray-600 font-medium">No cluster pools created yet</p>
|
||||
<p className="text-sm text-gray-400 mt-1">
|
||||
Create a pool to enable load-balanced deployment across multiple clusters
|
||||
</p>
|
||||
@@ -253,16 +267,14 @@ export default function AdminPoolsPage() {
|
||||
const activeClusters = poolClusters.filter((c) => c.status === 'active');
|
||||
return (
|
||||
<div key={pool.id} className="card">
|
||||
<div className="flex items-start justify-between">
|
||||
<div className="flex-1">
|
||||
<div className="flex items-center space-x-3 mb-2">
|
||||
<div className="flex flex-col sm:flex-row sm:items-start gap-4">
|
||||
<div className="flex-1 min-w-0">
|
||||
<div className="flex items-center gap-2 flex-wrap mb-2">
|
||||
<h3 className="text-lg font-semibold text-gray-900">{pool.name}</h3>
|
||||
<span className={`px-2 py-0.5 rounded-full text-xs font-medium ${
|
||||
pool.isActive ? 'bg-green-100 text-green-700' : 'bg-gray-100 text-gray-500'
|
||||
}`}>
|
||||
<span className={`badge ${pool.isActive ? 'badge-green' : 'badge-gray'}`}>
|
||||
{pool.isActive ? 'Active' : 'Inactive'}
|
||||
</span>
|
||||
<span className="px-2 py-0.5 bg-purple-100 text-purple-700 text-xs rounded-full font-medium">
|
||||
<span className="badge badge-purple">
|
||||
{pool.strategy === 'least-apps' ? '📊 Least Apps' : '🔄 Round Robin'}
|
||||
</span>
|
||||
</div>
|
||||
@@ -275,9 +287,9 @@ export default function AdminPoolsPage() {
|
||||
{poolClusters.length > 0 ? poolClusters.map((cluster) => (
|
||||
<div
|
||||
key={cluster.id}
|
||||
className={`inline-flex items-center space-x-1.5 px-3 py-1.5 rounded-lg text-xs font-medium ${
|
||||
className={`inline-flex items-center gap-1.5 px-3 py-1.5 rounded-xl text-xs font-medium ${
|
||||
cluster.status === 'active'
|
||||
? 'bg-green-50 text-green-700 border border-green-200'
|
||||
? 'bg-emerald-50 text-emerald-700 border border-emerald-200'
|
||||
: 'bg-red-50 text-red-700 border border-red-200'
|
||||
}`}
|
||||
>
|
||||
@@ -297,10 +309,10 @@ export default function AdminPoolsPage() {
|
||||
</p>
|
||||
</div>
|
||||
|
||||
<div className="flex items-center space-x-3 ml-4">
|
||||
<div className="flex items-center gap-2 shrink-0">
|
||||
<button
|
||||
onClick={() => startEdit(pool)}
|
||||
className="text-sm px-3 py-1.5 bg-blue-50 text-blue-700 rounded-md hover:bg-blue-100 transition-colors"
|
||||
className="btn-ghost text-sm"
|
||||
>
|
||||
✏️ Edit
|
||||
</button>
|
||||
|
||||
Reference in New Issue
Block a user