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:
@@ -98,7 +98,8 @@
|
||||
</div>
|
||||
|
||||
<button type="submit" class="btn btn-primary btn-large" [disabled]="uploading">
|
||||
{{ uploading ? 'Uploading...' : '📤 Upload Artifact' }}
|
||||
<lucide-icon [img]="Upload" [size]="18"></lucide-icon>
|
||||
{{ uploading ? 'Uploading...' : 'Upload Artifact' }}
|
||||
</button>
|
||||
</form>
|
||||
|
||||
|
||||
@@ -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,
|
||||
|
||||
Reference in New Issue
Block a user