Skip to content

Commit dad974e

Browse files
Zeff01claude
Zeff01
and
claude
committed
feat: implement glassmorphism design and fix mobile UX issues
- Applied glassmorphism effects across kanban, interns, and my-team pages - Fixed mobile kanban UX with dropdown-based task movement - Resolved button overlapping issues in mobile view - Enhanced tooltip positioning and modal styling - Improved responsive layouts for desktop and mobile 🤖 Generated with [Claude Code](https://claude.ai/code) Co-Authored-By: Claude <noreply@anthropic.com>
1 parent 84f3a0e commit dad974e

39 files changed

Lines changed: 522 additions & 382 deletions

‎apps/codebility/app/(marketing)/_shared/CodevsSection.tsx‎

Lines changed: 2 additions & 2 deletions
Original file line numberDiff line numberDiff line change
@@ -8,8 +8,8 @@ interface SectionProps {
88

99
const Section: React.FC<SectionProps> = ({ children, className = "", id }) => {
1010
return (
11-
<section id={id} className={`mx-auto py-8 lg:py-16 ${className}`}>
12-
<div className="flex flex-col items-center justify-center space-y-16">
11+
<section id={id} className={`mx-auto px-4 sm:px-6 lg:px-8 py-8 lg:py-16 ${className}`}>
12+
<div className="flex flex-col items-center justify-center space-y-16 max-w-7xl mx-auto">
1313
{children}
1414
</div>
1515
</section>

‎apps/codebility/app/(marketing)/profiles/_components/CodevCard.tsx‎

Lines changed: 16 additions & 13 deletions
Original file line numberDiff line numberDiff line change
@@ -37,27 +37,27 @@ const STATUS_CONFIG: Record<
3737
> = {
3838
TRAINING: {
3939
label: "Training",
40-
className: "bg-yellow-100 text-yellow-800 dark:bg-yellow-900/20 dark:text-yellow-400",
40+
className: "bg-yellow-500/20 backdrop-blur-sm text-yellow-200 border border-yellow-500/30 dark:bg-yellow-500/10 dark:text-yellow-300",
4141
},
4242
GRADUATED: {
4343
label: "Graduated",
44-
className: "bg-green-100 text-green-800 dark:bg-green-900/20 dark:text-green-400",
44+
className: "bg-green-500/20 backdrop-blur-sm text-green-200 border border-green-500/30 dark:bg-green-500/10 dark:text-green-300",
4545
},
4646
INACTIVE: {
4747
label: "Inactive",
48-
className: "bg-gray-100 text-gray-800 dark:bg-gray-900/20 dark:text-gray-400",
48+
className: "bg-gray-500/20 backdrop-blur-sm text-gray-200 border border-gray-500/30 dark:bg-gray-500/10 dark:text-gray-300",
4949
},
5050
MENTOR: {
5151
label: "Mentor",
52-
className: "bg-purple-100 text-purple-800 dark:bg-purple-900/20 dark:text-purple-400",
52+
className: "bg-purple-500/20 backdrop-blur-sm text-purple-200 border border-purple-500/30 dark:bg-purple-500/10 dark:text-purple-300",
5353
},
5454
ADMIN: {
5555
label: "Admin",
56-
className: "bg-blue-100 text-blue-800 dark:bg-blue-900/20 dark:text-blue-400",
56+
className: "bg-blue-500/20 backdrop-blur-sm text-blue-200 border border-blue-500/30 dark:bg-blue-500/10 dark:text-blue-300",
5757
},
5858
DEPLOYED: {
5959
label: "Deployed",
60-
className: "bg-indigo-100 text-indigo-800 dark:bg-indigo-900/20 dark:text-indigo-400",
60+
className: "bg-indigo-500/20 backdrop-blur-sm text-indigo-200 border border-indigo-500/30 dark:bg-indigo-500/10 dark:text-indigo-300",
6161
},
6262
};
6363

@@ -118,7 +118,10 @@ const CodevCard = ({ codev, color }: Props) => {
118118
onMouseEnter={() => setHovered(true)}
119119
onMouseLeave={() => setHovered(false)}
120120
>
121-
<div className="bg-gray-900 dark:bg-black-500 hover:bg-gray-800 dark:hover:bg-black-800 flex h-full w-full flex-col items-center justify-between rounded-lg p-4 shadow-2xl transition-colors">
121+
<div className="bg-white/10 backdrop-blur-md dark:bg-white/5 hover:bg-white/20 dark:hover:bg-white/10 flex h-full w-full flex-col items-center justify-between rounded-lg p-4 shadow-2xl transition-all duration-300 border border-white/20 dark:border-white/10 relative overflow-hidden group">
122+
{/* Background decoration */}
123+
<div className="absolute inset-0 bg-gradient-to-br from-customBlue-50/30 to-purple-50/30 dark:from-customBlue-950/10 dark:to-purple-950/10 opacity-0 group-hover:opacity-100 transition-opacity duration-300" />
124+
<div className="absolute -top-4 -right-4 h-32 w-32 rounded-full bg-gradient-to-br from-yellow-400/10 to-orange-400/10 blur-2xl opacity-0 group-hover:opacity-100 transition-opacity duration-500" />
122125
<div className="grid w-full grid-cols-4 gap-2">
123126
<div className="col-span-1" />
124127
<div className="relative col-span-2 flex justify-center">
@@ -163,7 +166,7 @@ const CodevCard = ({ codev, color }: Props) => {
163166
whiteSpace: "nowrap",
164167
}}
165168
className={cn(
166-
"absolute -top-8 right-1/2 z-50 flex -translate-x-1/2 transform flex-col items-center justify-center rounded-md px-4 py-2 shadow-xl",
169+
"absolute -top-8 right-1/2 z-50 flex -translate-x-1/2 transform flex-col items-center justify-center rounded-lg px-4 py-2 shadow-xl",
167170
statusConfig.className,
168171
)}
169172
>
@@ -192,13 +195,13 @@ const CodevCard = ({ codev, color }: Props) => {
192195
<Button
193196
variant="outline"
194197
size="icon"
195-
className="bg-gray-800 dark:bg-black-500 hover:bg-gray-700 dark:hover:bg-black-600 h-8 w-8 rounded-full transition-colors"
198+
className="bg-white/20 backdrop-blur-sm dark:bg-white/10 hover:bg-white/30 dark:hover:bg-white/20 border-white/30 dark:border-white/20 h-8 w-8 rounded-full transition-all duration-300"
196199
>
197200
<BookOpenIcon className="h-3.5 w-3.5" />
198201
</Button>
199202
</Link>
200203
</TooltipTrigger>
201-
<TooltipContent className="bg-gray-900 dark:bg-slate-700 px-2 py-1 text-xs text-white">
204+
<TooltipContent className="bg-white/10 backdrop-blur-md dark:bg-white/5 border border-white/20 dark:border-white/10 px-2 py-1 text-xs text-white">
202205
Read Bio
203206
</TooltipContent>
204207
</Tooltip>
@@ -207,13 +210,13 @@ const CodevCard = ({ codev, color }: Props) => {
207210
</div>
208211
<div className="flex flex-col items-center gap-0.5">
209212
<div className="flex flex-col gap-1 text-center">
210-
<p className="md:text-md text-sm capitalize text-gray-900 dark:text-white lg:text-base">
213+
<p className="md:text-md text-sm capitalize text-white dark:text-white lg:text-base relative z-10">
211214
{codev.first_name} {codev.last_name}
212215
</p>
213216
{codev.display_position ? (
214-
<p className="text-sm text-gray-600 dark:text-gray-300">{codev.display_position}</p>
217+
<p className="text-sm text-gray-200 dark:text-gray-300 relative z-10">{codev.display_position}</p>
215218
) : (
216-
<div className="text-sm lg:text-base">&nbsp;</div>
219+
<div className="text-sm lg:text-base relative z-10">&nbsp;</div>
217220
)}
218221
</div>
219222
</div>

‎apps/codebility/app/(marketing)/profiles/_components/CodevContainer.tsx‎

Lines changed: 6 additions & 6 deletions
Original file line numberDiff line numberDiff line change
@@ -9,23 +9,23 @@ import { motion } from "framer-motion";
99

1010
export default function CodevContainer() {
1111
return (
12-
<div className="flex flex-col gap-4">
12+
<div className="flex flex-col gap-6 relative">
1313
<motion.div
1414
variants={fadeInOutDownToUp}
1515
initial="hidden"
1616
whileInView="visible"
17-
className="mx-auto"
17+
className="mx-auto relative z-10"
1818
>
19-
<H2 className="text-white">Codevs</H2>
19+
<H2 className="text-white drop-shadow-lg">Codevs</H2>
2020
</motion.div>
2121
<motion.div
2222
variants={fadeInOutDownToUp}
2323
initial="hidden"
2424
whileInView="visible"
25-
className="text-gray mx-auto max-w-[650px] text-center"
25+
className="mx-auto max-w-[700px] text-center relative z-10 bg-white/5 backdrop-blur-sm rounded-2xl p-6 border border-white/10 shadow-xl"
2626
>
27-
<Heading3>Meet Our Skilled Developer Network</Heading3>
28-
<IntroText>
27+
<Heading3 className="text-white mb-4">Meet Our Skilled Developer Network</Heading3>
28+
<IntroText className="text-gray-200">
2929
Discover our carefully vetted CoDevs ready to join your team. Each developer
3030
brings proven expertise, strong communication skills, and a passion for delivering
3131
exceptional results on your projects.

‎apps/codebility/app/(marketing)/profiles/_components/CodevList.tsx‎

Lines changed: 2 additions & 2 deletions
Original file line numberDiff line numberDiff line change
@@ -51,14 +51,14 @@ export default function CodevList({ codevs }: Props) {
5151
}
5252

5353
return (
54-
<div className="m-auto h-full w-full max-w-6xl">
54+
<div className="m-auto h-full w-full max-w-7xl px-4 sm:px-6 lg:px-8">
5555
<CodevListFilter
5656
selectedPosition={selectedPosition}
5757
setSelectedPosition={setSelectedPosition}
5858
users={codevs}
5959
/>
6060
<div
61-
className={`grid h-full w-full grid-cols-1 gap-4 sm:grid-cols-2 md:grid-cols-3 lg:grid-cols-4 ${
61+
className={`grid h-full w-full grid-cols-1 gap-6 sm:grid-cols-2 md:grid-cols-3 lg:grid-cols-4 ${
6262
paginatedUsers.length < 5 ? "xl:grid-cols-4" : "xl:grid-cols-5"
6363
}`}
6464
>

‎apps/codebility/app/(marketing)/profiles/_components/CodevListFilter.tsx‎

Lines changed: 8 additions & 8 deletions
Original file line numberDiff line numberDiff line change
@@ -39,33 +39,33 @@ const CodevListFilter: React.FC<Props> = ({
3939
};
4040

4141
return (
42-
<div className="mb-6 flex w-full flex-col items-center justify-between p-3">
43-
<div className="flex w-full max-w-80 flex-col">
42+
<div className="mb-8 flex w-full flex-col items-center justify-between p-4">
43+
<div className="flex w-full max-w-sm flex-col">
4444
<Select value={selectedPosition} onValueChange={setSelectedPosition}>
4545
<SelectTrigger
4646
aria-label="Position"
47-
className="text-md bg-gray-100 dark:bg-dark-100 h-11 w-full rounded-full border border-gray-200 dark:border-gray-700 px-5 text-gray-900 dark:text-white"
47+
className="text-md bg-white/10 backdrop-blur-sm dark:bg-white/5 h-12 w-full rounded-full border border-white/20 dark:border-white/10 px-6 text-white dark:text-white shadow-lg hover:bg-white/20 dark:hover:bg-white/10 transition-all duration-300"
4848
>
4949
<SelectValue placeholder="Filter" />
5050
</SelectTrigger>
5151
<SelectContent
5252
ref={selectGroupRef}
53-
className="bg-white dark:bg-dark-300 relative rounded-xl text-gray-900 dark:text-white border border-gray-200 dark:border-gray-700"
53+
className="bg-white/10 backdrop-blur-md dark:bg-white/5 relative rounded-xl text-white dark:text-white border border-white/20 dark:border-white/10 shadow-xl"
5454
>
5555
<SelectGroup className="mt-12">
5656
{positions.map((position, i) => (
5757
<SelectItem
5858
key={i}
5959
value={position}
60-
className="cursor-pointer text-primary dark:text-white"
60+
className="cursor-pointer text-white dark:text-white hover:bg-white/20 dark:hover:bg-white/10 transition-colors"
6161
>
6262
{position}
6363
</SelectItem>
6464
))}
65-
<div className="border-gray-200 dark:border-dark-200 bg-white dark:bg-dark-300 fixed left-0 right-0 top-0 flex w-full flex-row items-center justify-between border-b px-3 py-2">
66-
<span className="text-gray-900 dark:text-white">Filter by</span>
65+
<div className="border-white/20 dark:border-white/10 bg-white/10 backdrop-blur-sm dark:bg-white/5 fixed left-0 right-0 top-0 flex w-full flex-row items-center justify-between border-b px-3 py-2">
66+
<span className="text-white dark:text-white font-medium">Filter by</span>
6767
<Button
68-
className="w-auto bg-transparent hover:bg-gray-100 dark:hover:bg-gray-800 text-gray-900 dark:text-white"
68+
className="w-auto bg-transparent hover:bg-white/20 dark:hover:bg-white/10 text-white dark:text-white transition-all duration-200"
6969
variant="default"
7070
size="sm"
7171
onClick={handleSelectPosition}

‎apps/codebility/app/(marketing)/profiles/page.tsx‎

Lines changed: 6 additions & 2 deletions
Original file line numberDiff line numberDiff line change
@@ -37,10 +37,14 @@ export default async function Profiles() {
3737
<>
3838
<Section
3939
id="codevs"
40-
className="from-black-500 relative w-full bg-gradient-to-b"
40+
className="relative w-full bg-gradient-to-b from-slate-900 to-slate-950 min-h-screen"
4141
>
4242
<div className="bg-code-pattern absolute inset-0 bg-repeat opacity-5"></div>
43-
<div className="relative flex flex-col gap-8">
43+
{/* Glassmorphism background decoration */}
44+
<div className="absolute inset-0 bg-gradient-to-br from-customBlue-950/20 to-purple-950/20" />
45+
<div className="absolute -top-4 -right-4 h-96 w-96 rounded-full bg-gradient-to-br from-yellow-400/10 to-orange-400/10 blur-3xl" />
46+
<div className="absolute -bottom-4 -left-4 h-96 w-96 rounded-full bg-gradient-to-br from-purple-400/10 to-pink-400/10 blur-3xl" />
47+
<div className="relative flex flex-col gap-8 z-10">
4448
<CodevContainer />
4549
<Suspense fallback={<UsersSkeleton />}>
4650
<CodevList codevs={sortedCodevs} />

‎apps/codebility/app/home/(dashboard)/_components/DashboardCertificate.tsx‎

Lines changed: 21 additions & 23 deletions
Original file line numberDiff line numberDiff line change
@@ -17,29 +17,27 @@ const DashboardCertificate = () => {
1717
}
1818

1919
return (
20-
<div className="absolute left-4 top-4 z-10">
21-
<Tooltip>
22-
<TooltipTrigger asChild>
23-
<Button
24-
size="icon"
25-
variant="ghost"
26-
className={cn(
27-
"rounded-full inline-flex items-center justify-center",
28-
"transition-colors duration-200",
29-
"hover:bg-gray-100 dark:hover:bg-gray-800 cursor-pointer"
30-
)}
31-
onClick={() => {
32-
router.push("/home/certificate-preview");
33-
}}
34-
>
35-
<CertificateIcon className="h-6 w-6 text-[#9747FF]" />
36-
</Button>
37-
</TooltipTrigger>
38-
<TooltipContent side="bottom" align="start">
39-
{user?.role_id === 1 ? "View certificates (Admin)" : "View your certificate"}
40-
</TooltipContent>
41-
</Tooltip>
42-
</div>
20+
<Tooltip>
21+
<TooltipTrigger asChild>
22+
<Button
23+
size="icon"
24+
variant="ghost"
25+
className={cn(
26+
"rounded-full inline-flex items-center justify-center",
27+
"transition-colors duration-200",
28+
"hover:bg-gray-100 dark:hover:bg-gray-800 cursor-pointer"
29+
)}
30+
onClick={() => {
31+
router.push("/home/certificate-preview");
32+
}}
33+
>
34+
<CertificateIcon className="h-6 w-6 text-[#9747FF]" />
35+
</Button>
36+
</TooltipTrigger>
37+
<TooltipContent side="bottom" align="start">
38+
{user?.role_id === 1 ? "View certificates (Admin)" : "View your certificate"}
39+
</TooltipContent>
40+
</Tooltip>
4341
);
4442
};
4543

‎apps/codebility/app/home/(dashboard)/_components/DashboardCompleteProfile.tsx‎

Lines changed: 20 additions & 20 deletions
Original file line numberDiff line numberDiff line change
@@ -14,9 +14,9 @@ const Progress = ({ value, className }: { value?: number; className?: string })
1414
aria-valuemin={0}
1515
aria-valuemax={100}
1616
>
17-
<div className="w-full bg-gray-700 rounded-full h-2">
17+
<div className="w-full bg-white/20 dark:bg-white/10 rounded-full h-2">
1818
<div
19-
className="bg-blue-500 h-2 rounded-full transition-all duration-300"
19+
className="bg-gradient-to-r from-customBlue-500 to-purple-500 h-2 rounded-full transition-all duration-300"
2020
style={{ width: `${pct}%` }}
2121
/>
2222
</div>
@@ -36,8 +36,8 @@ const Badge = ({
3636
const base =
3737
"inline-flex items-center rounded-full px-2.5 py-0.5 text-xs font-semibold";
3838
const variants: Record<string, string> = {
39-
secondary: "bg-gray-700 text-gray-200",
40-
outline: "border border-gray-600 text-gray-300",
39+
secondary: "bg-white/20 backdrop-blur-sm text-white dark:bg-white/10 dark:text-gray-200",
40+
outline: "border border-white/30 text-white backdrop-blur-sm dark:border-white/20 dark:text-gray-300",
4141
};
4242
const variantClass = variant ? variants[variant] ?? "" : "";
4343
return (
@@ -220,25 +220,25 @@ export default function DashboardCompleteProfile({
220220
/* ------------------- Render ------------------- */
221221
if (loading) {
222222
return (
223-
<Box className="flex w-full flex-1 flex-col gap-6 relative overflow-hidden">
223+
<Box className="flex w-full flex-1 flex-col gap-6 relative overflow-hidden !bg-white/5 !backdrop-blur-2xl !border-white/10 !shadow-2xl dark:!bg-slate-900/5 dark:!border-slate-400/10 !before:absolute !before:inset-0 !before:bg-gradient-to-br !before:from-white/10 !before:to-transparent !before:pointer-events-none">
224224
<div className="space-y-4">
225225
<div className="flex items-center justify-between">
226-
<div className="h-7 w-48 bg-gray-700/50 rounded animate-pulse"></div>
227-
<div className="h-6 w-12 bg-gray-700/50 rounded-full animate-pulse"></div>
226+
<div className="h-7 w-48 bg-white/20 dark:bg-white/10 rounded animate-pulse"></div>
227+
<div className="h-6 w-12 bg-white/20 dark:bg-white/10 rounded-full animate-pulse"></div>
228228
</div>
229229

230-
<div className="w-full bg-gray-700/50 rounded-full h-2 animate-pulse"></div>
230+
<div className="w-full bg-white/20 dark:bg-white/10 rounded-full h-2 animate-pulse"></div>
231231

232232
<div className="space-y-3">
233233
{[1, 2, 3, 4, 5, 6].map((i) => (
234234
<div
235235
key={i}
236-
className="rounded-lg border border-gray-700 bg-gray-800/50 p-4 animate-pulse"
236+
className="rounded-lg border border-white/20 dark:border-white/10 bg-white/10 backdrop-blur-sm dark:bg-white/5 p-4 animate-pulse"
237237
>
238238
<div className="flex items-center gap-3">
239-
<div className="w-4 h-4 rounded-full bg-gray-700"></div>
240-
<div className="h-5 flex-1 bg-gray-700/50 rounded"></div>
241-
<div className="h-5 w-16 bg-gray-700/50 rounded-full"></div>
239+
<div className="w-4 h-4 rounded-full bg-white/30 dark:bg-white/20"></div>
240+
<div className="h-5 flex-1 bg-white/20 dark:bg-white/10 rounded"></div>
241+
<div className="h-5 w-16 bg-white/20 dark:bg-white/10 rounded-full"></div>
242242
</div>
243243
</div>
244244
))}
@@ -253,7 +253,7 @@ export default function DashboardCompleteProfile({
253253
}
254254

255255
return (
256-
<Box className="flex w-full flex-1 flex-col gap-6 relative overflow-hidden">
256+
<Box className="flex w-full flex-1 flex-col gap-6 relative overflow-hidden !bg-white/5 !backdrop-blur-2xl !border-white/10 !shadow-2xl dark:!bg-slate-900/5 dark:!border-slate-400/10 !before:absolute !before:inset-0 !before:bg-gradient-to-br !before:from-white/10 !before:to-transparent !before:pointer-events-none">
257257
<div className="space-y-4">
258258
<div className="flex items-center justify-between">
259259
<h2 className="text-xl font-semibold text-white tracking-tight">
@@ -278,26 +278,26 @@ export default function DashboardCompleteProfile({
278278
{visibleTasks.map((task) => (
279279
<div
280280
key={task.id}
281-
className="rounded-lg border border-gray-700 bg-gray-800/50 overflow-hidden"
281+
className="rounded-lg border border-white/20 dark:border-white/10 bg-white/10 backdrop-blur-sm dark:bg-white/5 overflow-hidden"
282282
>
283283
<div
284-
className="flex items-center justify-between p-4 cursor-pointer hover:bg-gray-700/50 transition-colors"
284+
className="flex items-center justify-between p-4 cursor-pointer hover:bg-white/20 dark:hover:bg-white/10 transition-colors"
285285
onClick={() => toggleDropdown(task.id)}
286286
>
287287
<div className="flex items-center gap-3 flex-1">
288288
<div
289289
className={`w-4 h-4 rounded-full border transition-all duration-300 ${
290290
completedTasks[task.id]
291291
? "bg-green-500 border-green-500"
292-
: "bg-gray-700 border-gray-600"
292+
: "bg-white/20 border-white/30 dark:bg-white/10 dark:border-white/20"
293293
}`}
294294
/>
295295

296296
<span
297297
className={`font-medium ${
298298
completedTasks[task.id]
299-
? "text-gray-500 line-through"
300-
: "text-gray-200"
299+
? "text-gray-400 line-through"
300+
: "text-white dark:text-gray-200"
301301
}`}
302302
>
303303
{task.title}
@@ -316,8 +316,8 @@ export default function DashboardCompleteProfile({
316316
</div>
317317

318318
{openDropdowns[task.id] && (
319-
<div className="px-4 pb-4 pt-2 bg-gray-900/30 border-t border-gray-700">
320-
<p className="text-sm text-gray-400">{task.description}</p>
319+
<div className="px-4 pb-4 pt-2 bg-white/5 backdrop-blur-sm border-t border-white/20 dark:border-white/10">
320+
<p className="text-sm text-gray-300 dark:text-gray-400">{task.description}</p>
321321
</div>
322322
)}
323323
</div>

0 commit comments

Comments
 (0)