Skip to content

Commit f2774fa

Browse files
samejrericallam
samejr
authored and
ericallam
committed
Improved styling
1 parent bd537ec commit f2774fa

File tree

14 files changed

+155
-114
lines changed

14 files changed

+155
-114
lines changed

‎references/nextjs-realtime/src/app/batches/[id]/ClientBatchRunDetails.tsx

Lines changed: 39 additions & 37 deletions
Original file line numberDiff line numberDiff line change
@@ -46,71 +46,73 @@ const ProgressBar = ({ run }: { run: AnyRunShape }) => {
4646
const StatusBadge = ({ run }: { run: AnyRunShape }) => {
4747
switch (run.status) {
4848
case "WAITING_FOR_DEPLOY": {
49-
return <Badge className={`bg-purple-100 text-purple-800 font-semibold`}>{run.status}</Badge>;
49+
return <Badge className={`bg-purple-800 text-purple-100 font-semibold`}>{run.status}</Badge>;
5050
}
5151
case "DELAYED": {
52-
return <Badge className={`bg-yellow-100 text-yellow-800 font-semibold`}>{run.status}</Badge>;
52+
return <Badge className={`bg-yellow-800 text-yellow-100 font-semibold`}>{run.status}</Badge>;
5353
}
5454
case "EXPIRED": {
55-
return <Badge className={`bg-red-100 text-red-800 font-semibold`}>{run.status}</Badge>;
55+
return <Badge className={`bg-red-800 text-red-100 font-semibold`}>{run.status}</Badge>;
5656
}
5757
case "QUEUED": {
58-
return <Badge className={`bg-yellow-100 text-yellow-800 font-semibold`}>{run.status}</Badge>;
58+
return <Badge className={`bg-yellow-800 text-yellow-100 font-semibold`}>{run.status}</Badge>;
5959
}
6060
case "FROZEN":
6161
case "REATTEMPTING":
6262
case "EXECUTING": {
63-
return <Badge className={`bg-blue-100 text-blue-800 font-semibold`}>{run.status}</Badge>;
63+
return <Badge className={`bg-blue-800 text-blue-100 font-semibold`}>{run.status}</Badge>;
6464
}
6565
case "COMPLETED": {
66-
return <Badge className={`bg-green-100 text-green-800 font-semibold`}>{run.status}</Badge>;
66+
return <Badge className={`bg-green-800 text-green-100 font-semibold`}>{run.status}</Badge>;
6767
}
6868
case "TIMED_OUT":
6969
case "SYSTEM_FAILURE":
7070
case "INTERRUPTED":
7171
case "CRASHED":
7272
case "FAILED": {
73-
return <Badge className={`bg-red-100 text-red-800 font-semibold`}>{run.status}</Badge>;
73+
return <Badge className={`bg-red-800 text-red-100 font-semibold`}>{run.status}</Badge>;
7474
}
7575
case "CANCELED": {
76-
return <Badge className={`bg-gray-100 text-gray-800 font-semibold`}>{run.status}</Badge>;
76+
return <Badge className={`bg-gray-800 text-gray-100 font-semibold`}>{run.status}</Badge>;
7777
}
7878
default: {
79-
return <Badge className={`bg-gray-100 text-gray-800 font-semibold`}>{run.status}</Badge>;
79+
return <Badge className={`bg-gray-800 text-gray-100 font-semibold`}>{run.status}</Badge>;
8080
}
8181
}
8282
};
8383

8484
export function BackgroundRunsTable({ runs }: { runs: TaskRunShape<typeof exampleTask>[] }) {
8585
return (
86-
<Table>
87-
<TableCaption>A list of your recent background runs.</TableCaption>
88-
<TableHeader>
89-
<TableRow>
90-
<TableHead className="w-[150px]">Run ID / Task</TableHead>
91-
<TableHead>Status</TableHead>
92-
<TableHead>Payload ID</TableHead>
93-
<TableHead className="w-[200px]">Progress</TableHead>
94-
</TableRow>
95-
</TableHeader>
96-
<TableBody>
97-
{runs.map((run) => (
98-
<TableRow key={run.id}>
99-
<TableCell>
100-
<div className="font-medium">{run.id}</div>
101-
<div className="text-sm text-gray-500">{run.taskIdentifier}</div>
102-
</TableCell>
103-
<TableCell>
104-
<StatusBadge run={run} />
105-
</TableCell>
106-
<TableCell>{run.payload.id}</TableCell>
107-
<TableCell>
108-
<ProgressBar run={run} />
109-
</TableCell>
86+
<div className="max-w-6xl mx-auto mt-8">
87+
<h1 className="text-gray-200 text-2xl font-semibold mb-8">Recent Background Runs</h1>
88+
<Table>
89+
<TableHeader>
90+
<TableRow className="border-b border-gray-700">
91+
<TableHead className="w-[150px] text-gray-200 text-base">Run ID / Task</TableHead>
92+
<TableHead className="text-gray-200 text-base">Status</TableHead>
93+
<TableHead className="text-gray-200 text-base">Payload ID</TableHead>
94+
<TableHead className="w-[200px] text-gray-200 text-base">Progress</TableHead>
11095
</TableRow>
111-
))}
112-
</TableBody>
113-
</Table>
96+
</TableHeader>
97+
<TableBody>
98+
{runs.map((run) => (
99+
<TableRow key={run.id} className="border-b border-gray-700 hover:bg-gray-800">
100+
<TableCell>
101+
<div className="font-medium">{run.id}</div>
102+
<div className="text-sm text-gray-500">{run.taskIdentifier}</div>
103+
</TableCell>
104+
<TableCell>
105+
<StatusBadge run={run} />
106+
</TableCell>
107+
<TableCell>{run.payload.id}</TableCell>
108+
<TableCell>
109+
<ProgressBar run={run} />
110+
</TableCell>
111+
</TableRow>
112+
))}
113+
</TableBody>
114+
</Table>
115+
</div>
114116
);
115117
}
116118

@@ -132,7 +134,7 @@ function BatchRunTableWrapper({ batchId }: { batchId: string }) {
132134
}
133135

134136
return (
135-
<div className="w-full min-h-screen bg-gray-100 p-4 space-y-6">
137+
<div className="w-full min-h-screen bg-gray-900 text-gray-200 p-4 space-y-6">
136138
<BackgroundRunsTable runs={runs} />
137139
</div>
138140
);

‎references/nextjs-realtime/src/app/batches/[id]/page.tsx

Lines changed: 1 addition & 1 deletion
Original file line numberDiff line numberDiff line change
@@ -11,7 +11,7 @@ export default async function DetailsPage({ params }: { params: { id: string } }
1111
}
1212

1313
return (
14-
<main className="flex min-h-screen items-center justify-center p-4 bg-gray-100">
14+
<main className="flex min-h-screen items-center justify-center p-4 bg-gray-900">
1515
<ClientBatchRunDetails batchId={params.id} jwt={jwt.value} />
1616
</main>
1717
);

‎references/nextjs-realtime/src/app/layout.tsx

Lines changed: 1 addition & 1 deletion
Original file line numberDiff line numberDiff line change
@@ -28,7 +28,7 @@ export default function RootLayout({
2828
}>) {
2929
return (
3030
<html lang="en">
31-
<body className={`${geistSans.variable} ${geistMono.variable} antialiased`}>
31+
<body className={`${geistSans.variable} ${geistMono.variable} antialiased bg-gray-900`}>
3232
<NextSSRPlugin
3333
/**
3434
* The `extractRouterConfig` will extract **only** the route configs

‎references/nextjs-realtime/src/app/page.tsx

Lines changed: 8 additions & 3 deletions
Original file line numberDiff line numberDiff line change
@@ -4,11 +4,16 @@ import { ImageUploadDropzone } from "@/components/ImageUploadButton";
44

55
export default function Home() {
66
return (
7-
<main className="flex min-h-screen items-center justify-center bg-background-dark">
8-
<div className="flex flex-col space-y-4">
7+
<main className="grid grid-rows-[1fr_auto] min-h-screen items-center justify-center w-full bg-gray-900">
8+
<div className="flex flex-col space-y-8">
9+
<h1 className="text-gray-200 text-4xl max-w-xl text-center font-bold">
10+
Thumbnail Generator Demo
11+
</h1>
12+
<ImageUploadDropzone />
13+
</div>
14+
<div className="flex items-center space-x-4 justify-center w-full">
915
<RunButton />
1016
<BatchRunButton />
11-
<ImageUploadDropzone />
1217
</div>
1318
</main>
1419
);

‎references/nextjs-realtime/src/app/runs/[id]/ClientRunDetails.tsx

Lines changed: 6 additions & 6 deletions
Original file line numberDiff line numberDiff line change
@@ -10,8 +10,8 @@ function RunDetailsWrapper({ runId }: { runId: string }) {
1010

1111
if (error) {
1212
return (
13-
<div className="w-full min-h-screen bg-gray-100 p-4">
14-
<Card className="w-full bg-white shadow-md">
13+
<div className="w-full min-h-screen bg-gray-900 p-4">
14+
<Card className="w-full bg-gray-800 shadow-md">
1515
<CardContent className="pt-6">
1616
<p className="text-red-600">Error: {error.message}</p>
1717
</CardContent>
@@ -22,18 +22,18 @@ function RunDetailsWrapper({ runId }: { runId: string }) {
2222

2323
if (!run) {
2424
return (
25-
<div className="w-full min-h-screen bg-gray-100 p-4">
26-
<Card className="w-full bg-white shadow-md">
25+
<div className="w-full min-h-screen bg-gray-900 py-4 px-6 grid place-items-center">
26+
<Card className="w-fit bg-gray-800 shadow-md">
2727
<CardContent className="pt-6">
28-
<p>Loading run details...</p>
28+
<p className="text-gray-200">Loading run details…</p>
2929
</CardContent>
3030
</Card>
3131
</div>
3232
);
3333
}
3434

3535
return (
36-
<div className="w-full min-h-screen bg-gray-100 p-4 space-y-6">
36+
<div className="w-full min-h-screen bg-gray-900 text-gray-200 p-4 space-y-6">
3737
<RunDetails record={run} />
3838
</div>
3939
);

‎references/nextjs-realtime/src/app/runs/[id]/page.tsx

Lines changed: 1 addition & 1 deletion
Original file line numberDiff line numberDiff line change
@@ -11,7 +11,7 @@ export default async function DetailsPage({ params }: { params: { id: string } }
1111
}
1212

1313
return (
14-
<main className="flex min-h-screen items-center justify-center p-4 bg-gray-100">
14+
<main className="flex min-h-screen items-center justify-center p-4 bg-gray-900">
1515
<ClientRunDetails runId={params.id} jwt={jwt.value} />
1616
</main>
1717
);

‎references/nextjs-realtime/src/app/uploads/[id]/ClientUploadDetails.tsx

Lines changed: 6 additions & 6 deletions
Original file line numberDiff line numberDiff line change
@@ -11,8 +11,8 @@ function UploadDetailsWrapper({ fileId }: { fileId: string }) {
1111

1212
if (error) {
1313
return (
14-
<div className="w-full min-h-screen bg-gray-100 p-4">
15-
<Card className="w-full bg-white shadow-md">
14+
<div className="w-full min-h-screen bg-gray-900 p-4">
15+
<Card className="w-full bg-gray-800 shadow-md">
1616
<CardContent className="pt-6">
1717
<p className="text-red-600">Error: {error.message}</p>
1818
</CardContent>
@@ -23,10 +23,10 @@ function UploadDetailsWrapper({ fileId }: { fileId: string }) {
2323

2424
if (!run) {
2525
return (
26-
<div className="w-full min-h-screen bg-gray-100 p-4">
27-
<Card className="w-full bg-white shadow-md">
26+
<div className="w-full min-h-screen bg-gray-900 py-4 px-6 grid place-items-center">
27+
<Card className="w-fit bg-gray-800 shadow-md">
2828
<CardContent className="pt-6">
29-
<p>Loading run details...</p>
29+
<p className="text-gray-200">Loading run details…</p>
3030
</CardContent>
3131
</Card>
3232
</div>
@@ -45,7 +45,7 @@ function UploadDetailsWrapper({ fileId }: { fileId: string }) {
4545
);
4646

4747
return (
48-
<div className="w-full min-h-screen bg-gray-100 p-4 space-y-6">
48+
<div className="w-full min-h-screen bg-gray-900 text-gray-200 p-4 space-y-6">
4949
<ImageDisplay
5050
uploadedImage={run.payload.appUrl}
5151
uploadedCaption={run.payload.name}

‎references/nextjs-realtime/src/app/uploads/[id]/page.tsx

Lines changed: 1 addition & 1 deletion
Original file line numberDiff line numberDiff line change
@@ -15,7 +15,7 @@ export default async function UploadPage({
1515
}
1616

1717
return (
18-
<main className="flex min-h-screen items-center justify-center p-4 bg-gray-100">
18+
<main className="flex min-h-screen items-center justify-center p-4 bg-gray-900">
1919
<ClientUploadDetails fileId={params.id} publicAccessToken={publicAccessToken} />
2020
</main>
2121
);

‎references/nextjs-realtime/src/components/BatchRunButton.tsx

Lines changed: 5 additions & 1 deletion
Original file line numberDiff line numberDiff line change
@@ -9,7 +9,11 @@ function SubmitButton() {
99
const { pending } = useFormStatus();
1010

1111
return (
12-
<Button type="submit" disabled={pending}>
12+
<Button
13+
type="submit"
14+
disabled={pending}
15+
className="p-0 bg-transparent hover:bg-transparent hover:text-gray-200 text-gray-400"
16+
>
1317
{pending ? "Running..." : "Run Batch Task"}
1418
</Button>
1519
);

‎references/nextjs-realtime/src/components/HandleUploadFooter.tsx

Lines changed: 30 additions & 21 deletions
Original file line numberDiff line numberDiff line change
@@ -3,7 +3,7 @@
33
import { Badge } from "@/components/ui/badge";
44
import { Button } from "@/components/ui/button";
55
import { AnyRunShape, TaskRunShape } from "@trigger.dev/sdk/v3";
6-
import { ExternalLink } from "lucide-react";
6+
import { ChevronLeft, ExternalLink } from "lucide-react";
77
import type { handleUpload } from "@/trigger/images";
88

99
interface HandleUploadFooterProps {
@@ -26,27 +26,36 @@ export function HandleUploadFooter({ run, viewRunUrl }: HandleUploadFooterProps)
2626
};
2727

2828
return (
29-
<div className="fixed bottom-0 left-0 right-0 bg-background border-t border-border p-4 shadow-lg">
30-
<div className="container mx-auto flex items-center justify-between">
31-
<div className="flex items-center space-x-4">
32-
<span className="text-sm font-medium">Run ID: {run.id}</span>
33-
<span className="text-sm">Processing {run.payload.name}</span>
34-
<Badge variant="secondary" className={`${getStatusColor(run.status)} text-white`}>
35-
{run.status}
36-
</Badge>
37-
</div>
38-
<Button variant="outline" size="sm" asChild>
39-
<a
40-
href={viewRunUrl}
41-
target="_blank"
42-
rel="noopener noreferrer"
43-
className="flex items-center"
44-
>
45-
View Run
46-
<ExternalLink className="ml-2 h-4 w-4" />
47-
</a>
48-
</Button>
29+
<div className="fixed flex items-center justify-between bottom-0 left-0 right-0 bg-gray-800 border-t border-gray-700 p-4">
30+
<Button variant="outline" size="sm" asChild>
31+
<a
32+
href="/"
33+
rel="noopener noreferrer"
34+
className="flex items-center bg-green-700 text-white px-2 py-1 rounded-md border-transparent hover:bg-green-600 hover:text-white"
35+
>
36+
<ChevronLeft className="mr-1 size-4" />
37+
Upload another image
38+
</a>
39+
</Button>
40+
<div className="flex items-center space-x-4">
41+
<span className="text-sm font-medium">Run ID: {run.id}</span>
42+
<span className="text-gray-400">|</span>
43+
<span className="text-sm">Processing {run.payload.name}</span>
44+
<Badge variant="secondary" className={`${getStatusColor(run.status)} text-gray-200`}>
45+
{run.status}
46+
</Badge>
4947
</div>
48+
<Button variant="outline" size="sm" asChild>
49+
<a
50+
href={viewRunUrl}
51+
target="_blank"
52+
rel="noopener noreferrer"
53+
className="flex items-center bg-green-700 text-white px-2 py-1 rounded-md border-transparent hover:bg-green-600 hover:text-white"
54+
>
55+
View Run
56+
<ExternalLink className="ml-2 size-4" />
57+
</a>
58+
</Button>
5059
</div>
5160
);
5261
}

‎references/nextjs-realtime/src/components/ImageUploadButton.tsx

Lines changed: 1 addition & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -47,6 +47,7 @@ export function ImageUploadDropzone() {
4747
// Do something with the error.
4848
console.error(`ERROR! ${error.message}`);
4949
}}
50+
className="border-gray-600"
5051
/>
5152
);
5253
}

‎references/nextjs-realtime/src/components/RunButton.tsx

Lines changed: 5 additions & 1 deletion
Original file line numberDiff line numberDiff line change
@@ -9,7 +9,11 @@ function SubmitButton() {
99
const { pending } = useFormStatus();
1010

1111
return (
12-
<Button type="submit" disabled={pending}>
12+
<Button
13+
type="submit"
14+
disabled={pending}
15+
className="p-0 bg-transparent hover:bg-transparent hover:text-gray-200 text-gray-400"
16+
>
1317
{pending ? "Running..." : "Run Task"}
1418
</Button>
1519
);

0 commit comments

Comments
 (0)