Skip to content

Commit 78f01dc

Browse files
kris-marthy1kris-marthy1
committed
Theme bug fix and Compact table fix
1 parent 3fed415 commit 78f01dc

6 files changed

Lines changed: 431 additions & 280 deletions

File tree

‎apps/codebility/app/home/applicants/_components/_table/applicantDataTable.tsx‎

Lines changed: 10 additions & 10 deletions
Original file line numberDiff line numberDiff line change
@@ -190,9 +190,9 @@ function ApplicantDataTableComponent<TData extends NewApplicantType, TValue>({
190190
{header.isPlaceholder
191191
? null
192192
: flexRender(
193-
header.column.columnDef.header,
194-
header.getContext(),
195-
)}
193+
header.column.columnDef.header,
194+
header.getContext(),
195+
)}
196196
</TableHead>
197197
);
198198
})}
@@ -207,14 +207,14 @@ function ApplicantDataTableComponent<TData extends NewApplicantType, TValue>({
207207
data-state={row.getIsSelected() && "selected"}
208208
className={cn(
209209
row.original.application_status === "testing" &&
210-
row.original.applicant?.fork_url &&
211-
"bg-green bg-opacity-5",
210+
row.original.applicant?.fork_url &&
211+
"bg-green bg-opacity-5",
212212
row.original.application_status === "testing" &&
213-
toBeFailed(
214-
row.original.applicant?.test_taken,
215-
row.original.applicant?.fork_url,
216-
) &&
217-
"bg-customRed-100 bg-opacity-5",
213+
toBeFailed(
214+
row.original.applicant?.test_taken,
215+
row.original.applicant?.fork_url,
216+
) &&
217+
"bg-customRed-100 bg-opacity-5",
218218
)}
219219
>
220220
{row.getVisibleCells().map((cell) => (

‎apps/codebility/app/home/applicants/_components/_table/applicantMobileTable.tsx‎

Lines changed: 12 additions & 12 deletions
Original file line numberDiff line numberDiff line change
@@ -55,9 +55,9 @@ function ApplicantMobileTable<TData extends NewApplicantType>({
5555
{header.isPlaceholder
5656
? null
5757
: flexRender(
58-
header.column.columnDef.header,
59-
header.getContext(),
60-
)}
58+
header.column.columnDef.header,
59+
header.getContext(),
60+
)}
6161
</TableHead>
6262
))}
6363
</TableRow>
@@ -72,16 +72,16 @@ function ApplicantMobileTable<TData extends NewApplicantType>({
7272
data-state={row.getIsSelected() && "selected"}
7373
className={cn(
7474
(row.original as NewApplicantType).application_status ===
75-
"testing" &&
76-
(row.original as NewApplicantType).applicant?.fork_url &&
77-
"bg-green bg-opacity-5",
75+
"testing" &&
76+
(row.original as NewApplicantType).applicant?.fork_url &&
77+
"bg-green bg-opacity-5",
7878
(row.original as NewApplicantType).application_status ===
79-
"testing" &&
80-
toBeFailed(
81-
(row.original as NewApplicantType).applicant?.test_taken,
82-
(row.original as NewApplicantType).applicant?.fork_url,
83-
) &&
84-
"bg-customRed-100 bg-opacity-5",
79+
"testing" &&
80+
toBeFailed(
81+
(row.original as NewApplicantType).applicant?.test_taken,
82+
(row.original as NewApplicantType).applicant?.fork_url,
83+
) &&
84+
"bg-customRed-100 bg-opacity-5",
8585
)}
8686
>
8787
{row

‎apps/codebility/app/home/hire/_components/ApplicationDetailsModal.tsx‎

Lines changed: 36 additions & 32 deletions
Original file line numberDiff line numberDiff line change
@@ -74,9 +74,9 @@ export default function ApplicationDetailsModal({
7474

7575
return (
7676
<Dialog open={isOpen} onOpenChange={onClose}>
77-
<DialogContent className="max-h-[90vh] max-w-4xl overflow-y-auto overflow-x-hidden bg-gray-900 border-gray-800">
77+
<DialogContent className="max-h-[90vh] max-w-4xl overflow-y-auto overflow-x-hidden border bg-card">
7878
<DialogHeader>
79-
<DialogTitle className="text-2xl font-light text-white">
79+
<DialogTitle className="text-2xl font-light text-foreground">
8080
Application Details
8181
</DialogTitle>
8282
</DialogHeader>
@@ -85,11 +85,11 @@ export default function ApplicationDetailsModal({
8585
{/* Applicant Header */}
8686
<div className="flex items-start justify-between">
8787
<div>
88-
<h2 className="text-xl font-medium text-white">
88+
<h2 className="text-xl font-medium text-foreground">
8989
{application.first_name} {application.last_name}
9090
</h2>
91-
<p className="text-gray-400">{application.job_title || 'Position'}</p>
92-
<div className="mt-2 flex items-center gap-4 text-sm text-gray-400">
91+
<p className="text-muted-foreground">{application.job_title || 'Position'}</p>
92+
<div className="mt-2 flex items-center gap-4 text-sm text-muted-foreground">
9393
<span className="flex items-center gap-1">
9494
<Calendar className="h-4 w-4" />
9595
Applied {new Date(application.applied_at).toLocaleDateString()}
@@ -108,32 +108,32 @@ export default function ApplicationDetailsModal({
108108
value={status}
109109
onValueChange={handleStatusChange}
110110
>
111-
<SelectTrigger className="w-[140px] bg-gray-800 border-gray-700 text-white">
112-
<SelectValue className="text-white" />
111+
<SelectTrigger className="w-[140px] border bg-accent/70 text-foreground">
112+
<SelectValue className="text-foreground" />
113113
</SelectTrigger>
114-
<SelectContent className="bg-gray-800 border-gray-700 text-white">
115-
<SelectItem value="pending" className="text-gray-300 hover:text-white">Pending</SelectItem>
116-
<SelectItem value="reviewing" className="text-gray-300 hover:text-white">Reviewing</SelectItem>
117-
<SelectItem value="shortlisted" className="text-gray-300 hover:text-white">Shortlisted</SelectItem>
118-
<SelectItem value="rejected" className="text-gray-300 hover:text-white">Rejected</SelectItem>
119-
<SelectItem value="hired" className="text-gray-300 hover:text-white">Hired</SelectItem>
114+
<SelectContent className="border bg-accent/70 text-foreground">
115+
<SelectItem value="pending" className="text-muted-foreground hover:text-foreground">Pending</SelectItem>
116+
<SelectItem value="reviewing" className="text-muted-foreground hover:text-foreground">Reviewing</SelectItem>
117+
<SelectItem value="shortlisted" className="text-muted-foreground hover:text-foreground">Shortlisted</SelectItem>
118+
<SelectItem value="rejected" className="text-muted-foreground hover:text-foreground">Rejected</SelectItem>
119+
<SelectItem value="hired" className="text-muted-foreground hover:text-foreground">Hired</SelectItem>
120120
</SelectContent>
121121
</Select>
122122
</div>
123123
</div>
124124

125125
{/* Contact Information */}
126-
<div className="rounded-lg border border-gray-800 p-4">
127-
<h3 className="mb-3 text-lg font-medium text-white">Contact Information</h3>
126+
<div className="rounded-lg border bg-accent/50 p-4">
127+
<h3 className="mb-3 text-lg font-medium text-foreground">Contact Information</h3>
128128
<div className="grid gap-3">
129129
<a
130130
href={`mailto:${application.email}`}
131-
className="flex items-center gap-2 text-gray-400 hover:text-white transition-colors"
131+
className="flex items-center gap-2 text-muted-foreground hover:text-muted-foreground/50 transition-colors"
132132
>
133133
<Mail className="h-4 w-4" />
134134
{application.email}
135135
</a>
136-
<div className="flex items-center gap-2 text-gray-400">
136+
<div className="flex items-center gap-2 text-muted-foreground">
137137
<Phone className="h-4 w-4" />
138138
{application.phone}
139139
</div>
@@ -142,7 +142,7 @@ export default function ApplicationDetailsModal({
142142
href={application.linkedin}
143143
target="_blank"
144144
rel="noopener noreferrer"
145-
className="flex items-center gap-2 text-gray-400 hover:text-white transition-colors"
145+
className="flex items-center gap-2 text-muted-foreground hover:text-muted-foreground/50 transition-colors"
146146
>
147147
<Linkedin className="h-4 w-4" />
148148
LinkedIn Profile
@@ -153,7 +153,7 @@ export default function ApplicationDetailsModal({
153153
href={application.github}
154154
target="_blank"
155155
rel="noopener noreferrer"
156-
className="flex items-center gap-2 text-gray-400 hover:text-white transition-colors"
156+
className="flex items-center gap-2 text-muted-foreground hover:text-muted-foreground/50 transition-colors"
157157
>
158158
<Github className="h-4 w-4" />
159159
GitHub Profile
@@ -164,7 +164,7 @@ export default function ApplicationDetailsModal({
164164
href={application.portfolio}
165165
target="_blank"
166166
rel="noopener noreferrer"
167-
className="flex items-center gap-2 text-gray-400 hover:text-white transition-colors"
167+
className="flex items-center gap-2 text-muted-foreground hover:text-muted-foreground/50 transition-colors"
168168
>
169169
<Globe className="h-4 w-4" />
170170
Portfolio Website
@@ -175,43 +175,47 @@ export default function ApplicationDetailsModal({
175175

176176
{/* Additional Details */}
177177
{application.notes && (
178-
<div className="rounded-lg border border-gray-800 p-4">
179-
<h3 className="mb-3 text-lg font-medium text-white">Additional Information</h3>
180-
<p className="text-gray-300">
178+
<div className="rounded-lg border bg-accent/50 p-4">
179+
<h3 className="mb-3 text-lg font-medium text-foreground">Additional Information</h3>
180+
<p className="text-muted-foreground">
181181
{application.notes}
182182
</p>
183183
</div>
184184
)}
185185

186186
{/* Experience */}
187-
<div className="rounded-lg border border-gray-800 p-4">
188-
<h3 className="mb-3 flex items-center gap-2 text-lg font-medium text-white">
187+
<div className="rounded-lg border bg-accent/50 p-4">
188+
<h3 className="mb-3 flex items-center gap-2 text-lg font-medium text-foreground">
189189
<Briefcase className="h-5 w-5" />
190190
Experience
191191
</h3>
192-
<p className="text-gray-300 whitespace-pre-wrap">
192+
<p className="text-muted-foreground whitespace-pre-wrap">
193193
{application.experience}
194194
</p>
195195
</div>
196196

197197
{/* Cover Letter */}
198-
<div className="rounded-lg border border-gray-800 p-4">
199-
<h3 className="mb-3 flex items-center gap-2 text-lg font-medium text-white">
198+
<div className="rounded-lg border bg-accent/50 p-4">
199+
<h3 className="mb-3 flex items-center gap-2 text-lg font-medium text-foreground">
200200
<FileText className="h-5 w-5 flex-shrink-0" />
201201
Cover Letter
202202
</h3>
203-
<p className="text-gray-300 whitespace-pre-wrap break-words">
203+
<p className="text-muted-foreground whitespace-pre-wrap break-words">
204204
{application.cover_letter}
205205
</p>
206206
</div>
207207

208208
{/* Resume */}
209209
{application.resume_url && (
210-
<div className="rounded-lg border border-gray-800 p-4">
211-
<h3 className="mb-3 text-lg font-medium text-white">Resume</h3>
210+
<div className="rounded-lg border bg-accent/50 p-4">
211+
212+
<h3 className="mb-3 flex items-center gap-2 text-lg font-medium text-foreground">
213+
<FileText className="h-5 w-5 flex-shrink-0" />
214+
Resume
215+
</h3>
212216
<Button
213217
variant="outline"
214-
className="border-gray-700 bg-gray-800 text-white hover:bg-gray-700"
218+
className="border border-foreground bg-card text-foreground hover:bg-muted-foreground/10"
215219
onClick={async () => {
216220
if (application.resume_url) {
217221
// Construct the Supabase storage URL

‎apps/codebility/app/home/hire/_components/JobListingsTable.tsx‎

Lines changed: 23 additions & 23 deletions
Original file line numberDiff line numberDiff line change
@@ -186,7 +186,7 @@ export default function JobListingsTable() {
186186
case "Lead":
187187
return "bg-orange-500/10 text-orange-400 border-orange-500/20";
188188
default:
189-
return "bg-gray-500/10 text-gray-400 border-gray-500/20";
189+
return "bg-gray-500/10 text-muted-foreground border-gray-500/20";
190190
}
191191
};
192192

@@ -201,7 +201,7 @@ export default function JobListingsTable() {
201201
case "Internship":
202202
return "bg-indigo-500/10 text-indigo-400 border-indigo-500/20";
203203
default:
204-
return "bg-gray-500/10 text-gray-400 border-gray-500/20";
204+
return "bg-gray-500/10 text-muted-foreground border-gray-500/20";
205205
}
206206
};
207207

@@ -222,31 +222,31 @@ export default function JobListingsTable() {
222222
if (jobs.length === 0) {
223223
return (
224224
<div className="rounded-lg border border-gray-800 bg-gray-900/50 p-12 text-center">
225-
<p className="text-gray-400">No job listings yet. Create your first job listing to get started.</p>
225+
<p className="text-muted-foreground">No job listings yet. Create your first job listing to get started.</p>
226226
</div>
227227
);
228228
}
229229

230230
return (
231-
<div className="rounded-lg border border-gray-800 bg-gray-900/50 overflow-hidden">
231+
<div className="rounded-lg border bg-card overflow-hidden">
232232
<Table>
233233
<TableHeader>
234-
<TableRow className="border-gray-800 hover:bg-gray-900/50">
235-
<TableHead className="text-gray-300">Position</TableHead>
236-
<TableHead className="text-gray-300">Location</TableHead>
237-
<TableHead className="text-gray-300">Type</TableHead>
238-
<TableHead className="text-gray-300 text-center">Applications</TableHead>
239-
<TableHead className="text-gray-300">Created By</TableHead>
240-
<TableHead className="text-gray-300">Posted</TableHead>
241-
<TableHead className="text-gray-300 text-right min-w-[200px]">Actions</TableHead>
234+
<TableRow className="border-border hover:bg-muted/50 transition-colors">
235+
<TableHead className="text-foreground">Position</TableHead>
236+
<TableHead className="text-foreground">Location</TableHead>
237+
<TableHead className="text-foreground">Type</TableHead>
238+
<TableHead className="text-foreground text-center">Applications</TableHead>
239+
<TableHead className="text-foreground">Created By</TableHead>
240+
<TableHead className="text-foreground">Posted</TableHead>
241+
<TableHead className="text-foreground text-right min-w-[200px]">Actions</TableHead>
242242
</TableRow>
243243
</TableHeader>
244244
<TableBody>
245245
{jobs.map((job) => (
246-
<TableRow key={job.id} className="border-gray-800 hover:bg-gray-900/70">
246+
<TableRow key={job.id} className="border-border hover:bg-muted/30 transition-colors">
247247
<TableCell>
248248
<div>
249-
<p className="font-medium text-white">{job.title}</p>
249+
<p className="font-medium text-foreground">{job.title}</p>
250250
<div className="mt-1 flex gap-2">
251251
<Badge variant="outline" className={getLevelColor(job.level)}>
252252
{job.level}
@@ -260,7 +260,7 @@ export default function JobListingsTable() {
260260
</div>
261261
</TableCell>
262262
<TableCell>
263-
<div className="flex items-center gap-1 text-gray-400">
263+
<div className="flex items-center gap-1 text-muted-foreground">
264264
<MapPin className="h-3 w-3" />
265265
<span className="text-sm">{job.location}</span>
266266
</div>
@@ -273,7 +273,7 @@ export default function JobListingsTable() {
273273
<TableCell className="text-center">
274274
<button
275275
onClick={() => handleViewApplications(job.id)}
276-
className="group inline-flex items-center gap-1 text-gray-400 hover:text-white transition-colors"
276+
className="group inline-flex items-center gap-1 text-muted-foreground hover:text-foreground transition-colors"
277277
>
278278
<Users className="h-3.5 w-3.5" />
279279
<span className="font-medium">{job.application_count || 0}</span>
@@ -283,13 +283,13 @@ export default function JobListingsTable() {
283283
</button>
284284
</TableCell>
285285
<TableCell>
286-
<div className="flex items-center gap-1 text-gray-400">
286+
<div className="flex items-center gap-1 text-muted-foreground">
287287
<User className="h-3 w-3" />
288288
<span className="text-sm">{job.created_by?.name || "Unknown"}</span>
289289
</div>
290290
</TableCell>
291291
<TableCell>
292-
<div className="flex items-center gap-1 text-gray-400">
292+
<div className="flex items-center gap-1 text-muted-foreground">
293293
<Calendar className="h-3 w-3" />
294294
<span className="text-sm">
295295
{new Date(job.posted_date).toLocaleDateString()}
@@ -302,7 +302,7 @@ export default function JobListingsTable() {
302302
variant="outline"
303303
size="sm"
304304
onClick={() => handleViewApplications(job.id)}
305-
className="h-8 border-gray-700 bg-gray-800 text-white hover:bg-gray-700"
305+
className="h-8 bg-background border-border text-foreground transition-colors hover:bg-accent"
306306
>
307307
<Eye className="mr-2 h-3 w-3" />
308308
Applications
@@ -312,23 +312,23 @@ export default function JobListingsTable() {
312312
<Button
313313
variant="ghost"
314314
size="icon"
315-
className="group h-8 w-8 text-gray-400 hover:text-white"
315+
className="group h-8 w-8 text-muted-foreground hover:text-foreground transition-colors"
316316
>
317317
<MoreVertical className="h-4 w-4 flex-shrink-0" />
318318
<span className="sr-only">Open menu</span>
319319
</Button>
320320
</DropdownMenuTrigger>
321-
<DropdownMenuContent align="end" className="bg-gray-900 border-gray-800">
321+
<DropdownMenuContent align="end" className="bg-popover border-border">
322322
<DropdownMenuItem
323323
onClick={() => handleEdit(job)}
324-
className="text-gray-300 hover:text-white hover:bg-gray-800"
324+
className="text-foreground hover:text-foreground hover:bg-accent"
325325
>
326326
<Edit className="mr-2 h-4 w-4" />
327327
Edit Listing
328328
</DropdownMenuItem>
329329
<DropdownMenuItem
330330
onClick={() => handleDelete(job.id)}
331-
className="text-red-400 hover:text-red-300 hover:bg-gray-800"
331+
className="text-destructive hover:text-destructive hover:bg-accent "
332332
>
333333
<Trash2 className="mr-2 h-4 w-4" />
334334
Delete

0 commit comments

Comments
 (0)