hermes/hermes-os
1
0
Fork 0
Code Issues 12 Pull Requests Actions Packages Projects Releases Wiki Activity

Complete visual redesign: solid dark cards, purple accent, iOS-like

Browse Source 
- All pages use new design system (card, section-label, btn-accent)
- No more glassmorphism — clean solid surfaces
- Cron, Soul, Config, Skills detail all restyled
- Consistent typography and spacing throughout
This commit is contained in:
Hermes
2026-04-09 21:17:41 -05:00
parent 893c74ed38
commit 9994bbeaac
4 changed files with 112 additions and 163 deletions
Download Patch File Download Diff File Expand all files Collapse all files
app/skills/[name]/page.tsx
+19 -30
View File
@@ -12,53 +12,42 @@ export default function SkillDetailPage({ params }: { params: Promise<{ name: st
return (
<div className="space-y-4">
<div className="flex items-center gap-3">
<Link href="/skills" className="p-1.5 -ml-1.5 rounded-lg active:bg-white/[0.06]">
<ArrowLeft size={20} className="text-zinc-400" />
<Link href="/skills" className="p-1 -ml-1 rounded-lg active:bg-white/[0.04]">
<ArrowLeft size={20} style={{ color: "var(--text-2)" }} />
</Link>
<h1 className="text-base font-semibold text-zinc-200">{name}</h1>
<h1 className="text-[15px] font-medium" style={{ color: "var(--text-1)" }}>{name}</h1>
</div>
{isLoading ? (
<div className="glass p-4 animate-pulse space-y-2">
<div className="h-4 bg-white/[0.06] rounded w-full" />
<div className="h-4 bg-white/[0.06] rounded w-3/4" />
<div className="h-4 bg-white/[0.06] rounded w-1/2" />
<div className="card p-4 animate-pulse space-y-2">
<div className="h-4 rounded w-full" style={{ background: "var(--bg-hover)" }} />
<div className="h-4 rounded w-3/4" style={{ background: "var(--bg-hover)" }} />
</div>
) : data ? (
<>
{/* Linked files */}
{data.linked_files && Object.keys(data.linked_files).length > 0 && (
<div className="glass p-3">
<div className="text-xs font-medium text-zinc-400 mb-2 flex items-center gap-1.5">
<div className="card p-3">
<div className="text-[11px] font-medium mb-2 flex items-center gap-1.5" style={{ color: "var(--text-2)" }}>
<Folder size={12} /> Linked Files
</div>
<div className="space-y-1">
{Object.entries(data.linked_files).map(([dir, files]) =>
(files as string[]).map((f) => (
<div
key={`${dir}/${f}`}
className="flex items-center gap-2 text-xs text-zinc-500 py-0.5"
>
<FileText size={11} />
<span className="font-mono">{dir}/{f}</span>
</div>
))
)}
</div>
{Object.entries(data.linked_files).map(([dir, files]) =>
(files as string[]).map((f) => (
<div key={dir + "/" + f} className="flex items-center gap-2 text-[12px] py-0.5" style={{ color: "var(--text-3)" }}>
<FileText size={11} />
<span className="font-mono">{dir}/{f}</span>
</div>
))
)}
</div>
)}
{/* Skill content */}
<div className="glass p-4">
<pre className="text-sm text-zinc-300 whitespace-pre-wrap leading-relaxed font-sans overflow-x-auto">
<div className="card p-4">
<pre className="text-[13px] whitespace-pre-wrap leading-relaxed font-sans overflow-x-auto" style={{ color: "var(--text-1)" }}>
{data.content}
</pre>
</div>
</>
) : (
<div className="glass p-6 text-center text-sm text-zinc-500">
Skill not found
</div>
<p className="text-sm py-8 text-center" style={{ color: "var(--text-3)" }}>Skill not found</p>
)}
</div>
);