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
+114
-13
@@ -6,34 +6,135 @@
|
||||
body {
|
||||
@apply bg-gray-50 text-gray-900 antialiased;
|
||||
}
|
||||
|
||||
/* Smooth scrollbar */
|
||||
::-webkit-scrollbar {
|
||||
@apply w-1.5 h-1.5;
|
||||
}
|
||||
::-webkit-scrollbar-track {
|
||||
@apply bg-transparent;
|
||||
}
|
||||
::-webkit-scrollbar-thumb {
|
||||
@apply bg-gray-300 rounded-full hover:bg-gray-400;
|
||||
}
|
||||
}
|
||||
|
||||
@layer components {
|
||||
/* ─── Buttons ──────────────────────────────────────────── */
|
||||
.btn-primary {
|
||||
@apply bg-primary-600 text-white px-4 py-2 rounded-lg font-medium
|
||||
hover:bg-primary-700 focus:outline-none focus:ring-2 focus:ring-primary-500
|
||||
focus:ring-offset-2 transition-colors disabled:opacity-50 disabled:cursor-not-allowed;
|
||||
@apply inline-flex items-center justify-center gap-2 bg-primary-600 text-white
|
||||
px-4 py-2.5 rounded-xl font-semibold text-sm
|
||||
hover:bg-primary-700 active:scale-[0.98]
|
||||
focus:outline-none focus:ring-2 focus:ring-primary-500 focus:ring-offset-2
|
||||
transition-all duration-150 disabled:opacity-50 disabled:cursor-not-allowed
|
||||
shadow-sm hover:shadow-md;
|
||||
}
|
||||
|
||||
.btn-secondary {
|
||||
@apply bg-white text-gray-700 px-4 py-2 rounded-lg font-medium border border-gray-300
|
||||
hover:bg-gray-50 focus:outline-none focus:ring-2 focus:ring-primary-500
|
||||
focus:ring-offset-2 transition-colors;
|
||||
@apply inline-flex items-center justify-center gap-2 bg-white text-gray-700
|
||||
px-4 py-2.5 rounded-xl font-semibold text-sm border border-gray-300
|
||||
hover:bg-gray-50 active:scale-[0.98]
|
||||
focus:outline-none focus:ring-2 focus:ring-primary-500 focus:ring-offset-2
|
||||
transition-all duration-150 shadow-sm;
|
||||
}
|
||||
|
||||
.btn-danger {
|
||||
@apply bg-red-600 text-white px-4 py-2 rounded-lg font-medium
|
||||
hover:bg-red-700 focus:outline-none focus:ring-2 focus:ring-red-500
|
||||
focus:ring-offset-2 transition-colors;
|
||||
@apply inline-flex items-center justify-center gap-2 bg-red-600 text-white
|
||||
px-4 py-2.5 rounded-xl font-semibold text-sm
|
||||
hover:bg-red-700 active:scale-[0.98]
|
||||
focus:outline-none focus:ring-2 focus:ring-red-500 focus:ring-offset-2
|
||||
transition-all duration-150 shadow-sm hover:shadow-md
|
||||
disabled:opacity-50 disabled:cursor-not-allowed;
|
||||
}
|
||||
|
||||
.btn-ghost {
|
||||
@apply inline-flex items-center justify-center gap-2 text-gray-600
|
||||
px-3 py-2 rounded-xl font-medium text-sm
|
||||
hover:bg-gray-100 active:scale-[0.98]
|
||||
focus:outline-none focus:ring-2 focus:ring-primary-500 focus:ring-offset-2
|
||||
transition-all duration-150;
|
||||
}
|
||||
|
||||
.btn-icon {
|
||||
@apply inline-flex items-center justify-center w-9 h-9 rounded-xl
|
||||
text-gray-500 hover:bg-gray-100 hover:text-gray-700
|
||||
active:scale-[0.95] transition-all duration-150;
|
||||
}
|
||||
|
||||
/* ─── Inputs ──────────────────────────────────────────── */
|
||||
.input-field {
|
||||
@apply w-full px-3 py-2 border border-gray-300 rounded-lg shadow-sm
|
||||
placeholder-gray-400 focus:outline-none focus:ring-2 focus:ring-primary-500
|
||||
focus:border-primary-500 transition-colors;
|
||||
@apply w-full px-3.5 py-2.5 border border-gray-300 rounded-xl shadow-sm text-sm
|
||||
placeholder-gray-400 bg-white
|
||||
focus:outline-none focus:ring-2 focus:ring-primary-500/20 focus:border-primary-500
|
||||
transition-all duration-150;
|
||||
}
|
||||
|
||||
/* ─── Cards ──────────────────────────────────────────── */
|
||||
.card {
|
||||
@apply bg-white rounded-xl shadow-sm border border-gray-200 p-6;
|
||||
@apply bg-white rounded-2xl shadow-sm border border-gray-200/80 p-6
|
||||
transition-shadow duration-200;
|
||||
}
|
||||
.card-hover {
|
||||
@apply card hover:shadow-md hover:border-gray-300;
|
||||
}
|
||||
|
||||
/* ─── Badges ──────────────────────────────────────────── */
|
||||
.badge {
|
||||
@apply inline-flex items-center px-2.5 py-0.5 rounded-full text-xs font-semibold;
|
||||
}
|
||||
.badge-green { @apply badge bg-emerald-100 text-emerald-700; }
|
||||
.badge-red { @apply badge bg-red-100 text-red-700; }
|
||||
.badge-blue { @apply badge bg-blue-100 text-blue-700; }
|
||||
.badge-yellow { @apply badge bg-amber-100 text-amber-700; }
|
||||
.badge-gray { @apply badge bg-gray-100 text-gray-600; }
|
||||
.badge-purple { @apply badge bg-purple-100 text-purple-700; }
|
||||
|
||||
/* ─── Stat card ──────────────────────────────────────── */
|
||||
.stat-card {
|
||||
@apply bg-white rounded-2xl border border-gray-200/80 p-5 shadow-sm
|
||||
flex flex-col gap-1;
|
||||
}
|
||||
.stat-value {
|
||||
@apply text-3xl font-bold tracking-tight;
|
||||
}
|
||||
.stat-label {
|
||||
@apply text-sm font-medium text-gray-500;
|
||||
}
|
||||
|
||||
/* ─── Table ──────────────────────────────────────────── */
|
||||
.table-wrapper {
|
||||
@apply overflow-hidden rounded-2xl border border-gray-200/80 bg-white shadow-sm;
|
||||
}
|
||||
|
||||
/* ─── Loading skeleton ──────────────────────────────── */
|
||||
.skeleton {
|
||||
@apply animate-pulse bg-gray-200 rounded-xl;
|
||||
}
|
||||
|
||||
/* ─── Page header ──────────────────────────────────── */
|
||||
.page-header {
|
||||
@apply flex flex-col sm:flex-row sm:items-center sm:justify-between gap-4;
|
||||
}
|
||||
.page-title {
|
||||
@apply text-2xl font-bold text-gray-900 tracking-tight;
|
||||
}
|
||||
.page-subtitle {
|
||||
@apply text-sm text-gray-500 mt-0.5;
|
||||
}
|
||||
}
|
||||
|
||||
/* ─── Animations ─────────────────────────────────────── */
|
||||
@keyframes fadeIn {
|
||||
from { opacity: 0; transform: translateY(8px); }
|
||||
to { opacity: 1; transform: translateY(0); }
|
||||
}
|
||||
@keyframes slideUp {
|
||||
from { opacity: 0; transform: translateY(16px); }
|
||||
to { opacity: 1; transform: translateY(0); }
|
||||
}
|
||||
.animate-fade-in {
|
||||
animation: fadeIn 0.3s ease-out;
|
||||
}
|
||||
.animate-slide-up {
|
||||
animation: slideUp 0.4s ease-out;
|
||||
}
|
||||
|
||||
Reference in New Issue
Block a user