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

UI: complete redesign — warm atelier style, Manrope font, burnt orange accent, shadow-based cards

Browse Source
This commit is contained in:
HeagBoKaT
2026-05-29 13:34:58 +03:00
parent 7fa7394739
commit 4bf9ea22dd
20 changed files with 493 additions and 496 deletions
Download Patch File Download Diff File Expand all files Collapse all files

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

@@ -1,7 +1,7 @@
import { Link, useLocation } from 'react-router-dom';
import { useAuth } from '@/hooks/useAuth';
import { Avatar, AvatarFallback } from '@/components/ui/avatar';
import { Shield } from 'lucide-react';
import { Home, PlusCircle, User, Shield } from 'lucide-react';
export default function Navbar() {
const { user } = useAuth();
@@ -10,25 +10,29 @@ export default function Navbar() {
if (!user) return null;
return (
<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-lg font-bold text-gradient tracking-tight">
<nav className="sticky top-0 z-50 nav-glass border-b border-[var(--border-light)]">
<div className="mx-auto flex h-14 max-w-[540px] items-center justify-between px-5">
<Link to="/feed" className="text-[15px] font-800 tracking-tight text-[var(--fg)]">
Catstagram
</Link>
<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="Добавить" />
<NavIcon to="/feed" active={location.pathname === '/feed'} icon={Home} label="Лента" />
<NavIcon to="/upload" active={location.pathname === '/upload'} icon={PlusCircle} label="Добавить" />
<Link to="/profile" className="ml-2 relative">
<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>
<Link to="/profile" className="ml-1.5 relative flex items-center">
<div className={`flex items-center justify-center h-8 w-8 rounded-full transition-all ${
location.pathname.startsWith('/profile') ? 'ring-2 ring-[var(--accent)] ring-offset-2 ring-offset-[var(--bg)]' : ''
}`}>
<Avatar className="h-8 w-8">
<AvatarFallback className="text-[11px] avatar-colored bg-[var(--accent)]">
{user.username.charAt(0).toUpperCase()}
</AvatarFallback>
</Avatar>
</div>
{user.is_admin && (
<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 className="absolute -top-0.5 -right-0.5 h-3.5 w-3.5 rounded-full bg-[var(--accent)] flex items-center justify-center ring-2 ring-[var(--bg)]">
<Shield className="h-2 w-2 text-white" strokeWidth={3} />
</span>
)}
</Link>
@@ -38,18 +42,18 @@ export default function Navbar() {
);
}
function NavLink({ to, active, emoji, label }: { to: string; active: boolean; emoji: string; label: string }) {
function NavIcon({ to, active, icon: Icon, label }: { to: string; active: boolean; icon: any; label: string }) {
return (
<Link
to={to}
className={`flex items-center gap-1.5 px-3 py-1.5 rounded-lg text-sm font-medium transition-all ${
title={label}
className={`flex items-center justify-center h-9 w-9 rounded-xl transition-all ${
active
? 'bg-[var(--primary-soft)] text-[var(--primary)]'
: 'text-[var(--fg-secondary)] hover:text-[var(--fg)] hover:bg-[var(--secondary)]'
? 'bg-[var(--accent-soft)] text-[var(--accent)]'
: 'text-[var(--fg-tertiary)] hover:text-[var(--fg-secondary)] hover:bg-[var(--border-light)]'
}`}
>
<span className="text-base leading-none">{emoji}</span>
<span className="hidden sm:inline">{label}</span>
<Icon className="h-[18px] w-[18px]" strokeWidth={active ? 2 : 1.5} />
</Link>
);
}