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

client/src/pages/CatPage.tsx

@@ -38,7 +38,7 @@ export default function CatPage() {
       catch { setLiked(true); }
     } else {
       setLiked(true);
-      toast('Нравится ❤️');
+      toast('❤️');
       try { await likeMutation.mutateAsync(); refetchLike(); }
       catch { setLiked(false); }
     }
@@ -46,22 +46,19 @@ export default function CatPage() {
 
   const handleDelete = async () => {
     if (!isOwner || !cat) return;
-    try {
-      await deleteMutation.mutateAsync(cat.id);
-      toast('Удалено');
-      navigate('/feed');
-    } catch { toast('Ошибка удаления', 'error'); }
+    try { await deleteMutation.mutateAsync(cat.id); toast('Удалено'); navigate('/feed'); }
+    catch { toast('Ошибка удаления', 'error'); }
   };
 
   if (isLoading) {
     return (
       <div className="mx-auto max-w-[580px] px-4 py-8">
-        <Skeleton className="mb-4 h-5 w-20 rounded-full" />
-        <Skeleton className="aspect-[4/3] w-full rounded-2xl" />
+        <Skeleton className="mb-4 h-4 w-20 rounded-lg" />
+        <Skeleton className="aspect-[4/3] w-full rounded-xl" />
         <div className="mt-5 space-y-3">
-          <Skeleton className="h-5 w-32 rounded-full" />
-          <Skeleton className="h-4 w-48 rounded-full" />
-          <Skeleton className="h-4 w-24 rounded-full" />
+          <Skeleton className="h-4 w-32 rounded-lg" />
+          <Skeleton className="h-3 w-48 rounded-lg" />
+          <Skeleton className="h-3 w-24 rounded-lg" />
         </div>
       </div>
     );
@@ -69,13 +66,12 @@ export default function CatPage() {
 
   if (isError || !cat) {
     return (
-      <div className="flex flex-col items-center justify-center py-24 animate-fade-in-up">
-        <div className="mb-5 flex h-16 w-16 items-center justify-center rounded-full bg-[var(--secondary)]">
-          <span className="text-2xl">🔍</span>
+      <div className="flex flex-col items-center justify-center py-24 animate-rise">
+        <div className="mb-4 flex h-14 w-14 items-center justify-center rounded-xl bg-[var(--secondary)]">
+          <span className="text-xl">🔍</span>
         </div>
-        <p className="text-[17px] font-semibold mb-1.5">Кот не найден</p>
-        <p className="text-[14px] text-[var(--fg-secondary)] mb-6">Возможно, публикация была удалена</p>
-        <Button variant="outline" onClick={() => navigate('/feed')} className="rounded-full text-[13px]">Перейти в ленту</Button>
+        <p className="text-base font-semibold mb-1">Кот не найден</p>
+        <Button variant="outline" onClick={() => navigate('/feed')} className="rounded-lg text-xs mt-2">В ленту</Button>
       </div>
     );
   }
@@ -85,15 +81,14 @@ export default function CatPage() {
   });
 
   return (
-    <div className="mx-auto max-w-[580px] px-4 py-6 animate-fade-in-up">
+    <div className="mx-auto max-w-[580px] px-4 py-6 animate-rise">
       <button onClick={() => navigate(-1)}
-        className="mb-5 flex items-center gap-1.5 text-[14px] text-[var(--fg-secondary)] hover:text-[var(--fg)] transition-colors group">
-        <ArrowLeft className="h-4 w-4 stroke-[1.5] group-hover:-translate-x-0.5 transition-transform" />
-        Назад
+        className="mb-5 flex items-center gap-1.5 text-xs text-[var(--fg-secondary)] hover:text-[var(--fg)] transition-colors">
+        <ArrowLeft className="h-4 w-4 stroke-[1.5]" /> Назад
       </button>
 
-      <div className="card overflow-hidden">
-        <div className="bg-[var(--secondary)] relative img-shimmer">
+      <div className="card border overflow-hidden">
+        <div className="bg-[var(--secondary)] relative">
           {!imageLoaded && (
             <div className="absolute inset-0 flex items-center justify-center">
               <div className="h-8 w-8 rounded-full border-2 border-[var(--fg-tertiary)]/30 border-t-[var(--primary)] animate-spin" />
@@ -107,12 +102,12 @@ export default function CatPage() {
         <div className="p-5 space-y-4">
           <div className="flex items-start justify-between">
             <Link to={`/profile/${cat.user_id}`} className="flex items-center gap-3 group">
-              <Avatar className="h-10 w-10 ring-1 ring-[var(--border)]">
-                <AvatarFallback className="text-sm avatar-initials">{cat.username.charAt(0).toUpperCase()}</AvatarFallback>
+              <Avatar className="h-10 w-10 border">
+                <AvatarFallback className="text-sm avatar">{cat.username.charAt(0).toUpperCase()}</AvatarFallback>
               </Avatar>
               <div>
-                <span className="text-[15px] font-semibold group-hover:text-[var(--primary)] transition-colors">@{cat.username}</span>
-                <p className="text-[12px] text-[var(--fg-tertiary)]">{dateStr}</p>
+                <span className="text-sm font-semibold group-hover:text-[var(--primary)] transition-colors">@{cat.username}</span>
+                <p className="text-[11px] text-[var(--fg-tertiary)]">{dateStr}</p>
               </div>
             </Link>
             {isOwner && (
@@ -123,7 +118,7 @@ export default function CatPage() {
           </div>
 
           {cat.caption && (
-            <p className="text-[15px] leading-[1.4]">
+            <p className="text-sm leading-[1.45]">
               <span className="font-semibold mr-1.5">@{cat.username}</span>
               {cat.caption}
             </p>
@@ -131,26 +126,23 @@ export default function CatPage() {
 
           <div className="border-t" />
 
-          <div className="flex items-center gap-6">
+          <div className="flex items-center justify-between">
             <button onClick={toggleLike} disabled={isOwner || !user}
-              className={`btn-icon flex items-center gap-2 text-[15px] font-medium ${
+              className={`flex items-center gap-2 text-sm font-medium transition-all ${
                 isOwner ? 'text-[var(--fg-tertiary)] cursor-not-allowed' : liked ? 'text-[var(--danger)]' : 'text-[var(--fg-secondary)] hover:text-[var(--fg)]'
               }`}>
-              <Heart className={`h-6 w-6 transition-all ${liked ? 'fill-[var(--danger)] stroke-[var(--danger)] animate-heart' : 'stroke-[1.5]'}`} />
+              <Heart className={`h-5 w-5 transition-all ${liked ? 'fill-[var(--danger)] stroke-[var(--danger)] animate-pop' : 'stroke-[1.5]'}`} />
               {cat.likes_count > 0 && <span className="tabular-nums">{cat.likes_count}</span>}
             </button>
-            <span className="flex items-center gap-1.5 text-[14px] text-[var(--fg-secondary)]">
+            <span className="flex items-center gap-1.5 text-xs text-[var(--fg-secondary)]">
               <span>🏆</span>
               <span className="font-semibold">{cat.user_points}</span>
-              <span className="text-[var(--fg-tertiary)]">баллов</span>
             </span>
           </div>
 
-          <div className="pt-1">
-            <Button variant="outline" size="sm" onClick={() => navigate('/feed')} className="rounded-full text-[12px] h-8 gap-1">
-              <ArrowLeft className="h-3.5 w-3.5" strokeWidth={1.5} /> В ленту
-            </Button>
-          </div>
+          <Button variant="outline" size="sm" onClick={() => navigate('/feed')} className="rounded-lg text-xs h-8">
+            <ArrowLeft className="h-3.5 w-3.5 mr-1" strokeWidth={1.5} /> В ленту
+          </Button>
         </div>
       </div>
     </div>