Changed design and bug fixes

frontend/src/components/Profile.jsx

@@ -4,7 +4,7 @@ import axios from 'axios';
 import { API_URL } from '../config';
 import { notify } from './NotificationSystem';
 
-export default function Profile({ token, user, theme, onUsernameChange, viewingUsername }) {
+export default function Profile({ token, user, onUsernameChange, viewingUsername }) {
   const [stats, setStats] = useState(null);
   const [loading, setLoading] = useState(true);
   const [activeTab, setActiveTab] = useState('overview');
@@ -64,14 +64,11 @@ export default function Profile({ token, user, theme, onUsernameChange, viewingU
         { headers: { Authorization: `Bearer ${token}` } }
       );
       
-      // Обновляем токен
       localStorage.setItem('token', data.access_token);
-      
       notify('success', 'Имя изменено', `Ваше новое имя: ${data.username}`);
       alert('Имя пользователя успешно изменено!');
       setUsernameForm({ new_username: '', password: '' });
       
-      // Уведомляем родительский компонент
       if (onUsernameChange) {
         onUsernameChange(data.access_token, data.username);
       }
@@ -127,63 +124,53 @@ export default function Profile({ token, user, theme, onUsernameChange, viewingU
 
   const getRoleName = (role) => {
     switch (role) {
-      case 'admin':
-        return 'Администратор';
-      case 'support':
-        return 'Тех. поддержка';
-      case 'banned':
-        return 'Забанен';
-      default:
-        return 'Пользователь';
+      case 'owner': return 'Владелец';
+      case 'admin': return 'Администратор';
+      case 'support': return 'Тех. поддержка';
+      case 'banned': return 'Забанен';
+      default: return 'Пользователь';
     }
   };
 
   const getRoleColor = (role) => {
     switch (role) {
-      case 'admin':
-        return 'bg-blue-500/20 text-blue-500 border-blue-500/50';
-      case 'support':
-        return 'bg-purple-500/20 text-purple-500 border-purple-500/50';
-      case 'banned':
-        return 'bg-red-500/20 text-red-500 border-red-500/50';
-      default:
-        return 'bg-gray-500/20 text-gray-500 border-gray-500/50';
+      case 'owner': return 'bg-yellow-500/20 text-yellow-500 border-yellow-500/50';
+      case 'admin': return 'bg-blue-500/20 text-blue-500 border-blue-500/50';
+      case 'support': return 'bg-purple-500/20 text-purple-500 border-purple-500/50';
+      case 'banned': return 'bg-red-500/20 text-red-500 border-red-500/50';
+      default: return 'bg-gray-500/20 text-gray-500 border-gray-500/50';
     }
   };
 
   if (loading) {
     return (
-      <div className={`h-full ${theme.primary} ${theme.text} flex items-center justify-center`}>
+      <div className="h-full bg-dark-900 text-white flex items-center justify-center">
         <div className="text-center">
           <div className="w-12 h-12 border-4 border-blue-500 border-t-transparent rounded-full animate-spin mx-auto mb-4" />
-          <p className={theme.textSecondary}>Загрузка профиля...</p>
+          <p className="text-gray-400">Загрузка профиля...</p>
         </div>
       </div>
     );
   }
 
   return (
-    <div className={`h-full ${theme.primary} ${theme.text} p-6 overflow-y-auto`}>
+    <div className="h-full bg-dark-900 text-white p-6 overflow-y-auto">
       <div className="max-w-6xl mx-auto">
-        {/* Header */}
         <div className="mb-6">
           <h1 className="text-2xl font-bold mb-2">
             {isViewingOther ? `Профиль пользователя: ${viewingUsername}` : 'Личный кабинет'}
           </h1>
-          <p className={theme.textSecondary}>
+          <p className="text-gray-400">
             {isViewingOther ? 'Просмотр профиля другого пользователя' : 'Управление профилем и настройками'}
           </p>
         </div>
 
-        {/* Tabs */}
         {!isViewingOther && (
-          <div className={`${theme.secondary} ${theme.border} border rounded-2xl mb-6 p-2 flex gap-2`}>
+          <div className="card mb-6 p-2 flex gap-2">
             <button
               onClick={() => setActiveTab('overview')}
               className={`flex-1 px-4 py-3 rounded-xl font-medium transition ${
-                activeTab === 'overview'
-                  ? `${theme.accent} text-white`
-                  : `${theme.hover}`
+                activeTab === 'overview' ? 'bg-primary-600 text-white' : 'hover:bg-dark-700'
               }`}
             >
               <TrendingUp className="w-4 h-4 inline mr-2" />
@@ -192,9 +179,7 @@ export default function Profile({ token, user, theme, onUsernameChange, viewingU
             <button
               onClick={() => setActiveTab('username')}
               className={`flex-1 px-4 py-3 rounded-xl font-medium transition ${
-                activeTab === 'username'
-                  ? `${theme.accent} text-white`
-                  : `${theme.hover}`
+                activeTab === 'username' ? 'bg-primary-600 text-white' : 'hover:bg-dark-700'
               }`}
             >
               <User className="w-4 h-4 inline mr-2" />
@@ -203,9 +188,7 @@ export default function Profile({ token, user, theme, onUsernameChange, viewingU
             <button
               onClick={() => setActiveTab('password')}
               className={`flex-1 px-4 py-3 rounded-xl font-medium transition ${
-                activeTab === 'password'
-                  ? `${theme.accent} text-white`
-                  : `${theme.hover}`
+                activeTab === 'password' ? 'bg-primary-600 text-white' : 'hover:bg-dark-700'
               }`}
             >
               <Lock className="w-4 h-4 inline mr-2" />
@@ -214,13 +197,11 @@ export default function Profile({ token, user, theme, onUsernameChange, viewingU
           </div>
         )}
 
-        {/* Overview Tab */}
         {(activeTab === 'overview' || isViewingOther) && (
           <div className="space-y-6">
-            {/* User Info Card */}
-            <div className={`${theme.card} ${theme.border} border rounded-2xl p-6`}>
+            <div className="card p-6">
               <div className="flex items-center gap-4 mb-6">
-                <div className={`${theme.accent} p-4 rounded-2xl`}>
+                <div className="bg-primary-600 p-4 rounded-2xl">
                   <User className="w-8 h-8 text-white" />
                 </div>
                 <div>
@@ -233,39 +214,36 @@ export default function Profile({ token, user, theme, onUsernameChange, viewingU
               </div>
             </div>
 
-            {/* Stats Grid */}
             <div className="grid grid-cols-1 md:grid-cols-3 gap-4">
-              {/* Servers */}
-              <div className={`${theme.card} ${theme.border} border rounded-2xl p-6`}>
+              <div className="card p-6">
                 <div className="flex items-center gap-3 mb-4">
-                  <div className={`${theme.accent} p-3 rounded-xl`}>
+                  <div className="bg-primary-600 p-3 rounded-xl">
                     <Server className="w-6 h-6 text-white" />
                   </div>
                   <div>
-                    <p className={`text-sm ${theme.textSecondary}`}>Всего серверов</p>
+                    <p className="text-sm text-gray-400">Всего серверов</p>
                     <p className="text-2xl font-bold">{stats?.total_servers || 0}</p>
                   </div>
                 </div>
                 <div className="space-y-2">
                   <div className="flex justify-between text-sm">
-                    <span className={theme.textSecondary}>Мои серверы:</span>
+                    <span className="text-gray-400">Мои серверы:</span>
                     <span className="font-medium">{stats?.owned_servers?.length || 0}</span>
                   </div>
                   <div className="flex justify-between text-sm">
-                    <span className={theme.textSecondary}>Доступные:</span>
+                    <span className="text-gray-400">Доступные:</span>
                     <span className="font-medium">{stats?.accessible_servers?.length || 0}</span>
                   </div>
                 </div>
               </div>
 
-              {/* Tickets */}
-              <div className={`${theme.card} ${theme.border} border rounded-2xl p-6`}>
+              <div className="card p-6">
                 <div className="flex items-center gap-3 mb-4">
-                  <div className={`${theme.accent} p-3 rounded-xl`}>
+                  <div className="bg-primary-600 p-3 rounded-xl">
                     <MessageSquare className="w-6 h-6 text-white" />
                   </div>
                   <div>
-                    <p className={`text-sm ${theme.textSecondary}`}>Мои тикеты</p>
+                    <p className="text-sm text-gray-400">Мои тикеты</p>
                     <p className="text-2xl font-bold">{stats?.tickets?.total || 0}</p>
                   </div>
                 </div>
@@ -285,18 +263,18 @@ export default function Profile({ token, user, theme, onUsernameChange, viewingU
                 </div>
               </div>
 
-              {/* Role Info */}
-              <div className={`${theme.card} ${theme.border} border rounded-2xl p-6`}>
+              <div className="card p-6">
                 <div className="flex items-center gap-3 mb-4">
-                  <div className={`${theme.accent} p-3 rounded-xl`}>
+                  <div className="bg-primary-600 p-3 rounded-xl">
                     <Shield className="w-6 h-6 text-white" />
                   </div>
                   <div>
-                    <p className={`text-sm ${theme.textSecondary}`}>Ваша роль</p>
+                    <p className="text-sm text-gray-400">Ваша роль</p>
                     <p className="text-xl font-bold">{getRoleName(stats?.role)}</p>
                   </div>
                 </div>
-                <div className={`text-sm ${theme.textSecondary}`}>
+                <div className="text-sm text-gray-400">
+                  {stats?.role === 'owner' && '👑 Владелец панели - полный контроль над всеми функциями'}
                   {stats?.role === 'admin' && 'Полный доступ ко всем функциям панели'}
                   {stats?.role === 'support' && 'Доступ к системе тикетов и поддержке'}
                   {stats?.role === 'user' && 'Доступ к своим серверам и тикетам'}
@@ -305,21 +283,17 @@ export default function Profile({ token, user, theme, onUsernameChange, viewingU
               </div>
             </div>
 
-            {/* Servers List */}
             {stats?.owned_servers?.length > 0 && (
-              <div className={`${theme.card} ${theme.border} border rounded-2xl p-6`}>
+              <div className="card p-6">
                 <h3 className="text-lg font-bold mb-4">Мои серверы</h3>
                 <div className="grid grid-cols-1 md:grid-cols-2 gap-3">
                   {stats.owned_servers.map((server) => (
-                    <div
-                      key={server.name}
-                      className={`${theme.tertiary} ${theme.border} border rounded-xl p-4`}
-                    >
+                    <div key={server.name} className="bg-dark-700 border border-gray-700 rounded-xl p-4">
                       <div className="flex items-center gap-3">
                         <Server className="w-5 h-5" />
                         <div>
                           <p className="font-medium">{server.displayName}</p>
-                          <p className={`text-xs ${theme.textSecondary}`}>{server.name}</p>
+                          <p className="text-xs text-gray-400">{server.name}</p>
                         </div>
                       </div>
                     </div>
@@ -330,154 +304,115 @@ export default function Profile({ token, user, theme, onUsernameChange, viewingU
           </div>
         )}
 
-        {/* Username Tab */}
         {activeTab === 'username' && (
-          <div className={`${theme.card} ${theme.border} border rounded-2xl p-6 max-w-2xl mx-auto`}>
+          <div className="card p-6 max-w-2xl mx-auto">
             <h2 className="text-xl font-bold mb-6">Изменить имя пользователя</h2>
             <form onSubmit={handleUsernameChange} className="space-y-4">
               <div>
-                <label className={`block text-sm font-medium mb-2 ${theme.text}`}>
-                  Текущее имя пользователя
-                </label>
-                <input
-                  type="text"
-                  value={stats?.username}
-                  disabled
-                  className={`w-full ${theme.input} ${theme.border} border rounded-xl px-4 py-3 ${theme.textSecondary} cursor-not-allowed`}
-                />
+                <label className="block text-sm font-medium mb-2 text-white">Текущее имя пользователя</label>
+                <input type="text" value={stats?.username} disabled className="input cursor-not-allowed opacity-50" />
               </div>
-
               <div>
-                <label className={`block text-sm font-medium mb-2 ${theme.text}`}>
-                  Новое имя пользователя
-                </label>
+                <label className="block text-sm font-medium mb-2 text-white">Новое имя пользователя</label>
                 <input
                   type="text"
                   value={usernameForm.new_username}
                   onChange={(e) => setUsernameForm({ ...usernameForm, new_username: e.target.value })}
                   placeholder="Введите новое имя"
-                  className={`w-full ${theme.input} ${theme.border} border rounded-xl px-4 py-3 ${theme.text} focus:outline-none focus:ring-2 focus:ring-blue-500 transition`}
+                  className="input"
                 />
-                <p className={`text-xs ${theme.textSecondary} mt-1`}>
-                  Минимум 3 символа
-                </p>
+                <p className="text-xs text-gray-400 mt-1">Минимум 3 символа</p>
               </div>
-
               <div>
-                <label className={`block text-sm font-medium mb-2 ${theme.text}`}>
-                  Подтвердите паролем
-                </label>
+                <label className="block text-sm font-medium mb-2 text-white">Подтвердите паролем</label>
                 <div className="relative">
                   <input
                     type={showUsernamePassword ? 'text' : 'password'}
                     value={usernameForm.password}
                     onChange={(e) => setUsernameForm({ ...usernameForm, password: e.target.value })}
                     placeholder="Введите текущий пароль"
-                    className={`w-full ${theme.input} ${theme.border} border rounded-xl px-4 py-3 pr-12 ${theme.text} focus:outline-none focus:ring-2 focus:ring-blue-500 transition`}
+                    className="input pr-12"
                   />
                   <button
                     type="button"
                     onClick={() => setShowUsernamePassword(!showUsernamePassword)}
-                    className={`absolute right-3 top-1/2 -translate-y-1/2 ${theme.textSecondary} hover:${theme.text} transition`}
+                    className="absolute right-3 top-1/2 -translate-y-1/2 text-gray-400 hover:text-white transition"
                   >
                     {showUsernamePassword ? <EyeOff className="w-5 h-5" /> : <Eye className="w-5 h-5" />}
                   </button>
                 </div>
               </div>
-
-              <div className={`${theme.tertiary} ${theme.border} border rounded-xl p-4`}>
-                <p className={`text-sm ${theme.textSecondary}`}>
+              <div className="bg-dark-700 border border-gray-700 rounded-xl p-4">
+                <p className="text-sm text-gray-400">
                   ⚠️ После изменения имени пользователя вы будете автоматически перелогинены с новым именем.
                 </p>
               </div>
-
-              <button
-                type="submit"
-                disabled={usernameLoading}
-                className={`w-full ${theme.accent} ${theme.accentHover} px-6 py-3 rounded-xl font-medium text-white transition disabled:opacity-50`}
-              >
+              <button type="submit" disabled={usernameLoading} className="btn-primary w-full disabled:opacity-50">
                 {usernameLoading ? 'Изменение...' : 'Изменить имя пользователя'}
               </button>
             </form>
           </div>
         )}
 
-        {/* Password Tab */}
         {activeTab === 'password' && (
-          <div className={`${theme.card} ${theme.border} border rounded-2xl p-6 max-w-2xl mx-auto`}>
+          <div className="card p-6 max-w-2xl mx-auto">
             <h2 className="text-xl font-bold mb-6">Изменить пароль</h2>
             <form onSubmit={handlePasswordChange} className="space-y-4">
               <div>
-                <label className={`block text-sm font-medium mb-2 ${theme.text}`}>
-                  Текущий пароль
-                </label>
+                <label className="block text-sm font-medium mb-2 text-white">Текущий пароль</label>
                 <div className="relative">
                   <input
                     type={showOldPassword ? 'text' : 'password'}
                     value={passwordForm.old_password}
                     onChange={(e) => setPasswordForm({ ...passwordForm, old_password: e.target.value })}
                     placeholder="Введите текущий пароль"
-                    className={`w-full ${theme.input} ${theme.border} border rounded-xl px-4 py-3 pr-12 ${theme.text} focus:outline-none focus:ring-2 focus:ring-blue-500 transition`}
+                    className="input pr-12"
                   />
                   <button
                     type="button"
                     onClick={() => setShowOldPassword(!showOldPassword)}
-                    className={`absolute right-3 top-1/2 -translate-y-1/2 ${theme.textSecondary} hover:${theme.text} transition`}
+                    className="absolute right-3 top-1/2 -translate-y-1/2 text-gray-400 hover:text-white transition"
                   >
                     {showOldPassword ? <EyeOff className="w-5 h-5" /> : <Eye className="w-5 h-5" />}
                   </button>
                 </div>
               </div>
-
               <div>
-                <label className={`block text-sm font-medium mb-2 ${theme.text}`}>
-                  Новый пароль
-                </label>
+                <label className="block text-sm font-medium mb-2 text-white">Новый пароль</label>
                 <div className="relative">
                   <input
                     type={showNewPassword ? 'text' : 'password'}
                     value={passwordForm.new_password}
                     onChange={(e) => setPasswordForm({ ...passwordForm, new_password: e.target.value })}
                     placeholder="Введите новый пароль"
-                    className={`w-full ${theme.input} ${theme.border} border rounded-xl px-4 py-3 pr-12 ${theme.text} focus:outline-none focus:ring-2 focus:ring-blue-500 transition`}
+                    className="input pr-12"
                   />
                   <button
                     type="button"
                     onClick={() => setShowNewPassword(!showNewPassword)}
-                    className={`absolute right-3 top-1/2 -translate-y-1/2 ${theme.textSecondary} hover:${theme.text} transition`}
+                    className="absolute right-3 top-1/2 -translate-y-1/2 text-gray-400 hover:text-white transition"
                   >
                     {showNewPassword ? <EyeOff className="w-5 h-5" /> : <Eye className="w-5 h-5" />}
                   </button>
                 </div>
-                <p className={`text-xs ${theme.textSecondary} mt-1`}>
-                  Минимум 6 символов
-                </p>
+                <p className="text-xs text-gray-400 mt-1">Минимум 6 символов</p>
               </div>
-
               <div>
-                <label className={`block text-sm font-medium mb-2 ${theme.text}`}>
-                  Подтвердите новый пароль
-                </label>
+                <label className="block text-sm font-medium mb-2 text-white">Подтвердите новый пароль</label>
                 <input
                   type="password"
                   value={passwordForm.confirm_password}
                   onChange={(e) => setPasswordForm({ ...passwordForm, confirm_password: e.target.value })}
                   placeholder="Повторите новый пароль"
-                  className={`w-full ${theme.input} ${theme.border} border rounded-xl px-4 py-3 ${theme.text} focus:outline-none focus:ring-2 focus:ring-blue-500 transition`}
+                  className="input"
                 />
               </div>
-
-              <div className={`${theme.tertiary} ${theme.border} border rounded-xl p-4`}>
-                <p className={`text-sm ${theme.textSecondary}`}>
+              <div className="bg-dark-700 border border-gray-700 rounded-xl p-4">
+                <p className="text-sm text-gray-400">
                   ⚠️ После изменения пароля используйте новый пароль для входа в систему.
                 </p>
               </div>
-
-              <button
-                type="submit"
-                disabled={passwordLoading}
-                className={`w-full ${theme.accent} ${theme.accentHover} px-6 py-3 rounded-xl font-medium text-white transition disabled:opacity-50`}
-              >
+              <button type="submit" disabled={passwordLoading} className="btn-primary w-full disabled:opacity-50">
                 {passwordLoading ? 'Изменение...' : 'Изменить пароль'}
               </button>
             </form>