julienfroidefond/stripstream-librarian
1
0
Fork 0
Code Issues 4 Pull Requests Actions Packages Projects Releases Wiki Activity

feat(backoffice): redesign UI with enhanced background and glassmorphism effects

Browse Source 
- Add vibrant radial gradient backgrounds with multiple color zones
- Implement glassmorphism effects on header and cards
- Add subtle grain texture overlay
- Update card hover effects with smooth transitions
- Improve dark mode background visibility
This commit is contained in:
Julien Froidefond
2026-03-06 16:21:48 +01:00
parent 2b30ae47de
commit 7cdc72b6e1
30 changed files with 1783 additions and 694 deletions
Download Patch File Download Diff File Expand all files Collapse all files

87
apps/backoffice/app/layout.tsx
View File

@@ -9,60 +9,73 @@ import { JobsIndicator } from "./components/JobsIndicator";
import { NavIcon } from "./components/ui";
export const metadata: Metadata = {
title: "Stripstream Backoffice",
description: "Backoffice administration for Stripstream Librarian"
title: "StripStream Backoffice",
description: "Backoffice administration for StripStream Librarian"
};
type NavItem = {
href: "/" | "/books" | "/libraries" | "/jobs" | "/tokens";
label: string;
icon: "dashboard" | "books" | "libraries" | "jobs" | "tokens";
};
const navItems: NavItem[] = [
{ href: "/", label: "Dashboard", icon: "dashboard" },
{ href: "/books", label: "Books", icon: "books" },
{ href: "/libraries", label: "Libraries", icon: "libraries" },
{ href: "/jobs", label: "Jobs", icon: "jobs" },
{ href: "/tokens", label: "Tokens", icon: "tokens" },
];
export default function RootLayout({ children }: { children: ReactNode }) {
return (
<html lang="en" suppressHydrationWarning>
<body className="min-h-screen bg-background text-foreground font-sans antialiased">
<body className="min-h-screen bg-background text-foreground font-sans antialiased bg-grain">
<ThemeProvider>
{/* Navigation */}
<nav className="sticky top-0 z-50 w-full border-b border-line bg-card/80 backdrop-blur-md">
<div className="container mx-auto flex h-16 items-center justify-between px-4">
{/* Header avec effet glassmorphism */}
<header className="sticky top-0 z-50 w-full border-b border-border/40 bg-background/70 backdrop-blur-xl backdrop-saturate-150 supports-[backdrop-filter]:bg-background/60">
<nav className="container mx-auto flex h-16 items-center justify-between px-4">
{/* Brand */}
<Link href="/" className="flex items-center gap-3 hover:opacity-80 transition-opacity">
<Link
href="/"
className="flex items-center gap-3 hover:opacity-80 transition-opacity duration-200"
>
<Image
src="/logo.png"
alt="Stripstream"
alt="StripStream"
width={36}
height={36}
className="rounded-lg"
/>
<div className="flex items-baseline gap-2">
<span className="text-xl font-bold tracking-tight">StripStream</span>
<span className="text-sm text-muted font-medium">backoffice</span>
<span className="text-xl font-bold tracking-tight text-foreground">
StripStream
</span>
<span className="text-sm text-muted-foreground font-medium">
backoffice
</span>
</div>
</Link>
{/* Navigation Links */}
<div className="flex items-center gap-6">
<div className="flex items-center gap-2">
<div className="hidden md:flex items-center gap-1">
<NavLink href="/">
<NavIcon name="dashboard" /> Dashboard
</NavLink>
<NavLink href="/books">
<NavIcon name="books" /> Books
</NavLink>
<NavLink href="/libraries">
<NavIcon name="libraries" /> Libraries
</NavLink>
<NavLink href="/jobs">
<NavIcon name="jobs" /> Jobs
</NavLink>
<NavLink href="/tokens">
<NavIcon name="tokens" /> Tokens
</NavLink>
{navItems.map((item) => (
<NavLink key={item.href} href={item.href}>
<NavIcon name={item.icon} />
<span className="ml-2">{item.label}</span>
</NavLink>
))}
</div>
<div className="flex items-center gap-3 pl-6 border-l border-line">
{/* Actions */}
<div className="flex items-center gap-1 pl-4 ml-2 border-l border-border/60">
<JobsIndicator />
<ThemeToggle />
</div>
</div>
</div>
</nav>
</nav>
</header>
{/* Main Content */}
<main className="container mx-auto px-4 sm:px-6 lg:px-8 py-8 pb-16">
@@ -75,11 +88,21 @@ export default function RootLayout({ children }: { children: ReactNode }) {
}
// Navigation Link Component
function NavLink({ href, children }: { href: "/" | "/books" | "/libraries" | "/jobs" | "/tokens"; children: React.ReactNode }) {
function NavLink({ href, children }: { href: NavItem["href"]; children: React.ReactNode }) {
return (
<Link
href={href}
className="flex items-center gap-2 px-3 py-2 rounded-md text-sm font-medium text-foreground/80 hover:text-foreground hover:bg-primary-soft transition-colors"
href={href}
className="
flex items-center
px-3 py-2
rounded-lg
text-sm font-medium
text-muted-foreground
hover:text-foreground
hover:bg-accent
transition-colors duration-200
active:scale-[0.98]
"
>
{children}
</Link>