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

client/src/components/CatModal.tsx

@@ -26,10 +26,12 @@ export default function CatModal({ catId, onClose }: CatModalProps) {
 
   useEffect(() => { if (likeData) setLiked(likeData.liked); }, [likeData]);
   useEffect(() => { if (data?.cat) setLikeCount(data.cat.likes_count); }, [data]);
+  useEffect(() => { document.body.style.overflow = 'hidden'; return () => { document.body.style.overflow = ''; }; }, []);
   useEffect(() => {
-    document.body.style.overflow = 'hidden';
-    return () => { document.body.style.overflow = ''; };
-  }, []);
+    const handler = (e: KeyboardEvent) => { if (e.key === 'Escape') onClose(); };
+    window.addEventListener('keydown', handler);
+    return () => window.removeEventListener('keydown', handler);
+  }, [onClose]);
 
   const cat = data?.cat;
   const isOwner = cat && user && cat.user_id === user.id;
@@ -37,17 +39,14 @@ export default function CatModal({ catId, onClose }: CatModalProps) {
   const toggleLike = async () => {
     if (isOwner || !user || !cat) return;
     if (liked) {
-      setLiked(false);
-      setLikeCount((c) => c - 1);
+      setLiked(false); setLikeCount((c) => c - 1);
       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); setLikeCount((c) => c + 1); }
     } else {
-      setLiked(true);
-      setLikeCount((c) => c + 1);
+      setLiked(true); setLikeCount((c) => c + 1);
       toast('Нравится ❤️');
       try { await likeMutation.mutateAsync(); refetchLike(); }
       catch { setLiked(false); setLikeCount((c) => c - 1); }
@@ -63,19 +62,12 @@ export default function CatModal({ catId, onClose }: CatModalProps) {
     } catch { toast('Ошибка удаления', 'error'); }
   };
 
-  // Close on Escape
-  useEffect(() => {
-    const handler = (e: KeyboardEvent) => { if (e.key === 'Escape') onClose(); };
-    window.addEventListener('keydown', handler);
-    return () => window.removeEventListener('keydown', handler);
-  }, [onClose]);
-
   if (isLoading || !cat) {
     return (
       <div className="fixed inset-0 z-[60] bg-black/50 backdrop-blur-sm flex items-center justify-center" onClick={onClose}>
         <div className="flex items-center gap-3 px-6 py-4 bg-white rounded-full shadow-lg animate-scale-in">
           <div className="h-5 w-5 rounded-full border-2 border-[var(--primary)]/30 border-t-[var(--primary)] animate-spin" />
-          <span className="text-[14px] font-medium text-[var(--foreground-secondary)]">Загрузка...</span>
+          <span className="text-[14px] font-medium text-[var(--fg-secondary)]">Загрузка...</span>
         </div>
       </div>
     );
@@ -86,51 +78,37 @@ export default function CatModal({ catId, onClose }: CatModalProps) {
   });
 
   return (
-    <div
-      className="fixed inset-0 z-[60] bg-black/50 backdrop-blur-sm flex items-end sm:items-center justify-center"
-      onClick={onClose}
-    >
+    <div className="fixed inset-0 z-[60] bg-black/50 backdrop-blur-sm flex items-end sm:items-center justify-center" onClick={onClose}>
       <div
-        className="w-full sm:max-w-xl bg-white sm:rounded-xl sm:mx-4 max-h-[92vh] flex flex-col overflow-hidden shadow-xl animate-scale-in"
+        className="w-full sm:max-w-xl bg-white sm:rounded-2xl sm:mx-4 max-h-[92vh] flex flex-col overflow-hidden shadow-xl animate-scale-in"
         onClick={(e) => e.stopPropagation()}
       >
-        {/* Header */}
         <div className="flex items-center justify-between px-5 py-4 border-b shrink-0">
           <div className="flex items-center gap-3">
             <Avatar className="h-9 w-9">
-              <AvatarFallback className="text-sm avatar-initials">
-                {cat.username.charAt(0).toUpperCase()}
-              </AvatarFallback>
+              <AvatarFallback className="text-sm avatar-initials">{cat.username.charAt(0).toUpperCase()}</AvatarFallback>
             </Avatar>
             <div>
               <span className="text-[15px] font-semibold">@{cat.username}</span>
-              <p className="text-[11px] text-[var(--foreground-tertiary)]">{dateStr}</p>
+              <p className="text-[11px] text-[var(--fg-tertiary)]">{dateStr}</p>
             </div>
           </div>
           <div className="flex items-center gap-1">
             {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>
             )}
-            <button
-              onClick={onClose}
-              className="btn-icon h-9 w-9 text-[var(--foreground-secondary)] hover:text-[var(--foreground)] hover:bg-[var(--secondary)]"
-            >
+            <button onClick={onClose} className="btn-icon h-9 w-9 text-[var(--fg-secondary)] hover:text-[var(--fg)] hover:bg-[var(--secondary)]">
               <X className="h-5 w-5" strokeWidth={1.5} />
             </button>
           </div>
         </div>
 
-        {/* Image */}
         <div className="bg-[var(--secondary)] flex items-center justify-center shrink-0 relative">
           {!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
@@ -141,13 +119,10 @@ export default function CatModal({ catId, onClose }: CatModalProps) {
           />
         </div>
 
-        {/* Info */}
         <div className="flex-1 overflow-y-auto px-5 py-4 space-y-3">
           <div className="flex items-start gap-3">
             <Avatar className="h-8 w-8 shrink-0 mt-0.5">
-              <AvatarFallback className="text-[10px] avatar-initials">
-                {cat.username.charAt(0).toUpperCase()}
-              </AvatarFallback>
+              <AvatarFallback className="text-[10px] avatar-initials">{cat.username.charAt(0).toUpperCase()}</AvatarFallback>
             </Avatar>
             <div>
               <p className="text-[15px] leading-[1.4]">
@@ -158,31 +133,26 @@ export default function CatModal({ catId, onClose }: CatModalProps) {
           </div>
         </div>
 
-        {/* Actions */}
         <div className="border-t px-5 py-4 shrink-0">
           <div className="flex items-center justify-between">
-            <div className="flex items-center gap-5">
-              <button
-                onClick={toggleLike}
-                disabled={isOwner || !user}
-                className={`btn-icon flex items-center gap-1.5 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]'}`}
-                />
-                {likeCount > 0 && <span className="tabular-nums">{likeCount}</span>}
-              </button>
-            </div>
-            <span className="flex items-center gap-1.5 text-[13px] text-[var(--foreground-secondary)]">
+            <button
+              onClick={toggleLike}
+              disabled={isOwner || !user}
+              className={`btn-icon flex items-center gap-1.5 text-[15px] font-medium ${
+                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]'}`} />
+              {likeCount > 0 && <span className="tabular-nums">{likeCount}</span>}
+            </button>
+            <span className="flex items-center gap-1.5 text-[13px] text-[var(--fg-secondary)]">
               <span>🏆</span>
               <span className="font-semibold">{cat.user_points}</span>
-              <span>баллов</span>
+              <span className="text-[var(--fg-tertiary)]">баллов</span>
             </span>
           </div>
         </div>