Skip to content

Commit f1696aa

Browse files
Jxl-sJxl-s
committed
fix: use default font and colors
1 parent 0c3962a commit f1696aa

2 files changed

Lines changed: 33 additions & 66 deletions

File tree

‎app/layout.tsx‎

Lines changed: 0 additions & 8 deletions
Original file line numberDiff line numberDiff line change
@@ -13,14 +13,6 @@ export default function RootLayout({
1313
}>) {
1414
return (
1515
<html lang="en" className="h-full antialiased">
16-
<head>
17-
<link rel="preconnect" href="https://fonts.googleapis.com" />
18-
<link rel="preconnect" href="https://fonts.gstatic.com" crossOrigin="anonymous" />
19-
<link
20-
href="https://fonts.googleapis.com/css2?family=Plus+Jakarta+Sans:wght@400;600;700;800&family=Lexend:wght@400;500;600;700&display=swap"
21-
rel="stylesheet"
22-
/>
23-
</head>
2416
<body className="min-h-full flex flex-col font-[Helvetica,Arial,sans-serif]">
2517
{children}
2618
</body>

‎components/discount-modal.tsx‎

Lines changed: 33 additions & 58 deletions
Original file line numberDiff line numberDiff line change
@@ -47,24 +47,16 @@ interface DiscountModalProps {
4747
onOpenChange?: (open: boolean) => void;
4848
}
4949

50-
// todo: apply the fonts to the entire project rather than here
51-
const pjs = "'Plus Jakarta Sans', sans-serif";
52-
const lexend = "'Lexend', sans-serif";
53-
5450
const TABLE_GRID = "grid grid-cols-[2fr_1fr_1fr_1fr_2.5rem]";
5551

5652
function FieldLabel({ children }: { children: React.ReactNode }) {
5753
return (
58-
<Label
59-
className="text-[0.625rem] font-extrabold text-[#00327d] tracking-[0.6px] uppercase"
60-
style={{ fontFamily: pjs }}
61-
>
54+
<Label className="text-[0.625rem] font-extrabold text-accent-foreground tracking-[0.6px] uppercase">
6255
{children}
6356
</Label>
6457
);
6558
}
6659

67-
// todo: use project's design system for colors
6860
export function DiscountModal({
6961
userName,
7062
userEmail,
@@ -131,54 +123,44 @@ export function DiscountModal({
131123
{trigger && <DialogTrigger asChild>{trigger}</DialogTrigger>}
132124
<DialogContent
133125
showCloseButton={false}
134-
className="sm:max-w-xl w-full p-0 gap-0 rounded-[2rem] shadow-[0px_18px_48px_0px_rgba(0,0,0,0.18)] overflow-hidden ring-0 border-0 bg-white"
135-
style={{ fontFamily: lexend }}
126+
className="sm:max-w-xl w-full p-0 gap-0 rounded-[2rem] shadow-[0px_18px_48px_0px_rgba(0,0,0,0.18)] overflow-hidden ring-0 border-0 bg-card"
136127
>
137128
<DialogTitle className="sr-only">Discounts for {userName}</DialogTitle>
138129
<DialogDescription className="sr-only">Manage and apply discounts for {userName}</DialogDescription>
139130

140131
{/* Header */}
141132
<div className="grid grid-cols-[1fr_auto] items-center px-7 pt-4 pb-3.5 gap-4">
142133
<div className="flex flex-col gap-0.5 min-w-0">
143-
<h2
144-
className="text-lg font-extrabold text-[#191c1d] leading-normal truncate"
145-
style={{ fontFamily: pjs }}
146-
>
134+
<h2 className="text-lg font-extrabold text-foreground leading-normal truncate">
147135
Discounts for {userName}
148136
</h2>
149-
<p
150-
className="text-xs font-normal text-[#3f484c] leading-normal"
151-
>
137+
<p className="text-xs font-normal text-muted-foreground leading-normal">
152138
{userEmail ? `${userEmail} · ${userRole}` : userRole}
153139
</p>
154140
</div>
155141
<Button
156142
variant="ghost"
157143
size="icon-sm"
158144
onClick={() => setIsOpen(false)}
159-
className="rounded-full bg-[#f8f9fa] text-[#191c1d] hover:bg-[#e9ecef] shrink-0 text-sm font-semibold"
160-
style={{ fontFamily: pjs }}
145+
className="rounded-full bg-muted text-foreground hover:bg-muted/80 shrink-0 text-sm font-semibold"
161146
aria-label="Close"
162147
>
163148
✕
164149
</Button>
165150
</div>
166151

167152
{/* Divider */}
168-
<div className="h-px w-full bg-[#e6eaef]" />
153+
<div className="h-px w-full bg-border" />
169154

170155
{/* Active Discounts */}
171156
<div className="flex flex-col gap-2 px-7 pt-4 pb-1.5">
172-
<h3
173-
className="text-sm font-extrabold text-[#191c1d] leading-normal"
174-
style={{ fontFamily: pjs }}
175-
>
157+
<h3 className="text-sm font-extrabold text-foreground leading-normal">
176158
Active discounts
177159
</h3>
178160

179-
<div className="w-full rounded-lg border border-[#e6eaef] overflow-hidden">
161+
<div className="w-full rounded-lg border border-border overflow-hidden">
180162
{/* Table header */}
181-
<div className={`${TABLE_GRID} bg-[#edf4fd]`}>
163+
<div className={`${TABLE_GRID} bg-accent`}>
182164
<div className="flex items-center h-8 px-3"><FieldLabel>Service</FieldLabel></div>
183165
<div className="flex items-center h-8 px-3"><FieldLabel>Type</FieldLabel></div>
184166
<div className="flex items-center h-8 px-3"><FieldLabel>Value</FieldLabel></div>
@@ -189,37 +171,35 @@ export function DiscountModal({
189171
{/* Table rows */}
190172
{loading ? (
191173
<div className="flex items-center justify-center h-10">
192-
<Spinner className="size-4 text-[#0040a1]" />
174+
<Spinner className="size-4 text-accent-foreground" />
193175
</div>
194176
) : discounts.length === 0 ? (
195-
<div
196-
className="flex items-center justify-center h-10 text-xs font-normal text-[#3f484c]"
197-
>
177+
<div className="flex items-center justify-center h-10 text-xs font-normal text-muted-foreground">
198178
No active discounts
199179
</div>
200180
) : (
201181
discounts.map((discount, i) => (
202182
<div
203183
key={discount.id}
204-
className={`${TABLE_GRID} ${i % 2 === 0 ? "bg-white" : "bg-[#f8fafd]"}`}
184+
className={`${TABLE_GRID} ${i % 2 === 0 ? "bg-card" : "bg-muted/30"}`}
205185
>
206186
<div className="flex items-center h-10 px-3 min-w-0">
207-
<span className="text-xs font-semibold text-[#191c1d] truncate">
187+
<span className="text-xs font-semibold text-foreground truncate">
208188
{discount.service}
209189
</span>
210190
</div>
211191
<div className="flex items-center h-10 px-3 min-w-0">
212-
<span className="text-xs font-normal text-[#3f484c] truncate">
192+
<span className="text-xs font-normal text-muted-foreground truncate">
213193
{discount.type}
214194
</span>
215195
</div>
216196
<div className="flex items-center h-10 px-3 min-w-0">
217-
<span className="text-xs font-bold text-[#0040a1] truncate">
197+
<span className="text-xs font-bold text-accent-foreground truncate">
218198
{discount.value}
219199
</span>
220200
</div>
221201
<div className="flex items-center h-10 px-3 min-w-0">
222-
<span className="text-xs font-normal text-[#3f484c] truncate">
202+
<span className="text-xs font-normal text-muted-foreground truncate">
223203
{discount.used}
224204
</span>
225205
</div>
@@ -233,7 +213,7 @@ export function DiscountModal({
233213
try { await onRemove?.(discount.id); }
234214
finally { setRemovingId(null); }
235215
}}
236-
className="rounded-full bg-[#fef2f2] text-red-500 hover:bg-red-100 hover:text-red-500"
216+
className="rounded-full bg-destructive/10 text-destructive hover:bg-destructive/20 hover:text-destructive"
237217
aria-label={`Remove discount for ${discount.service}`}
238218
>
239219
{removingId === discount.id
@@ -248,11 +228,8 @@ export function DiscountModal({
248228
</div>
249229

250230
{/* Apply New Discount */}
251-
<div className="flex flex-col gap-3 px-7 py-4 bg-[#fafbfd] border-t border-[#e6eaef]">
252-
<h3
253-
className="text-sm font-extrabold text-[#191c1d] leading-normal"
254-
style={{ fontFamily: pjs }}
255-
>
231+
<div className="flex flex-col gap-3 px-7 py-4 bg-muted/50 border-t border-border">
232+
<h3 className="text-sm font-extrabold text-foreground leading-normal">
256233
Apply new discount
257234
</h3>
258235

@@ -261,7 +238,7 @@ export function DiscountModal({
261238
<FieldLabel>Service</FieldLabel>
262239
<Select value={serviceId} onValueChange={setServiceId} disabled={submitting}>
263240
<SelectTrigger
264-
className="w-full h-auto px-3 py-2 bg-white border-[#e6eaef] rounded-lg text-xs font-normal text-[#3f484c] focus-visible:ring-0 focus-visible:border-[#0040a1]"
241+
className="w-full h-auto px-3 py-2 bg-card border-input rounded-lg text-xs font-normal text-muted-foreground focus-visible:ring-0 focus-visible:border-ring"
265242
>
266243
<SelectValue placeholder="Select a service" />
267244
</SelectTrigger>
@@ -279,16 +256,16 @@ export function DiscountModal({
279256
<div className="flex gap-2.5 w-full">
280257
<div className="flex flex-col gap-1 flex-1 min-w-0">
281258
<FieldLabel>Discount Type</FieldLabel>
282-
<div className="flex items-center p-0.5 bg-[#f8f9fa] border border-[#e6eaef] rounded-lg">
259+
<div className="flex items-center p-0.5 bg-muted border border-border rounded-lg">
283260
<Button
284261
type="button"
285262
variant="ghost"
286263
disabled={submitting}
287264
onClick={() => handleTypeChange("percent")}
288265
className={`flex-1 h-auto px-4 py-1.5 rounded-md text-xs transition-all ${
289266
discountType === "percent"
290-
? "bg-white shadow-[0px_1px_2px_0px_rgba(0,0,0,0.06)] text-[#0040a1] font-bold hover:bg-white hover:text-[#0040a1]"
291-
: "text-[#3f484c] font-normal hover:bg-transparent hover:text-[#3f484c]"
267+
? "bg-card shadow-[0px_1px_2px_0px_rgba(0,0,0,0.06)] text-accent-foreground font-bold hover:bg-card hover:text-accent-foreground"
268+
: "text-muted-foreground font-normal hover:bg-transparent hover:text-muted-foreground"
292269
}`}
293270
>
294271
Percent (%)
@@ -300,8 +277,8 @@ export function DiscountModal({
300277
onClick={() => handleTypeChange("amount")}
301278
className={`flex-1 h-auto px-4 py-1.5 rounded-md text-xs transition-all ${
302279
discountType === "amount"
303-
? "bg-white shadow-[0px_1px_2px_0px_rgba(0,0,0,0.06)] text-[#0040a1] font-bold hover:bg-white hover:text-[#0040a1]"
304-
: "text-[#3f484c] font-normal hover:bg-transparent hover:text-[#3f484c]"
280+
? "bg-card shadow-[0px_1px_2px_0px_rgba(0,0,0,0.06)] text-accent-foreground font-bold hover:bg-card hover:text-accent-foreground"
281+
: "text-muted-foreground font-normal hover:bg-transparent hover:text-muted-foreground"
305282
}`}
306283
>
307284
Amount ($)
@@ -311,7 +288,7 @@ export function DiscountModal({
311288

312289
<div className="flex flex-col gap-1 flex-1 min-w-0">
313290
<FieldLabel>Value</FieldLabel>
314-
<div className="flex items-center px-3 py-2 bg-white border border-[#e6eaef] rounded-lg focus-within:border-[#0040a1] transition-colors">
291+
<div className="flex items-center px-3 py-2 bg-card border border-input rounded-lg focus-within:border-ring transition-colors">
315292
<Input
316293
type="text"
317294
inputMode={discountType === "percent" ? "numeric" : "decimal"}
@@ -325,9 +302,9 @@ export function DiscountModal({
325302
if (discountType === "percent" && !/^\d$/.test(e.key)) e.preventDefault();
326303
if (discountType === "amount" && !/^[\d.]$/.test(e.key)) e.preventDefault();
327304
}}
328-
className="h-auto border-0 p-0 text-xs font-semibold text-[#191c1d] bg-transparent focus-visible:ring-0 focus-visible:border-0"
305+
className="h-auto border-0 p-0 text-xs font-semibold text-foreground bg-transparent focus-visible:ring-0 focus-visible:border-0"
329306
/>
330-
<span className="text-xs font-semibold text-[#3f484c] ml-1.5 shrink-0">
307+
<span className="text-xs font-semibold text-muted-foreground ml-1.5 shrink-0">
331308
{discountType === "percent" ? "%" : "$"}
332309
</span>
333310
</div>
@@ -337,7 +314,7 @@ export function DiscountModal({
337314
{/* Usage limit */}
338315
<div className="flex flex-col gap-1 w-full">
339316
<FieldLabel>Usage Limit</FieldLabel>
340-
<div className="flex items-center px-3 py-2 bg-white border border-[#e6eaef] rounded-lg focus-within:border-[#0040a1] transition-colors">
317+
<div className="flex items-center px-3 py-2 bg-card border border-input rounded-lg focus-within:border-ring transition-colors">
341318
<Input
342319
type="text"
343320
inputMode="numeric"
@@ -350,9 +327,9 @@ export function DiscountModal({
350327
if (nav.includes(e.key)) return;
351328
if (!/^\d$/.test(e.key)) e.preventDefault();
352329
}}
353-
className="h-auto border-0 p-0 text-xs font-semibold text-[#191c1d] bg-transparent focus-visible:ring-0 focus-visible:border-0"
330+
className="h-auto border-0 p-0 text-xs font-semibold text-foreground bg-transparent focus-visible:ring-0 focus-visible:border-0"
354331
/>
355-
<span className="text-xs font-semibold text-[#3f484c] ml-1.5 whitespace-nowrap shrink-0">
332+
<span className="text-xs font-semibold text-muted-foreground ml-1.5 whitespace-nowrap shrink-0">
356333
redemptions
357334
</span>
358335
</div>
@@ -365,17 +342,15 @@ export function DiscountModal({
365342
variant="outline"
366343
disabled={submitting}
367344
onClick={() => setIsOpen(false)}
368-
className="h-auto px-5 py-2 rounded-full text-xs font-bold text-[#191c1d] border-[#e6eaef] hover:bg-gray-50"
369-
style={{ fontFamily: pjs }}
345+
className="h-auto px-5 py-2 rounded-full text-xs font-bold text-foreground border-border hover:bg-muted/50"
370346
>
371347
Cancel
372348
</Button>
373349
<Button
374350
type="button"
375351
disabled={submitting}
376352
onClick={handleApply}
377-
className="h-auto px-5 py-2 rounded-full text-xs font-bold bg-[#0040a1] hover:bg-[#003090] text-white"
378-
style={{ fontFamily: pjs }}
353+
className="h-auto px-5 py-2 rounded-full text-xs font-bold bg-accent-foreground hover:bg-accent-foreground/90 text-white"
379354
>
380355
{submitting ? <Loader2 className="size-3.5 animate-spin" /> : "Apply discount"}
381356
</Button>

0 commit comments

Comments
 (0)