UI: доработано оформление — тени, анимации, градиенты, iOS-стиль

client/src/pages/CatPage.tsx

@@ -36,8 +36,7 @@ export default function CatPage() {
       setLiked(false);
       try {
         const res = await unlikeMutation.mutateAsync();
-        if (res.ownerPoints !== undefined && cat.user_id === user.id)
-          updateUser({ ...user, points: res.ownerPoints });
+        if (res.ownerPoints !== undefined && cat.user_id === user.id) updateUser({ ...user, points: res.ownerPoints });
         refetchLike();
       } catch { setLiked(true); }
     } else {
@@ -73,21 +72,13 @@ export default function CatPage() {
 
   if (isError || !cat) {
     return (
-      <div className="flex flex-col items-center justify-center py-24 animate-fade-in">
+      <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>
         <p className="text-[17px] font-semibold mb-1.5">Кот не найден</p>
-        <p className="text-[14px] text-[var(--foreground-secondary)] mb-6">
-          Возможно, публикация была удалена
-        </p>
-        <Button
-          variant="outline"
-          onClick={() => navigate('/feed')}
-          className="rounded-full text-[13px]"
-        >
-          Перейти в ленту
-        </Button>
+        <p className="text-[14px] text-[var(--fg-secondary)] mb-6">Возможно, публикация была удалена</p>
+        <Button variant="outline" onClick={() => navigate('/feed')} className="rounded-full text-[13px]">Перейти в ленту</Button>
       </div>
     );
   }
@@ -97,59 +88,43 @@ export default function CatPage() {
   });
 
   return (
-    <div className="mx-auto max-w-[580px] px-4 py-6 animate-fade-in">
-      <button
-        onClick={() => navigate(-1)}
-        className="mb-5 flex items-center gap-1.5 text-[14px] text-[var(--foreground-secondary)] hover:text-[var(--foreground)] transition-colors group"
-      >
+    <div className="mx-auto max-w-[580px] px-4 py-6 animate-fade-in-up">
+      <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" />
         Назад
       </button>
 
       <div className="card overflow-hidden">
-        {/* Image */}
-        <div className="bg-[var(--secondary)] relative img-loading">
+        <div className="bg-[var(--secondary)] relative img-shimmer">
           {!imageLoaded && (
             <div className="absolute inset-0 flex items-center justify-center">
-              <div className="h-8 w-8 rounded-full border-2 border-[var(--foreground-tertiary)]/30 border-t-[var(--primary)] animate-spin" />
+              <div className="h-8 w-8 rounded-full border-2 border-[var(--fg-tertiary)]/30 border-t-[var(--primary)] animate-spin" />
             </div>
           )}
-          <img
-            src={cat.image_url}
-            alt={cat.caption || 'Фото кота'}
+          <img src={cat.image_url} alt={cat.caption || 'Фото кота'}
             className={`w-full max-h-[60vh] object-contain mx-auto transition-opacity duration-300 ${imageLoaded ? 'opacity-100' : 'opacity-0'}`}
-            onLoad={() => setImageLoaded(true)}
-          />
+            onLoad={() => setImageLoaded(true)} />
         </div>
 
         <div className="p-5 space-y-4">
-          {/* Header */}
           <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">
-                <AvatarFallback className="text-sm avatar-initials">
-                  {cat.username.charAt(0).toUpperCase()}
-                </AvatarFallback>
+              <Avatar className="h-10 w-10 ring-1 ring-[var(--border)]">
+                <AvatarFallback className="text-sm avatar-initials">{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(--foreground-tertiary)]">{dateStr}</p>
+                <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>
               </div>
             </Link>
             {isOwner && (
-              <button
-                onClick={handleDelete}
-                className="btn-icon h-9 w-9 text-[var(--foreground-secondary)] hover:text-[var(--danger)] hover:bg-[var(--danger-light)]"
-                title="Удалить"
-              >
+              <button onClick={handleDelete} className="btn-icon h-9 w-9 text-[var(--fg-secondary)] hover:text-[var(--danger)] hover:bg-[var(--danger-light)]">
                 <Trash2 className="h-4 w-4" strokeWidth={1.5} />
               </button>
             )}
           </div>
 
-          {/* Caption */}
           {cat.caption && (
             <p className="text-[15px] leading-[1.4]">
               <span className="font-semibold mr-1.5">@{cat.username}</span>
@@ -157,44 +132,26 @@ export default function CatPage() {
             </p>
           )}
 
-          {/* Divider */}
-          <div className="border-t border-[var(--border)]" />
+          <div className="border-t" />
 
-          {/* Actions */}
           <div className="flex items-center gap-6">
-            <button
-              onClick={toggleLike}
-              disabled={isOwner || !user}
+            <button onClick={toggleLike} disabled={isOwner || !user}
               className={`btn-icon flex items-center gap-2 text-[15px] font-medium ${
-                isOwner
-                  ? 'text-[var(--foreground-tertiary)] cursor-not-allowed'
-                  : liked
-                    ? 'text-[var(--danger)]'
-                    : 'text-[var(--foreground-secondary)] hover:text-[var(--foreground)]'
-              }`}
-            >
-              <Heart
-                className={`h-6 w-6 transition-all ${liked ? 'fill-[var(--danger)] stroke-[var(--danger)] animate-heart' : 'stroke-[1.5]'}`}
-              />
+                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]'}`} />
               {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(--foreground-secondary)]">
+            <span className="flex items-center gap-1.5 text-[14px] text-[var(--fg-secondary)]">
               <span>🏆</span>
               <span className="font-semibold">{cat.user_points}</span>
-              <span className="text-[var(--foreground-tertiary)]">баллов</span>
+              <span className="text-[var(--fg-tertiary)]">баллов</span>
             </span>
           </div>
 
-          {/* Back to feed button */}
-          <div className="pt-2">
-            <Button
-              variant="outline"
-              size="sm"
-              onClick={() => navigate('/feed')}
-              className="rounded-full text-[12px] h-8"
-            >
-              ← В ленту
+          <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>
         </div>