Skip to content

Commit f80dc06

Browse files
Pranay-KatariPranay-Katari
committed
Updated audit card styling to match Figma design
1 parent de62f01 commit f80dc06

2 files changed

Lines changed: 35 additions & 106 deletions

File tree

‎entrypoints/components/audit-card.tsx‎

Lines changed: 29 additions & 105 deletions
Original file line numberDiff line numberDiff line change
@@ -18,78 +18,33 @@ const DegreeAuditCard: React.FC<DegreeAuditCardProps> = ({
1818
}) => {
1919
return (
2020
<div
21-
className={`!rounded-lg px-4 py-3 w-full transition-all duration-200 cursor-pointer ${
21+
className={`!rounded px-3 py-[12px] w-full transition-all duration-200 cursor-pointer ${
2222
isSelected
23-
? "bg-[#FFF7ED] border-2 border-[#F9E7D5]"
24-
: "bg-[var(--color-dap-stone-50)] border-2 border-[var(--color-dap-border)]"
23+
? "bg-[var(--color-dap-orange)] border border-[var(--color-dap-orange)]"
24+
: "bg-[#FAFAF9] border border-[var(--color-dap-border)]"
2525
}`}
2626
onClick={onToggle}
2727
>
28-
<div className="flex flex-col gap-2">
29-
{/* Header Row: Caret + Title + Menu + Percentage */}
30-
<div className="flex items-center justify-between">
31-
<div className="flex items-center gap-2">
32-
{isExpanded ? (
33-
<CaretUp
34-
size={16}
35-
weight="bold"
36-
className="text-[var(--color-dap-dark)]"
37-
/>
38-
) : (
39-
<CaretDown
40-
size={16}
41-
weight="bold"
42-
className="text-[var(--color-dap-dark)]"
43-
/>
44-
)}
45-
<span className="font-bold text-[18px] leading-[20px] text-[var(--color-dap-primary)] tracking-[0.13px] overflow-hidden text-ellipsis whitespace-nowrap">
46-
{title}
47-
</span>
48-
</div>
49-
<div className="flex items-center gap-2">
50-
<button
51-
onClick={(e) => {
52-
e.stopPropagation();
53-
onMenuClick?.();
54-
}}
55-
className="p-1 hover:bg-black/5 rounded"
56-
>
57-
<DotsThree
58-
size={20}
59-
weight="bold"
60-
className="text-[var(--color-dap-dark)]"
61-
/>
62-
</button>
63-
<div className="bg-[var(--color-dap-orange)] px-2 py-1 rounded h-[26px] flex items-center justify-center">
64-
<span className="text-white text-sm font-bold leading-[18px]">
65-
{percentage}%
66-
</span>
67-
</div>
68-
</div>
28+
<div className="flex items-center justify-between">
29+
{/* Title */}
30+
<div className={`font-bold text-[18px] leading-tight ${
31+
isSelected ? "text-white" : "text-[var(--color-dap-orange)]"
32+
}`}>
33+
{title}
6934
</div>
7035

71-
{/* Tags Section - Only visible when expanded */}
72-
{isExpanded && (
73-
<div className="flex flex-col gap-2 ml-6">
74-
{/* Majors */}
75-
{majors && majors.length > 0 && (
76-
<div className="flex flex-wrap gap-1">
77-
{majors.map((major, index) => (
78-
<Tag key={index} index={index} major={major} type="major" />
79-
))}
80-
</div>
81-
)}
82-
83-
{/* Minors/Certs */}
84-
{minors && minors.length > 0 && (
85-
<div className="flex flex-wrap gap-1">
86-
{minors.map((minor, index) => (
87-
<Tag key={index} index={index} major={minor} type="minor" />
88-
))}
89-
</div>
90-
)}
91-
</div>
92-
)}
36+
{/* Percentage Badge */}
37+
<div className={`rounded-md px-3 py-2 flex items-center justify-center ${
38+
isSelected
39+
? "bg-white"
40+
: "bg-[var(--color-dap-orange)]"
41+
}`}>
42+
<span className={`text-base font-bold leading-tight ${
43+
isSelected ? "text-[var(--color-dap-orange)]" : "text-white"
44+
}`}>
45+
{percentage}%
46+
</span>
47+
</div>
9348
</div>
9449
</div>
9550
);
@@ -105,49 +60,18 @@ export const DegreeAuditCardPopup: React.FC<DegreeAuditCardProps> = ({
10560
percentage = 90,
10661
}) => {
10762
return (
108-
<div className="bg-[var(--color-dap-stone-50)] rounded-sm border-2 border-[var(--color-dap-border)] px-4 py-3 w-full transition-all duration-200 hover:bg-[#FFF7ED] hover:border-2 hover:border-[#F9E7D5] cursor-pointer">
109-
<div className="flex flex-col gap-3">
63+
<div className="bg-[#FAFAF9] rounded border border-[var(--color-dap-border)] px-3 py-[12px] w-full transition-all duration-200 cursor-pointer">
64+
<div className="flex items-center justify-between">
11065
{/* Title */}
111-
<div className="font-bold text-[18px] leading-[20px] text-[var(--color-dap-primary)] tracking-[0.13px] overflow-hidden text-ellipsis whitespace-nowrap">
66+
<div className="font-bold text-[18px] leading-tight text-[var(--color-dap-orange)]">
11267
{title}
11368
</div>
114-
<div className="flex items-start justify-between">
115-
<div className="flex flex-col gap-2">
116-
{/* Majors */}
117-
{majors && majors.length > 0 && (
118-
<div className="flex gap-2 items-center">
119-
<span className="text-[11px] leading-[12px] text-black">
120-
Major:
121-
</span>
122-
<div className="flex gap-1 flex-wrap">
123-
{majors.map((major, index) => (
124-
<Tag key={index} index={index} major={major} type="major" />
125-
))}
126-
</div>
127-
</div>
128-
)}
129-
130-
{/* Minors/Certs */}
131-
{minors && minors.length > 0 && (
132-
<div className="flex gap-2 items-center">
133-
<span className="text-[11px] leading-[12px] text-black">
134-
Minor/cert:
135-
</span>
136-
<div className="flex gap-1 flex-wrap">
137-
{minors.map((minor, index) => (
138-
<Tag key={index} index={index} major={minor} type="minor" />
139-
))}
140-
</div>
141-
</div>
142-
)}
143-
</div>
14469

145-
{/* Percentage */}
146-
<div className="bg-[var(--color-dap-orange)] rounded-md px-2 py-1 h-[30px] flex items-center justify-center">
147-
<span className="text-white text-base font-bold leading-[22px]">
148-
{percentage}%
149-
</span>
150-
</div>
70+
{/* Percentage Badge */}
71+
<div className="bg-[var(--color-dap-orange)] rounded-md px-3 py-2 flex items-center justify-center">
72+
<span className="text-white text-base font-bold leading-tight">
73+
{percentage}%
74+
</span>
15175
</div>
15276
</div>
15377
</div>

‎entrypoints/popup-app/main.tsx‎

Lines changed: 6 additions & 1 deletion
Original file line numberDiff line numberDiff line change
@@ -333,7 +333,12 @@ export default function App() {
333333
handleOpenDegreeAuditPage(audit?.auditId);
334334
}}
335335
>
336-
<AuditCardDetailed audit={audit} />
336+
<DegreeAuditCardPopup
337+
title={audit.title}
338+
majors={audit.majors}
339+
minors={audit.minors}
340+
percentage={audit.percentage}
341+
/>
337342

338343
</div>
339344
))}

0 commit comments

Comments
 (0)