Skip to content

Commit dc73aaa

Browse files
joseglegojoseglego
authored
Lego/feat/more accurate figma (#54)
# Summary - UI looks closer to Figma design (or less different, as you wish to take it!)
1 parent 860dcbd commit dc73aaa

24 files changed

+507
-449
lines changed

Diff for: ‎app/components/Footer/index.tsx

+2-2
Original file line numberDiff line numberDiff line change
@@ -34,9 +34,9 @@ export const Footer = () => {
3434
return (
3535
<footer className="border-t bg-background/95 text-sm text-primary">
3636
<div className="container flex flex-col justify-between gap-4 py-8 md:flex-row">
37-
<div className="flex flex-col gap-2">
37+
<div className="flex flex-col gap-4">
3838
<div>© {year} Proudly Powered by CommunityOS</div>
39-
<div className="flex gap-2">
39+
<div className="flex gap-3">
4040
{socials.map(({ icon, name, url }) => (
4141
<a
4242
key={name}

Diff for: ‎app/components/Login/Login.tsx

+1-1
Original file line numberDiff line numberDiff line change
@@ -17,7 +17,7 @@ export const Login = () => {
1717
return (
1818
<div className="flex w-full max-w-lg shrink-0 flex-col gap-4 rounded-2xl border bg-background p-10 shadow-xl">
1919
<div>
20-
<h1 className="text-left font-cal text-2xl">Regístrate.</h1>
20+
<h1 className="text-left text-2xl font-semibold">Regístrate.</h1>
2121
<p className="text-left text-sm text-muted-foreground">
2222
Mantente al tanto de las novedades de JavaScript Chile.
2323
</p>

Diff for: ‎app/components/MyEvent/MyEvent.tsx

+123-100
Original file line numberDiff line numberDiff line change
@@ -8,15 +8,15 @@ import {
88
Mail,
99
EyeIcon,
1010
EyeOffIcon,
11+
Sparkles,
1112
} from "lucide-react";
1213
import { useState } from "react";
1314
import QRCode from "react-qr-code";
1415

15-
import { Badge } from "~/components/ui/badge";
1616
import { Button, buttonVariants } from "~/components/ui/button";
1717
import { Card, CardContent, CardTitle } from "~/components/ui/card";
1818
import { Separator } from "~/components/ui/separator";
19-
import { formatDate, formatTime } from "~/utils/date";
19+
import { formatCalendarDate, formatDate, formatTime } from "~/utils/date";
2020
import {
2121
redemptionStatusLabel,
2222
redemptionStatusColor,
@@ -45,93 +45,114 @@ const Ticket = ({
4545
: undefined;
4646

4747
return (
48-
<Card className="h-full bg-white p-6 text-black">
49-
<div className="relative mx-auto mt-4 w-full max-w-[90%] text-center">
50-
<div className={cn(showQR ? "" : "blur-lg")}>
51-
<QRCode className="mx-auto max-w-[90%]" value={ticket.id} />
48+
<Card className="flex h-full flex-col justify-between gap-6 bg-white p-6 text-black">
49+
<div className="flex w-full flex-col gap-6">
50+
<div className="relative mx-auto mt-4 w-full max-w-[90%] text-center">
51+
<div
52+
className={cn(
53+
"mx-auto max-w-[90%] overflow-hidden",
54+
showQR ? "" : " max-w-[80%] overflow-hidden",
55+
)}
56+
>
57+
<QRCode
58+
className={cn("aspect-square w-full", showQR ? "" : "blur-md")}
59+
value={ticket.id}
60+
/>
61+
</div>
5262
</div>
63+
<CardTitle className="text-center font-bold">
64+
ID Ref: {ticketIdReference(ticket.id)}
65+
</CardTitle>
66+
<CardContent className="p-0 text-sm">
67+
<div className="grid gap-3">
68+
<ul className="grid gap-3">
69+
<li className="flex items-center justify-between text-base">
70+
<span className="shrink-0 font-bold">Evento</span>
71+
<span className="text-right">{event.name}</span>
72+
</li>
73+
</ul>
74+
<Separator className="my-2 bg-[#e7e5e4]" />
75+
<ul className="grid gap-3">
76+
<li className="flex items-center justify-between">
77+
<span className="shrink-0 font-bold">Fecha de inicio</span>
78+
<span className="text-right">
79+
{formatDate(event.startDateTime as string)}
80+
</span>
81+
</li>
82+
{event.endDateTime ? (
83+
<li className="flex items-center justify-between">
84+
<span className="shrink-0 font-bold">Fecha de fin</span>
85+
<span className="text-right">
86+
{formatDate(event.endDateTime as string)}
87+
</span>
88+
</li>
89+
) : null}
90+
</ul>
91+
<Separator className="my-2 bg-[#e7e5e4]" />
92+
<ul className="grid gap-3">
93+
<li className="flex items-center justify-between">
94+
<span className="shrink-0 font-bold">Tipo de Ticket</span>
95+
<span className="text-right">{ticket.ticketTemplate.name}</span>
96+
</li>
97+
<li className="flex items-center justify-between">
98+
<span className="shrink-0 font-bold">Estado</span>
99+
<span className="text-right">
100+
<span className="flex flex-row items-center gap-2">
101+
<span
102+
className={cn(
103+
"flex h-2 w-2 rounded-full",
104+
redemptionStatusColor(ticket.redemptionStatus),
105+
)}
106+
/>
107+
{redemptionStatusLabel(ticket.redemptionStatus)}
108+
</span>
109+
</span>
110+
</li>
111+
<li className="flex items-center justify-between">
112+
<span className="shrink-0 font-bold">Fecha de Compra</span>
113+
<span className="text-right">
114+
{formatCalendarDate(ticket.createdAt as string)}
115+
</span>
116+
</li>
117+
</ul>
118+
</div>
119+
</CardContent>
120+
</div>
121+
<div className="flex flex-col gap-2 p-0 md:flex-row">
53122
<Button
54-
className="mt-8"
123+
className={cn(
124+
buttonVariants({ variant: "outline" }),
125+
"flex grow flex-row gap-2 bg-white text-black",
126+
)}
55127
onClick={() => {
56128
setShowQR((show) => !show);
57129
}}
58130
>
59131
{showQR ? (
60132
<>
61-
<EyeIcon className="size-4" /> Ocultar QR
133+
<EyeOffIcon className="size-4" /> Ocultar QR
62134
</>
63135
) : (
64136
<>
65-
<EyeOffIcon className="size-4" /> Ver QR
137+
<EyeIcon className="size-4" /> Ver QR
66138
</>
67139
)}
68140
</Button>
69-
</div>
70-
<CardTitle className="my-6 text-center">
71-
ID Ref: {ticketIdReference(ticket.id)}
72-
</CardTitle>
73-
<CardContent className="text-sm">
74-
<div className="grid gap-3">
75-
<ul className="grid gap-3">
76-
<li className="flex items-center justify-between">
77-
<span className="font-semibold">Evento</span>
78-
<span>{event.name}</span>
79-
</li>
80-
</ul>
81-
<Separator className="my-2" />
82-
<ul className="grid gap-3">
83-
<li className="flex items-center justify-between">
84-
<span className="font-semibold">Fecha de inicio</span>
85-
<span>{formatDate(event.startDateTime as string)}</span>
86-
</li>
87-
{event.endDateTime ? (
88-
<li className="flex items-center justify-between">
89-
<span className="font-semibold">Fecha de fin</span>
90-
<span>{formatDate(event.endDateTime as string)}</span>
91-
</li>
92-
) : null}
93-
</ul>
94-
<Separator className="my-2" />
95-
<ul className="grid gap-3">
96-
<li className="flex items-center justify-between">
97-
<span className="font-semibold">Tipo de Ticket</span>
98-
<span>{ticket.ticketTemplate.name}</span>
99-
</li>
100-
<li className="flex items-center justify-between">
101-
<span className="font-semibold">Estado</span>
102-
<span>
103-
<Badge className="gap-2 text-black" variant="outline">
104-
<span
105-
className={cn(
106-
"flex h-2 w-2 rounded-full",
107-
redemptionStatusColor(ticket.redemptionStatus),
108-
)}
109-
/>
110-
{redemptionStatusLabel(ticket.redemptionStatus)}
111-
</Badge>
112-
</span>
113-
</li>
114-
<li className="flex items-center justify-between">
115-
<span className="font-semibold">Fecha de Compra</span>
116-
<span>{formatDate(ticket.createdAt as string)}</span>
117-
</li>
118-
</ul>
119-
</div>
120-
<div className="mt-4 flex flex-col gap-2 md:flex-row">
121-
{publicUrl ? (
122-
<a
123-
href={publicUrl}
124-
target="_blank"
125-
rel="noreferrer noopener"
126-
className={cn(
127-
buttonVariants({ variant: "outline" }),
128-
"flex grow flex-row gap-2 bg-white text-black",
129-
)}
130-
>
131-
Ver y Compartir <ExternalLink className="size-4" />
132-
</a>
133-
) : null}
134-
{/*
141+
{publicUrl ? (
142+
<a
143+
href={publicUrl}
144+
target="_blank"
145+
rel="noreferrer noopener"
146+
className={cn(
147+
buttonVariants({ variant: "outline" }),
148+
"flex grow flex-row gap-2 bg-white text-black",
149+
)}
150+
>
151+
<Sparkles className="size-4" />
152+
Compartir
153+
</a>
154+
) : null}
155+
{/*
135156
<Button
136157
className="flex grow flex-row gap-2 bg-white text-black"
137158
variant="outline"
@@ -147,8 +168,7 @@ const Ticket = ({
147168
<Mail className="size-4" /> Enviar por email
148169
</Button>
149170
*/}
150-
</div>
151-
</CardContent>
171+
</div>
152172
</Card>
153173
);
154174
};
@@ -184,8 +204,8 @@ export const MyEvent = ({ id }: { id: string }) => {
184204
) : null}
185205

186206
{event ? (
187-
<div className="flex w-full flex-col gap-4">
188-
<div className="flex basis-4/12 flex-col gap-2">
207+
<div className="flex w-full flex-col gap-6">
208+
<div className="flex basis-4/12 flex-col gap-6">
189209
<div
190210
className={cn(
191211
"mx-auto h-20 w-full rounded-md bg-primary/10 lg:h-40",
@@ -197,29 +217,32 @@ export const MyEvent = ({ id }: { id: string }) => {
197217
: {}
198218
}
199219
/>
200-
<h2 className="font-cal text-2xl">{event.name}</h2>
201-
<p className="text-sm text-muted-foreground">{event.description}</p>
202-
<div className="flex flex-row items-center gap-1 text-sm">
203-
<Calendar className="size-4" />
204-
{[formattedDate, formattedTime].filter(Boolean).join(" - ")}
220+
<h2 className="text-2xl font-semibold">{event.name}</h2>
221+
<p className="text-base text-muted-foreground">
222+
{event.description}
223+
</p>
224+
<div className="flex flex-col gap-3 font-medium">
225+
{formatedAddress ? (
226+
<a
227+
href={encodeURI(
228+
`https://www.google.com/maps/search/${formatedAddress}?source=opensearch`,
229+
)}
230+
target="_blank"
231+
className="flex flex-row items-center gap-2.5 text-sm"
232+
rel="noreferrer"
233+
>
234+
<MapPin className="size-6" />
235+
{formatedAddress}
236+
<ExternalLink className="size-6" />
237+
<span className="sr-only">Ver en Google Maps</span>
238+
</a>
239+
) : null}
240+
<div className="flex flex-row items-center gap-2.5 text-sm">
241+
<Calendar className="size-6" />
242+
{[formattedDate, formattedTime].filter(Boolean).join(" - ")}
243+
</div>
205244
</div>
206-
{formatedAddress ? (
207-
<a
208-
href={encodeURI(
209-
`https://www.google.com/maps/search/${formatedAddress}?source=opensearch`,
210-
)}
211-
target="_blank"
212-
className="flex flex-row items-center gap-1 text-sm"
213-
rel="noreferrer"
214-
>
215-
<MapPin className="size-4" />
216-
{formatedAddress}
217-
<ExternalLink className="size-4" />
218-
<span className="sr-only">Ver en Google Maps</span>
219-
</a>
220-
) : null}
221245
</div>
222-
<Separator className="my-2" />
223246
<div className="mx-auto grid w-full grid-cols-1 gap-4 md:grid-cols-3">
224247
{tickets.map((ticket) => (
225248
<Ticket key={ticket.id} event={event} ticket={ticket} />

Diff for: ‎app/components/MyEvent/MyEventLoadingSkeleton.tsx

+15-13
Original file line numberDiff line numberDiff line change
@@ -4,40 +4,42 @@ import { Skeleton } from "~/components/ui/skeleton";
44

55
const LoadingCard = () => {
66
return (
7-
<Card className="h-full p-6">
7+
<Card className="flex h-full flex-col gap-2 p-6">
88
<Skeleton className="mx-auto size-60 rounded-md" />
9-
<Skeleton className="mx-auto my-6 h-6 w-40" />
10-
<Skeleton className="h-6 w-full" />
9+
<Skeleton className="mx-auto h-8 w-40" />
10+
<Skeleton className="h-8 w-full" />
1111
<Separator className="my-2" />
12-
<span className="flex flex-col gap-2">
12+
<span className="flex flex-col gap-3">
1313
<Skeleton className="h-6 w-full" />
1414
<Skeleton className="h-6 w-full" />
1515
</span>
1616
<Separator className="my-2" />
17-
<span className="flex flex-col gap-2">
17+
<span className="flex flex-col gap-3">
1818
<Skeleton className="h-6 w-full" />
1919
<Skeleton className="h-6 w-full" />
2020
<Skeleton className="h-6 w-full" />
2121
</span>
22-
<div className="mt-4 flex items-end justify-between">
23-
<Skeleton className="h-8 w-24" />
24-
<Skeleton className="h-8 w-24" />
22+
<Separator className="my-2" />
23+
<div className="flex flex-col items-end justify-between gap-3 md:flex-row">
24+
<Skeleton className="h-8 w-full md:w-1/2" />
25+
<Skeleton className="h-8 w-full md:w-1/2" />
2526
</div>
2627
</Card>
2728
);
2829
};
2930

3031
export const MyEventLoadingSkeleton = () => {
3132
return (
32-
<div className="flex w-full flex-col gap-4">
33-
<div className="flex basis-4/12 flex-col gap-2">
33+
<div className="flex w-full flex-col gap-6">
34+
<div className="flex basis-4/12 flex-col gap-6">
3435
<Skeleton className="h-20 w-full rounded-md bg-primary/10 lg:h-40" />
3536
<Skeleton className="h-12 w-36" />
3637
<Skeleton className="h-6 w-80" />
37-
<Skeleton className="h-6 w-40" />
38-
<Skeleton className="h-6 w-40" />
38+
<div className="flex basis-4/12 flex-col gap-3">
39+
<Skeleton className="h-6 w-40" />
40+
<Skeleton className="h-6 w-40" />
41+
</div>
3942
</div>
40-
<Separator className="my-2" />
4143
<div className="mx-auto grid w-full grid-cols-1 gap-4 md:grid-cols-3">
4244
<div className="basis-full md:basis-1/3">
4345
<LoadingCard />

0 commit comments

Comments
 (0)