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

client/src/pages/UploadPage.tsx

@@ -6,7 +6,7 @@ import { useAuth } from '@/hooks/useAuth';
 import { useToast } from '@/components/Toast';
 import { Button } from '@/components/ui/button';
 import { Avatar, AvatarFallback } from '@/components/ui/avatar';
-import { ArrowLeft, Upload, X, Image } from 'lucide-react';
+import { ArrowLeft, Upload, X } from 'lucide-react';
 
 export default function UploadPage() {
   const navigate = useNavigate();
@@ -23,20 +23,17 @@ export default function UploadPage() {
   }, [preview]);
 
   const { getRootProps, getInputProps, isDragActive } = useDropzone({
-    onDrop,
-    accept: { 'image/*': ['.jpg', '.jpeg', '.png', '.gif', '.webp'] },
-    maxFiles: 1, maxSize: 10 * 1024 * 1024,
+    onDrop, accept: { 'image/*': ['.jpg', '.jpeg', '.png', '.gif', '.webp'] }, maxFiles: 1, maxSize: 10 * 1024 * 1024,
   });
 
   const handleUpload = async () => {
     if (!file) return;
     const fd = new FormData();
-    fd.append('image', file);
-    fd.append('caption', caption);
+    fd.append('image', file); fd.append('caption', caption);
     try {
       const result = await uploadMutation.mutateAsync(fd);
-      if (user) updateUser({ ...user, points: (user.points || 0) + 10 });
-      toast('+1 балл 🎉');
+      if (user) updateUser({ ...user, points: (user.points || 0) + 1 });
+      toast('+1 🎉');
       navigate(`/cat/${result.cat.id}`);
     } catch { toast('Ошибка загрузки', 'error'); }
   };
@@ -46,64 +43,58 @@ export default function UploadPage() {
   return (
     <div className="mx-auto max-w-[580px] px-4 py-6">
       <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>
 
-      <h1 className="text-[22px] font-bold mb-6 gradient-text">Новая публикация</h1>
+      <h1 className="text-xl font-bold mb-6 text-gradient">Новая публикация</h1>
 
       {!preview ? (
         <div {...getRootProps()}
-          className={`border-2 border-dashed rounded-2xl p-16 text-center cursor-pointer transition-all ${
-            isDragActive ? 'border-[var(--primary)] bg-[var(--primary-light)] scale-[1.02]' : 'border-[var(--border)] hover:bg-[var(--secondary)] hover:border-[var(--fg-tertiary)]'
+          className={`border-2 border-dashed rounded-xl p-14 text-center cursor-pointer transition-all ${
+            isDragActive ? 'border-[var(--primary)] bg-[var(--primary-soft)] scale-[1.01]' : 'border-[var(--border)] hover:bg-[var(--secondary)]'
           }`}>
           <input {...getInputProps()} />
           <div className="mb-5 flex justify-center">
-            <div className="h-16 w-16 rounded-full bg-[var(--secondary)] flex items-center justify-center">
-              {isDragActive ? <Image className="h-7 w-7 text-[var(--primary)]" strokeWidth={1.5} /> : <Upload className="h-7 w-7 text-[var(--fg-secondary)]" strokeWidth={1.5} />}
+            <div className="h-14 w-14 rounded-xl bg-[var(--secondary)] flex items-center justify-center">
+              <Upload className="h-6 w-6 text-[var(--fg-secondary)]" strokeWidth={1.5} />
             </div>
           </div>
-          <p className="text-[16px] font-semibold mb-1">{isDragActive ? 'Отпустите фото' : 'Перетащите фото сюда'}</p>
-          <p className="text-[14px] text-[var(--fg-secondary)] mb-6">или нажмите, чтобы выбрать</p>
-          <Button variant="outline" size="sm" className="rounded-full text-[13px] px-6">Выбрать файл</Button>
-          <p className="mt-5 text-[12px] text-[var(--fg-tertiary)]">JPG, PNG, GIF, WebP · до 10 МБ</p>
+          <p className="text-sm font-semibold mb-1">{isDragActive ? 'Отпустите фото' : 'Перетащите фото'}</p>
+          <p className="text-xs text-[var(--fg-secondary)] mb-5">или нажмите, чтобы выбрать</p>
+          <Button variant="outline" size="sm" className="rounded-lg text-xs px-5">Выбрать файл</Button>
+          <p className="mt-4 text-[11px] text-[var(--fg-tertiary)]">JPG, PNG, GIF, WebP · до 10 МБ</p>
         </div>
       ) : (
-        <div className="space-y-5 animate-fade-in-up">
-          <div className="relative bg-[var(--secondary)] rounded-2xl overflow-hidden shadow-sm">
+        <div className="space-y-5 animate-rise">
+          <div className="relative bg-[var(--secondary)] rounded-xl overflow-hidden">
             <img src={preview!} alt="Preview" className="max-h-[420px] w-full object-contain" />
             <button onClick={clearFile}
-              className="absolute right-3 top-3 flex h-9 w-9 items-center justify-center rounded-full bg-black/40 text-white hover:bg-black/60 transition-all backdrop-blur-sm">
+              className="absolute right-3 top-3 flex h-8 w-8 items-center justify-center rounded-full bg-black/40 text-white hover:bg-black/60 transition-all">
               <X className="h-4 w-4" strokeWidth={2} />
             </button>
           </div>
 
           <div className="flex items-start gap-3">
-            <Avatar className="h-9 w-9 shrink-0 ring-1 ring-[var(--border)]">
-              <AvatarFallback className="text-xs avatar-initials">{user?.username?.charAt(0).toUpperCase() || '?'}</AvatarFallback>
+            <Avatar className="h-9 w-9 shrink-0 border">
+              <AvatarFallback className="text-xs avatar">{user?.username?.charAt(0).toUpperCase() || '?'}</AvatarFallback>
             </Avatar>
             <div className="flex-1">
-              <p className="text-[14px] font-semibold mb-1.5">{user?.username}</p>
-              <textarea placeholder="Напишите подпись к фото..." value={caption} onChange={(e) => setCaption(e.target.value)}
+              <p className="text-sm font-semibold mb-1">{user?.username}</p>
+              <textarea placeholder="Подпись..." value={caption} onChange={(e) => setCaption(e.target.value)}
                 maxLength={200} rows={3}
-                className="w-full resize-none text-[15px] bg-transparent outline-none placeholder:text-[var(--fg-tertiary)] leading-[1.4]" />
-              <div className="flex items-center justify-between mt-1">
-                <span className="text-[11px] text-[var(--fg-tertiary)]">{caption.length > 150 ? `Осталось ${200 - caption.length} символов` : ''}</span>
+                className="w-full resize-none text-sm bg-transparent outline-none placeholder:text-[var(--fg-tertiary)] leading-[1.4]" />
+              <div className="flex justify-end mt-1">
                 <span className="text-[11px] text-[var(--fg-tertiary)] tabular-nums">{caption.length}/200</span>
               </div>
             </div>
           </div>
 
           <div className="flex items-center justify-between pt-3 border-t">
-            <div className="flex items-center gap-2 text-[13px] text-[var(--fg-secondary)]">
-              <span>🏆</span>
-              <span className="font-medium">+1 балл</span>
-              <span className="text-[var(--fg-tertiary)]">за публикацию</span>
-            </div>
+            <span className="text-xs text-[var(--fg-secondary)]">🏆 +1 балл</span>
             <Button onClick={handleUpload} disabled={uploadMutation.isPending}
-              size="sm" className="rounded-full text-[14px] px-6 h-10 disabled:opacity-60"
-              style={{ background: 'linear-gradient(135deg, #007aff, #5856d6)' }}>
+              size="sm" className="rounded-lg text-sm px-6 h-10 disabled:opacity-60"
+              style={{ background: 'linear-gradient(135deg, #2563eb, #7c3aed)' }}>
               {uploadMutation.isPending ? (
                 <span className="flex items-center gap-2">
                   <span className="h-4 w-4 rounded-full border-2 border-white/30 border-t-white animate-spin" />
@@ -114,7 +105,7 @@ export default function UploadPage() {
           </div>
 
           {uploadMutation.isError && (
-            <div className="flex items-center gap-2 px-4 py-3 rounded-xl bg-[var(--danger-light)] text-[var(--danger)] text-[13px] font-medium animate-fade-in-up">
+            <div className="flex items-center gap-2 px-4 py-3 rounded-xl bg-[var(--danger-light)] text-[var(--danger)] text-xs font-medium animate-rise">
               <span>⚠️</span><span>Не удалось загрузить. Попробуйте снова.</span>
             </div>
           )}