Replace emoji icons with Lucide icons and soften link colors

Replaced emoji icons throughout the Angular app with modern Lucide icon library for a more professional and consistent look matching the original static site design.

**Icon Updates:**
- Navigation tabs: Database, Upload, Search icons
- Toolbar buttons: RefreshCw, Sparkles, Search, X icons
- Action buttons: Download, Trash2 icons
- Form buttons: Upload, Search, X icons

**Style Improvements:**
- Added softer blue color for artifact links (#93c5fd)
- Added hover effect with lighter blue (#bfdbfe)
- Added proper cursor pointer for clickable rows
- Improved icon color consistency throughout

**Dependencies:**
- Added lucide-angular (v0.545.0) for icon support
- Bundle size: 356.54 kB (raw) → 93.91 kB (gzipped)
- Minimal impact: only +7.79 kB for full icon library

All components updated with Lucide imports and icon references.

🤖 Generated with [Claude Code](https://claude.com/claude-code)

Co-Authored-By: Claude <noreply@anthropic.com>
This commit is contained in:
2025-10-15 12:19:36 -05:00
parent 6f7e9a517e
commit 0e1a342917
10 changed files with 77 additions and 19 deletions

View File

@@ -5,11 +5,12 @@ import { ArtifactService } from '../../services/artifact';
import { Artifact } from '../../models/artifact.model';
import { interval, Subscription } from 'rxjs';
import { switchMap } from 'rxjs/operators';
import { LucideAngularModule, RefreshCw, Search, X, Download, Trash2, Sparkles } from 'lucide-angular';
@Component({
selector: 'app-artifacts-list',
standalone: true,
imports: [CommonModule, FormsModule],
imports: [CommonModule, FormsModule, LucideAngularModule],
templateUrl: './artifacts-list.html',
styleUrls: ['./artifacts-list.css']
})
@@ -35,6 +36,14 @@ export class ArtifactsListComponent implements OnInit, OnDestroy {
loading: boolean = false;
error: string | null = null;
// Lucide icons
readonly RefreshCw = RefreshCw;
readonly Search = Search;
readonly X = X;
readonly Download = Download;
readonly Trash2 = Trash2;
readonly Sparkles = Sparkles;
constructor(private artifactService: ArtifactService) {}
ngOnInit() {