Fix

2025-12-17 19:50:55 +07:00
parent debdd66458
commit 7e7cdbcd76
10 changed files with 225 additions and 77 deletions
--- a/frontend/src/components/TelegramLink.tsx
+++ b/frontend/src/components/TelegramLink.tsx
@@ -125,8 +125,8 @@ export function TelegramLink() {
        onClick={() => setIsOpen(true)}
        className={`p-2 rounded-lg transition-colors ${
          isLinked
-            ? 'text-blue-400 hover:text-blue-300 hover:bg-gray-700'
-            : 'text-gray-400 hover:text-white hover:bg-gray-700'
+            ? 'text-blue-400 hover:text-blue-300 hover:bg-dark-700'
+            : 'text-gray-400 hover:text-white hover:bg-dark-700'
        }`}
        title={isLinked ? 'Telegram привязан' : 'Привязать Telegram'}
      >
@@ -134,17 +134,17 @@ export function TelegramLink() {
      </button>

      {isOpen && (
-        <div className="fixed inset-0 bg-black/50 flex items-center justify-center z-50 p-4">
-          <div className="bg-gray-800 rounded-xl max-w-md w-full p-6 relative">
+        <div className="fixed inset-0 bg-black/70 backdrop-blur-sm flex items-center justify-center z-50 p-4">
+          <div className="glass rounded-xl max-w-md w-full p-6 relative border border-dark-600">
            <button
              onClick={handleClose}
-              className="absolute top-4 right-4 text-gray-400 hover:text-white"
+              className="absolute top-4 right-4 text-gray-400 hover:text-white transition-colors"
            >
              <X className="w-5 h-5" />
            </button>

            <div className="flex items-center gap-3 mb-6">
-              <div className="w-12 h-12 bg-blue-500/20 rounded-full flex items-center justify-center">
+              <div className="w-12 h-12 bg-blue-500/10 rounded-full flex items-center justify-center border border-blue-500/30">
                <MessageCircle className="w-6 h-6 text-blue-400" />
              </div>
              <div>
@@ -171,7 +171,7 @@ export function TelegramLink() {
                )}

                {/* User Profile Card */}
-                <div className="p-4 bg-gradient-to-br from-gray-700/50 to-gray-800/50 rounded-xl border border-gray-600/50">
+                <div className="p-4 bg-dark-700/50 rounded-xl border border-dark-600">
                  <div className="flex items-center gap-4">
                    {/* Avatar - Telegram avatar */}
                    <div className="relative">
@@ -182,12 +182,12 @@ export function TelegramLink() {
                          className="w-12 h-12 rounded-full object-cover border-2 border-blue-500/50"
                        />
                      ) : (
-                        <div className="w-12 h-12 rounded-full bg-gradient-to-br from-blue-500 to-purple-600 flex items-center justify-center border-2 border-blue-500/50">
+                        <div className="w-12 h-12 rounded-full bg-gradient-to-br from-blue-500 to-accent-500 flex items-center justify-center border-2 border-blue-500/50">
                          <User className="w-6 h-6 text-white" />
                        </div>
                      )}
                      {/* Link indicator */}
-                      <div className="absolute -bottom-1 -right-1 w-5 h-5 bg-green-500 rounded-full flex items-center justify-center border-2 border-gray-800">
+                      <div className="absolute -bottom-1 -right-1 w-5 h-5 bg-green-500 rounded-full flex items-center justify-center border-2 border-dark-800">
                        <Link2 className="w-2.5 h-2.5 text-white" />
                      </div>
                    </div>
@@ -205,7 +205,7 @@ export function TelegramLink() {
                </div>

                {/* Notifications Info */}
-                <div className="p-4 bg-gray-700/30 rounded-lg">
+                <div className="p-4 bg-dark-700/30 rounded-lg border border-dark-600/50">
                  <p className="text-sm text-gray-300 font-medium mb-3">Уведомления включены:</p>
                  <div className="grid grid-cols-1 gap-2">
                    <div className="flex items-center gap-2 text-sm text-gray-400">
@@ -254,7 +254,7 @@ export function TelegramLink() {

                    <button
                      onClick={handleOpenBot}
-                      className="w-full py-3 px-4 bg-blue-500 hover:bg-blue-600 text-white rounded-lg font-medium transition-colors flex items-center justify-center gap-2"
+                      className="w-full py-3 px-4 bg-blue-500/20 hover:bg-blue-500/30 text-blue-400 border border-blue-500/50 hover:border-blue-500 rounded-lg font-medium transition-all duration-200 flex items-center justify-center gap-2"
                    >
                      <ExternalLink className="w-5 h-5" />
                      Открыть Telegram снова
@@ -268,13 +268,13 @@ export function TelegramLink() {

                    <button
                      onClick={handleOpenBot}
-                      className="w-full py-3 px-4 bg-blue-500 hover:bg-blue-600 text-white rounded-lg font-medium transition-colors flex items-center justify-center gap-2"
+                      className="w-full py-3 px-4 bg-blue-500/20 hover:bg-blue-500/30 text-blue-400 border border-blue-500/50 hover:border-blue-500 rounded-lg font-medium transition-all duration-200 flex items-center justify-center gap-2"
                    >
                      <ExternalLink className="w-5 h-5" />
                      Открыть Telegram
                    </button>

-                    <p className="text-sm text-gray-500 text-center">
+                    <p className="text-sm text-gray-400 text-center">
                      Ссылка действительна 10 минут
                    </p>
                  </>
@@ -304,7 +304,7 @@ export function TelegramLink() {
                <button
                  onClick={handleGenerateLink}
                  disabled={loading}
-                  className="w-full py-3 px-4 bg-blue-500 hover:bg-blue-600 text-white rounded-lg font-medium transition-colors disabled:opacity-50 flex items-center justify-center gap-2"
+                  className="w-full py-3 px-4 bg-blue-500/20 hover:bg-blue-500/30 text-blue-400 border border-blue-500/50 hover:border-blue-500 rounded-lg font-medium transition-all duration-200 disabled:opacity-50 disabled:cursor-not-allowed flex items-center justify-center gap-2"
                >
                  {loading ? (
                    <Loader2 className="w-5 h-5 animate-spin" />
--- a/frontend/src/components/ui/ConfirmModal.tsx
+++ b/frontend/src/components/ui/ConfirmModal.tsx
@@ -2,7 +2,7 @@ import { useEffect } from 'react'
 import { AlertTriangle, Info, Trash2, X } from 'lucide-react'
 import { clsx } from 'clsx'
 import { useConfirmStore, type ConfirmVariant } from '@/store/confirm'
-import { Button } from './Button'
+import { NeonButton } from './NeonButton'

 const icons: Record<ConfirmVariant, React.ReactNode> = {
  danger: <Trash2 className="w-6 h-6" />,
@@ -11,15 +11,15 @@ const icons: Record<ConfirmVariant, React.ReactNode> = {
 }

 const iconStyles: Record<ConfirmVariant, string> = {
-  danger: 'bg-red-500/20 text-red-500',
-  warning: 'bg-yellow-500/20 text-yellow-500',
-  info: 'bg-blue-500/20 text-blue-500',
+  danger: 'bg-red-500/10 text-red-400 border border-red-500/30',
+  warning: 'bg-yellow-500/10 text-yellow-400 border border-yellow-500/30',
+  info: 'bg-neon-500/10 text-neon-400 border border-neon-500/30',
 }

-const buttonVariants: Record<ConfirmVariant, 'danger' | 'primary' | 'secondary'> = {
-  danger: 'danger',
-  warning: 'primary',
-  info: 'primary',
+const confirmButtonStyles: Record<ConfirmVariant, string> = {
+  danger: 'border-red-500/50 text-red-400 hover:bg-red-500/10 hover:border-red-500',
+  warning: 'border-yellow-500/50 text-yellow-400 hover:bg-yellow-500/10 hover:border-yellow-500',
+  info: '', // Will use NeonButton default
 }

 export function ConfirmModal() {
@@ -62,7 +62,7 @@ export function ConfirmModal() {
      />

      {/* Modal */}
-      <div className="relative bg-gray-800 rounded-xl shadow-2xl max-w-md w-full animate-in zoom-in-95 fade-in duration-200 border border-gray-700">
+      <div className="relative glass rounded-xl shadow-2xl max-w-md w-full animate-in zoom-in-95 fade-in duration-200 border border-dark-600">
        {/* Close button */}
        <button
          onClick={handleCancel}
@@ -89,20 +89,31 @@ export function ConfirmModal() {

          {/* Actions */}
          <div className="flex gap-3">
-            <Button
+            <NeonButton
              variant="secondary"
              className="flex-1"
              onClick={handleCancel}
            >
              {options.cancelText || 'Отмена'}
-            </Button>
-            <Button
-              variant={buttonVariants[variant]}
-              className="flex-1"
-              onClick={handleConfirm}
-            >
-              {options.confirmText || 'Подтвердить'}
-            </Button>
+            </NeonButton>
+            {variant === 'info' ? (
+              <NeonButton
+                className="flex-1"
+                onClick={handleConfirm}
+              >
+                {options.confirmText || 'Подтвердить'}
+              </NeonButton>
+            ) : (
+              <button
+                className={clsx(
+                  'flex-1 px-4 py-2.5 rounded-lg font-semibold transition-all duration-200 border-2 bg-transparent',
+                  confirmButtonStyles[variant]
+                )}
+                onClick={handleConfirm}
+              >
+                {options.confirmText || 'Подтвердить'}
+              </button>
+            )}
          </div>
        </div>
      </div>
--- a/frontend/src/components/ui/GlassCard.tsx
+++ b/frontend/src/components/ui/GlassCard.tsx
@@ -91,10 +91,14 @@ export function StatsCard({
        className
      )}
    >
-      <div className="flex items-center justify-between gap-3">
+      <div className="flex items-center justify-between gap-2">
        <div className="min-w-0 flex-1">
          <p className="text-sm text-gray-400 mb-1">{label}</p>
-          <p className={clsx('text-2xl font-bold truncate', valueColorClasses[color])}>
+          <p className={clsx(
+            'font-bold',
+            typeof value === 'number' ? 'text-2xl' : 'text-lg',
+            valueColorClasses[color]
+          )}>
            {value}
          </p>
          {trend && (
@@ -111,7 +115,7 @@ export function StatsCard({
        {icon && (
          <div
            className={clsx(
-              'w-12 h-12 rounded-lg flex items-center justify-center flex-shrink-0',
+              'w-10 h-10 rounded-lg flex items-center justify-center flex-shrink-0',
              iconColorClasses[color]
            )}
          >
--- a/frontend/src/components/ui/UserAvatar.tsx
+++ b/frontend/src/components/ui/UserAvatar.tsx
@@ -3,6 +3,8 @@ import { usersApi } from '@/api'

 // Глобальный кэш для blob URL аватарок
 const avatarCache = new Map<number, string>()
+// Пользователи, для которых нужно сбросить HTTP-кэш при следующем запросе
+const needsCacheBust = new Set<number>()

 interface UserAvatarProps {
  userId: number
@@ -10,6 +12,7 @@ interface UserAvatarProps {
  nickname: string
  size?: 'sm' | 'md' | 'lg'
  className?: string
+  version?: number  // Для принудительного обновления при смене аватара
 }

 const sizeClasses = {
@@ -18,7 +21,7 @@ const sizeClasses = {
  lg: 'w-24 h-24 text-xl',
 }

-export function UserAvatar({ userId, hasAvatar, nickname, size = 'md', className = '' }: UserAvatarProps) {
+export function UserAvatar({ userId, hasAvatar, nickname, size = 'md', className = '', version = 0 }: UserAvatarProps) {
  const [blobUrl, setBlobUrl] = useState<string | null>(null)
  const [failed, setFailed] = useState(false)

@@ -28,16 +31,31 @@ export function UserAvatar({ userId, hasAvatar, nickname, size = 'md', className
      return
    }

-    // Проверяем кэш
-    const cached = avatarCache.get(userId)
-    if (cached) {
-      setBlobUrl(cached)
-      return
+    // Если version > 0, значит аватар обновился - сбрасываем кэш
+    const shouldBustCache = version > 0 || needsCacheBust.has(userId)
+
+    // Проверяем кэш только если не нужен bust
+    if (!shouldBustCache) {
+      const cached = avatarCache.get(userId)
+      if (cached) {
+        setBlobUrl(cached)
+        return
+      }
+    }
+
+    // Очищаем старый кэш если bust
+    if (shouldBustCache) {
+      const cached = avatarCache.get(userId)
+      if (cached) {
+        URL.revokeObjectURL(cached)
+        avatarCache.delete(userId)
+      }
+      needsCacheBust.delete(userId)
    }

    // Загружаем аватарку
    let cancelled = false
-    usersApi.getAvatarUrl(userId)
+    usersApi.getAvatarUrl(userId, shouldBustCache)
      .then(url => {
        if (!cancelled) {
          avatarCache.set(userId, url)
@@ -53,7 +71,7 @@ export function UserAvatar({ userId, hasAvatar, nickname, size = 'md', className
    return () => {
      cancelled = true
    }
-  }, [userId, hasAvatar])
+  }, [userId, hasAvatar, version])

  const sizeClass = sizeClasses[size]

@@ -84,4 +102,6 @@ export function clearAvatarCache(userId: number) {
    URL.revokeObjectURL(cached)
    avatarCache.delete(userId)
  }
+  // Помечаем, что при следующем запросе нужно сбросить HTTP-кэш браузера
+  needsCacheBust.add(userId)
 }