Changed design and bug fixes

frontend/src/index.css

@@ -2,29 +2,191 @@
 @tailwind components;
 @tailwind utilities;
 
-* {
-  margin: 0;
-  padding: 0;
-  box-sizing: border-box;
+/* MCSManager Style Global Styles */
+@layer base {
+  * {
+    @apply border-dark-700;
+  }
+  
+  body {
+    @apply bg-dark-900 text-gray-100 antialiased;
+    font-family: -apple-system, BlinkMacSystemFont, 'Segoe UI', 'Roboto', 'Oxygen',
+      'Ubuntu', 'Cantarell', 'Fira Sans', 'Droid Sans', 'Helvetica Neue',
+      sans-serif;
+  }
+
+  /* Scrollbar styling */
+  ::-webkit-scrollbar {
+    @apply w-2 h-2;
+  }
+
+  ::-webkit-scrollbar-track {
+    @apply bg-dark-850;
+  }
+
+  ::-webkit-scrollbar-thumb {
+    @apply bg-dark-600 rounded-full;
+  }
+
+  ::-webkit-scrollbar-thumb:hover {
+    @apply bg-dark-500;
+  }
 }
 
-body {
-  font-family: -apple-system, BlinkMacSystemFont, 'Segoe UI', 'Roboto', 'Oxygen',
-    'Ubuntu', 'Cantarell', 'Fira Sans', 'Droid Sans', 'Helvetica Neue',
-    sans-serif;
-  -webkit-font-smoothing: antialiased;
-  -moz-osx-font-smoothing: grayscale;
+@layer components {
+  /* Card styles */
+  .card {
+    @apply bg-dark-800 rounded-lg border border-dark-700 shadow-lg;
+  }
+
+  .card-hover {
+    @apply card transition-all duration-200 hover:border-primary-500 hover:shadow-glow;
+  }
+
+  /* Button styles */
+  .btn {
+    @apply px-4 py-2 rounded-lg font-medium transition-all duration-200 
+           focus:outline-none focus:ring-2 focus:ring-offset-2 focus:ring-offset-dark-900;
+  }
+
+  .btn-primary {
+    @apply btn bg-primary-600 text-white hover:bg-primary-700 
+           focus:ring-primary-500 shadow-md hover:shadow-glow;
+  }
+
+  .btn-secondary {
+    @apply btn bg-dark-700 text-gray-200 hover:bg-dark-600 
+           focus:ring-dark-500 border border-dark-600;
+  }
+
+  .btn-success {
+    @apply btn bg-green-600 text-white hover:bg-green-700 
+           focus:ring-green-500 shadow-md;
+  }
+
+  .btn-danger {
+    @apply btn bg-red-600 text-white hover:bg-red-700 
+           focus:ring-red-500 shadow-md;
+  }
+
+  .btn-warning {
+    @apply btn bg-yellow-600 text-white hover:bg-yellow-700 
+           focus:ring-yellow-500 shadow-md;
+  }
+
+  .btn-icon {
+    @apply p-2 rounded-lg transition-all duration-200 
+           hover:bg-dark-700 focus:outline-none focus:ring-2 
+           focus:ring-primary-500 focus:ring-offset-2 focus:ring-offset-dark-900;
+  }
+
+  /* Input styles */
+  .input {
+    @apply w-full px-4 py-2 bg-dark-850 border border-dark-700 rounded-lg 
+           text-gray-100 placeholder-gray-500 
+           focus:outline-none focus:ring-2 focus:ring-primary-500 focus:border-transparent
+           transition-all duration-200;
+  }
+
+  .input:focus {
+    @apply shadow-glow;
+  }
+
+  /* Badge styles */
+  .badge {
+    @apply px-2 py-1 text-xs font-semibold rounded-full;
+  }
+
+  .badge-success {
+    @apply badge bg-green-600/20 text-green-400 border border-green-600/30;
+  }
+
+  .badge-danger {
+    @apply badge bg-red-600/20 text-red-400 border border-red-600/30;
+  }
+
+  .badge-warning {
+    @apply badge bg-yellow-600/20 text-yellow-400 border border-yellow-600/30;
+  }
+
+  .badge-info {
+    @apply badge bg-blue-600/20 text-blue-400 border border-blue-600/30;
+  }
+
+  /* Sidebar styles */
+  .sidebar-item {
+    @apply flex items-center gap-3 px-4 py-3 rounded-lg 
+           text-gray-300 hover:text-white hover:bg-dark-700 
+           transition-all duration-200 cursor-pointer;
+  }
+
+  .sidebar-item-active {
+    @apply sidebar-item bg-primary-600/20 text-primary-400 
+           border-l-4 border-primary-500 hover:bg-primary-600/30;
+  }
+
+  /* Tab styles */
+  .tab {
+    @apply px-4 py-2 font-medium text-gray-400 hover:text-gray-200 
+           border-b-2 border-transparent hover:border-dark-600 
+           transition-all duration-200 cursor-pointer;
+  }
+
+  .tab-active {
+    @apply tab text-primary-400 border-primary-500 hover:border-primary-500;
+  }
+
+  /* Stats card */
+  .stat-card {
+    @apply card p-4 flex items-center gap-4;
+  }
+
+  .stat-icon {
+    @apply p-3 rounded-lg bg-primary-600/20 text-primary-400;
+  }
+
+  /* Server card */
+  .server-card {
+    @apply card-hover p-6 cursor-pointer;
+  }
+
+  .server-card-selected {
+    @apply server-card border-primary-500 bg-primary-600/10 shadow-glow;
+  }
+
+  /* Modal overlay */
+  .modal-overlay {
+    @apply fixed inset-0 bg-black/70 backdrop-blur-sm z-40 
+           flex items-center justify-center p-4;
+  }
+
+  .modal-content {
+    @apply card p-6 max-w-5xl w-full max-h-[90vh] overflow-y-auto;
+  }
+
+  /* Console terminal */
+  .console-terminal {
+    @apply bg-dark-950 rounded-lg p-4 font-mono text-sm 
+           text-green-400 overflow-auto border border-dark-700;
+  }
+
+  /* Loading spinner */
+  .spinner {
+    @apply animate-spin rounded-full border-2 border-gray-600 
+           border-t-primary-500;
+  }
+
+  /* Tooltip */
+  .tooltip {
+    @apply absolute z-50 px-2 py-1 text-xs font-medium text-white 
+           bg-dark-700 rounded shadow-lg pointer-events-none;
+  }
 }
 
-#root {
-  width: 100%;
-  height: 100vh;
-}
-
-/* Анимация для уведомлений */
-@keyframes slide-in-right {
+/* Animations */
+@keyframes slideIn {
   from {
-    transform: translateX(100%);
+    transform: translateX(-100%);
     opacity: 0;
   }
   to {
@@ -33,6 +195,42 @@ body {
   }
 }
 
-.animate-slide-in-right {
-  animation: slide-in-right 0.3s ease-out;
+@keyframes fadeIn {
+  from {
+    opacity: 0;
+  }
+  to {
+    opacity: 1;
+  }
+}
+
+.animate-slide-in {
+  animation: slideIn 0.3s ease-out;
+}
+
+.animate-fade-in {
+  animation: fadeIn 0.3s ease-out;
+}
+
+/* Glow effect for active elements */
+.glow-effect {
+  position: relative;
+}
+
+.glow-effect::before {
+  content: '';
+  position: absolute;
+  inset: -2px;
+  border-radius: inherit;
+  padding: 2px;
+  background: linear-gradient(45deg, #0ea5e9, #3b82f6, #8b5cf6);
+  -webkit-mask: linear-gradient(#fff 0 0) content-box, linear-gradient(#fff 0 0);
+  -webkit-mask-composite: xor;
+  mask-composite: exclude;
+  opacity: 0;
+  transition: opacity 0.3s;
+}
+
+.glow-effect:hover::before {
+  opacity: 0.5;
 }