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/soul/page.tsx
+17 -19
View File
@@ -1,7 +1,7 @@
"use client";
import { useState, useEffect } from "react";
import { Sparkles, Save, RotateCcw } from "lucide-react";
import { Save, RotateCcw } from "lucide-react";
export default function SoulPage() {
const [content, setContent] = useState("");
@@ -36,46 +36,44 @@ export default function SoulPage() {
return (
<div className="space-y-4">
<div className="flex items-center justify-between">
<div className="flex items-center gap-2">
<Sparkles size={20} style={{ color: "#ec4899" }} />
<h1 className="text-xl font-bold" style={{ color: "#ec4899" }}>SOUL.md</h1>
</div>
<h1 className="text-xl font-semibold" style={{ color: "var(--text-1)" }}>SOUL.md</h1>
<div className="flex items-center gap-2">
{dirty && (
<button
onClick={() => setContent(original)}
className="p-2 rounded-xl active:scale-95 text-zinc-500"
>
<button onClick={() => setContent(original)} className="p-2 rounded-xl active:scale-95" style={{ color: "var(--text-3)" }}>
<RotateCcw size={16} />
</button>
)}
<button
onClick={save}
disabled={!dirty || saving}
className="flex items-center gap-1.5 px-3 py-1.5 rounded-xl text-xs font-medium transition-all disabled:opacity-30"
style={{ background: "rgba(236,72,153,0.15)", color: "#ec4899" }}
className="flex items-center gap-1.5 px-3 py-1.5 rounded-xl text-xs font-semibold transition-all disabled:opacity-20"
style={{ background: "var(--accent-dim)", color: "var(--accent)" }}
>
<Save size={14} />
{saving ? "Saving..." : saved ? "Saved!" : "Save"}
{saving ? "Saving..." : saved ? "Saved" : "Save"}
</button>
</div>
</div>
<p className="text-xs text-zinc-500">
Persona file loaded fresh each message. Edit to change how Hermes communicates.
<p className="text-[12px]" style={{ color: "var(--text-3)" }}>
Persona file. Loaded fresh each message.
</p>
{loading ? (
<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>
) : (
<textarea
value={content}
onChange={(e) => setContent(e.target.value)}
className="w-full min-h-[60vh] p-4 rounded-2xl text-sm text-zinc-300 bg-white/[0.04] border border-white/[0.08] outline-none focus:border-white/[0.15] resize-none font-mono leading-relaxed transition-colors"
className="w-full min-h-[60vh] p-4 rounded-2xl text-[13px] resize-none font-mono leading-relaxed outline-none transition-colors"
style={{
background: "var(--bg-raised)",
border: "1px solid var(--border)",
color: "var(--text-1)",
}}
spellCheck={false}
/>
)}