Improve icons and add GitHub icons

webapp/package.json

@@ -28,7 +28,9 @@
     "@angular/platform-browser": "18.2.1",
     "@angular/platform-browser-dynamic": "18.2.1",
     "@angular/router": "18.2.1",
-    "@primer/primitives": "^9.1.1",
+    "@ng-icons/core": "29.5.0",
+    "@ng-icons/octicons": "29.5.0",
+    "@primer/primitives": "9.1.1",
     "@tanstack/angular-query-devtools-experimental": "5.52.0",
     "@tanstack/angular-query-experimental": "5.52.0",
     "autoprefixer": "10.4.20",

webapp/src/app/app.component.html

@@ -4,7 +4,7 @@
 <div class="flex flex-col min-h-dvh">
   <header class="container flex items-center justify-between pt-4">
     <a class="flex gap-2 items-center hover:text-muted-foreground" routerLink="/">
-      <lucide-angular name="hammer" class="size-6" />
+      <lucide-angular [img]="Hammer" class="size-6" />
       <span class="text-xl font-semibold">Hephaestus</span>
     </a>
     <app-theme-switcher />

webapp/src/app/app.component.ts

@@ -1,7 +1,7 @@
 import { Component, isDevMode } from '@angular/core';
 import { AngularQueryDevtools } from '@tanstack/angular-query-devtools-experimental';
 import { RouterLink, RouterLinkActive, RouterOutlet } from '@angular/router';
-import { LucideAngularModule } from 'lucide-angular';
+import { LucideAngularModule, Hammer } from 'lucide-angular';
 import { ThemeSwitcherComponent } from './components/theme-switcher/theme-switcher.component';
 
 @Component({
@@ -12,6 +12,8 @@ import { ThemeSwitcherComponent } from './components/theme-switcher/theme-switch
   styles: []
 })
 export class AppComponent {
+  protected Hammer = Hammer;
+
   title = 'Hephaestus';
 
   isDevMode() {

webapp/src/app/app.config.ts

@@ -1,9 +1,8 @@
-import { APP_INITIALIZER, ApplicationConfig, importProvidersFrom, provideExperimentalZonelessChangeDetection } from '@angular/core';
+import { APP_INITIALIZER, ApplicationConfig, provideExperimentalZonelessChangeDetection } from '@angular/core';
 import { provideRouter } from '@angular/router';
 import { provideAnimationsAsync } from '@angular/platform-browser/animations/async';
 import { provideHttpClient, withInterceptorsFromDi } from '@angular/common/http';
 import { provideAngularQuery, QueryClient } from '@tanstack/angular-query-experimental';
-import { LucideAngularModule, Home, Sun, Moon, Hammer } from 'lucide-angular';
 import { environment } from 'environments/environment';
 import { BASE_PATH } from 'app/core/modules/openapi';
 import { routes } from 'app/app.routes';
@@ -22,7 +21,6 @@ export const appConfig: ApplicationConfig = {
     provideAngularQuery(new QueryClient()),
     provideHttpClient(withInterceptorsFromDi()),
     provideAnimationsAsync(),
-    importProvidersFrom(LucideAngularModule.pick({ Home, Sun, Moon, Hammer })),
     { provide: BASE_PATH, useValue: environment.serverUrl },
     { provide: APP_INITIALIZER, useFactory: initializeAnalytics, multi: true, deps: [AnalyticsService] }
   ]

webapp/src/app/components/leaderboard/leaderboard.component.html

@@ -28,22 +28,22 @@ <h1 class="text-3xl font-bold">Artemis Leaderboard</h1>
                 </a>
               </td>
               <td appTableCell>{{ entry.score }}</td>
-              <td appTableCell class="flex items-center gap-4" title="Changes Requested">
+              <td appTableCell class="flex items-center gap-3">
                 @if (entry.changesRequested && entry.changesRequested > 0) {
-                  <div class="flex items-center gap-2">
-                    <app-icon-pull-request-changes-requested />
+                  <div class="flex items-center gap-1 text-github-danger-foreground" title="Changes Requested">
+                    <ng-icon [svg]="octFileDiff" size="16" />
                     {{ entry.changesRequested }}
                   </div>
                 }
                 @if (entry.approvals && entry.approvals > 0) {
-                  <div class="flex items-center gap-2" title="Approvals">
-                    <app-icon-pull-request-approved />
+                  <div class="flex items-center gap-1 text-github-success-foreground" title="Approvals">
+                    <ng-icon [svg]="octCheck" size="16" />
                     {{ entry.approvals }}
                   </div>
                 }
                 @if (entry.comments && entry.comments > 0) {
-                  <div class="flex items-center gap-2" title="Comments">
-                    <app-icon-pull-request-comment />
+                  <div class="flex items-center gap-1 text-github-muted-foreground" title="Comments">
+                    <ng-icon [svg]="octComment" size="16" />
                     {{ entry.comments }}
                   </div>
                 }

webapp/src/app/components/leaderboard/leaderboard.component.ts

@@ -1,9 +1,8 @@
 import { ChangeDetectionStrategy, Component, computed, inject } from '@angular/core';
 import { injectQuery } from '@tanstack/angular-query-experimental';
+import { NgIconComponent } from '@ng-icons/core';
+import { octFileDiff, octCheck, octComment } from '@ng-icons/octicons';
 import { LeaderboardEntry, LeaderboardService } from 'app/core/modules/openapi';
-import { PullRequestApprovedIconComponent } from 'app/ui/icons/PullRequestApprovedIcon.component';
-import { PullRequestChangesRequestedIconComponent } from 'app/ui/icons/PullRequestChangesRequestedIcon.component';
-import { PullRequestCommentIconComponent } from 'app/ui/icons/PullRequestCommentIcon.component';
 import { TableBodyDirective } from 'app/ui/table/table-body.directive';
 import { TableCaptionDirective } from 'app/ui/table/table-caption.directive';
 import { TableCellDirective } from 'app/ui/table/table-cell.directive';
@@ -119,14 +118,16 @@ const defaultData: LeaderboardEntry[] = [
     TableHeaderDirective,
     TableHeadDirective,
     TableRowDirective,
-    PullRequestChangesRequestedIconComponent,
-    PullRequestApprovedIconComponent,
-    PullRequestCommentIconComponent
+    NgIconComponent
   ],
   templateUrl: './leaderboard.component.html',
   changeDetection: ChangeDetectionStrategy.OnPush
 })
 export class LeaderboardComponent {
+  protected octFileDiff = octFileDiff;
+  protected octCheck = octCheck;
+  protected octComment = octComment;
+
   leaderboardService = inject(LeaderboardService);
 
   query = injectQuery(() => ({

webapp/src/app/components/theme-switcher/theme-switcher.component.html

@@ -1,5 +1,5 @@
 <app-button (click)="toggleTheme()" variant="outline" size="icon">
   <div [@iconTrigger]="this.themeSwitcherService.currentTheme() ?? 'dark'">
-    <lucide-angular [name]="this.themeSwitcherService.currentTheme() === 'dark' ? 'sun' : 'moon'" class="size-5" />
+    <lucide-angular [img]="this.themeSwitcherService.currentTheme() === 'dark' ? Sun : Moon" class="size-5" />
   </div>
 </app-button>

webapp/src/app/components/theme-switcher/theme-switcher.component.ts

@@ -1,5 +1,5 @@
 import { Component, inject } from '@angular/core';
-import { LucideAngularModule } from 'lucide-angular';
+import { LucideAngularModule, Sun, Moon } from 'lucide-angular';
 import { ButtonComponent } from 'app/ui/button/button.component';
 import { AppTheme, ThemeSwitcherService } from './theme-switcher.service';
 import { animate, state, style, transition, trigger } from '@angular/animations';
@@ -20,6 +20,9 @@ import { animate, state, style, transition, trigger } from '@angular/animations'
 export class ThemeSwitcherComponent {
   themeSwitcherService = inject(ThemeSwitcherService);
 
+  protected Sun = Sun;
+  protected Moon = Moon;
+
   toggleTheme() {
     if (this.themeSwitcherService.currentTheme() === AppTheme.DARK) {
       this.themeSwitcherService.setLightTheme();

webapp/src/app/components/theme-switcher/theme-switcher.stories.ts

@@ -1,5 +1,4 @@
 import { moduleMetadata, type Meta, type StoryObj } from '@storybook/angular';
-import { LucideAngularModule, Sun, Moon } from 'lucide-angular';
 import { ThemeSwitcherComponent } from './theme-switcher.component';
 import { BrowserAnimationsModule } from '@angular/platform-browser/animations';
 
@@ -10,7 +9,7 @@ const meta: Meta<ThemeSwitcherComponent> = {
   tags: ['autodocs'],
   decorators: [
     moduleMetadata({
-      imports: [LucideAngularModule.pick({ Sun, Moon }), BrowserAnimationsModule]
+      imports: [BrowserAnimationsModule]
     })
   ]
 };