From db7814782c571ec018c005997f9c5b3dd1f2c60a Mon Sep 17 00:00:00 2001 From: mawkone Date: Sun, 14 Jun 2026 13:27:42 -0700 Subject: [PATCH] fix(dashboard): align rail group titles, headers, and count pills with reference design --- .../project/[projectId]/(home)/code/page.tsx | 12 ++++++------ .../[projectId]/(home)/hosting/page.tsx | 9 +++++---- .../[projectId]/(home)/infrastructure/page.tsx | 18 +++++++----------- .../[projectId]/(home)/overview/page.tsx | 8 ++++---- .../project/[projectId]/(home)/plan/page.tsx | 4 ++-- .../[projectId]/(home)/product/page.tsx | 13 +++++++------ .../[projectId]/(home)/services/page.tsx | 14 ++++++-------- 7 files changed, 37 insertions(+), 41 deletions(-) diff --git a/vibn-frontend/app/[workspace]/project/[projectId]/(home)/code/page.tsx b/vibn-frontend/app/[workspace]/project/[projectId]/(home)/code/page.tsx index b19b61c..36f50a3 100644 --- a/vibn-frontend/app/[workspace]/project/[projectId]/(home)/code/page.tsx +++ b/vibn-frontend/app/[workspace]/project/[projectId]/(home)/code/page.tsx @@ -390,7 +390,7 @@ const leftCol: React.CSSProperties = { flexDirection: "column", gap: 24, borderRight: `1px solid ${THEME.borderSoft}`, - paddingRight: 24, + padding: "20px", }; const rightCol: React.CSSProperties = { @@ -412,20 +412,20 @@ const railGroupHeader: React.CSSProperties = { display: "flex", alignItems: "center", justifyContent: "space-between", - padding: "0 4px 8px", + paddingBottom: 12, }; const railGroupTitle: React.CSSProperties = { - fontSize: "0.9rem", + fontSize: "0.95rem", fontWeight: 600, color: THEME.ink, }; const countPill: React.CSSProperties = { - fontSize: "0.7rem", + fontSize: "0.75rem", fontWeight: 600, color: THEME.mid, - padding: "1px 7px", + padding: "2px 8px", borderRadius: 999, - background: "#f3eee4", + background: THEME.borderSoft, }; const railItems: React.CSSProperties = { display: "flex", diff --git a/vibn-frontend/app/[workspace]/project/[projectId]/(home)/hosting/page.tsx b/vibn-frontend/app/[workspace]/project/[projectId]/(home)/hosting/page.tsx index e41f793..2be7872 100644 --- a/vibn-frontend/app/[workspace]/project/[projectId]/(home)/hosting/page.tsx +++ b/vibn-frontend/app/[workspace]/project/[projectId]/(home)/hosting/page.tsx @@ -16,6 +16,7 @@ import { Terminal, Server, } from "lucide-react"; +import { THEME } from "@/components/project/dashboard-ui"; import { useAnatomy, type Anatomy } from "@/components/project/use-anatomy"; /** @@ -524,12 +525,12 @@ const sectionTitle: React.CSSProperties = { marginBottom: 8, }; const countPill: React.CSSProperties = { - fontSize: "0.7rem", + fontSize: "0.75rem", fontWeight: 600, - color: INK.mid, - padding: "1px 7px", + color: THEME.mid, + padding: "2px 8px", borderRadius: 999, - background: "#f3eee4", + background: THEME.borderSoft, }; const card: React.CSSProperties = { background: INK.cardBg, diff --git a/vibn-frontend/app/[workspace]/project/[projectId]/(home)/infrastructure/page.tsx b/vibn-frontend/app/[workspace]/project/[projectId]/(home)/infrastructure/page.tsx index bc9c722..af15bb2 100644 --- a/vibn-frontend/app/[workspace]/project/[projectId]/(home)/infrastructure/page.tsx +++ b/vibn-frontend/app/[workspace]/project/[projectId]/(home)/infrastructure/page.tsx @@ -22,7 +22,7 @@ import { import { useAnatomy, type Anatomy } from "@/components/project/use-anatomy"; import { DatabaseTableTree } from "@/components/project/database-table-tree"; import { TableViewer } from "@/components/project/table-viewer"; -import { KvRow } from "@/components/project/dashboard-ui"; +import { THEME, KvRow } from "@/components/project/dashboard-ui"; /** * Infrastructure tab — supporting plumbing the product runs on. @@ -1135,24 +1135,20 @@ const railGroupHeader: React.CSSProperties = { display: "flex", alignItems: "center", justifyContent: "space-between", - padding: "6px 8px", - borderRadius: 6, - cursor: "pointer", - font: "inherit", - color: "inherit", + paddingBottom: 12, }; const railGroupTitle: React.CSSProperties = { - fontSize: "0.9rem", + fontSize: "0.95rem", fontWeight: 600, color: THEME.ink, }; const countPill: React.CSSProperties = { - fontSize: "0.7rem", + fontSize: "0.75rem", fontWeight: 600, - color: INK.mid, - padding: "1px 7px", + color: THEME.mid, + padding: "2px 8px", borderRadius: 999, - background: "#f3eee4", + background: THEME.borderSoft, }; const railItems: React.CSSProperties = { display: "flex", diff --git a/vibn-frontend/app/[workspace]/project/[projectId]/(home)/overview/page.tsx b/vibn-frontend/app/[workspace]/project/[projectId]/(home)/overview/page.tsx index 83468db..0b6beda 100644 --- a/vibn-frontend/app/[workspace]/project/[projectId]/(home)/overview/page.tsx +++ b/vibn-frontend/app/[workspace]/project/[projectId]/(home)/overview/page.tsx @@ -640,12 +640,12 @@ const sectionTitle: React.CSSProperties = { marginBottom: 8, }; const countPill: React.CSSProperties = { - fontSize: "0.7rem", + fontSize: "0.75rem", fontWeight: 600, - color: INK.mid, - padding: "1px 7px", + color: THEME.mid, + padding: "2px 8px", borderRadius: 999, - background: "#f3eee4", + background: THEME.borderSoft, }; const card: React.CSSProperties = { background: INK.cardBg, diff --git a/vibn-frontend/app/[workspace]/project/[projectId]/(home)/plan/page.tsx b/vibn-frontend/app/[workspace]/project/[projectId]/(home)/plan/page.tsx index cd82d84..783a3da 100644 --- a/vibn-frontend/app/[workspace]/project/[projectId]/(home)/plan/page.tsx +++ b/vibn-frontend/app/[workspace]/project/[projectId]/(home)/plan/page.tsx @@ -796,10 +796,10 @@ const railGroupHeader: React.CSSProperties = { display: "flex", alignItems: "center", justifyContent: "space-between", - padding: "0 4px 8px", + paddingBottom: 12, }; const railGroupTitle: React.CSSProperties = { - fontSize: "0.9rem", + fontSize: "0.95rem", fontWeight: 600, color: THEME.ink, }; diff --git a/vibn-frontend/app/[workspace]/project/[projectId]/(home)/product/page.tsx b/vibn-frontend/app/[workspace]/project/[projectId]/(home)/product/page.tsx index 49c3b6d..cbba7d6 100644 --- a/vibn-frontend/app/[workspace]/project/[projectId]/(home)/product/page.tsx +++ b/vibn-frontend/app/[workspace]/project/[projectId]/(home)/product/page.tsx @@ -13,6 +13,7 @@ import { } from "lucide-react"; import { GiteaFileTree } from "@/components/project/gitea-file-tree"; import { GiteaFileViewer } from "@/components/project/gitea-file-viewer"; +import { THEME } from "@/components/project/dashboard-ui"; import { useAnatomy, type Anatomy } from "@/components/project/use-anatomy"; /** @@ -448,20 +449,20 @@ const railGroupHeader: React.CSSProperties = { display: "flex", alignItems: "center", justifyContent: "space-between", - padding: "0 4px 8px", + paddingBottom: 12, }; const railGroupTitle: React.CSSProperties = { - fontSize: "0.9rem", + fontSize: "0.95rem", fontWeight: 600, color: THEME.ink, }; const countPill: React.CSSProperties = { - fontSize: "0.7rem", + fontSize: "0.75rem", fontWeight: 600, - color: INK.mid, - padding: "1px 7px", + color: THEME.mid, + padding: "2px 8px", borderRadius: 999, - background: "#f3eee4", + background: THEME.borderSoft, }; const railItems: React.CSSProperties = { display: "flex", diff --git a/vibn-frontend/app/[workspace]/project/[projectId]/(home)/services/page.tsx b/vibn-frontend/app/[workspace]/project/[projectId]/(home)/services/page.tsx index 019ff64..47c28f1 100644 --- a/vibn-frontend/app/[workspace]/project/[projectId]/(home)/services/page.tsx +++ b/vibn-frontend/app/[workspace]/project/[projectId]/(home)/services/page.tsx @@ -17,13 +17,11 @@ import { Server, } from "lucide-react"; import { useAnatomy, type Anatomy } from "@/components/project/use-anatomy"; -import { - THEME, +import { THEME, PageHeader, Card, SectionHeader, - EmptyState, -} from "@/components/project/dashboard-ui"; + EmptyState, } from "@/components/project/dashboard-ui"; /** * Hosting tab — user-facing: "Is my thing live? How do I reach it?" @@ -573,12 +571,12 @@ const sectionTitle: React.CSSProperties = { marginBottom: 8, }; const countPill: React.CSSProperties = { - fontSize: "0.7rem", + fontSize: "0.75rem", fontWeight: 600, - color: INK.mid, - padding: "1px 7px", + color: THEME.mid, + padding: "2px 8px", borderRadius: 999, - background: "#f3eee4", + background: THEME.borderSoft, }; const card: React.CSSProperties = { background: INK.cardBg,