feat: Update UI components with icon enhancements and styling improvements

Author: stephanebouget

package.json

@@ -26,6 +26,7 @@
     "@angular/platform-browser": "21.0.3",
     "@angular/platform-browser-dynamic": "21.0.3",
     "@angular/router": "21.0.3",
+    "@tabler/icons-webfont": "3.35.0",
     "@tauri-apps/api": "2.9.1",
     "@tauri-apps/plugin-shell": "2.3.3",
     "rxjs": "7.8.2",

src/app/home/home.component.html

@@ -3,23 +3,26 @@ <h1>GitHub Security Alerts Monitor</h1>
 
   <div class="actions-section">
     <button (click)="fetchAlerts()" [disabled]="loading" class="btn-refresh">
-      {{ loading ? "Loading..." : "🌀 Refresh" }}
+      <i *ngIf="loading" class="ti ti-loader spinning"></i>
+      <span *ngIf="!loading"><i class="ti ti-refresh"></i> Refresh</span>
     </button>
   </div>
 
-  <div *ngIf="error" class="error-message">❌ {{ error }}</div>
+  <div *ngIf="error" class="error-message"><i class="ti ti-x"></i> {{ error }}</div>
 
   <div *ngIf="alerts" class="alerts-section">
     <div class="summary">
-      <span class="icon">{{ getAlertIcon() }}</span>
+      <i [class]="'icon ' + getAlertIcon()"></i>
       <h2>Total Alerts: {{ alerts.total_alerts }}</h2>
     </div>
 
     <div class="repos-list">
       <div *ngFor="let repo of alerts.repos" class="repo-item">
         <span class="repo-name">{{ repo.name }}</span>
         <span class="alert-badge" [ngClass]="{ 'has-alerts': repo.alerts > 0 }">
-          {{ repo.alerts === 0 ? "✓ Safe" : repo.alerts + " alert(s)" }}
+          <i *ngIf="repo.alerts === 0" class="ti ti-check"></i>
+          <span *ngIf="repo.alerts === 0">Safe</span>
+          <span *ngIf="repo.alerts > 0">{{ repo.alerts }} alert(s)</span>
         </span>
       </div>
     </div>

src/app/home/home.component.ts

@@ -43,8 +43,8 @@ export class HomeComponent implements OnInit {
   }
 
   getAlertIcon(): string {
-    if (!this.alerts) return '🔵';
-    return this.alerts.total_alerts === 0 ? '🟢' : '🔴';
+    if (!this.alerts) return 'ti ti-circle-filled';
+    return this.alerts.total_alerts === 0 ? 'ti ti-circle-check-filled' : 'ti ti-alert-circle-filled';
   }
 
   ngOnDestroy() {

src/app/shared/components/alerts-list/alerts-list.component.html

@@ -6,12 +6,12 @@
 <div class="alerts-list">
   <!-- Loading spinner -->
   <div class="loading-spinner" *ngIf="alertsLoading">
-    <span class="spinning">🔄</span> Loading alerts...
+    <i class="ti ti-refresh spinning"></i> Loading alerts...
   </div>
 
   <!-- No repos selected -->
   <div class="empty-state" *ngIf="!alertsLoading && (!alerts || alerts.repos.length === 0)">
-    <div class="empty-icon">📦</div>
+    <i class="ti ti-package empty-icon"></i>
     <p>No repositories selected</p>
     <button class="primary-btn" (click)="onShowRepos()">
       Select Repositories
@@ -25,7 +25,7 @@
     [class.safe]="alerts.total_alerts === 0"
     [class.danger]="alerts.total_alerts > 0"
   >
-    <span class="summary-icon">{{ getAlertIcon() }}</span>
+    <i [class]="'summary-icon ' + getAlertIcon()"></i>
     <span class="summary-text" *ngIf="alerts.total_alerts === 0"
       >All repositories are secure</span
     >
@@ -42,7 +42,7 @@
       [class.has-alerts]="repo.alerts > 0"
     >
       <div class="repo-info">
-        <span class="repo-icon">📦</span>
+        <i class="ti ti-package repo-icon"></i>
         <span class="repo-name">{{ repo.name.split("/")[1] }}</span>
         <span class="repo-org">{{ repo.name.split("/")[0] }}</span>
       </div>
@@ -51,7 +51,8 @@
         [class.safe]="repo.alerts === 0"
         [class.danger]="repo.alerts > 0"
       >
-        {{ repo.alerts === 0 ? "✓" : repo.alerts }}
+        <i *ngIf="repo.alerts === 0" class="ti ti-check"></i>
+        <span *ngIf="repo.alerts > 0">{{ repo.alerts }}</span>
       </div>
     </div>
   </div>

src/app/shared/components/alerts-list/alerts-list.component.scss

@@ -52,7 +52,11 @@ $border-color: #2a2a4a;
     justify-content: center;
     gap: 8px;
     margin-top: 10px;
-    color: $text-secondary;
+    color: $accent-color;
+
+    i {
+      font-size: 24px;
+    }
 
     .spinning {
       display: inline-block;
@@ -87,7 +91,7 @@ $border-color: #2a2a4a;
   }
 
   .summary-icon {
-    font-size: 20px;
+    font-size: 28px;
   }
 
   .summary-text {
@@ -124,8 +128,9 @@ $border-color: #2a2a4a;
     overflow: hidden;
 
     .repo-icon {
-      font-size: 16px;
+      font-size: 20px;
       flex-shrink: 0;
+      color: #4a90d9;
     }
 
     .repo-name {
@@ -148,6 +153,13 @@ $border-color: #2a2a4a;
     font-size: 12px;
     font-weight: 600;
     flex-shrink: 0;
+    display: flex;
+    align-items: center;
+    gap: 4px;
+
+    i {
+      font-size: 14px;
+    }
 
     &.safe {
       background: rgba($success-color, 0.15);
@@ -172,8 +184,9 @@ $border-color: #2a2a4a;
   color: $text-secondary;
 
   .empty-icon {
-    font-size: 48px;
-    opacity: 0.5;
+    font-size: 56px;
+    opacity: 0.7;
+    color: #4a90d9;
   }
 
   p {

src/app/shared/components/alerts-list/alerts-list.component.ts

@@ -15,8 +15,8 @@ export class AlertsListComponent {
   @Output() showRepos = new EventEmitter<void>();
 
   getAlertIcon(): string {
-    if (!this.alerts) return '🔵';
-    return this.alerts.total_alerts === 0 ? '✓' : '⚠';
+    if (!this.alerts) return 'ti ti-circle-filled';
+    return this.alerts.total_alerts === 0 ? 'ti ti-check' : 'ti ti-alert-triangle';
   }
 
   onShowRepos(): void {

src/app/shared/components/header/header.component.html

@@ -1,6 +1,6 @@
 <div class="header">
   <div class="header-left" (click)="showAlerts()" style="cursor: pointer;">
-    <span class="logo">🔒</span>
+    <i class="ti ti-lock logo"></i>
     <span class="title">GitHub Alerts</span>
   </div>
   <div class="header-right" *ngIf="authenticated">
@@ -10,23 +10,23 @@
       [disabled]="alertsLoading"
       title="Refresh"
     >
-      <span [class.spinning]="alertsLoading">🔄</span>
+      <i class="ti ti-refresh" [class.spinning]="alertsLoading"></i>
     </button>
     <button
       class="icon-btn"
       [class.active]="currentView === 'repos'"
       (click)="showRepos()"
       title="Repositories"
     >
-      📦
+      <i class="ti ti-package"></i>
     </button>
     <button
       class="icon-btn"
       [class.active]="currentView === 'settings'"
       (click)="showSettings()"
       title="Settings"
     >
-      ⚙️
+      <i class="ti ti-settings"></i>
     </button>
   </div>
 </div>

src/app/shared/components/header/header.component.scss

@@ -22,9 +22,15 @@ $border-color: #2a2a4a;
     cursor: pointer;
     gap: 8px;
     -webkit-app-region: no-drag;
+    transition: opacity 0.2s;
+
+    &:hover {
+      opacity: 0.8;
+    }
 
     .logo {
-      font-size: 18px;
+      font-size: 22px;
+      color: #4a90d9;
     }
 
     .title {
@@ -47,8 +53,11 @@ $border-color: #2a2a4a;
   cursor: pointer;
   padding: 6px 8px;
   border-radius: 4px;
-  font-size: 14px;
+  font-size: 18px;
   transition: all 0.2s;
+  display: flex;
+  align-items: center;
+  justify-content: center;
 
   &:hover {
     background: $bg-tertiary;
@@ -65,6 +74,10 @@ $border-color: #2a2a4a;
     color: $accent-color;
   }
 
+  i {
+    font-size: 20px;
+  }
+
   .spinning {
     display: inline-block;
     animation: spin 1s linear infinite;

src/app/shared/components/repos-panel/repos-panel.component.html

@@ -8,14 +8,14 @@ <h3>Select Repositories to Monitor</h3>
       type="text"
       [ngModel]="searchQuery"
       (ngModelChange)="onSearchChange($event)"
-      placeholder="🔍 Search repositories..."
+      placeholder="Search repositories..."
     />
   </div>
 
   <div class="repos-count">{{ selectedCount }} repositories selected</div>
 
   <div class="loading-spinner" *ngIf="ownersLoading">
-    <span class="spinning">🌀</span> Loading...
+    <i class="ti ti-loader spinning"></i> Loading...
   </div>
 
   <div class="owners-list" *ngIf="!ownersLoading">
@@ -26,18 +26,14 @@ <h3>Select Repositories to Monitor</h3>
         (click)="onToggleOwner(ownerAcc)"
         [class.expanded]="ownerAcc.expanded"
       >
-        <span class="accordion-icon">{{
-          ownerAcc.expanded ? "▼" : "▶"
-        }}</span>
-        <span class="owner-icon">{{
-          ownerAcc.owner.is_user ? "👤" : "🏢"
-        }}</span>
+        <span class="accordion-icon">{{ ownerAcc.expanded ? "▼" : "▶" }}</span>
+        <i [class]="'owner-icon ti ' + (ownerAcc.owner.is_user ? 'ti-user' : 'ti-building')"></i>
         <span class="owner-name">{{ ownerAcc.owner.name }}</span>
         <span class="owner-badge" *ngIf="ownerAcc.loaded">
           {{ getSelectedCountForOwner(ownerAcc) }}/{{ ownerAcc.repos.length }}
         </span>
         <span class="owner-badge loading" *ngIf="ownerAcc.loading">
-          <span class="spinning">⏳</span>
+          <i class="ti ti-loader spinning"></i>
         </span>
       </div>
 
@@ -62,7 +58,7 @@ <h3>Select Repositories to Monitor</h3>
         </div>
 
         <div class="loading-spinner small" *ngIf="ownerAcc.loading">
-          <span class="spinning">🔄</span> Loading repos...
+          <i class="ti ti-refresh spinning"></i> Loading repos...
         </div>
 
         <div class="repos-list" *ngIf="ownerAcc.loaded">
@@ -79,7 +75,7 @@ <h3>Select Repositories to Monitor</h3>
             [class.selected]="repo.selected"
           >
             <div class="checkbox">
-              <span *ngIf="repo.selected">✓</span>
+              <i *ngIf="repo.selected" class="ti ti-check"></i>
             </div>
             <div class="repo-details">
               <span class="repo-name">{{ repo.name }}</span>
@@ -91,6 +87,6 @@ <h3>Select Repositories to Monitor</h3>
   </div>
 
   <button class="primary-btn" (click)="onDone()">
-    ✓ Done - View Alerts
+    <i class="ti ti-check"></i> Done - View Alerts
   </button>
 </div>

src/app/shared/components/repos-panel/repos-panel.component.scss

@@ -121,7 +121,8 @@ $border-color: #2a2a4a;
       }
 
       .owner-icon {
-        font-size: 14px;
+        font-size: 18px;
+        color: #4a90d9;
       }
 
       .owner-name {
@@ -213,10 +214,13 @@ $border-color: #2a2a4a;
       display: flex;
       align-items: center;
       justify-content: center;
-      font-size: 12px;
       color: white;
       flex-shrink: 0;
       transition: all 0.2s;
+
+      i {
+        font-size: 14px;
+      }
     }
 
     .repo-details {
@@ -245,7 +249,11 @@ $border-color: #2a2a4a;
     align-items: center;
     justify-content: center;
     gap: 8px;
-    color: $text-secondary;
+    color: $accent-color;
+
+    i {
+      font-size: 24px;
+    }
 
     .spinning {
       display: inline-block;
@@ -263,6 +271,14 @@ $border-color: #2a2a4a;
     font-weight: 500;
     cursor: pointer;
     transition: background 0.2s;
+    display: flex;
+    align-items: center;
+    justify-content: center;
+    gap: 6px;
+
+    i {
+      font-size: 18px;
+    }
 
     &:hover {
       background: color.adjust($accent-color, $lightness: -10%);