HeagBoKaT/cats
1
0
Fork 0
Code Issues Pull Requests Actions Packages Projects Releases Wiki Activity

UI: modern editorial redesign — stone palette, blue-purple gradient, clean typography

Browse Source
This commit is contained in:
HeagBoKaT
2026-05-29 13:19:05 +03:00
parent cfc6001d62
commit 7fa7394739
13 changed files with 402 additions and 536 deletions
Download Patch File Download Diff File Expand all files Collapse all files

24
client/src/components/Navbar.tsx
View File

@@ -10,25 +10,25 @@ export default function Navbar() {
if (!user) return null;
return (
<nav className="sticky top-0 z-50 bg-[var(--surface)]/80 backdrop-blur-xl border-b">
<nav className="sticky top-0 z-50 glass">
<div className="mx-auto flex h-14 max-w-[660px] items-center justify-between px-4">
<Link to="/feed" className="text-[19px] font-bold gradient-text tracking-tight">
<Link to="/feed" className="text-lg font-bold text-gradient tracking-tight">
Catstagram
</Link>
<div className="flex items-center gap-0.5">
<div className="flex items-center gap-1">
<NavLink to="/feed" active={location.pathname === '/feed'} emoji="🏠" label="Лента" />
<NavLink to="/upload" active={location.pathname === '/upload'} emoji="➕" label="Добавить" short />
<NavLink to="/upload" active={location.pathname === '/upload'} emoji="📷" label="Добавить" />
<Link to="/profile" className="ml-2 relative">
<Avatar className="h-8 w-8 ring-1 ring-[var(--border)] hover:ring-[var(--primary)] transition-all">
<AvatarFallback className="text-[11px] avatar-initials">
<Avatar className="h-8 w-8 border hover:border-[var(--primary)] transition-all">
<AvatarFallback className="text-[11px] avatar">
{user.username.charAt(0).toUpperCase()}
</AvatarFallback>
</Avatar>
{user.is_admin && (
<span className="absolute -top-1 -right-1 h-3.5 w-3.5 rounded-full bg-[var(--primary)] flex items-center justify-center">
<Shield className="h-2 w-2 text-white" strokeWidth={3} />
<span className="absolute -top-1 -right-1 h-4 w-4 rounded-full bg-[var(--primary)] flex items-center justify-center shadow-sm">
<Shield className="h-2.5 w-2.5 text-white" strokeWidth={3} />
</span>
)}
</Link>
@@ -38,18 +38,18 @@ export default function Navbar() {
);
}
function NavLink({ to, active, emoji, label, short }: { to: string; active: boolean; emoji: string; label: string; short?: boolean }) {
function NavLink({ to, active, emoji, label }: { to: string; active: boolean; emoji: string; label: string }) {
return (
<Link
to={to}
className={`flex items-center gap-1.5 px-3 py-1.5 rounded-full text-[13px] font-medium transition-all ${
className={`flex items-center gap-1.5 px-3 py-1.5 rounded-lg text-sm font-medium transition-all ${
active
? 'bg-[var(--primary-soft)] text-[var(--primary)]'
: 'text-[var(--fg-secondary)] hover:text-[var(--fg)] hover:bg-[var(--secondary)]'
}`}
>
<span className="text-[15px] leading-none">{emoji}</span>
{(!short || true) && <span className={short ? 'hidden sm:inline' : ''}>{label}</span>}
<span className="text-base leading-none">{emoji}</span>
<span className="hidden sm:inline">{label}</span>
</Link>
);
}