Skip to content

Design: list layout + brighter green #38

New issue

Have a question about this project? Sign up for a free GitHub account to open an issue and contact its maintainers and the community.

Sign up for GitHub

By clicking “Sign up for GitHub”, you agree to our terms of service and privacy statement. We’ll occasionally send you account related emails.

Already on GitHub? Sign in to your account

Merged
jasoncrawford merged 2 commits into from
Feb 22, 2026
Merged

Design: list layout + brighter green #38

Show file tree
Hide file tree
Changes from all commits
Commits
Show all changes
2 commits
Select commit Hold shift + click to select a range
bad2501
design: switch sites to list layout, brighten success green
jasoncrawford Feb 22, 2026
899ccb8
fix: make entire site card clickable with overlay link
jasoncrawford Feb 22, 2026
File filter

Filter by extension

Filter by extension
Conversations
Failed to load comments.
Loading
Jump to
Jump to file
Failed to load files.
Loading
Diff view
Diff view
6 changes: 3 additions & 3 deletions src/app/incidents/[id]/page.tsx
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -152,7 +152,7 @@ export default async function IncidentDetailPage({
<button
type="submit"
className="inline-flex items-center gap-1.5 px-5 py-2 text-sm font-semibold text-white rounded cursor-pointer transition-colors"
style={{ backgroundColor: "#5A8A5A" }}
style={{ backgroundColor: "#2DA44E" }}
>
<svg
viewBox="0 0 24 24"
Expand Down Expand Up @@ -206,14 +206,14 @@ export default async function IncidentDetailPage({
className="w-2.5 h-2.5 rounded-full shrink-0"
style={{
backgroundColor:
check.status === "failure" ? "#C4453C" : "#5A8A5A",
check.status === "failure" ? "#C4453C" : "#2DA44E",
}}
/>
<span
className="text-sm font-medium min-w-[80px]"
style={{
color:
check.status === "failure" ? "#C4453C" : "#5A8A5A",
check.status === "failure" ? "#C4453C" : "#2DA44E",
}}
>
{check.status === "failure" ? "Failing" : "Passing"}
Expand Down
61 changes: 30 additions & 31 deletions src/app/page.tsx
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -132,7 +132,7 @@ export default async function StatusPage() {
No sites are being monitored yet.
</p>
) : (
<div className="grid grid-cols-1 sm:grid-cols-2 lg:grid-cols-3 gap-3">
<div className="flex flex-col gap-3">
{sites.map((site) => (
<div
key={site.id}
Expand All @@ -141,50 +141,49 @@ export default async function StatusPage() {
backgroundColor: "#FFFFFF",
border: "1px solid #E8E4DF",
borderRadius: "4px",
padding: "16px 18px",
padding: "14px 18px",
}}
>
<Link
href={`/sites/${site.id}`}
className="block no-underline"
style={{ color: "inherit" }}
>
<div className="flex items-center justify-between gap-2">
<div className="flex items-center gap-2.5 min-w-0">
<span
className="w-2 h-2 rounded-full shrink-0"
style={{
backgroundColor:
site.lastCheck?.status === "failure"
? "#C4453C"
: "#5A8A5A",
}}
/>
<span
className="text-sm font-bold truncate"
style={{ color: "#1A1A1A" }}
>
{site.name}
</span>
</div>
className="absolute inset-0 z-0"
aria-label={site.name}
/>
<div className="flex items-center gap-3 flex-wrap">
<div className="flex items-center gap-2.5 min-w-0">
<span
className="w-2 h-2 rounded-full shrink-0"
style={{
backgroundColor:
site.lastCheck?.status === "failure"
? "#C4453C"
: "#2DA44E",
}}
/>
<span
className="text-sm font-bold"
style={{ color: "#1A1A1A" }}
>
{site.name}
</span>
</div>
<div
className="mt-1.5 text-xs truncate"
<span
className="text-xs"
style={{ color: "#5C5C5C" }}
>
{site.url}
</div>
<div
className="mt-2 text-[11px]"
</span>
<span
className="ml-auto text-[11px] shrink-0"
style={{ color: "#8A8A8A", letterSpacing: "0.01em" }}
>
{site.lastCheck
? `Checked ${formatTimeAgo(site.lastCheck.checked_at)}`
: "No checks yet"}
</div>
</Link>
</span>
</div>
{isAdmin && (
<div className="absolute top-3 right-3 z-10">
<div className="absolute top-1/2 -translate-y-1/2 right-3 z-10">
<SiteFormDialog
mode="edit"
siteId={site.id}
Expand Down
8 changes: 4 additions & 4 deletions src/app/sites/[id]/page.tsx
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -83,9 +83,9 @@ export default async function SiteDetailPage({
<div className="inline-flex items-center gap-2 text-sm font-semibold">
<span
className="w-2.5 h-2.5 rounded-full"
style={{ backgroundColor: isDown ? "#C4453C" : "#5A8A5A" }}
style={{ backgroundColor: isDown ? "#C4453C" : "#2DA44E" }}
/>
<span style={{ color: isDown ? "#C4453C" : "#5A8A5A" }}>
<span style={{ color: isDown ? "#C4453C" : "#2DA44E" }}>
{isDown ? "Down" : "Up"}
</span>
</div>
Expand Down Expand Up @@ -254,12 +254,12 @@ export default async function SiteDetailPage({
<span
className="w-1.5 h-1.5 rounded-full"
style={{
backgroundColor: isFailure ? "#C4453C" : "#5A8A5A",
backgroundColor: isFailure ? "#C4453C" : "#2DA44E",
}}
/>
<span
className="text-sm font-medium"
style={{ color: isFailure ? "#C4453C" : "#5A8A5A" }}
style={{ color: isFailure ? "#C4453C" : "#2DA44E" }}
>
{isFailure
? check.error ?? "Failure"
Expand Down
9 changes: 4 additions & 5 deletions src/components/AddSiteCard.tsx
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -6,19 +6,18 @@ export default function AddSiteCard() {
mode="add"
trigger={
<button
className="flex items-center justify-center flex-col gap-1.5 rounded cursor-pointer w-full"
className="flex items-center gap-2 rounded cursor-pointer w-full"
style={{
background: "transparent",
border: "1.5px dashed #D4CFC9",
padding: "24px 18px",
padding: "12px 18px",
color: "#8A8A8A",
minHeight: "108px",
transition: "border-color 0.15s, color 0.15s",
}}
>
<svg
width="20"
height="20"
width="16"
height="16"
viewBox="0 0 16 16"
fill="none"
stroke="currentColor"
Expand Down