refactor: simplify StatCard UI by removing background containers and applying icon colors directly
This commit is contained in:
parent
c324e1d5cb
commit
43221dd274
@ -27,11 +27,8 @@ const formatDate = (value?: string | null): string => {
|
||||
|
||||
const StatCard = ({ icon: Icon, label, value, color, style }: { icon: any, label: string, value: number, color?: string, style?: React.CSSProperties }) => (
|
||||
<div className="bg-white border border-[rgba(0,0,0,0.08)] rounded-xl p-4 flex items-center gap-4 shadow-sm">
|
||||
<div
|
||||
className={cn("w-12 h-12 rounded-lg flex items-center justify-center shrink-0", color)}
|
||||
style={style}
|
||||
>
|
||||
<Icon className="w-6 h-6 text-white" />
|
||||
<div className="shrink-0">
|
||||
<Icon className={cn("w-7 h-7", color)} style={style} />
|
||||
</div>
|
||||
<div>
|
||||
<div className="text-2xl font-bold text-gray-900">{value}</div>
|
||||
@ -215,25 +212,25 @@ const Tasks = (): ReactElement => {
|
||||
icon={Inbox}
|
||||
label="Pending Tasks"
|
||||
value={counts?.pending || 0}
|
||||
style={{ backgroundColor: primaryColor }}
|
||||
style={{ color: primaryColor }}
|
||||
/>
|
||||
<StatCard
|
||||
icon={Clock}
|
||||
label="Overdue"
|
||||
value={counts?.overdue || 0}
|
||||
color="bg-red-500"
|
||||
color="text-red-500"
|
||||
/>
|
||||
<StatCard
|
||||
icon={Calendar}
|
||||
label="Due Soon"
|
||||
value={counts?.due_soon || 0}
|
||||
color="bg-yellow-500"
|
||||
color="text-yellow-500"
|
||||
/>
|
||||
<StatCard
|
||||
icon={CheckCircle2}
|
||||
label="Completed (Week)"
|
||||
value={counts?.completed_this_week || 0}
|
||||
color="bg-green-500"
|
||||
color="text-green-500"
|
||||
/>
|
||||
</div>
|
||||
|
||||
|
||||
Loading…
Reference in New Issue
Block a user