Skip to content

Commit 2e63825

Browse files
CK-7vnCK-7vn
committed
refactor: css hex and badges
1 parent 54f212a commit 2e63825

48 files changed

Lines changed: 132 additions & 96 deletions

Some content is hidden

Large Commits have some content hidden by default. Use the searchbox below for content that may be hidden.

‎frontend/src/components/knowledge-center/HelpfulLinkCard.tsx‎

Lines changed: 1 addition & 1 deletion
Original file line numberDiff line numberDiff line change
@@ -190,7 +190,7 @@ export default function HelpfulLinkCard({
190190
<h3 className="text-sm font-medium text-foreground">
191191
{link.title}
192192
</h3>
193-
<p className="text-xs text-muted-foreground line-clamp-2">
193+
<p className="caption-clamp">
194194
{link.description}
195195
</p>
196196
</div>

‎frontend/src/components/knowledge-center/LibraryCard.tsx‎

Lines changed: 1 addition & 1 deletion
Original file line numberDiff line numberDiff line change
@@ -177,7 +177,7 @@ export default function LibraryCard({
177177
<h3 className="text-sm font-medium text-foreground">
178178
{library.title}
179179
</h3>
180-
<p className="text-xs text-muted-foreground line-clamp-2">
180+
<p className="caption-clamp">
181181
{library.description}
182182
</p>
183183
</div>

‎frontend/src/components/knowledge-center/VideoCard.tsx‎

Lines changed: 1 addition & 1 deletion
Original file line numberDiff line numberDiff line change
@@ -190,7 +190,7 @@ export default function VideoCard({
190190
<p className="text-xs text-muted-foreground">
191191
{video.channel_title} - {toMinutes(video.duration)}
192192
</p>
193-
<p className="text-xs text-muted-foreground line-clamp-2">
193+
<p className="caption-clamp">
194194
{available
195195
? video.description
196196
: getVideoErrorMessage(video)}

‎frontend/src/components/schedule/SessionDetailClassDetails.tsx‎

Lines changed: 4 additions & 4 deletions
Original file line numberDiff line numberDiff line change
@@ -33,7 +33,7 @@ export function SessionDetailClassDetails({
3333
</h4>
3434
<div className="space-y-3">
3535
<div className="flex items-start gap-3">
36-
<Calendar className="size-5 text-gray-400 mt-0.5 flex-shrink-0" />
36+
<Calendar className="lead-icon" />
3737
<div className="flex-1 min-w-0">
3838
<div className="text-sm text-gray-600 mb-0.5">
3939
Class
@@ -49,7 +49,7 @@ export function SessionDetailClassDetails({
4949
</div>
5050
</div>
5151
<div className="flex items-start gap-3">
52-
<Clock className="size-5 text-gray-400 mt-0.5 flex-shrink-0" />
52+
<Clock className="lead-icon" />
5353
<div className="flex-1 min-w-0">
5454
<div className="text-sm text-gray-600 mb-0.5">
5555
Time
@@ -62,7 +62,7 @@ export function SessionDetailClassDetails({
6262
</div>
6363
</div>
6464
<div className="flex items-start gap-3">
65-
<MapPin className="size-5 text-gray-400 mt-0.5 flex-shrink-0" />
65+
<MapPin className="lead-icon" />
6666
<div className="flex-1 min-w-0">
6767
<div className="text-sm text-gray-600 mb-0.5">
6868
Room
@@ -80,7 +80,7 @@ export function SessionDetailClassDetails({
8080
</div>
8181
{(originalInstructorName ?? instructorName) && (
8282
<div className="flex items-start gap-3">
83-
<Users className="size-5 text-gray-400 mt-0.5 flex-shrink-0" />
83+
<Users className="lead-icon" />
8484
<div className="flex-1 min-w-0">
8585
<div className="text-sm text-gray-600 mb-0.5">
8686
Instructor

‎frontend/src/components/schedule/SessionDetailHeader.tsx‎

Lines changed: 1 addition & 1 deletion
Original file line numberDiff line numberDiff line change
@@ -87,7 +87,7 @@ function getStatusBadge(flags: StatusFlags): ReactNode {
8787
return (
8888
<Badge
8989
variant="outline"
90-
className="bg-amber-50 text-amber-700 border-amber-200"
90+
className="badge-amber"
9191
>
9292
Missing Attendance
9393
</Badge>

‎frontend/src/components/schedule/SessionDetailStatusSection.tsx‎

Lines changed: 4 additions & 4 deletions
Original file line numberDiff line numberDiff line change
@@ -59,7 +59,7 @@ export function SessionDetailStatusSection({
5959

6060
{!isCancelled && originalInstructorName && instructorName && (
6161
<div className="flex items-start gap-2">
62-
<Users className="size-4 text-gray-600 mt-0.5 flex-shrink-0" />
62+
<Users className="lead-icon-sm" />
6363
<div className="flex-1 min-w-0">
6464
<div className="text-sm text-gray-900 mb-1">Instructor Change</div>
6565
<p className="text-sm text-gray-600">
@@ -71,7 +71,7 @@ export function SessionDetailStatusSection({
7171

7272
{!isCancelled && originalRoom && (
7373
<div className="flex items-start gap-2">
74-
<MapPin className="size-4 text-gray-600 mt-0.5 flex-shrink-0" />
74+
<MapPin className="lead-icon-sm" />
7575
<div className="flex-1 min-w-0">
7676
<div className="text-sm text-gray-900 mb-1">Room Change</div>
7777
<p className="text-sm text-gray-600">
@@ -85,7 +85,7 @@ export function SessionDetailStatusSection({
8585
<div className="space-y-4">
8686
<div className="space-y-3">
8787
<div className="flex items-start gap-2">
88-
<CalendarOff className="size-4 text-gray-600 mt-0.5 flex-shrink-0" />
88+
<CalendarOff className="lead-icon-sm" />
8989
<div className="flex-1 min-w-0">
9090
<div className="text-sm text-gray-900 mb-1">
9191
Class Cancelled
@@ -206,7 +206,7 @@ export function SessionDetailStatusSection({
206206
{isCancelled && (
207207
<div className="space-y-3">
208208
<div className="flex items-start gap-2">
209-
<CalendarOff className="size-4 text-gray-600 mt-0.5 flex-shrink-0" />
209+
<CalendarOff className="lead-icon-sm" />
210210
<div className="flex-1 min-w-0">
211211
<div className="text-sm text-gray-900 mb-1">
212212
Class Cancelled

‎frontend/src/components/student/ActivityHistoryCard.tsx‎

Lines changed: 1 addition & 1 deletion
Original file line numberDiff line numberDiff line change
@@ -81,7 +81,7 @@ export default function ActivityHistoryCard({
8181
const total = data?.meta?.total ?? entries.length;
8282

8383
return (
84-
<div className="bg-white rounded-lg border border-gray-200 p-4 sm:p-6">
84+
<div className="card-block p-4 sm:p-6">
8585
<div className="flex items-center justify-between mb-6">
8686
<h3 className="text-brand-dark">{heading}</h3>
8787
<Select value={filterQuery} onValueChange={setFilterQuery}>

‎frontend/src/components/ui/card.tsx‎

Lines changed: 1 addition & 1 deletion
Original file line numberDiff line numberDiff line change
@@ -7,7 +7,7 @@ function Card({ className, ...props }: React.ComponentProps<"div">) {
77
<div
88
data-slot="card"
99
className={cn(
10-
"bg-white rounded-lg border border-gray-200 p-6",
10+
"card-block p-6",
1111
className,
1212
)}
1313
{...props}

‎frontend/src/pages/ClassesPage.tsx‎

Lines changed: 2 additions & 2 deletions
Original file line numberDiff line numberDiff line change
@@ -256,7 +256,7 @@ export default function ClassesPage() {
256256
</div>
257257
</div>
258258

259-
<div className="card-block p-4">
259+
<div className="card-block p-4 mb-6">
260260
<div className="flex gap-4 items-center flex-wrap">
261261
<div className="flex-1 relative min-w-[300px]">
262262
<Search className="input-icon-left size-5" />
@@ -372,7 +372,7 @@ export default function ClassesPage() {
372372
{attendanceConcerns && ' with attendance concerns'}
373373
</div>
374374

375-
<div className="bg-white rounded-lg border border-gray-200 overflow-hidden">
375+
<div className="card-block overflow-hidden">
376376
<table className="w-full">
377377
<thead className="bg-surface-hover border-b border-gray-200">
378378
<tr>

‎frontend/src/pages/ProgramsPage.tsx‎

Lines changed: 5 additions & 5 deletions
Original file line numberDiff line numberDiff line change
@@ -424,7 +424,7 @@ export default function ProgramsPage() {
424424
</TooltipProvider>
425425

426426
{/* Filters */}
427-
<div className="card-block p-4">
427+
<div className="card-block p-4 mb-6">
428428
<div className="flex gap-4">
429429
<div className="relative flex-1">
430430
<Search className="input-icon-left size-5" />
@@ -566,7 +566,7 @@ export default function ProgramsPage() {
566566

567567
{/* Add Program Form */}
568568
{showAddProgram && (
569-
<div className="card-block p-6">
569+
<div className="card-block p-6 mb-6">
570570
<h3 className="text-brand-dark mb-4">
571571
{isDeptAdminUser
572572
? 'Create Statewide Program'
@@ -964,7 +964,7 @@ export default function ProgramsPage() {
964964
)}
965965

966966
{filtered.length === 0 ? (
967-
<div className="bg-white rounded-lg border border-gray-200 p-12 text-center">
967+
<div className="card-block p-12 text-center">
968968
<p className="text-gray-600 mb-2">No programs found</p>
969969
<p className="text-sm text-gray-500">
970970
Try adjusting your search or filters
@@ -1027,7 +1027,7 @@ function StatCard({
10271027
tooltip?: string;
10281028
}) {
10291029
const cardContent = (
1030-
<div className="bg-white rounded-lg border border-gray-200 p-6 cursor-help">
1030+
<div className="card-block p-6 cursor-help">
10311031
<p className="text-3xl text-brand-dark mb-1">{value}</p>
10321032
<p className="text-sm text-gray-600">{label}</p>
10331033
</div>
@@ -1227,7 +1227,7 @@ function ProgramsTable({
12271227

12281228
return (
12291229
<TooltipProvider>
1230-
<div className="bg-white rounded-lg border border-gray-200 overflow-hidden">
1230+
<div className="card-block overflow-hidden">
12311231
<Table>
12321232
<TableHeader className="bg-surface-hover [&_tr]:border-b-0">
12331233
<TableRow>

0 commit comments

Comments
 (0)