mirror of
https://github.com/soconnor0919/beenvoice.git
synced 2026-02-05 00:06:36 -05:00
Add dark mode styles to dashboard and UI components
This commit is contained in:
@@ -4,7 +4,10 @@ function Skeleton({ className, ...props }: React.ComponentProps<"div">) {
|
||||
return (
|
||||
<div
|
||||
data-slot="skeleton"
|
||||
className={cn("bg-muted animate-pulse rounded-md", className)}
|
||||
className={cn(
|
||||
"bg-muted animate-pulse rounded-md dark:bg-gray-700",
|
||||
className,
|
||||
)}
|
||||
{...props}
|
||||
/>
|
||||
);
|
||||
@@ -17,14 +20,14 @@ export function DashboardStatsSkeleton() {
|
||||
{Array.from({ length: 4 }).map((_, i) => (
|
||||
<div
|
||||
key={i}
|
||||
className="rounded-xl border-0 bg-white/80 p-6 shadow-xl backdrop-blur-sm dark:bg-gray-800/80"
|
||||
className="rounded-xl border-0 bg-white/80 p-6 shadow-xl backdrop-blur-sm dark:border-gray-700 dark:bg-gray-800/80"
|
||||
>
|
||||
<div className="mb-4 flex items-center justify-between">
|
||||
<Skeleton className="h-4 w-24" />
|
||||
<Skeleton className="h-8 w-8 rounded-lg" />
|
||||
<Skeleton className="h-4 w-24 dark:bg-gray-600" />
|
||||
<Skeleton className="h-8 w-8 rounded-lg dark:bg-gray-600" />
|
||||
</div>
|
||||
<Skeleton className="mb-2 h-8 w-16" />
|
||||
<Skeleton className="h-3 w-32" />
|
||||
<Skeleton className="mb-2 h-8 w-16 dark:bg-gray-600" />
|
||||
<Skeleton className="h-3 w-32 dark:bg-gray-600" />
|
||||
</div>
|
||||
))}
|
||||
</div>
|
||||
@@ -37,16 +40,16 @@ export function DashboardCardsSkeleton() {
|
||||
{Array.from({ length: 2 }).map((_, i) => (
|
||||
<div
|
||||
key={i}
|
||||
className="rounded-xl border-0 bg-white/80 p-6 shadow-xl backdrop-blur-sm dark:bg-gray-800/80"
|
||||
className="rounded-xl border-0 bg-white/80 p-6 shadow-xl backdrop-blur-sm dark:border-gray-700 dark:bg-gray-800/80"
|
||||
>
|
||||
<div className="mb-4 flex items-center gap-2">
|
||||
<Skeleton className="h-8 w-8 rounded-lg" />
|
||||
<Skeleton className="h-6 w-32" />
|
||||
<Skeleton className="h-8 w-8 rounded-lg dark:bg-gray-600" />
|
||||
<Skeleton className="h-6 w-32 dark:bg-gray-600" />
|
||||
</div>
|
||||
<Skeleton className="mb-4 h-4 w-full" />
|
||||
<Skeleton className="mb-4 h-4 w-full dark:bg-gray-600" />
|
||||
<div className="flex gap-3">
|
||||
<Skeleton className="h-10 w-24" />
|
||||
<Skeleton className="h-10 w-32" />
|
||||
<Skeleton className="h-10 w-24 dark:bg-gray-600" />
|
||||
<Skeleton className="h-10 w-32 dark:bg-gray-600" />
|
||||
</div>
|
||||
</div>
|
||||
))}
|
||||
@@ -56,12 +59,12 @@ export function DashboardCardsSkeleton() {
|
||||
|
||||
export function DashboardActivitySkeleton() {
|
||||
return (
|
||||
<div className="rounded-xl border-0 bg-white/80 p-6 shadow-xl backdrop-blur-sm dark:bg-gray-800/80">
|
||||
<Skeleton className="mb-6 h-6 w-32" />
|
||||
<div className="rounded-xl border-0 bg-white/80 p-6 shadow-xl backdrop-blur-sm dark:border-gray-700 dark:bg-gray-800/80">
|
||||
<Skeleton className="mb-6 h-6 w-32 dark:bg-gray-600" />
|
||||
<div className="py-12 text-center">
|
||||
<Skeleton className="mx-auto mb-4 h-20 w-20 rounded-full" />
|
||||
<Skeleton className="mx-auto mb-2 h-6 w-48" />
|
||||
<Skeleton className="mx-auto h-4 w-64" />
|
||||
<Skeleton className="mx-auto mb-4 h-20 w-20 rounded-full dark:bg-gray-600" />
|
||||
<Skeleton className="mx-auto mb-2 h-6 w-48 dark:bg-gray-600" />
|
||||
<Skeleton className="mx-auto h-4 w-64 dark:bg-gray-600" />
|
||||
</div>
|
||||
</div>
|
||||
);
|
||||
@@ -73,21 +76,21 @@ export function TableSkeleton({ rows = 5 }: { rows?: number }) {
|
||||
<div className="space-y-4">
|
||||
{/* Search and filters */}
|
||||
<div className="flex flex-col gap-4 sm:flex-row">
|
||||
<Skeleton className="h-10 w-64" />
|
||||
<Skeleton className="h-10 w-64 dark:bg-gray-600" />
|
||||
<div className="flex gap-2">
|
||||
<Skeleton className="h-10 w-24" />
|
||||
<Skeleton className="h-10 w-24" />
|
||||
<Skeleton className="h-10 w-24 dark:bg-gray-600" />
|
||||
<Skeleton className="h-10 w-24 dark:bg-gray-600" />
|
||||
</div>
|
||||
</div>
|
||||
|
||||
{/* Table */}
|
||||
<div className="rounded-lg border">
|
||||
<div className="border-b p-4">
|
||||
<div className="rounded-lg border dark:border-gray-700 dark:bg-gray-800/90">
|
||||
<div className="border-b p-4 dark:border-gray-700">
|
||||
<div className="flex items-center justify-between">
|
||||
<Skeleton className="h-4 w-32" />
|
||||
<Skeleton className="h-4 w-32 dark:bg-gray-600" />
|
||||
<div className="flex gap-2">
|
||||
<Skeleton className="h-8 w-8" />
|
||||
<Skeleton className="h-8 w-8" />
|
||||
<Skeleton className="h-8 w-8 dark:bg-gray-600" />
|
||||
<Skeleton className="h-8 w-8 dark:bg-gray-600" />
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
@@ -96,12 +99,12 @@ export function TableSkeleton({ rows = 5 }: { rows?: number }) {
|
||||
<div className="space-y-3">
|
||||
{Array.from({ length: rows }).map((_, i) => (
|
||||
<div key={i} className="flex items-center gap-4">
|
||||
<Skeleton className="h-4 w-4" />
|
||||
<Skeleton className="h-4 flex-1" />
|
||||
<Skeleton className="h-4 w-24" />
|
||||
<Skeleton className="h-4 w-24" />
|
||||
<Skeleton className="h-4 w-20" />
|
||||
<Skeleton className="h-8 w-16" />
|
||||
<Skeleton className="h-4 w-4 dark:bg-gray-600" />
|
||||
<Skeleton className="h-4 flex-1 dark:bg-gray-600" />
|
||||
<Skeleton className="h-4 w-24 dark:bg-gray-600" />
|
||||
<Skeleton className="h-4 w-24 dark:bg-gray-600" />
|
||||
<Skeleton className="h-4 w-20 dark:bg-gray-600" />
|
||||
<Skeleton className="h-8 w-16 dark:bg-gray-600" />
|
||||
</div>
|
||||
))}
|
||||
</div>
|
||||
@@ -110,11 +113,11 @@ export function TableSkeleton({ rows = 5 }: { rows?: number }) {
|
||||
|
||||
{/* Pagination */}
|
||||
<div className="flex items-center justify-between">
|
||||
<Skeleton className="h-4 w-32" />
|
||||
<Skeleton className="h-4 w-32 dark:bg-gray-600" />
|
||||
<div className="flex gap-2">
|
||||
<Skeleton className="h-8 w-8" />
|
||||
<Skeleton className="h-8 w-8" />
|
||||
<Skeleton className="h-8 w-8" />
|
||||
<Skeleton className="h-8 w-8 dark:bg-gray-600" />
|
||||
<Skeleton className="h-8 w-8 dark:bg-gray-600" />
|
||||
<Skeleton className="h-8 w-8 dark:bg-gray-600" />
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
@@ -127,33 +130,33 @@ export function FormSkeleton() {
|
||||
<div className="space-y-6">
|
||||
<div className="space-y-4">
|
||||
<div>
|
||||
<Skeleton className="mb-2 h-4 w-20" />
|
||||
<Skeleton className="h-10 w-full" />
|
||||
<Skeleton className="mb-2 h-4 w-20 dark:bg-gray-600" />
|
||||
<Skeleton className="h-10 w-full dark:bg-gray-600" />
|
||||
</div>
|
||||
<div>
|
||||
<Skeleton className="mb-2 h-4 w-24" />
|
||||
<Skeleton className="h-10 w-full" />
|
||||
<Skeleton className="mb-2 h-4 w-24 dark:bg-gray-600" />
|
||||
<Skeleton className="h-10 w-full dark:bg-gray-600" />
|
||||
</div>
|
||||
<div>
|
||||
<Skeleton className="mb-2 h-4 w-16" />
|
||||
<Skeleton className="h-10 w-full" />
|
||||
<Skeleton className="mb-2 h-4 w-16 dark:bg-gray-600" />
|
||||
<Skeleton className="h-10 w-full dark:bg-gray-600" />
|
||||
</div>
|
||||
</div>
|
||||
|
||||
<div className="grid grid-cols-1 gap-4 md:grid-cols-2">
|
||||
<div>
|
||||
<Skeleton className="mb-2 h-4 w-20" />
|
||||
<Skeleton className="h-10 w-full" />
|
||||
<Skeleton className="mb-2 h-4 w-20 dark:bg-gray-600" />
|
||||
<Skeleton className="h-10 w-full dark:bg-gray-600" />
|
||||
</div>
|
||||
<div>
|
||||
<Skeleton className="mb-2 h-4 w-16" />
|
||||
<Skeleton className="h-10 w-full" />
|
||||
<Skeleton className="mb-2 h-4 w-16 dark:bg-gray-600" />
|
||||
<Skeleton className="h-10 w-full dark:bg-gray-600" />
|
||||
</div>
|
||||
</div>
|
||||
|
||||
<div className="flex gap-3">
|
||||
<Skeleton className="h-10 w-24" />
|
||||
<Skeleton className="h-10 w-24" />
|
||||
<Skeleton className="h-10 w-24 dark:bg-gray-600" />
|
||||
<Skeleton className="h-10 w-24 dark:bg-gray-600" />
|
||||
</div>
|
||||
</div>
|
||||
);
|
||||
@@ -166,41 +169,41 @@ export function InvoiceViewSkeleton() {
|
||||
{/* Header */}
|
||||
<div className="flex items-start justify-between">
|
||||
<div className="space-y-2">
|
||||
<Skeleton className="h-8 w-48" />
|
||||
<Skeleton className="h-4 w-64" />
|
||||
<Skeleton className="h-8 w-48 dark:bg-gray-600" />
|
||||
<Skeleton className="h-4 w-64 dark:bg-gray-600" />
|
||||
</div>
|
||||
<Skeleton className="h-10 w-32" />
|
||||
<Skeleton className="h-10 w-32 dark:bg-gray-600" />
|
||||
</div>
|
||||
|
||||
{/* Client info */}
|
||||
<div className="grid grid-cols-1 gap-6 md:grid-cols-2">
|
||||
<div className="space-y-3">
|
||||
<Skeleton className="h-5 w-24" />
|
||||
<Skeleton className="h-4 w-full" />
|
||||
<Skeleton className="h-4 w-3/4" />
|
||||
<Skeleton className="h-4 w-1/2" />
|
||||
<Skeleton className="h-5 w-24 dark:bg-gray-600" />
|
||||
<Skeleton className="h-4 w-full dark:bg-gray-600" />
|
||||
<Skeleton className="h-4 w-3/4 dark:bg-gray-600" />
|
||||
<Skeleton className="h-4 w-1/2 dark:bg-gray-600" />
|
||||
</div>
|
||||
<div className="space-y-3">
|
||||
<Skeleton className="h-5 w-24" />
|
||||
<Skeleton className="h-4 w-full" />
|
||||
<Skeleton className="h-4 w-3/4" />
|
||||
<Skeleton className="h-5 w-24 dark:bg-gray-600" />
|
||||
<Skeleton className="h-4 w-full dark:bg-gray-600" />
|
||||
<Skeleton className="h-4 w-3/4 dark:bg-gray-600" />
|
||||
</div>
|
||||
</div>
|
||||
|
||||
{/* Items table */}
|
||||
<div className="rounded-lg border">
|
||||
<div className="border-b p-4">
|
||||
<Skeleton className="h-5 w-32" />
|
||||
<div className="rounded-lg border dark:border-gray-700 dark:bg-gray-800/90">
|
||||
<div className="border-b p-4 dark:border-gray-700">
|
||||
<Skeleton className="h-5 w-32 dark:bg-gray-600" />
|
||||
</div>
|
||||
<div className="p-4">
|
||||
<div className="space-y-3">
|
||||
{Array.from({ length: 3 }).map((_, i) => (
|
||||
<div key={i} className="flex items-center gap-4">
|
||||
<Skeleton className="h-4 w-20" />
|
||||
<Skeleton className="h-4 flex-1" />
|
||||
<Skeleton className="h-4 w-16" />
|
||||
<Skeleton className="h-4 w-20" />
|
||||
<Skeleton className="h-4 w-24" />
|
||||
<Skeleton className="h-4 w-20 dark:bg-gray-600" />
|
||||
<Skeleton className="h-4 flex-1 dark:bg-gray-600" />
|
||||
<Skeleton className="h-4 w-16 dark:bg-gray-600" />
|
||||
<Skeleton className="h-4 w-20 dark:bg-gray-600" />
|
||||
<Skeleton className="h-4 w-24 dark:bg-gray-600" />
|
||||
</div>
|
||||
))}
|
||||
</div>
|
||||
@@ -210,8 +213,8 @@ export function InvoiceViewSkeleton() {
|
||||
{/* Total */}
|
||||
<div className="flex justify-end">
|
||||
<div className="space-y-2">
|
||||
<Skeleton className="h-6 w-32" />
|
||||
<Skeleton className="h-8 w-40" />
|
||||
<Skeleton className="h-6 w-32 dark:bg-gray-600" />
|
||||
<Skeleton className="h-8 w-40 dark:bg-gray-600" />
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
|
||||
@@ -646,39 +646,39 @@ export function UniversalTable({ resource }: UniversalTableProps) {
|
||||
return Array.from({ length: skeletonCount }).map((_, index) => (
|
||||
<TableRow key={`skeleton-${index}`}>
|
||||
<TableCell className="px-4 py-4">
|
||||
<Skeleton className="h-4 w-4" />
|
||||
<Skeleton className="h-4 w-4 dark:bg-gray-600" />
|
||||
</TableCell>
|
||||
<TableCell className="px-4 py-4">
|
||||
<Skeleton className="h-4 w-32" />
|
||||
<Skeleton className="h-4 w-32 dark:bg-gray-600" />
|
||||
</TableCell>
|
||||
<TableCell className="px-4 py-4">
|
||||
<Skeleton className="h-4 w-40" />
|
||||
<Skeleton className="h-4 w-40 dark:bg-gray-600" />
|
||||
</TableCell>
|
||||
<TableCell className="px-4 py-4">
|
||||
<Skeleton className="h-4 w-28" />
|
||||
<Skeleton className="h-4 w-28 dark:bg-gray-600" />
|
||||
</TableCell>
|
||||
{resource === "invoices" && (
|
||||
<>
|
||||
<TableCell className="px-4 py-4">
|
||||
<Skeleton className="h-4 w-20" />
|
||||
<Skeleton className="h-4 w-20 dark:bg-gray-600" />
|
||||
</TableCell>
|
||||
<TableCell className="px-4 py-4">
|
||||
<Skeleton className="h-4 w-24" />
|
||||
<Skeleton className="h-4 w-24 dark:bg-gray-600" />
|
||||
</TableCell>
|
||||
</>
|
||||
)}
|
||||
{resource === "businesses" && (
|
||||
<>
|
||||
<TableCell className="px-4 py-4">
|
||||
<Skeleton className="h-4 w-28" />
|
||||
<Skeleton className="h-4 w-28 dark:bg-gray-600" />
|
||||
</TableCell>
|
||||
<TableCell className="px-4 py-4">
|
||||
<Skeleton className="h-4 w-16" />
|
||||
<Skeleton className="h-4 w-16 dark:bg-gray-600" />
|
||||
</TableCell>
|
||||
</>
|
||||
)}
|
||||
<TableCell className="px-4 py-4">
|
||||
<Skeleton className="h-8 w-8 rounded" />
|
||||
<Skeleton className="h-8 w-8 rounded dark:bg-gray-600" />
|
||||
</TableCell>
|
||||
</TableRow>
|
||||
));
|
||||
@@ -1258,9 +1258,9 @@ export function UniversalTable({ resource }: UniversalTableProps) {
|
||||
key={`skeleton-card-${index}`}
|
||||
className="flex flex-col gap-2 rounded-2xl border border-gray-200 bg-white/90 p-4 shadow-xl dark:border-gray-700 dark:bg-gray-800/90"
|
||||
>
|
||||
<Skeleton className="h-6 w-32" />
|
||||
<Skeleton className="h-4 w-40" />
|
||||
<Skeleton className="h-4 w-28" />
|
||||
<Skeleton className="h-6 w-32 dark:bg-gray-600" />
|
||||
<Skeleton className="h-4 w-40 dark:bg-gray-600" />
|
||||
<Skeleton className="h-4 w-28 dark:bg-gray-600" />
|
||||
</div>
|
||||
))
|
||||
) : filteredAndSortedData.length === 0 ? (
|
||||
|
||||
Reference in New Issue
Block a user