refactor: update UI components for consistency and dark mode support
- Refactored PaymentsPage, RatingsPage, RepresentationDetailPage, RepresentationsPage, SecretariesPage, SettlementsPage, SmsPage, UserDetailPage, and UsersPage to use consistent class names for styling. - Updated button styles to use new utility classes for primary, secondary, and danger buttons. - Enhanced dark mode support across various components by adjusting text and background colors. - Introduced new utility classes for form inputs, labels, and info rows to standardize styling. - Implemented Zustand for persistent UI state management, including dark mode toggle functionality. - Updated CSS to include new styles for skeleton loading and animations. - Added optional dependencies for improved compatibility with different platforms.
This commit is contained in:
hamed
+125
-11
@@ -1,7 +1,11 @@
|
||||
@import "tailwindcss";
|
||||
@import url('https://fonts.googleapis.com/css2?family=Vazirmatn:wght@300;400;500;600;700;800&display=swap');
|
||||
|
||||
/* Class-based dark mode for Tailwind v4 */
|
||||
@custom-variant dark (&:where(.dark, .dark *));
|
||||
|
||||
@theme {
|
||||
--color-primary-50: #f5f3ff;
|
||||
--color-primary-50: #f5f3ff;
|
||||
--color-primary-100: #ede9fe;
|
||||
--color-primary-200: #ddd6fe;
|
||||
--color-primary-300: #c4b5fd;
|
||||
@@ -12,27 +16,137 @@
|
||||
--color-primary-800: #5b21b6;
|
||||
--color-primary-900: #4c1d95;
|
||||
|
||||
--color-bg-body: #f1f5f9;
|
||||
--color-bg-card: #ffffff;
|
||||
--color-bg-sidebar: #0f172a;
|
||||
--color-bg-sidebar-active: rgba(139, 92, 246, 0.15);
|
||||
|
||||
--font-sans: "Vazirmatn", "Inter", ui-sans-serif, system-ui, sans-serif;
|
||||
--font-sans: "Vazirmatn", ui-sans-serif, system-ui, sans-serif;
|
||||
}
|
||||
|
||||
* {
|
||||
*, *::before, *::after {
|
||||
font-family: var(--font-sans);
|
||||
}
|
||||
|
||||
html {
|
||||
scroll-behavior: smooth;
|
||||
}
|
||||
|
||||
body {
|
||||
background-color: var(--color-bg-body);
|
||||
direction: rtl;
|
||||
-webkit-font-smoothing: antialiased;
|
||||
-moz-osx-font-smoothing: grayscale;
|
||||
}
|
||||
|
||||
/* ── Scrollbar ──────────────────────────────── */
|
||||
::-webkit-scrollbar { width: 5px; height: 5px; }
|
||||
::-webkit-scrollbar-track { background: transparent; }
|
||||
::-webkit-scrollbar-thumb { background: #cbd5e1; border-radius: 4px; }
|
||||
.dark ::-webkit-scrollbar-thumb { background: #334155; }
|
||||
::-webkit-scrollbar-thumb:hover { background: #94a3b8; }
|
||||
.dark ::-webkit-scrollbar-thumb:hover { background: #475569; }
|
||||
|
||||
/* ── Animations ─────────────────────────────── */
|
||||
@keyframes scale-in {
|
||||
from { opacity: 0; transform: scale(0.95); }
|
||||
to { opacity: 1; transform: scale(1); }
|
||||
from { opacity: 0; transform: scale(0.96) translateY(-4px); }
|
||||
to { opacity: 1; transform: scale(1) translateY(0); }
|
||||
}
|
||||
@keyframes slide-up {
|
||||
from { opacity: 0; transform: translateY(10px); }
|
||||
to { opacity: 1; transform: translateY(0); }
|
||||
}
|
||||
@keyframes fade-in {
|
||||
from { opacity: 0; }
|
||||
to { opacity: 1; }
|
||||
}
|
||||
@keyframes shimmer {
|
||||
0% { background-position: -200% 0; }
|
||||
100% { background-position: 200% 0; }
|
||||
}
|
||||
|
||||
.animate-scale-in { animation: scale-in 200ms cubic-bezier(0.34, 1.2, 0.64, 1) both; }
|
||||
.animate-slide-up { animation: slide-up 200ms ease both; }
|
||||
.animate-fade-in { animation: fade-in 150ms ease both; }
|
||||
|
||||
/* ── Skeleton shimmer ───────────────────────── */
|
||||
.skeleton {
|
||||
background: linear-gradient(90deg, #f1f5f9 25%, #e2e8f0 50%, #f1f5f9 75%);
|
||||
background-size: 200% 100%;
|
||||
animation: shimmer 1.4s infinite;
|
||||
}
|
||||
.dark .skeleton {
|
||||
background: linear-gradient(90deg, #1e293b 25%, #334155 50%, #1e293b 75%);
|
||||
background-size: 200% 100%;
|
||||
}
|
||||
|
||||
/* ── Utility classes ────────────────────────── */
|
||||
.line-clamp-1 { overflow: hidden; display: -webkit-box; -webkit-line-clamp: 1; -webkit-box-orient: vertical; }
|
||||
.line-clamp-2 { overflow: hidden; display: -webkit-box; -webkit-line-clamp: 2; -webkit-box-orient: vertical; }
|
||||
.line-clamp-3 { overflow: hidden; display: -webkit-box; -webkit-line-clamp: 3; -webkit-box-orient: vertical; }
|
||||
|
||||
/* ── Admin component tokens ─────────────────── */
|
||||
@layer components {
|
||||
/* Card / panel */
|
||||
.cp-card {
|
||||
@apply bg-white dark:bg-gray-900 rounded-2xl border border-slate-200/70 dark:border-gray-700/50 shadow-sm;
|
||||
}
|
||||
|
||||
/* Form inputs */
|
||||
.cp-input {
|
||||
@apply w-full h-10 bg-white dark:bg-gray-800 border border-slate-300 dark:border-gray-600
|
||||
rounded-xl px-3 text-sm text-slate-900 dark:text-slate-100
|
||||
placeholder-slate-400 dark:placeholder-slate-500
|
||||
focus:outline-none focus:ring-2 focus:ring-primary-500/50 focus:border-primary-500
|
||||
transition-colors;
|
||||
}
|
||||
.cp-textarea {
|
||||
@apply bg-white dark:bg-gray-800 border border-slate-300 dark:border-gray-600
|
||||
rounded-xl px-3 py-2 text-sm text-slate-900 dark:text-slate-100
|
||||
placeholder-slate-400 dark:placeholder-slate-500
|
||||
focus:outline-none focus:ring-2 focus:ring-primary-500/50 focus:border-primary-500
|
||||
transition-colors w-full;
|
||||
}
|
||||
.cp-select {
|
||||
@apply w-full h-10 bg-white dark:bg-gray-800 border border-slate-300 dark:border-gray-600
|
||||
rounded-xl px-3 text-sm text-slate-900 dark:text-slate-100
|
||||
focus:outline-none focus:ring-2 focus:ring-primary-500/50 focus:border-primary-500
|
||||
transition-colors;
|
||||
}
|
||||
.cp-label {
|
||||
@apply block text-sm font-medium text-slate-700 dark:text-slate-300 mb-1.5;
|
||||
}
|
||||
|
||||
/* Buttons — base styles inlined to avoid @apply on component classes */
|
||||
.cp-btn-primary {
|
||||
@apply inline-flex items-center justify-center gap-2 px-4 py-2 rounded-xl text-sm font-semibold transition-all duration-150 disabled:opacity-50 disabled:cursor-not-allowed bg-primary-600 hover:bg-primary-700 active:bg-primary-800 text-white shadow-sm;
|
||||
}
|
||||
.cp-btn-secondary {
|
||||
@apply inline-flex items-center justify-center gap-2 px-4 py-2 rounded-xl text-sm font-medium transition-all duration-150 disabled:opacity-50 disabled:cursor-not-allowed bg-slate-100 dark:bg-gray-700 hover:bg-slate-200 dark:hover:bg-gray-600 text-slate-700 dark:text-slate-200;
|
||||
}
|
||||
.cp-btn-danger {
|
||||
@apply inline-flex items-center justify-center gap-2 px-4 py-2 rounded-xl text-sm font-semibold transition-all duration-150 disabled:opacity-50 disabled:cursor-not-allowed bg-red-600 hover:bg-red-700 active:bg-red-800 text-white shadow-sm;
|
||||
}
|
||||
.cp-btn-ghost {
|
||||
@apply inline-flex items-center justify-center gap-2 px-4 py-2 rounded-xl text-sm font-medium transition-all duration-150 disabled:opacity-50 disabled:cursor-not-allowed hover:bg-slate-100 dark:hover:bg-gray-700 text-slate-600 dark:text-slate-300;
|
||||
}
|
||||
|
||||
/* Table action buttons */
|
||||
.cp-action-view { @apply p-1.5 rounded-lg text-slate-400 hover:text-blue-600 hover:bg-blue-50 dark:hover:bg-blue-500/10 dark:hover:text-blue-400 transition-colors; }
|
||||
.cp-action-edit { @apply p-1.5 rounded-lg text-slate-400 hover:text-primary-600 hover:bg-primary-50 dark:hover:bg-primary-500/10 dark:hover:text-primary-400 transition-colors; }
|
||||
.cp-action-delete { @apply p-1.5 rounded-lg text-slate-400 hover:text-red-600 hover:bg-red-50 dark:hover:bg-red-500/10 dark:hover:text-red-400 transition-colors; }
|
||||
|
||||
/* Stat card — cp-card inlined to avoid @apply on component class */
|
||||
.cp-stat {
|
||||
@apply bg-white dark:bg-gray-900 rounded-2xl border border-slate-200/70 dark:border-gray-700/50 shadow-sm p-5 flex items-start gap-4;
|
||||
}
|
||||
.cp-stat-icon {
|
||||
@apply w-11 h-11 rounded-xl flex items-center justify-center shrink-0;
|
||||
}
|
||||
|
||||
/* Section heading inside a card */
|
||||
.cp-section-title {
|
||||
@apply text-sm font-semibold text-slate-700 dark:text-slate-200 mb-4;
|
||||
}
|
||||
|
||||
/* Info rows (label + value pairs) */
|
||||
.cp-info-row {
|
||||
@apply flex items-center justify-between py-2.5 border-b border-slate-100 dark:border-gray-700/50 last:border-0;
|
||||
}
|
||||
.cp-info-label { @apply text-xs text-slate-500 dark:text-slate-400; }
|
||||
.cp-info-value { @apply text-sm font-medium text-slate-800 dark:text-slate-200; }
|
||||
}
|
||||
|
||||
Reference in New Issue
Block a user