bitforge/orchard
3
0
Fork 0
Code Projects Wiki Activity

Modern dark mode UI overhaul

Browse Source
This commit is contained in:
Mondo Diaz
2025-12-11 14:58:13 -06:00
parent e0802444c0
commit 71bb7d96b3
5 changed files with 597 additions and 166 deletions
Download Patch File Download Diff File Expand all files Collapse all files

49
frontend/src/components/Layout.tsx
View File

@@ -1,5 +1,5 @@
import { ReactNode } from 'react';
import { Link } from 'react-router-dom';
import { Link, useLocation } from 'react-router-dom';
import './Layout.css';
interface LayoutProps {
@@ -7,16 +7,48 @@ interface LayoutProps {
}
function Layout({ children }: LayoutProps) {
const location = useLocation();
return (
<div className="layout">
<header className="header">
<div className="container header-content">
<Link to="/" className="logo">
<span className="logo-icon">🌳</span>
<div className="logo-icon">
<svg width="28" height="28" viewBox="0 0 24 24" fill="none" xmlns="http://www.w3.org/2000/svg">
{/* Three trees representing an orchard */}
{/* Left tree */}
<ellipse cx="6" cy="9" rx="4" ry="5" fill="currentColor" opacity="0.7"/>
<rect x="5" y="13" width="2" height="5" fill="currentColor"/>
{/* Center tree (larger) */}
<ellipse cx="12" cy="7" rx="5" ry="6" fill="currentColor"/>
<rect x="11" y="12" width="2" height="6" fill="currentColor"/>
{/* Right tree */}
<ellipse cx="18" cy="9" rx="4" ry="5" fill="currentColor" opacity="0.7"/>
<rect x="17" y="13" width="2" height="5" fill="currentColor"/>
{/* Ground line */}
<line x1="2" y1="18" x2="22" y2="18" stroke="currentColor" strokeWidth="1.5" strokeLinecap="round" opacity="0.5"/>
</svg>
</div>
<span className="logo-text">Orchard</span>
</Link>
<nav className="nav">
<Link to="/">Groves</Link>
<Link to="/" className={location.pathname === '/' ? 'active' : ''}>
<svg width="16" height="16" viewBox="0 0 24 24" fill="none" stroke="currentColor" strokeWidth="2">
<path d="M3 9l9-7 9 7v11a2 2 0 0 1-2 2H5a2 2 0 0 1-2-2z"/>
<polyline points="9,22 9,12 15,12 15,22"/>
</svg>
Projects
</Link>
<a href="/docs" className="nav-link-muted">
<svg width="16" height="16" viewBox="0 0 24 24" fill="none" stroke="currentColor" strokeWidth="2">
<path d="M14 2H6a2 2 0 0 0-2 2v16a2 2 0 0 0 2 2h12a2 2 0 0 0 2-2V8z"/>
<polyline points="14,2 14,8 20,8"/>
<line x1="16" y1="13" x2="8" y2="13"/>
<line x1="16" y1="17" x2="8" y2="17"/>
</svg>
Docs
</a>
</nav>
</div>
</header>
@@ -26,8 +58,15 @@ function Layout({ children }: LayoutProps) {
</div>
</main>
<footer className="footer">
<div className="container">
<p>Orchard - Content-Addressable Storage System</p>
<div className="container footer-content">
<div className="footer-brand">
<span className="footer-logo">Orchard</span>
<span className="footer-tagline">Content-Addressable Storage</span>
</div>
<div className="footer-links">
<a href="/docs">Documentation</a>
<a href="/api/v1">API</a>
</div>
</div>
</footer>
</div>