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

2026-05-29 11:52:04 +03:00
parent a67b8c3341
commit f8f220469c
13 changed files with 362 additions and 727 deletions
--- a/client/src/pages/UploadPage.tsx
+++ b/client/src/pages/UploadPage.tsx
@@ -19,18 +19,13 @@ export default function UploadPage() {

  const onDrop = useCallback((accepted: File[]) => {
    const f = accepted[0];
-    if (f) {
-      setFile(f);
-      if (preview) URL.revokeObjectURL(preview);
-      setPreview(URL.createObjectURL(f));
-    }
+    if (f) { setFile(f); if (preview) URL.revokeObjectURL(preview); setPreview(URL.createObjectURL(f)); }
  }, [preview]);

  const { getRootProps, getInputProps, isDragActive } = useDropzone({
    onDrop,
    accept: { 'image/*': ['.jpg', '.jpeg', '.png', '.gif', '.webp'] },
-    maxFiles: 1,
-    maxSize: 10 * 1024 * 1024,
+    maxFiles: 1, maxSize: 10 * 1024 * 1024,
  });

  const handleUpload = async () => {
@@ -38,129 +33,77 @@ export default function UploadPage() {
    const fd = new FormData();
    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('+10 баллов 🎉');
      navigate(`/cat/${result.cat.id}`);
-    } catch {
-      toast('Ошибка загрузки', 'error');
-    }
+    } catch { toast('Ошибка загрузки', 'error'); }
  };

-  const clearFile = () => {
-    setFile(null);
-    if (preview) URL.revokeObjectURL(preview);
-    setPreview(null);
-  };
+  const clearFile = () => { setFile(null); if (preview) URL.revokeObjectURL(preview); setPreview(null); };

  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(--foreground-secondary)] hover:text-[var(--foreground)] transition-colors group"
-      >
+      <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>

-      <h1 className="text-[22px] font-bold mb-6">Новая публикация</h1>
+      <h1 className="text-[22px] font-bold mb-6 gradient-text">Новая публикация</h1>

      {!preview ? (
-        <div
-          {...getRootProps()}
+        <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(--foreground-tertiary)]'
-          }`}
-        >
+            isDragActive ? 'border-[var(--primary)] bg-[var(--primary-light)] scale-[1.02]' : 'border-[var(--border)] hover:bg-[var(--secondary)] hover:border-[var(--fg-tertiary)]'
+          }`}>
          <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(--foreground-secondary)]" strokeWidth={1.5} />
-              )}
+              {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>
          </div>
-          <p className="text-[16px] font-semibold mb-1">
-            {isDragActive ? 'Отпустите фото' : 'Перетащите фото сюда'}
-          </p>
-          <p className="text-[14px] text-[var(--foreground-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(--foreground-tertiary)]">
-            JPG, PNG, GIF, WebP · до 10 МБ
-          </p>
+          <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>
        </div>
      ) : (
        <div className="space-y-5 animate-fade-in-up">
-          {/* Preview */}
          <div className="relative bg-[var(--secondary)] rounded-2xl overflow-hidden shadow-sm">
-            <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"
-            >
+            <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">
              <X className="h-4 w-4" strokeWidth={2} />
            </button>
          </div>

-          {/* Caption input */}
          <div className="flex items-start gap-3">
-            <Avatar className="h-9 w-9 shrink-0">
-              <AvatarFallback className="text-xs avatar-initials">
-                {user?.username?.charAt(0).toUpperCase() || '?'}
-              </AvatarFallback>
+            <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>
            <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)}
-                maxLength={200}
-                rows={3}
-                className="w-full resize-none text-[15px] bg-transparent outline-none placeholder:text-[var(--foreground-tertiary)] leading-[1.4]"
-              />
+              <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(--foreground-tertiary)]">
-                  {caption.length > 150 ? `Осталось ${200 - caption.length} символов` : ''}
-                </span>
-                <span className="text-[11px] text-[var(--foreground-tertiary)] tabular-nums">
-                  {caption.length}/200
-                </span>
+                <span className="text-[11px] text-[var(--fg-tertiary)]">{caption.length > 150 ? `Осталось ${200 - caption.length} символов` : ''}</span>
+                <span className="text-[11px] text-[var(--fg-tertiary)] tabular-nums">{caption.length}/200</span>
              </div>
            </div>
          </div>

-          {/* Submit */}
-          <div className="flex items-center justify-between pt-2 border-t border-[var(--border)]">
-            <div className="flex items-center gap-2 text-[13px] text-[var(--foreground-secondary)]">
+          <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">+10 баллов</span>
-              <span className="text-[var(--foreground-tertiary)]">за публикацию</span>
+              <span className="text-[var(--fg-tertiary)]">за публикацию</span>
            </div>
-            <Button
-              onClick={handleUpload}
-              disabled={uploadMutation.isPending}
-              size="sm"
-              className="rounded-full text-[14px] bg-[var(--primary)] hover:bg-[var(--primary-hover)] px-6 h-10 disabled:opacity-60"
-            >
+            <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)' }}>
              {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" />
@@ -171,9 +114,8 @@ 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">
-              <span>⚠</span>
-              <span>Не удалось загрузить. Попробуйте снова.</span>
+            <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">
+              <span>⚠️</span><span>Не удалось загрузить. Попробуйте снова.</span>
            </div>
          )}
        </div>