admin/dyolink
0
0
Fork 0
Code Issues 24 Pull Requests Actions Packages Projects 1 Releases Wiki Activity

improvement: badge & card components colour pallete updated so their text become more readable in light mode.

Browse Source
This commit is contained in:
Admin
2026-05-08 13:56:33 +03:30
parent f314c116ec
commit dcc4b10f00
8 changed files with 231 additions and 55 deletions
Download Patch File Download Diff File Expand all files Collapse all files

15
frontend/src/app/(dashboard)/billing/page.tsx
View File

@@ -4,6 +4,7 @@ import { useState } from 'react';
import { Pencil } from 'lucide-react';
import { Button } from '@/components/ui/common/Button';
import { Badge } from '@/components/ui/common/Badge';
import { Card } from '@/components/ui/common/Card';
import { Table } from '@/components/ui/common/Table';
import { SearchBar } from '@/components/ui/common/SearchBar';
import { useAuth } from '@/lib/hooks/useAuth';
@@ -195,19 +196,19 @@ export default function BillingPage() {
}
function StatCard({ title, count, amount, color }: StatCardProps) {
const colors: Record<StatCardColor, string> = {
blue: 'bg-sky-900/30 text-sky-300 border-sky-700/60',
yellow: 'bg-amber-900/30 text-amber-300 border-amber-700/60',
green: 'bg-emerald-900/30 text-emerald-300 border-emerald-700/60',
red: 'bg-red-950/30 text-red-300 border-red-700/60',
blue: '!bg-purpose-visit-bg !text-purpose-visit-fg !border-purpose-visit-border',
yellow: '!bg-badge-warning-bg !text-badge-warning-fg !border-badge-warning-border',
green: '!bg-badge-success-bg !text-badge-success-fg !border-badge-success-border',
red: '!bg-badge-danger-bg !text-badge-danger-fg !border-badge-danger-border',
};
return (
<div className={`p-4 rounded-xl border ${colors[color]}`}>
<p className="text-sm font-medium opacity-80">{title}</p>
<Card className={`${colors[color]}`}>
<p className="text-sm font-medium">{title}</p>
<p className="text-2xl font-bold mt-1">{count}</p>
<p className="text-sm font-medium mt-1">
${amount.toLocaleString()}
</p>
</div>
</Card>
);
}