From 972bb50c64fd92dbf6b93c8dec2d947c4eea0a8e Mon Sep 17 00:00:00 2001 From: Mondo Diaz Date: Wed, 15 Oct 2025 12:19:36 -0500 Subject: [PATCH] Replace emoji icons with Lucide icons and soften link colors MIME-Version: 1.0 Content-Type: text/plain; charset=UTF-8 Content-Transfer-Encoding: 8bit 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 --- frontend/package.json | 3 ++- frontend/src/app/app.ts | 12 ++++++---- .../artifacts-list/artifacts-list.html | 18 ++++++++------- .../artifacts-list/artifacts-list.ts | 11 +++++++++- .../app/components/query-form/query-form.html | 4 ++-- .../app/components/query-form/query-form.ts | 5 ++++- .../components/upload-form/upload-form.html | 3 ++- .../app/components/upload-form/upload-form.ts | 4 +++- frontend/src/styles.css | 22 +++++++++++++++++++ 9 files changed, 63 insertions(+), 19 deletions(-) diff --git a/frontend/package.json b/frontend/package.json index 53ffd25..94273ae 100644 --- a/frontend/package.json +++ b/frontend/package.json @@ -29,6 +29,7 @@ "@angular/forms": "^19.0.0", "@angular/platform-browser": "^19.0.0", "@angular/router": "^19.0.0", + "lucide-angular": "^0.545.0", "rxjs": "~7.8.0", "tslib": "^2.3.0", "zone.js": "~0.15.0" @@ -46,4 +47,4 @@ "karma-jasmine-html-reporter": "~2.1.0", "typescript": "~5.8.0" } -} \ No newline at end of file +} diff --git a/frontend/src/app/app.ts b/frontend/src/app/app.ts index 66dbf15..611d008 100644 --- a/frontend/src/app/app.ts +++ b/frontend/src/app/app.ts @@ -3,11 +3,12 @@ import { CommonModule } from '@angular/common'; import { RouterOutlet, RouterLink, RouterLinkActive } from '@angular/router'; import { provideHttpClient } from '@angular/common/http'; import { ArtifactService } from './services/artifact'; +import { LucideAngularModule, Database, Upload, Search } from 'lucide-angular'; @Component({ selector: 'app-root', standalone: true, - imports: [CommonModule, RouterOutlet, RouterLink, RouterLinkActive], + imports: [CommonModule, RouterOutlet, RouterLink, RouterLinkActive, LucideAngularModule], template: `
@@ -20,13 +21,13 @@ import { ArtifactService } from './services/artifact'; @@ -38,6 +39,9 @@ import { ArtifactService } from './services/artifact'; export class AppComponent implements OnInit { deploymentMode: string = ''; storageBackend: string = ''; + readonly Database = Database; + readonly Upload = Upload; + readonly Search = Search; constructor(private artifactService: ArtifactService) {} diff --git a/frontend/src/app/components/artifacts-list/artifacts-list.html b/frontend/src/app/components/artifacts-list/artifacts-list.html index 16cb33f..4d1defa 100644 --- a/frontend/src/app/components/artifacts-list/artifacts-list.html +++ b/frontend/src/app/components/artifacts-list/artifacts-list.html @@ -1,7 +1,7 @@
{{ filteredArtifacts.length }} artifacts
- 🔍 + - +
@@ -80,10 +82,10 @@
@@ -177,10 +179,10 @@
diff --git a/frontend/src/app/components/artifacts-list/artifacts-list.ts b/frontend/src/app/components/artifacts-list/artifacts-list.ts index 916dfdd..720fa75 100644 --- a/frontend/src/app/components/artifacts-list/artifacts-list.ts +++ b/frontend/src/app/components/artifacts-list/artifacts-list.ts @@ -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() { diff --git a/frontend/src/app/components/query-form/query-form.html b/frontend/src/app/components/query-form/query-form.html index e1326b3..452e4c2 100644 --- a/frontend/src/app/components/query-form/query-form.html +++ b/frontend/src/app/components/query-form/query-form.html @@ -92,10 +92,10 @@
diff --git a/frontend/src/app/components/query-form/query-form.ts b/frontend/src/app/components/query-form/query-form.ts index a209f38..a611b4c 100644 --- a/frontend/src/app/components/query-form/query-form.ts +++ b/frontend/src/app/components/query-form/query-form.ts @@ -3,17 +3,20 @@ import { CommonModule } from '@angular/common'; import { ReactiveFormsModule, FormBuilder, FormGroup } from '@angular/forms'; import { ArtifactService } from '../../services/artifact'; import { Artifact, ArtifactQuery } from '../../models/artifact.model'; +import { LucideAngularModule, Search, X } from 'lucide-angular'; @Component({ selector: 'app-query-form', standalone: true, - imports: [CommonModule, ReactiveFormsModule], + imports: [CommonModule, ReactiveFormsModule, LucideAngularModule], templateUrl: './query-form.html', styleUrls: ['./query-form.css'] }) export class QueryFormComponent { queryForm: FormGroup; @Output() resultsFound = new EventEmitter(); + readonly Search = Search; + readonly X = X; constructor( private fb: FormBuilder, diff --git a/frontend/src/app/components/upload-form/upload-form.html b/frontend/src/app/components/upload-form/upload-form.html index 4ab6c1c..4317b9b 100644 --- a/frontend/src/app/components/upload-form/upload-form.html +++ b/frontend/src/app/components/upload-form/upload-form.html @@ -98,7 +98,8 @@ diff --git a/frontend/src/app/components/upload-form/upload-form.ts b/frontend/src/app/components/upload-form/upload-form.ts index 69caa34..d50f131 100644 --- a/frontend/src/app/components/upload-form/upload-form.ts +++ b/frontend/src/app/components/upload-form/upload-form.ts @@ -2,11 +2,12 @@ import { Component } from '@angular/core'; import { CommonModule } from '@angular/common'; import { ReactiveFormsModule, FormBuilder, FormGroup, Validators } from '@angular/forms'; import { ArtifactService } from '../../services/artifact'; +import { LucideAngularModule, Upload } from 'lucide-angular'; @Component({ selector: 'app-upload-form', standalone: true, - imports: [CommonModule, ReactiveFormsModule], + imports: [CommonModule, ReactiveFormsModule, LucideAngularModule], templateUrl: './upload-form.html', styleUrls: ['./upload-form.css'] }) @@ -15,6 +16,7 @@ export class UploadFormComponent { selectedFile: File | null = null; uploading: boolean = false; uploadStatus: { message: string, success: boolean } | null = null; + readonly Upload = Upload; constructor( private fb: FormBuilder, diff --git a/frontend/src/styles.css b/frontend/src/styles.css index 58bcca3..151913b 100644 --- a/frontend/src/styles.css +++ b/frontend/src/styles.css @@ -524,6 +524,28 @@ code { stroke: currentColor; } +/* Artifact link styles - softer blue */ +.artifact-link { + color: #93c5fd; + text-decoration: none; + transition: color 0.3s; +} + +.artifact-link:hover { + color: #bfdbfe; + text-decoration: underline; +} + +/* Clickable row cursor */ +tr.clickable { + cursor: pointer; +} + +/* Search icon color */ +.search-icon { + color: #64748b; +} + @media (max-width: 768px) { .form-row { grid-template-columns: 1fr;