UI-Improvements

frontend/src/app/features/challenges/challenge-card.component.ts

@@ -1,38 +1,77 @@
 import { ChangeDetectionStrategy, Component, EventEmitter, Input, Output } from '@angular/core';
 import { CommonModule } from '@angular/common';
 import { BoardCard } from './challenges.pure';
+import { CategoryIconComponent } from '../../shared/components/category-icon/category-icon.component';
 
 @Component({
   selector: 'app-challenge-card',
   standalone: true,
   changeDetection: ChangeDetectionStrategy.OnPush,
-  imports: [CommonModule],
+  imports: [CommonModule, CategoryIconComponent],
   styles: [`
     :host { display: block; }
     .card {
-      display: flex; flex-direction: column; gap: 6px;
-      padding: 10px 12px; border: 1px solid var(--color-border, #2a2f3a);
-      border-radius: var(--radius-sm, 4px); background: var(--color-surface, #1c1f26);
-      cursor: pointer; transition: transform 0.1s ease;
-      min-height: 96px;
+      display: flex; flex-direction: column; gap: 8px;
+      padding: 12px 14px; border: 2px solid #1a1a24;
+      background: #000000;
+      cursor: pointer; transition: all 0.15s ease-in-out;
+      min-height: 90px;
       text-align: left;
       color: inherit;
       font: inherit;
+      width: 100%;
+    }
+    .card:hover {
+      border-color: var(--neon-purple);
+      box-shadow: 0 0 12px var(--neon-purple-glow);
+      transform: translateY(-1px);
+    }
+    .card.solved {
+      border-color: var(--neon-green);
+    }
+    .card-head { display: flex; align-items: center; gap: 10px; }
+    .name {
+      font-family: var(--font-mono);
+      font-weight: 800;
+      font-size: 0.95rem;
+      flex: 1;
+      min-width: 0;
+      overflow: hidden;
+      text-overflow: ellipsis;
+      white-space: nowrap;
+      color: #ffffff;
+      text-transform: uppercase;
+    }
+    .check {
+      color: var(--neon-green);
+      font-size: 16px;
+      font-weight: bold;
+    }
+    .meta {
+      display: flex;
+      justify-content: space-between;
+      align-items: center;
+      font-size: 11px;
+      font-family: var(--font-mono);
+      padding-top: 4px;
+      border-top: 1px solid #111116;
+    }
+    .points {
+      font-weight: 800;
+      color: #ffffff;
+    }
+    .solves-count {
+      color: #777788;
     }
-    .card:hover { transform: translateY(-1px); border-color: var(--color-primary, #3b82f6); }
-    .card.solved { border-color: var(--color-success, #22c55e); }
-    .card-head { display: flex; align-items: center; gap: 8px; }
-    .icon { width: 28px; height: 28px; object-fit: contain; }
-    .name { font-weight: 600; flex: 1; min-width: 0; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
-    .check { color: var(--color-success, #22c55e); font-size: 18px; }
-    .meta { display: flex; gap: 8px; font-size: 12px; opacity: 0.85; align-items: center; }
-    .points { font-weight: 600; }
     .diff {
-      display: inline-block; padding: 1px 6px; border-radius: 999px; font-size: 10px; letter-spacing: 0.04em;
+      font-weight: 800;
+      text-transform: uppercase;
+      font-size: 10px;
+      letter-spacing: 0.5px;
     }
-    .diff-LOW { background: rgba(34,197,94,0.18); color: #16a34a; }
-    .diff-MEDIUM { background: rgba(234,179,8,0.18); color: #ca8a04; }
-    .diff-HIGH { background: rgba(239,68,68,0.18); color: #dc2626; }
+    .diff-LOW { color: var(--neon-green); }
+    .diff-MEDIUM { color: var(--neon-yellow); }
+    .diff-HIGH { color: var(--neon-red); }
   `],
   template: `
     <button
@@ -46,7 +85,11 @@ import { BoardCard } from './challenges.pure';
       (click)="open.emit(card.id)"
     >
       <div class="card-head">
-        <img *ngIf="card.categoryIconPath" class="icon" [src]="card.categoryIconPath" [alt]="card.categoryAbbreviation" />
+        <app-category-icon
+          [category]="card.categoryAbbreviation"
+          [size]="20"
+          [color]="card.solvedByMe ? 'var(--neon-green)' : 'var(--neon-purple)'"
+        />
         <span class="name">{{ card.name }}</span>
         <span
           *ngIf="card.solvedByMe"
@@ -57,9 +100,8 @@ import { BoardCard } from './challenges.pure';
       </div>
       <div class="meta">
         <span class="diff" [class]="'diff-' + card.difficulty">{{ card.difficulty }}</span>
-        <span class="points" [attr.data-testid]="'points-' + card.id">{{ card.livePoints }} pts</span>
-        <span>·</span>
-        <span>{{ card.solveCount }} solve<span *ngIf="card.solveCount !== 1">s</span></span>
+        <span class="points" [attr.data-testid]="'points-' + card.id">{{ card.livePoints }} PTS</span>
+        <span class="solves-count">{{ card.solveCount }} 👥</span>
       </div>
     </button>
   `,