Skip to content

Commit 4c8627c

Browse files
D-K-PD-K-P
committed
Updated styling to dark mode
1 parent 13aa507 commit 4c8627c

7 files changed

Lines changed: 162 additions & 302 deletions

File tree

‎changelog-generator/app/globals.css‎

Lines changed: 44 additions & 62 deletions
Original file line numberDiff line numberDiff line change
@@ -2,73 +2,55 @@
22
@tailwind components;
33
@tailwind utilities;
44

5-
:root {
6-
--foreground-rgb: 0, 0, 0;
7-
--background-start-rgb: 214, 219, 220;
8-
--background-end-rgb: 255, 255, 255;
9-
}
10-
11-
@media (prefers-color-scheme: dark) {
12-
:root {
13-
--foreground-rgb: 255, 255, 255;
14-
--background-start-rgb: 0, 0, 0;
15-
--background-end-rgb: 0, 0, 0;
16-
}
17-
}
18-
5+
/* GitHub Dark Mode Theme */
196
@layer base {
207
:root {
21-
--background: 0 0% 100%;
22-
--foreground: 0 0% 3.9%;
23-
--card: 0 0% 100%;
24-
--card-foreground: 0 0% 3.9%;
25-
--popover: 0 0% 100%;
26-
--popover-foreground: 0 0% 3.9%;
27-
--primary: 0 0% 9%;
28-
--primary-foreground: 0 0% 98%;
29-
--secondary: 0 0% 96.1%;
30-
--secondary-foreground: 0 0% 9%;
31-
--muted: 0 0% 96.1%;
32-
--muted-foreground: 0 0% 45.1%;
33-
--accent: 0 0% 96.1%;
34-
--accent-foreground: 0 0% 9%;
35-
--destructive: 0 84.2% 60.2%;
36-
--destructive-foreground: 0 0% 98%;
37-
--border: 0 0% 89.8%;
38-
--input: 0 0% 89.8%;
39-
--ring: 0 0% 3.9%;
40-
--chart-1: 12 76% 61%;
41-
--chart-2: 173 58% 39%;
42-
--chart-3: 197 37% 24%;
43-
--chart-4: 43 74% 66%;
44-
--chart-5: 27 87% 67%;
45-
--radius: 0.5rem;
46-
}
47-
.dark {
48-
--background: 0 0% 3.9%;
49-
--foreground: 0 0% 98%;
50-
--card: 0 0% 3.9%;
51-
--card-foreground: 0 0% 98%;
52-
--popover: 0 0% 3.9%;
53-
--popover-foreground: 0 0% 98%;
54-
--primary: 0 0% 98%;
55-
--primary-foreground: 0 0% 9%;
56-
--secondary: 0 0% 14.9%;
57-
--secondary-foreground: 0 0% 98%;
58-
--muted: 0 0% 14.9%;
59-
--muted-foreground: 0 0% 63.9%;
60-
--accent: 0 0% 14.9%;
61-
--accent-foreground: 0 0% 98%;
62-
--destructive: 0 62.8% 30.6%;
63-
--destructive-foreground: 0 0% 98%;
64-
--border: 0 0% 14.9%;
65-
--input: 0 0% 14.9%;
66-
--ring: 0 0% 83.1%;
67-
--chart-1: 220 70% 50%;
68-
--chart-2: 160 60% 45%;
8+
/* GitHub dark: #0d1117 */
9+
--background: 215 28% 7%;
10+
/* GitHub text: #e6edf3 */
11+
--foreground: 210 40% 92%;
12+
13+
/* GitHub elevated: #161b22 */
14+
--card: 215 24% 11%;
15+
--card-foreground: 210 40% 92%;
16+
17+
--popover: 215 24% 11%;
18+
--popover-foreground: 210 40% 92%;
19+
20+
/* GitHub green: #238636 */
21+
--primary: 132 69% 36%;
22+
--primary-foreground: 0 0% 100%;
23+
24+
/* GitHub subtle: #21262d */
25+
--secondary: 215 19% 15%;
26+
--secondary-foreground: 210 40% 92%;
27+
28+
/* GitHub muted bg: #21262d */
29+
--muted: 215 19% 15%;
30+
/* GitHub muted text: #7d8590 */
31+
--muted-foreground: 215 8% 53%;
32+
33+
--accent: 215 19% 15%;
34+
--accent-foreground: 210 40% 92%;
35+
36+
/* GitHub red: #da3633 */
37+
--destructive: 1 68% 53%;
38+
--destructive-foreground: 0 0% 100%;
39+
40+
/* GitHub border: #30363d */
41+
--border: 212 14% 21%;
42+
--input: 212 14% 21%;
43+
44+
/* GitHub blue: #58a6ff */
45+
--ring: 212 100% 67%;
46+
47+
--chart-1: 132 69% 36%;
48+
--chart-2: 212 100% 67%;
6949
--chart-3: 30 80% 55%;
7050
--chart-4: 280 65% 60%;
7151
--chart-5: 340 75% 55%;
52+
53+
--radius: 0.5rem;
7254
}
7355
}
7456

‎changelog-generator/app/page.tsx‎

Lines changed: 34 additions & 43 deletions
Original file line numberDiff line numberDiff line change
@@ -11,7 +11,7 @@ import {
1111
CardHeader,
1212
CardTitle,
1313
} from "@/components/ui/card";
14-
import { Github, Sparkles, AlertCircle, Calendar } from "lucide-react";
14+
import { Github, Sparkles, AlertCircle } from "lucide-react";
1515
import { Alert, AlertDescription } from "@/components/ui/alert";
1616

1717
const exampleRepos = [
@@ -128,27 +128,23 @@ export default function Home() {
128128
};
129129

130130
return (
131-
<div className="min-h-screen bg-gradient-to-b from-background to-secondary/20">
132-
<div className="container mx-auto px-4 py-16 md:py-24 max-w-4xl">
133-
<div className="text-center space-y-6 mb-8">
134-
{/* <div className="flex items-center justify-center gap-2 mb-4">
135-
<Github className="w-8 h-8" />
136-
<Sparkles className="w-8 h-8" />
137-
</div> */}
138-
139-
<h1 className="text-3xl md:text-4xl font-bold tracking-tight">
131+
<div className="min-h-screen bg-background">
132+
<div className="container mx-auto px-4 py-12 max-w-2xl">
133+
{/* Header */}
134+
<header className="text-center mb-8">
135+
<h1 className="text-2xl font-bold tracking-tight">
140136
Changelog generator
141137
</h1>
142-
143-
<p className="text-xl text-muted-foreground max-w-2xl mx-auto">
138+
<p className="mt-2 text-muted-foreground">
144139
Turn GitHub commits into developer-friendly changelogs using Claude
145140
Agent SDK with custom MCP tools + Trigger.dev.
146141
</p>
147-
</div>
142+
</header>
148143

149-
<Card className="max-w-2xl mx-auto">
144+
{/* Main Form Card */}
145+
<Card>
150146
<CardHeader>
151-
<CardTitle className="pb-2">Generate changelog</CardTitle>
147+
<CardTitle>Generate changelog</CardTitle>
152148
<CardDescription>
153149
Enter a GitHub repository and date range to generate a changelog
154150
</CardDescription>
@@ -165,7 +161,6 @@ export default function Home() {
165161
placeholder="https://github.com/username/repository"
166162
value={repoUrl}
167163
onChange={(e) => setRepoUrl(e.target.value)}
168-
className="w-full"
169164
disabled={isLoading}
170165
/>
171166
</div>
@@ -175,30 +170,26 @@ export default function Home() {
175170
<label htmlFor="startDate" className="text-sm font-medium">
176171
Start date
177172
</label>
178-
<div className="relative">
179-
<Input
180-
id="startDate"
181-
type="date"
182-
value={startDate}
183-
onChange={(e) => setStartDate(e.target.value)}
184-
disabled={isLoading}
185-
/>
186-
</div>
173+
<Input
174+
id="startDate"
175+
type="date"
176+
value={startDate}
177+
onChange={(e) => setStartDate(e.target.value)}
178+
disabled={isLoading}
179+
/>
187180
</div>
188181

189182
<div className="space-y-2">
190183
<label htmlFor="endDate" className="text-sm font-medium">
191184
End date
192185
</label>
193-
<div className="relative">
194-
<Input
195-
id="endDate"
196-
type="date"
197-
value={endDate}
198-
onChange={(e) => setEndDate(e.target.value)}
199-
disabled={isLoading}
200-
/>
201-
</div>
186+
<Input
187+
id="endDate"
188+
type="date"
189+
value={endDate}
190+
onChange={(e) => setEndDate(e.target.value)}
191+
disabled={isLoading}
192+
/>
202193
</div>
203194
</div>
204195

@@ -232,22 +223,22 @@ export default function Home() {
232223
</Card>
233224

234225
{/* Example Repositories */}
235-
<div className="mt-8 space-y-4">
236-
<h2 className="text-xl font-semibold text-center">
226+
<section className="mt-8">
227+
<h2 className="text-sm font-medium text-muted-foreground mb-4">
237228
Try with popular repositories
238229
</h2>
239230

240-
<div className="grid md:grid-cols-3 gap-4 max-w-2xl mx-auto">
231+
<div className="grid grid-cols-3 gap-4">
241232
{exampleRepos.map((repo) => (
242233
<Card
243234
key={repo.url}
244-
className="cursor-pointer transition-all duration-200 hover:border-primary"
235+
className="cursor-pointer transition-colors hover:border-primary"
245236
onClick={() => handleExampleRepo(repo.url)}
246237
>
247-
<CardHeader className="pb-2">
248-
<CardTitle className="flex items-center gap-2 text-base">
249-
<Github className="w-4 h-4" />
250-
{repo.name}
238+
<CardHeader>
239+
<CardTitle className="flex items-center gap-2">
240+
<Github className="w-4 h-4 shrink-0" />
241+
<span className="truncate">{repo.name}</span>
251242
</CardTitle>
252243
<CardDescription className="text-xs">
253244
{repo.description}
@@ -256,7 +247,7 @@ export default function Home() {
256247
</Card>
257248
))}
258249
</div>
259-
</div>
250+
</section>
260251
</div>
261252
</div>
262253
);

0 commit comments

Comments
 (0)