mark/vibn-frontend
1
0
Fork 0
Code Issues Pull Requests Actions Packages Projects Releases Wiki Activity

fix(dashboard): align rail group titles, headers, and count pills with reference design

Browse Source
This commit is contained in:
mawkone
2026-06-14 13:27:42 -07:00
parent c56a39d763
commit db7814782c
7 changed files with 37 additions and 41 deletions
Download Patch File Download Diff File Expand all files Collapse all files

12
vibn-frontend/app/[workspace]/project/[projectId]/(home)/code/page.tsx
View File

@@ -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",

9
vibn-frontend/app/[workspace]/project/[projectId]/(home)/hosting/page.tsx
View File

@@ -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,

18
vibn-frontend/app/[workspace]/project/[projectId]/(home)/infrastructure/page.tsx
View File

@@ -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",

8
vibn-frontend/app/[workspace]/project/[projectId]/(home)/overview/page.tsx
View File

@@ -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,

4
vibn-frontend/app/[workspace]/project/[projectId]/(home)/plan/page.tsx
View File

@@ -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,
};

13
vibn-frontend/app/[workspace]/project/[projectId]/(home)/product/page.tsx
View File

@@ -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",

14
vibn-frontend/app/[workspace]/project/[projectId]/(home)/services/page.tsx
View File

@@ -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,