diff --git a/client/src/components/ui/button.tsx b/client/src/components/ui/button.tsx
index 83f5f9e..bd1a46c 100644
--- a/client/src/components/ui/button.tsx
+++ b/client/src/components/ui/button.tsx
@@ -4,22 +4,60 @@ import { cva, type VariantProps } from 'class-variance-authority';
import { cn } from '@/lib/utils';
const buttonVariants = cva(
- 'inline-flex items-center justify-center gap-2 whitespace-nowrap text-sm font-medium transition-colors focus-visible:outline-none focus-visible:ring-2 focus-visible:ring-[var(--accent-soft)] focus-visible:ring-offset-2 disabled:pointer-events-none disabled:opacity-50 [&_svg]:pointer-events-none [&_svg]:size-4 [&_svg]:shrink-0',
+ [
+ 'inline-flex items-center justify-center gap-2 whitespace-nowrap font-semibold',
+ 'select-none cursor-pointer',
+ 'transition-all duration-150 ease-out',
+ 'focus-visible:outline-none focus-visible:ring-2 focus-visible:ring-[var(--accent)] focus-visible:ring-offset-2 focus-visible:ring-offset-[var(--bg)]',
+ 'disabled:pointer-events-none disabled:opacity-40',
+ '[&_svg]:pointer-events-none [&_svg]:shrink-0',
+ 'active:scale-[0.96] active:brightness-95',
+ ].join(' '),
{
variants: {
variant: {
- default: 'bg-[var(--accent)] text-white shadow-sm hover:bg-[var(--accent-hover)]',
- destructive: 'bg-red-500 text-white shadow-sm hover:bg-red-600',
- outline: 'border border-[var(--border)] bg-[var(--surface)] shadow-sm hover:bg-[var(--surface-hover)] text-[var(--fg)]',
- secondary: 'bg-[var(--border-light)] text-[var(--fg)] shadow-sm hover:bg-[var(--border)]',
- ghost: 'hover:bg-[var(--border-light)] text-[var(--fg-secondary)]',
- link: 'text-[var(--accent)] underline-offset-4 hover:underline',
+ // Основная — с градиентом и тенью
+ default: [
+ 'bg-[var(--accent)] text-white',
+ 'shadow-[0_1px_2px_rgba(0,0,0,0.25),inset_0_1px_0_rgba(255,255,255,0.15)]',
+ 'hover:bg-[var(--accent-hover)] hover:shadow-[0_3px_10px_rgba(201,68,93,0.4)]',
+ 'hover:-translate-y-px',
+ ].join(' '),
+
+ // Деструктивная
+ destructive: [
+ 'bg-red-500 text-white',
+ 'shadow-[0_1px_2px_rgba(0,0,0,0.25),inset_0_1px_0_rgba(255,255,255,0.12)]',
+ 'hover:bg-red-600 hover:shadow-[0_3px_10px_rgba(239,68,68,0.4)]',
+ 'hover:-translate-y-px',
+ ].join(' '),
+
+ // Обводка — хорошо видна и в тёмной теме
+ outline: [
+ 'border-2 border-[var(--border)] bg-transparent text-[var(--fg)]',
+ 'hover:border-[var(--fg-tertiary)] hover:bg-[var(--surface-hover)]',
+ ].join(' '),
+
+ // Вторичная — мягкая подложка
+ secondary: [
+ 'bg-[var(--border-light)] text-[var(--fg-secondary)]',
+ 'hover:bg-[var(--border)] hover:text-[var(--fg)]',
+ ].join(' '),
+
+ // Призрак
+ ghost: [
+ 'bg-transparent text-[var(--fg-secondary)]',
+ 'hover:bg-[var(--border-light)] hover:text-[var(--fg)]',
+ ].join(' '),
+
+ // Ссылка
+ link: 'bg-transparent text-[var(--accent)] underline-offset-4 hover:underline p-0 h-auto',
},
size: {
- default: 'h-9 rounded-xl px-4 py-2',
- sm: 'h-8 rounded-lg px-3 text-xs',
- lg: 'h-10 rounded-xl px-6',
- icon: 'h-9 w-9 rounded-xl',
+ default: 'h-10 rounded-xl px-5 py-2 text-sm',
+ sm: 'h-8 rounded-lg px-3.5 text-xs',
+ lg: 'h-12 rounded-xl px-7 text-[15px]',
+ icon: 'h-9 w-9 rounded-xl text-sm',
},
},
defaultVariants: {
@@ -38,9 +76,15 @@ export interface ButtonProps
const Button = React.forwardRef Не удалось загрузить Попробуйте снова
или нажмите, чтобы выбрать файл
-@@ -156,7 +156,7 @@ export default function UploadPage() { onClick={handleUpload} disabled={uploadMutation.isPending} size="sm" - className="rounded-xl text-sm px-7 h-10 bg-[var(--accent)] hover:bg-[var(--accent-hover)] text-white disabled:opacity-60 shadow-sm" + className="px-7" > {uploadMutation.isPending ? (