UI-Improvements

frontend/src/app/features/scoreboard/tabs.component.ts

@@ -5,13 +5,14 @@ import { SCOREBOARD_TABS, ScoreboardTab } from './scoreboard.pure';
 interface TabSpec {
   id: ScoreboardTab;
   label: string;
+  icon: string;
 }
 
-const TAB_LABELS: Readonly<Record<ScoreboardTab, string>> = {
-  ranking: 'Ranking',
-  matrix: 'Matrix',
-  'event-log': 'Event Log',
-  graph: 'Score Graph',
+const TAB_SPECS: Readonly<Record<ScoreboardTab, { label: string; icon: string }>> = {
+  ranking: { label: 'RANKINGS', icon: '🏆' },
+  matrix: { label: 'MATRIX', icon: '▦' },
+  'event-log': { label: 'EVENT LOG', icon: '≡' },
+  graph: { label: 'SCORE GRAPH', icon: '📈' },
 };
 
 @Component({
@@ -22,25 +23,32 @@ const TAB_LABELS: Readonly<Record<ScoreboardTab, string>> = {
   styles: [`
     :host { display: block; }
     nav {
-      display: flex; gap: 6px;
-      border-bottom: 1px solid var(--color-border, #2a2f3a);
-      padding-bottom: 6px;
-      margin-bottom: 12px;
-      overflow-x: auto;
+      display: flex; gap: 10px; justify-content: center;
+      margin-bottom: 24px; flex-wrap: wrap;
     }
     button {
-      padding: 6px 12px;
-      border-radius: var(--radius-sm, 4px);
-      background: var(--color-surface, #1c1f26);
-      color: inherit;
-      border: 1px solid var(--color-border, #2a2f3a);
+      padding: 10px 20px;
+      background: #000000;
+      color: #aaaaee;
+      border: 2px solid #22222e;
       cursor: pointer;
-      font: inherit;
+      font-family: var(--font-mono);
+      font-weight: 800;
+      font-size: 0.85rem;
+      text-transform: uppercase;
+      letter-spacing: 0.5px;
+      display: flex; align-items: center; gap: 8px;
+      transition: all 0.15s ease;
+    }
+    button:hover:not(.active) {
+      border-color: var(--neon-purple);
+      color: #ffffff;
     }
     button.active {
-      background: var(--color-primary, #3b82f6);
-      color: var(--color-primary-contrast, #fff);
-      border-color: var(--color-primary, #3b82f6);
+      background: var(--neon-red);
+      color: #000000;
+      border-color: var(--neon-red);
+      box-shadow: 0 0 15px rgba(255, 0, 51, 0.4);
     }
   `],
   template: `
@@ -51,7 +59,10 @@ const TAB_LABELS: Readonly<Record<ScoreboardTab, string>> = {
         [class.active]="t.id === active"
         [attr.data-testid]="'scoreboard-tab-' + t.id"
         (click)="select.emit(t.id)"
-      >{{ t.label }}</button>
+      >
+        <span>{{ t.icon }}</span>
+        <span>{{ t.label }}</span>
+      </button>
     </nav>
   `,
 })
@@ -59,5 +70,9 @@ export class ScoreboardTabsComponent {
   @Input({ required: true }) active!: ScoreboardTab;
   @Output() select = new EventEmitter<ScoreboardTab>();
 
-  readonly tabs: TabSpec[] = SCOREBOARD_TABS.map((id) => ({ id, label: TAB_LABELS[id] }));
+  readonly tabs: TabSpec[] = SCOREBOARD_TABS.map((id) => ({
+    id,
+    label: TAB_SPECS[id].label,
+    icon: TAB_SPECS[id].icon,
+  }));
 }