From 492bd1b4e1ae00ddfc6097d1468f2246f780909c Mon Sep 17 00:00:00 2001 From: heagbokat Date: Fri, 26 Jun 2026 00:47:44 +0300 Subject: [PATCH] =?UTF-8?q?fix:=20redesign=20buttons=20=E2=80=94=20depth,?= =?UTF-8?q?=20outline=20contrast,=20press=20effect?= MIME-Version: 1.0 Content-Type: text/plain; charset=UTF-8 Content-Transfer-Encoding: 8bit - button.tsx: primary gets gradient + shadow + hover glow + -translate-y-px lift; outline gets border-2 for visibility on dark bg; all variants get active:scale-[0.96] press feel; lg size h-12 for auth forms - Remove hardcoded bg-[var(--accent)] overrides from Login, Register, Feed, Profile, Upload — variants now handle all coloring Co-Authored-By: Claude Sonnet 4.6 --- client/src/components/ui/button.tsx | 70 +++++++++++++++++++++++------ client/src/pages/FeedPage.tsx | 4 +- client/src/pages/LoginPage.tsx | 2 +- client/src/pages/ProfilePage.tsx | 4 +- client/src/pages/RegisterPage.tsx | 2 +- client/src/pages/UploadPage.tsx | 4 +- 6 files changed, 65 insertions(+), 21 deletions(-) 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( ({ className, variant, size, asChild = false, ...props }, ref) => { const Comp = asChild ? Slot : 'button'; - return ; + return ( + + ); } ); Button.displayName = 'Button'; -export { Button, buttonVariants }; \ No newline at end of file +export { Button, buttonVariants }; diff --git a/client/src/pages/FeedPage.tsx b/client/src/pages/FeedPage.tsx index c60b2f5..1c97c21 100644 --- a/client/src/pages/FeedPage.tsx +++ b/client/src/pages/FeedPage.tsx @@ -80,7 +80,7 @@ export default function FeedPage() {

Не удалось загрузить

Попробуйте снова

- @@ -94,7 +94,7 @@ export default function FeedPage() {

Пока нет котов

Будьте первым

diff --git a/client/src/pages/LoginPage.tsx b/client/src/pages/LoginPage.tsx index 3944ca4..c1711dd 100644 --- a/client/src/pages/LoginPage.tsx +++ b/client/src/pages/LoginPage.tsx @@ -71,7 +71,7 @@ export default function LoginPage() { diff --git a/client/src/pages/RegisterPage.tsx b/client/src/pages/RegisterPage.tsx index aaadf72..19c60a0 100644 --- a/client/src/pages/RegisterPage.tsx +++ b/client/src/pages/RegisterPage.tsx @@ -79,7 +79,7 @@ export default function RegisterPage() {

@@ -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 ? (