Skip to content

Commit 6fc229d

Browse files
author
raineer
committed
fix top cards
1 parent 181a3a4 commit 6fc229d

3 files changed

Lines changed: 42 additions & 69 deletions

File tree

‎apps/codebility/app/home/admin-dashboard/_components/AdminDashboardApplicantStatusPie.tsx‎

Lines changed: 16 additions & 27 deletions
Original file line numberDiff line numberDiff line change
@@ -14,7 +14,6 @@ import {
1414
ChartLegendContent,
1515
} from "@/components/ui/chart";
1616
import { Pie, PieChart } from "recharts";
17-
import { cn } from "@/lib/utils";
1817

1918
interface ApplicantStatusCounts extends Record<string, number> {}
2019

@@ -29,20 +28,15 @@ export default function AdminDashboardApplicantStatusPie({
2928

3029
if (!data)
3130
return (
32-
<Card
33-
className={cn(
34-
"flex h-full flex-col",
35-
// Light mode - clean white
36-
"bg-white border-gray-200",
37-
// Dark mode - Home's silver gradient
38-
"dark:bg-gradient-to-r dark:from-[#464646] dark:to-[#a8a8a8]"
39-
)}
40-
>
41-
<CardHeader className="items-center pb-0">
42-
<CardTitle className="text-lg dark:text-white">{title}</CardTitle>
31+
<Card className="flex h-full flex-col relative overflow-hidden">
32+
{/* Gradient background - only visible in dark mode */}
33+
<div className="absolute inset-0 bg-gradient-to-br from-customBlue-950/10 to-purple-950/10 dark:block hidden" />
34+
35+
<CardHeader className="relative items-center pb-0">
36+
<CardTitle className="text-lg">{title}</CardTitle>
4337
</CardHeader>
44-
<CardContent className="flex flex-1 items-center justify-center">
45-
<p className="text-muted-foreground dark:text-white/70">No data available</p>
38+
<CardContent className="relative flex flex-1 items-center justify-center">
39+
<p className="text-muted-foreground">No data available</p>
4640
</CardContent>
4741
</Card>
4842
);
@@ -66,22 +60,17 @@ export default function AdminDashboardApplicantStatusPie({
6660
);
6761

6862
return (
69-
<Card
70-
className={cn(
71-
"flex h-full flex-col",
72-
// Light mode - clean white
73-
"bg-white border-gray-200",
74-
// Dark mode - Home's silver gradient
75-
"dark:bg-gradient-to-r dark:from-[#464646] dark:to-[#a8a8a8]"
76-
)}
77-
>
78-
<CardHeader className="items-center pb-0">
79-
<CardTitle className="text-lg dark:text-white">{title}</CardTitle>
80-
<CardDescription className="text-center text-sm dark:text-white/70">
63+
<Card className="flex h-full flex-col relative overflow-hidden">
64+
{/* Gradient background - only visible in dark mode */}
65+
<div className="absolute inset-0 bg-gradient-to-br from-customBlue-950/10 to-purple-950/10 dark:block hidden" />
66+
67+
<CardHeader className="relative items-center pb-0">
68+
<CardTitle className="text-lg">{title}</CardTitle>
69+
<CardDescription className="text-center text-sm">
8170
Distribution of application statuses
8271
</CardDescription>
8372
</CardHeader>
84-
<CardContent className="flex-1 pb-0">
73+
<CardContent className="relative flex-1 pb-0">
8574
<ChartContainer
8675
config={chartConfig}
8776
className="mx-auto aspect-square max-h-[350px]"

‎apps/codebility/app/home/admin-dashboard/_components/AdminDashboardMonthlyApplicantsLineChart.tsx‎

Lines changed: 10 additions & 15 deletions
Original file line numberDiff line numberDiff line change
@@ -21,7 +21,6 @@ import {
2121
ResponsiveContainer,
2222
XAxis,
2323
} from "recharts";
24-
import { cn } from "@/lib/utils";
2524

2625
interface AdminDashboardMonthlyApplicantsLineChartProp {
2726
dateApplied?: string[];
@@ -75,19 +74,15 @@ export default function AdminDashboardMonthlyApplicantsLineChart({
7574
} satisfies ChartConfig;
7675

7776
return (
78-
<Card
79-
className={cn(
80-
// Light mode - clean white
81-
"bg-white border-gray-200",
82-
// Dark mode - Home's gold gradient
83-
"dark:bg-gradient-to-r dark:from-[#9c813b] dark:to-[#ecc258]"
84-
)}
85-
>
86-
<CardHeader>
87-
<CardTitle className="text-lg dark:text-white">Monthly Applicants</CardTitle>
88-
<CardDescription className="dark:text-white/70">{description}</CardDescription>
77+
<Card className="relative overflow-hidden">
78+
{/* Gradient background - only visible in dark mode */}
79+
<div className="absolute inset-0 bg-gradient-to-br from-customBlue-950/10 to-purple-950/10 dark:block hidden" />
80+
81+
<CardHeader className="relative">
82+
<CardTitle className="text-lg">Monthly Applicants</CardTitle>
83+
<CardDescription>{description}</CardDescription>
8984
</CardHeader>
90-
<CardContent className="h-80">
85+
<CardContent className="relative h-80">
9186
<ResponsiveContainer width="100%" height="100%">
9287
<ChartContainer config={chartConfig}>
9388
<LineChart
@@ -132,8 +127,8 @@ export default function AdminDashboardMonthlyApplicantsLineChart({
132127
</ChartContainer>
133128
</ResponsiveContainer>
134129
</CardContent>
135-
<CardFooter className="flex-col items-start gap-2 text-sm">
136-
<div className="leading-none text-muted-foreground dark:text-white/70">
130+
<CardFooter className="relative flex-col items-start gap-2 text-sm">
131+
<div className="leading-none text-muted-foreground">
137132
Showing monthly applicants for the current and previous 5 months
138133
</div>
139134
</CardFooter>

‎apps/codebility/app/home/admin-dashboard/_components/AdminDashboardProjectsPie.tsx‎

Lines changed: 16 additions & 27 deletions
Original file line numberDiff line numberDiff line change
@@ -14,7 +14,6 @@ import {
1414
ChartLegendContent,
1515
} from "@/components/ui/chart";
1616
import { Pie, PieChart } from "recharts";
17-
import { cn } from "@/lib/utils";
1817

1918
interface ProjectCategoryCounts extends Record<string, number> {}
2019

@@ -29,20 +28,15 @@ export default function AdminDashboardProjectsPie({
2928

3029
if (!data)
3130
return (
32-
<Card
33-
className={cn(
34-
"flex h-full flex-col",
35-
// Light mode - clean white
36-
"bg-white border-gray-200",
37-
// Dark mode - Home's bronze gradient
38-
"dark:bg-gradient-to-r dark:from-[#563c1e] dark:to-[#ba8240]"
39-
)}
40-
>
41-
<CardHeader className="items-center pb-0">
42-
<CardTitle className="text-lg dark:text-white">{title}</CardTitle>
31+
<Card className="flex h-full flex-col relative overflow-hidden">
32+
{/* Gradient background - only visible in dark mode */}
33+
<div className="absolute inset-0 bg-gradient-to-br from-customBlue-950/10 to-purple-950/10 dark:block hidden" />
34+
35+
<CardHeader className="relative items-center pb-0">
36+
<CardTitle className="text-lg">{title}</CardTitle>
4337
</CardHeader>
44-
<CardContent className="flex flex-1 items-center justify-center">
45-
<p className="text-muted-foreground dark:text-white/70">No data available</p>
38+
<CardContent className="relative flex flex-1 items-center justify-center">
39+
<p className="text-muted-foreground">No data available</p>
4640
</CardContent>
4741
</Card>
4842
);
@@ -71,22 +65,17 @@ export default function AdminDashboardProjectsPie({
7165
}, {} as ChartConfig);
7266

7367
return (
74-
<Card
75-
className={cn(
76-
"flex h-full flex-col",
77-
// Light mode - clean white
78-
"bg-white border-gray-200",
79-
// Dark mode - Home's bronze gradient
80-
"dark:bg-gradient-to-r dark:from-[#563c1e] dark:to-[#ba8240]"
81-
)}
82-
>
83-
<CardHeader className="items-center pb-0">
84-
<CardTitle className="text-lg dark:text-white">{title}</CardTitle>
85-
<CardDescription className="text-center text-sm dark:text-white/70">
68+
<Card className="flex h-full flex-col relative overflow-hidden">
69+
{/* Gradient background - only visible in dark mode */}
70+
<div className="absolute inset-0 bg-gradient-to-br from-customBlue-950/10 to-purple-950/10 dark:block hidden" />
71+
72+
<CardHeader className="relative items-center pb-0">
73+
<CardTitle className="text-lg">{title}</CardTitle>
74+
<CardDescription className="text-center text-sm">
8675
Distribution by project categories
8776
</CardDescription>
8877
</CardHeader>
89-
<CardContent className="flex-1 pb-0">
78+
<CardContent className="relative flex-1 pb-0">
9079
<ChartContainer
9180
config={chartConfig}
9281
className="mx-auto aspect-square max-h-[350px]"

0 commit comments

Comments
 (0)